问Angular 4/5 Render2茉莉测试
EN

Stack Overflow用户

提问于 2017-11-22 15:52:06

回答 2查看 3.8K关注 0票数 2

我有一个接口，它打算根据输入参数对象操作DOM元素。我正试着先写单元测试。这个想法是使用Angular中提供的Render2。

export interface ModifyDomTree {
    modify(data: SomeData) : ElementRef;
}

它的实现(不知道这将如何出现)，但为它编写测试。

export class ModifyDomTreeImpl implements ModifyDomTree {
   constructor(private render: Renderer2) {
   }
   modify(data: SomeData) : ElementRef{
        return null;
   }
}

在测试中，我不想使用Renderer2的模拟，我想使用将由Angular使用的实际Renderer2。如何在测试中注入或实例化实际的Angular Render2？

规格应该是

describe('ModifyDomTreeImpl', () => {
let data: SomeData;
let modifyDomTree: ModifyDomTree;

beforeEach(() => {
    //let render: Renderer2 = mock(Renderer2); ?? How Do I inject the real Angular thing here
    modifyDomTree = new ModifyDomTreeImpl(render);
});

it('should convert a data into a text node', () => {
   data = mock(SomeData);
   when(data.value).thenReturn('Groot!!');
   const result: ElementRef = modifyDomTree.convert(data);
   expect(result).toBeDefined();
   expect(result).not.toBeNull();
   expect(result.nativeElement).toBeDefined();
   expect(result.nativeElement).toBeDefined();
   expect(result.nativeElement.childNodes).toBeDefined();
   expect(result.nativeElement.childNodes.length).toEqual(1);
   expect(result.nativeElement.childNodes.length[0]).toEqual('text');
   expect(result.nativeElement.childNodes.length[0].data).toEqual('Groot!!');
  });
});

angular

typescript

angular5

Stack Overflow用户

发布于 2018-09-03 06:25:04

这应该适用于Angular 6+

在您的component.spec.ts中，使用提供程序注入渲染器。然后，您可以检索并监视它以确认测试。

let renderer2: Renderer2;
...
beforeEach(async( () => {
   TestBed.configureTestingModule({
      ...
      providers: [Renderer2] // This is the angular renderer
   }).compileComponents();
}));

beforeEach(() => {
   fixture = TestBed.createComponent(YourComponent);
   // grab the renderer
   renderer2 = fixture.componentRef.injector.get<Renderer2>(Renderer2 as Type<Renderer2>);
   // and spy on it
   spyOn(renderer2, 'addClass').and.callThrough();
   // or replace
   spyOn(renderer2, 'addClass').and.callFake(..);
   // etc
});

it('should call renderer', () => {
    expect(renderer2.addClass).toHaveBeenCalledWith(jasmine.any(Object), 'css-class');
});

票数 1

查看全部 2 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47429367

复制

相似问题

问Angular 4/5 Render2茉莉测试
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular 4/5 Render2茉莉测试EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular 4/5 Render2茉莉测试
EN