Slide 1
Slide 1 text
Angularがやれって言うから
テスト書き始めました
FrontEnd Test Night - Fukuoka #1
Slide 2
Slide 2 text
Noriyuki
Shinpuku
ng-fukuoka organizer
@puku0x
2
VEGA corporation Co., Ltd.
Slide 3
Slide 3 text
3
AngularJS
Slide 4
Slide 4 text
Testing?
4
Slide 5
Slide 5 text
5
Angular
Slide 6
Slide 6 text
Angular
A platform for building modern Web Apps
● Move faster
● Scale better
● Reach further
https://angular.io/
6
Slide 7
Slide 7 text
7
Angular CLI
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
*.spec.ts?
10
Slide 11
Slide 11 text
11
Karma
Slide 12
Slide 12 text
12
Protractor
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
Unit Test
14
Slide 15
Slide 15 text
describe('SampleComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SampleComponent ]
}).compileComponents();
}));
it('should create', () => {
fixture = TestBed.createComponent(SampleComponent);
component = fixture.componentInstance;
expect(component).toBeTruthy();
});
});
15
Slide 16
Slide 16 text
import { NO_ERRORS_SCHEMA } from '@angular/core';
describe('SomeComplexComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
...
schemas: [NO_ERRORS_SCHEMA]
}).compileComponents();
}));
});
16
Slide 17
Slide 17 text
describe('ApiService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
HttpClientTestingModule
]
});
service = TestBed.get(ApiService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
17
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
E2E test
19
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
Snapshot test?
21
Slide 22
Slide 22 text
$ ng add @briebug/jest-schematic
22
Slide 23
Slide 23 text
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [AppComponent]
}).compileComponents();
}));
test('should match to snapshot', () => {
const fixture = TestBed.createComponent(AppComponent);
expect(fixture).toMatchSnapshot();
});
});
23
Slide 24
Slide 24 text
24
Nx（Nrwl Extensions for Angular）
Slide 25
Slide 25 text
25
Slide 26
Slide 26 text
26
Slide 27
Slide 27 text
● Integrated Unit Test
● Integrated E2E Test
● Extensible CLI
27
Slide 28
Slide 28 text
28
https://angular.jp/
More details are in...
Slide 29
Slide 29 text
@puku0x
Noriyuki Shinpuku
ng-fukuoka organizer
Thank you!
29