Upgrade to Pro — share decks privately, control downloads, hide ads and more …

FrontEnd Test Night - Fukuoka #1

puku0x
March 05, 2019

FrontEnd Test Night - Fukuoka #1

puku0x

March 05, 2019
Tweet

More Decks by puku0x

Other Decks in Technology

Transcript

  1. Angularがやれって言うから
    テスト書き始めました
    FrontEnd Test Night - Fukuoka #1

    View full-size slide

  2. Noriyuki
    Shinpuku
    ng-fukuoka organizer
    @puku0x
    2
    VEGA corporation Co., Ltd.

    View full-size slide

  3. Angular
    A platform for building modern Web Apps
    ● Move faster
    ● Scale better
    ● Reach further
    https://angular.io/
    6

    View full-size slide

  4. 7
    Angular CLI

    View full-size slide

  5. 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

    View full-size slide

  6. 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

    View full-size slide

  7. *.spec.ts?
    10

    View full-size slide

  8. 12
    Protractor

    View full-size slide

  9. 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

    View full-size slide

  10. describe('SampleComponent', () => {
    beforeEach(async(() => {
    TestBed.configureTestingModule({
    declarations: [ SampleComponent ]
    }).compileComponents();
    }));
    it('should create', () => {
    fixture = TestBed.createComponent(SampleComponent);
    component = fixture.componentInstance;
    expect(component).toBeTruthy();
    });
    });
    15

    View full-size slide

  11. import { NO_ERRORS_SCHEMA } from '@angular/core';
    describe('SomeComplexComponent', () => {
    beforeEach(async(() => {
    TestBed.configureTestingModule({
    ...
    schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents();
    }));
    });
    16

    View full-size slide

  12. describe('ApiService', () => {
    beforeEach(() => {
    TestBed.configureTestingModule({
    imports: [
    HttpClientTestingModule
    ]
    });
    service = TestBed.get(ApiService);
    });
    it('should be created', () => {
    expect(service).toBeTruthy();
    });
    });
    17

    View full-size slide

  13. 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

    View full-size slide

  14. 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

    View full-size slide

  15. Snapshot test?
    21

    View full-size slide

  16. $ ng add @briebug/jest-schematic
    22

    View full-size slide

  17. describe('AppComponent', () => {
    beforeEach(async(() => {
    TestBed.configureTestingModule({
    declarations: [AppComponent]
    }).compileComponents();
    }));
    test('should match to snapshot', () => {
    const fixture = TestBed.createComponent(AppComponent);
    expect(fixture).toMatchSnapshot();
    });
    });
    23

    View full-size slide

  18. 24
    Nx(Nrwl Extensions for Angular)

    View full-size slide

  19. ● Integrated Unit Test
    ● Integrated E2E Test
    ● Extensible CLI
    27

    View full-size slide

  20. 28
    https://angular.jp/
    More details are in...

    View full-size slide

  21. @puku0x
    Noriyuki Shinpuku
    ng-fukuoka organizer
    Thank you!
    29

    View full-size slide