Jasmine-Karma単体テスト

単体テスト結果

• 単体テストのテスティングフレームワークは「Jasmine」
• テストランナーは「Karma」を使用する。 プロジェクトのダーミナルで「ng test --code-coverage」を実行する。 カバレッジいらない場合、「ng test」をだけ実行してください。 参考資料：https://angular.cn/guide/testing

実行結果：（総件数１１）
成功： ９件 エラー： ２件 カバレッジ： 100%

結果リスト：

• カバレッジレポート：
  出力パスはkarma.conf.jsでcoverageIstanbulReporter⇒dirを設定する
  例：dir: require('path').join(__dirname, './coverage/angularUnitReport')
  

ソース例1：

※テストコーディングは**spec.tsにて実装する

app.component.ts

app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { exception } from 'console';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'angularUnit'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('angularUnit');
  });

  it('should render title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('.content span').textContent).toContain('angularUnit app is running!');
  });

  it('onSortEvent true', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const  context = fixture.componentInstance;
    const actualReturnvalue =  context.onSortEvent("aa");
    expect(actualReturnvalue).toBe(1);
  });

  it('onSortEvent false1', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const  context = fixture.componentInstance;
    const actualReturnvalue =  context.onSortEvent("bb");
    expect(actualReturnvalue).toBe(1);
  });

  it('onSortEvent false2', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const  context = fixture.componentInstance;
    const actualReturnvalue =  context.onSortEvent("cc");
    expect(actualReturnvalue).toBe(2);
  });

  it('onChangeValue true', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const  context = fixture.componentInstance;
    spyOn(context,'onSortEvent').and.returnValue(2);
    const actualReturnvalue =  context.onSortEvent("aa");
    expect(actualReturnvalue).toBe(2);
  });

});

spyOn(context,'onSortEvent').and.returnValue(2); 强制改变方法的返回值，也称之为模拟数据，同后述的fake

ソース例2：

value.service.ts

demo.component.spec.ts

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

import { DemoComponent } from './demo.component';
import {MasterService} from '../services/master.service';
import { ValueService } from '../services/value.service';
import { areAllEquivalent } from '@angular/compiler/src/output/output_ast';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ DemoComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(DemoComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

  it('#getValue should return real value from the real service', () => {
    masterService = new MasterService(new ValueService());
    expect(masterService.getValue()).toBe("test");
  });

  it('#getValue should return faked value from a fake object', () => {
    const fake =  { getValue: () => 'fake value' };
    masterService = new MasterService(fake as ValueService);
    expect(masterService.getValue()).toBe('fake value');
  });

});

const fake =  { getValue: () => 'fake value' }; 强制改变方法的返回值，也称之为模拟数据，同前面的.and.returnValue()