【Angular】使えそうなTips集【UT】
Contents
カバレッジの有効化
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');
});
});