【Angular】使えそうなTips集【UT】

2020年1月8日2020年2月17日

カバレッジの有効化

angular.jsonに以下のオプションを設定する

"test": {
  "options": {
    "codeCoverage": true
  }
}

こうすることで、テスト実行するたびにカバレッジレポートが自動で生成される。
/coverage 配下に出力される
また最低限担保したいカバレッジ率を設定する場合にはkarma.conf.jsに以下のオプションを設定する

coverageIstanbulReporter: {
  reports: [ 'html', 'lcovonly' ],
  fixWebpackSourcePaths: true,
  thresholds: {
    statements: 80,
    lines: 80,
    branches: 80,
    functions: 80
  }
}

statement：ステートメント実行率（分岐は考慮しない）
lines：実行可能な行がすべて実行されたかどうか
branches：分岐網羅されたかどうか
functions：関数がすべて実行されたかどうか

テストダブルの作成

コンポーネントがサービスに依存している際に、そのスタブを作成する方法

  const serviceStub = {
    // メソッド
    function: () => returnValue,
    // プロパティ(getterも同様の書き方でOK)
    variable: anything
  };
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      providers: [
        {
          provide: Service,
          useValue: serviceStub
        }
      ]
    })
    .compileComponents();
  }));

Observableの値が変更されたか確認する

特定のメソッドによってObservableの中身が書き換わったかどうか確認したい場合には、そのメソッドを実行する前にsubscribeしてあげる

  it('test', () => {
    const service: Service = TestBed.get(Service);
    service.progress$.subscribe(p => {
      expect(p).toBeFalsy();
    })
    // testメソッド実行されると、progress$がfalseに変わる
    service.test();
  });

テストを一つだけ実行したい/実行したくない

一つだけ実行したい場合は、itの代わりにfitを使う

  fit('test', () => {
  // 処理
  });

特定の単体テストだけ実行したくない場合には、itの代わりにxitを使う

  xit('test', () => {
  // 処理
  });

NgRXのテスト

// provideMockStore、stateの追加
import { provideMockStore,} from '@ngrx/store/testing';
import * as fromCore from 'src/app/common/state';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      // providersとしてprovideMockStore()を追加 
      providers: [
        provideMockStore()
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    // モックSelectorの利用
    mockStore.overrideSelector(fromCore.getThemeColor, 'black-theme');
    mockStore.overrideSelector(fromCore.getFontSize, '2.0rem');
  });
});