FrontEnd Test Night - Fukuoka #1

8bc941b1868dfc680dd1e11a797ca385?s=47 puku0x
March 05, 2019

FrontEnd Test Night - Fukuoka #1

8bc941b1868dfc680dd1e11a797ca385?s=128

puku0x

March 05, 2019
Tweet

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)

  25. 25

  26. 26

  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