javascript - The "Angular" way of testing a component -
in angular 1, if wrote component, make sure that:
- dependencies, such services being mocked.
- unit tests written methods within component.
- the component calling service retrieve data
expect(service.method).tohavebeencalled()
- the component updating view given updated model.
i've been doing research on angular 2 component testing, , articles can find, seems testing being done follows;
- create service mock returns fixed result (ex: 'test quote')
- expect view contains result coming mocked service (ex; there's div somewhere has
<div>test quote</div>
).
here few examples of such articles (basically top results on google 'angular 2 component testing')
- http://chariotsolutions.com/blog/post/testing-angular-2-components-unit-tests-testcomponentbuilder/
- http://blog.rangle.io/testing-angular-2-applications/
- http://www.itsmycodeblog.com/angular2-unit-testing-a-component/
- https://developers.livechatinc.com/blog/testing-angular-2-apps-dependency-injection-and-components/
since ng2 provides no spies in it's testing framework @angular/core/testing
, it's recommended avoid step in bold altogether? or should including jasmine have access spies?
if looking test component rendering, can use testcomponentbuilder
explained in blogs mentioned in question.
describe('mycomponent', () => { it('should render list', async(inject([testcomponentbuilder], (tcb: testcomponentbuilder) => { return tcb.createasync(mycomponent).then((componentfixture: componentfixture) => { const element = componentfixture.nativeelement; //... element want check componentfixture.detectchanges(); expect(element).tohavetext('test div'); expect(element.queryselectorall('div').length).tobe(1); }); })); }));
if service being called in component want inject
in beforeeachproviders()
or beforeeach()
method :
beforeeach(() => { addproviders([ provide(loginservice, { useclass: mockloginservice }), userservice ]); });
using jasmine
spies along methods and.callthrough
, and.returnvalue
useful when want mock service call in component. additionally, have @ this repo angular team member julie raplh.
Comments
Post a Comment