実践 Angular: Standalone Components をざっくりキャッチアップしてみた Part5

lacolaco さん監修の実践 Angular: Standalone Components をざっくりキャッチアップしてみます。 zenn.dev

Who is lacolaco? / lacolaco さんて、どんな人？

Google Developers Expert for Angular
Angularコントリビューター
Angular日本ユーザー会代表
jsprimer.net 著者

Zenn プロフィールから引用

前回

lifewood.hatenablog.com

ユニットテスト

■ component のユニットテストの実装

child.component.spec.ts

+ --standalone オプションで、コンポーネントを生成しているので、
+ 最初から TestBed.configureTestingModule が実装されています。

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { ChildComponent } from './child.component';

describe('ChildComponent', () => {
  let component: ChildComponent;
  let fixture: ComponentFixture<ChildComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [ChildComponent],
    }).compileComponents();

    fixture = TestBed.createComponent(ChildComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

+  it('should render p', () => {
+    const fixture = TestBed.createComponent(ChildComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('p')?.textContent).toContain('child works!');
+  });
});

■ service のユニットテストの実装

src/app/list/list.service.spec.ts
- 今回は、API を用意していなく、./assets/json/list.json' を http から取得するサービスのユニットテスト

+ // 追加差分が実装箇所です
import { TestBed } from '@angular/core/testing';
import { provideHttpClient } from '@angular/common/http';
+ import {
+   HttpTestingController,
+   provideHttpClientTesting,
+ } from '@angular/common/http/testing';

import { ListService } from './list.service';
import { of } from 'rxjs';

describe('ListService', () => {
  let service: ListService;
+  let controller: HttpTestingController;
+  const apiResponseValue = [{ name: 'hoge' }, { name: 'fuga' }];

  beforeEach(() => {
    TestBed.configureTestingModule({
+      providers: [provideHttpClient(), provideHttpClientTesting(), ListService],
    });
    service = TestBed.inject(ListService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

+  it('should get user info from backend API', async () => {
+    spyOn(service, 'get').and.callFake(() => of(apiResponseValue));
+    service.get().subscribe((_) => expect(_).toEqual(apiResponseValue));
+  });
});