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

Angularで簡単な画面を単体テストまで一通り作った件

ふるてつ
September 11, 2019

 Angularで簡単な画面を単体テストまで一通り作った件

ふるてつ

September 11, 2019
Tweet

More Decks by ふるてつ

Other Decks in Programming

Transcript

  1. 自己紹介 福岡のエンジニアです。 客先常駐するタイプです。 COBOL → VB6.0 → VB.net → Spring

    BootなIT人生。 他 jQuery → AngularJS → Angular 定年後の夢は、年金をもらいながら自称IT発明家になることです。 ふるてつ@tetsufuru19681 https://tetsufuru.hatenablog.com/ ちょくちょく参加するコミュニティ
  2. company.service.spec.ts(デフォルト) import { TestBed, inject } from '@angular/core/testing'; import {

    CompanyService } from '../company/company.service'; xdescribe('CompanyService', () => { beforeEach(() => { TestBed.configureTestingModule({ providers: [CompanyService] }); }); it('should be created', inject([CompanyService], (service: CompanyService) => { expect(service).toBeTruthy(); })); });
  3. company.service.spec.ts describe('CompanyService', () => { let companyService: CompanyService; let httpClientSpy:

    { get: jasmine.Spy, post: jasmine.Spy, put: jasmine.Spy }; let translateServiceSpy: { instant: jasmine.Spy }; beforeEach(() => { httpClientSpy = jasmine.createSpyObj('HttpClient', ['get', 'post', 'put']); translateServiceSpy = jasmine.createSpyObj('TranslateService', ['instant']); TestBed.configureTestingModule({ providers: [ CompanyService, ErrorMessageService, { provide: HttpClient, useValue: httpClientSpy }, { provide: TranslateService, useValue: translateServiceSpy },], }); companyService = TestBed.get(CompanyService); }); 追加 追加 追加
  4. company.service.spec.ts it('#getCompanyList:should return expected SearchCompanyListDto (HttpClient called once)', () =>

    { const expectedSearchCompanyListDto: SearchCompanyListDto = new SearchCompanyListDto(); const searchCompanyDto: SearchCompanyDto[] = [{companySeq: BigInt('1'), companyName: 'companyName', ~ 中略 ~ updateUser: 'updateUser', updateTime: new Date}]; expectedSearchCompanyListDto.searchCompanyDtos = searchCompanyDto; httpClientSpy.get.and.returnValue(asyncData(expectedSearchCompanyListDto)); companyService.getCompanyList(null).subscribe( searchCompanyList => expect(searchCompanyList).toEqual(expectedSearchCompanyListDto, 'expected searchCompanyDto'),fail); expect(httpClientSpy.get.calls.count()).toBe(1, 'one call'); }); DTO SPY
  5. company-list.component.spec.ts TestBed.configureTestingModule({ declarations: [CompanyListComponent], schemas: [NO_ERRORS_SCHEMA], imports: [ReactiveFormsModule, BrowserAnimationsModule, MaterialModule,

    HttpClientModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient] } }), ], providers: [ FormBuilder, ~ 以下略 ~ 追加 追加
  6. company-list.component.spec.ts it('should entry company name', () => { const debugElement:

    DebugElement = fixture.debugElement; const queriedElement = debugElement.query(By.css('#companyName')); const htmlInputElement: HTMLInputElement = queriedElement.nativeElement; const expectedEntry = 'abcd1234日本語'; htmlInputElement.value = expectedEntry; htmlInputElement.dispatchEvent(new Event('input')); expect(component.companyName.value).toEqual(expectedEntry); }); css selector event
  7. 参考サイト  Material 環境:https://material.angular.io/guide/getting-started コントロール:https://material.angular.io/components/categories/forms 一覧関連:https://material.angular.io/components/categories/tables ページネーションのサンプル:https://material.angular.io/components/table/examples (上記URLの「Table retrieving data

    through HTTP」にあります)  テスト:https://angular.jp/guide/testing 上記URL内の「サービスのテスト」、「コンポーネントテストの基本」、「コンポーネントクラスのテスト」、「コンポーネント DOMのテスト」
  8. わたしのブログ記事 Angular8 で Web アプリを作ろう - Jasmine - Serviceのテスト https://tetsufuru.hatenablog.com/entry/2019/08/13/130116

    Angular8 で Web アプリを作ろう - Jasmine - Componentのテスト その1 https://tetsufuru.hatenablog.com/entry/2019/09/01/015709 Angular8 で Web アプリを作ろう - Jasmine - Componentのテスト その2 DOM https://tetsufuru.hatenablog.com/entry/2019/09/01/222413