FrontEnd Test Night - Fukuoka #1

Transcript

1. Angularがやれって言うから テスト書き始めました FrontEnd Test Night - Fukuoka #1
2. Noriyuki Shinpuku ng-fukuoka organizer @puku0x 2 VEGA corporation Co., Ltd.
3. 3 AngularJS
4. Testing? 4
5. 5 Angular
6. Angular A platform for building modern Web Apps • Move faster • Scale better • Reach further https://angular.io/ 6
7. 7 Angular CLI
8. Generating a component $ ng generate component sample CREATE src/app/sample/sample.component.scss (0 bytes) CREATE src/app/sample/sample.component.html (23 bytes) CREATE src/app/sample/sample.component.spec.ts (614 bytes) CREATE src/app/sample/home.component.ts (262 bytes) UPDATE src/app/app.module.ts (467 bytes) 8
9. Generating a service $ ng generate service api CREATE src/app/api.service.spec.ts (323 bytes) CREATE src/app/api.service.ts (133 bytes) 9
10. *.spec.ts? 10
11. 11 Karma
12. 12 Protractor
13. Creating an app $ ng new my-app --routing --style=scss CREATE my-app/angular.json (3895 bytes) CREATE my-app/package.json (1389 bytes) CREATE my-app/src/karma.conf.js (1019 bytes) CREATE my-app/src/tsconfig.spec.json (256 bytes) CREATE my-app/e2e/protractor.conf.js (752 bytes) CREATE my-app/e2e/tsconfig.e2e.json (213 bytes) CREATE my-app/src/main.ts (372 bytes) ... 13
14. Unit Test 14
15. describe('SampleComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ SampleComponent ] }).compileComponents(); })); it('should create', () => { fixture = TestBed.createComponent(SampleComponent); component = fixture.componentInstance; expect(component).toBeTruthy(); }); }); 15
16. import { NO_ERRORS_SCHEMA } from '@angular/core'; describe('SomeComplexComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ ... schemas: [NO_ERRORS_SCHEMA] }).compileComponents(); })); }); 16
17. describe('ApiService', () => { beforeEach(() => { TestBed.configureTestingModule({ imports: [ HttpClientTestingModule ] }); service = TestBed.get(ApiService); }); it('should be created', () => { expect(service).toBeTruthy(); }); }); 17
18. import { HttpTestingController } from '@angular/common/http/testing'; describe('UserService', () => { beforeEach(() => { ... httpMock = TestBed.get(HttpTestingController); }); afterEach(() => httpMock.verify()); it('should successfully mock request', () => { const response = {...}; service.fetch().subscribe(result => expect(result).toBe(response)); const req = httpMock.expectOne(`/api/v1/samples`); expect(req.request.method).toEqual('GET'); req.flush(response); }); }); 18
19. E2E test 19
20. import { browser, by, element } from 'protractor'; describe('App', () => { it('should display title', () => { browser.get('/'); const title = element(by.css('h1')).getText(); expect(title).toEqual('Hello Angular!'); }); }); 20
21. Snapshot test? 21
22. $ ng add @briebug/jest-schematic 22
23. describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [AppComponent] }).compileComponents(); })); test('should match to snapshot', () => { const fixture = TestBed.createComponent(AppComponent); expect(fixture).toMatchSnapshot(); }); }); 23
24. 24 Nx（Nrwl Extensions for Angular）
27. • Integrated Unit Test • Integrated E2E Test • Extensible CLI 27
28. 28 https://angular.jp/ More details are in...
29. @puku0x Noriyuki Shinpuku ng-fukuoka organizer Thank you! 29