Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Angular 2 unit testing overview

3.387 Aufrufe

Veröffentlicht am

ng-sakeで話した内容です
http://connpass.com/event/27707/

サンプルコード
https://github.com/mitsuruog/_angular2-unit-test-sample

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Angular 2 unit testing overview

  1. 1. Angular 2 Unit testing Overview 2016/03/30 ng-sake @mitsuruog
  2. 2. Today’s motivation and goal. Tip Today’s sample code here. https://github. com/mitsuruog/_angular2-unit- test-sample - Not enough contents about unit testing :( - Let’s look at actual tests !! - Provide to quick reference in unit testing on Angular 1 to 2 :)
  3. 3. Table contents 1. Tools and setup 2. Testing Angular 2 Class 3. Testing Service 4. Testing DOM 5. Quick reference 6. Summary
  4. 4. Tools and setup. - Typescript - Karma - Jasmine Tip If you want use mocha and power-assert. Check it!! https://github.com/laco0416/angular2- testing-micro
  5. 5. Target SayHelloPipe Usage {{ 'world' | sayHello }} // => Hello world Key factor - Import - Class - Expect Testing Angular 2 Class Tip Today’s sample code here. https://github. com/mitsuruog/_angular2-unit- test-sample
  6. 6. Testing Angular 2 Class import { describe, it, expect, beforeEach } from 'angular2/testing'; import { SayHelloPipe } from './say-hello.pipe'; 1. Import the test target and testing API
  7. 7. Testing Angular 2 Class import { describe, it, expect, beforeEach } from 'angular2/testing'; import { SayHelloPipe } from './say-hello.pipe'; describe('Test: SayHelloPipe', () => { let testee; beforeEach(() => { testee = new SayHelloPipe(); }); }); 2. Get instance
  8. 8. Testing Angular 2 Class import { describe, it, expect, beforeEach } from 'angular2/testing'; import { SayHelloPipe } from './say-hello.pipe'; describe('Test: SayHelloPipe', () => { let testee; beforeEach(() => { testee = new SayHelloPipe(); }); it('Should say hello', () => { expect(testee.transform('world')).toEqual('Hello world'); }); }); finish To verify the results
  9. 9. Testing Service Target SayHelloService Usage SayHelloService.say() // => Hello Key factor - beforeEachProviders - inject Tip Today’s sample code here. https://github. com/mitsuruog/_angular2-unit- test-sample
  10. 10. Testing Service import { describe, it, inject, expect, beforeEachProviders } from 'angular2/testing'; import { SayHelloService } from "./say-hello.service"; 1 Import the test target and testing API
  11. 11. Testing Service import { describe, it, inject, expect, beforeEachProviders } from 'angular2/testing'; import { SayHelloService } from "./say-hello.service"; describe('Test: SayHelloService', () => { beforeEachProviders(() => [ SayHelloService ]); }); 2 Define DI provider
  12. 12. Testing Service import { describe, it, inject, expect, beforeEachProviders } from 'angular2/testing'; import { SayHelloService } from "./say-hello.service"; describe('Test: SayHelloService', () => { beforeEachProviders(() => [ SayHelloService ]); it('Should service exist', inject([SayHelloService], (testee: SayHelloService) => { })); }); 3 Inject to test target provider into test context
  13. 13. Testing Service import { describe, it, inject, expect, beforeEachProviders } from 'angular2/testing'; import { SayHelloService } from "./say-hello.service"; describe('Test: SayHelloService', () => { beforeEachProviders(() => [ SayHelloService ]); it('Should service exist', inject([SayHelloService], (testee: SayHelloService) => { expect(testee).toBeDefined(); })); it('Should say Hello', inject([SayHelloService], (testee: SayHelloService) => { expect(testee.say()).toEqual('Hello'); })); }); finish To verify the results
  14. 14. Testing Service import { describe, it, inject, expect, beforeEachProviders } from 'angular2/testing'; import { SayHelloService } from "./say-hello.service"; import { provide } from "angular2/core"; import { SayHelloServiceMock } from "./say-hello.service.mock"; describe('Test: SayHelloService', () => { beforeEachProviders(() => [ provide(SayHelloService, { useClass: SayHelloServiceMock }) ]); }); bonus!! Provider can be replaced instantiate method
  15. 15. Testing DOM Target SayHelloComponent Usage <say-hello></say-hello> → <say-hello> <div>Hello</div> </say-hello> Key factor - Create TestComponet - TestComponentBuilder - Debugging fixture component Tip Today’s sample code here. https://github. com/mitsuruog/_angular2-unit- test-sample
  16. 16. Testing DOM import { describe, it, injectAsync, expect, beforeEachProviders, TestComponentBuilder } from 'angular2/testing'; import { Component } from 'angular2/core'; import { SayHelloComponent } from './say-hello.component'; 1 Import the test target and testing API
  17. 17. Testing DOM import { describe, it, injectAsync, expect, beforeEachProviders, TestComponentBuilder } from 'angular2/testing'; import { Component } from 'angular2/core'; import { SayHelloComponent } from './say-hello.component'; @Component({ selector: 'test-container', template: '<say-hello></say-hello>', directives: [ SayHelloComponent ] }) class TestComponent { } 2 Create a fixture component
  18. 18. Testing DOM import { describe, it, injectAsync, expect, beforeEachProviders, TestComponentBuilder } from 'angular2/testing'; import { Component } from 'angular2/core'; import { SayHelloComponent } from './say-hello.component'; @Component({ selector: 'test-container', template: '<say-hello></say-hello>', directives: [ SayHelloComponent ] }) class TestComponent { } describe('Test: SayHelloComponent', () => { beforeEachProviders(() => [ TestComponentBuilder ]); it('Should display Hello', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => { })); }); 3 Define DI provider and inject to provider into test context
  19. 19. Testing DOM import { describe, it, injectAsync, expect, beforeEachProviders, TestComponentBuilder } from 'angular2/testing'; import { Component } from 'angular2/core'; import { SayHelloComponent } from './say-hello.component'; @Component({ selector: 'test-container', template: '<say-hello></say-hello>', directives: [ SayHelloComponent ] }) class TestComponent { } describe('Test: SayHelloComponent', () => { beforeEachProviders(() => [ TestComponentBuilder ]); it('Should display Hello', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => { return tcb.createAsync(TestComponent) .then((fixture) => { }); })); }); 4 Build fixture component
  20. 20. Testing DOM import { describe, it, injectAsync, expect, beforeEachProviders, TestComponentBuilder } from 'angular2/testing'; import { Component } from 'angular2/core'; import { SayHelloComponent } from './say-hello.component'; @Component({ selector: 'test-container', template: '<say-hello></say-hello>', directives: [ SayHelloComponent ] }) class TestComponent { } describe('Test: SayHelloComponent', () => { beforeEachProviders(() => [ TestComponentBuilder ]); it('Should display Hello', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => { return tcb.createAsync(TestComponent) .then((fixture) => { let div = fixture.nativeElement.querySelector('div'); expect(div).toHaveText('Hello'); }); })); }); finish To verify the results
  21. 21. Testing DOM import { describe, it, injectAsync, expect, beforeEachProviders, TestComponentBuilder } from 'angular2/testing'; import { Component } from 'angular2/core'; import { SayHelloComponent } from './say-hello.component'; @Component({ selector: 'test-container', template: '<say-hello></say-hello>', directives: [ SayHelloComponent ] }) class TestComponent { } describe('Test: SayHelloComponent', () => { beforeEachProviders(() => [ TestComponentBuilder ]); it('Should display Hello', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => { let template = '<say-hello word=”world”></say-hello>'; return tcb.overrideTemplate(TestComponent, template) .createAsync(TestComponent) .then((fixture) => { }); })); }); bonus!! Fixture can be replaced to another template
  22. 22. Where is Quick Reference ? Here https://gist.github.com/mitsuruog/9e3e5c2c5d17a15a4c2a
  23. 23. Summry In my opinion... Angular 2 test concept is similar to 1. Angular 2 testing API are organized. became even easier to use. Angular 2 architecture be able to more easy testing than 1. Enjoy testing :)
  24. 24. Thanks !! Who am I Mitsuru Ogawa front-end developer with a passion for making the maintainable web. working for the improvement of old Web experience. mitsuruog mitsuruog
  25. 25. Appendix - AngularConnect - Testing (Public) - Google Slides - https://goo.gl/szI8Q5 - Angular 2 — Unit Testing recipes — Google Developer Experts — Medium - https://goo.gl/MY9xyj - Angular 2.0 Unit Testing - http://www.syntaxsuccess.com/viewarticle/angular-2.0- unit-testing - Testing Angular 2 apps - Part 1: The beginning - LiveChat Developers - https://developers.livechatinc.com/blog/testing-angular- 2-apps-part-1-beginning - Testing Angular 2 apps - Part 2: Dependency Injection and Components - LiveChat Developers - https://developers.livechatinc.com/blog/testing-angular- 2-apps-dependency-injection-and-components/ - Testing Angular 2 apps - Part 3: RouterOutlet and API - LiveChat Developers - https://developers.livechatinc.com/blog/testing-angular- 2-apps-routeroutlet-and-http/ Tip If you want to read Japanese contents. Check my blog :) http://blog.mitsuruog.info/tags/unit-test/

×