1
最近私たちはアプリケーションのフロントを角度4で書き直しました。私はジャスミンとカルマを使って単体テストに焦点を当てるように任されました。私はこのフレームワークとテストランナーにとってまったく新しいものであり、主に全面的なものになっています。だから私の問題は、テストhtmlの出力です。私がテストを行っていたとき、私は通常どの失敗が起こったのか、どのような失敗が起こったのかについての情報を得ました。それ以来、私はテストに取り組んでいました。今では単純なモックを必要とするコンポーネントアクティビティに取り組み始めました。だからここに私spec.tsがカルマがテスト結果の代わりにページを読み込んでいます
import { WelcomeComponent } from "app/core/welcome/welcome.component";
import { ComponentFixture } from "@angular/core/testing";
import { TestBed } from "@angular/core/testing";
import { async } from "@angular/core/testing";
import { BusinessAreasService } from "app/core/services/business-areas/business-areas.service";
import { CoreModule } from "app/core/core.module";
import { Router } from "@angular/router";
import { DebugElement } from "@angular/core/src/debug/debug_node";
import { By } from "@angular/platform-browser";
describe('WelcomeComponent testing',() => {
let component: WelcomeComponent;
let fixture: ComponentFixture<WelcomeComponent>;
let de: DebugElement;
let el: HTMLElement;
let mockBusinessAreasService;
let mockRouter;
beforeEach(async(() => {
mockBusinessAreasService = {};
mockRouter = {};
TestBed.configureTestingModule({
providers: [
{
provide: BusinessAreasService, useValue: mockBusinessAreasService
},
{
provide: Router, useValue: mockRouter
}
],
declarations: [WelcomeComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(WelcomeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
component.ngOnInit();
mockBusinessAreasService = TestBed.get(BusinessAreasService);
mockRouter = TestBed.get(Router);
});
it('BA list shouldnt be empty'),() => {
expect(component.baList.length).toBeGreaterThan(0);
}
it('check if WelcomeComponent is created',() => {
expect(component).toBeDefined();
});
});
今WelcomeComponentを含む私の.TSファイルです：
import { Component, OnInit } from '@angular/core';
import { BusinessAreasService } from "app/core/services/business-areas/business-areas.service";
import { Router } from "@angular/router/";
@Component({
selector: 'app-welcome',
templateUrl: './welcome.component.html',
styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit {
baList : string[] = [];
selectedBa : string = "";
constructor(private businessAreasService : BusinessAreasService, private router: Router) { }
ngOnInit() {
console.log("In welcome component")
this.businessAreasService.getUserBAList().subscribe(resposne => this.redirectBasedOnBas(resposne), error => this.baList = [ 'error' ]);
}
redirectBasedOnBas(baList : string[]) {
if(baList.length === 1) {
this.applyBusinessArea(baList[0]);
} else {
this.baList = baList;
this.selectedBa = baList[0];
}
}
baChanged(ba : string) {
console.log(ba);
this.selectedBa = ba;
}
applyBusinessArea(ba : string) {
localStorage.setItem('ba', ba);
this.router.navigate(['']);
}
}
ここでは私のHTMLファイルがあります：
<div class="container-fluid">
<div class="col-sm-2">
<label for="name" class="cols-sm-2 control-label">Please select your business Area</label>
</div>
<form class="form-inline text-md-center">
<div class="col-sm-6">
<div class="input-group">
<select class="form-control" id="exampleSelect1" (change)="baChanged($event.target.value)">
<option *ngFor="let ba of baList" [value]="ba">{{ba}} </option>
</select>
</div>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-primary btn-block" (click)="applyBusinessArea(selectedBa)">Submit</button>
</div>
</form>
</div>
ここに私のcoreModuleだ、我々はいずれかを持っていませんウェルカムウィンドウ専用モジュール、
import { NgModule, Optional, SkipSelf, OnInit } from '@angular/core';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { EnvironmentService } from "app/core/services/environment/environment.service";
import { HttpAdapterService } from "app/core/services/http-adapter/http-adapter.service";
import { AuthentificationService } from "app/core/services/authentification/authentification.service";
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from "@angular/forms";
import { WelcomeComponent } from './welcome/welcome.component';
import { BusinessAreasService } from "app/core/services/business-areas/business-areas.service";
import { FakeLoginComponent } from "app/core/fake-login/fake-login.component";
import { SharedModule } from "app/shared/shared.module";
import { SystemSettingsService } from "app/core/services/system-settings/system-settings.service";
const SERVICES = [EnvironmentService, HttpAdapterService, AuthentificationService, BusinessAreasService, SystemSettingsService];
const COMPONENTS = [ FakeLoginComponent ];
@NgModule({
imports: [RouterModule, BrowserModule, FormsModule, SharedModule],
providers: [SERVICES],
declarations: [ WelcomeComponent, COMPONENTS ],
exports: [HttpModule, COMPONENTS]
})
class CoreModule implements OnInit {
constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
if (parentModule) {
throw new Error('CoreModule has been already loaded! It should be loaded only once!');
}
console.log('CoreModule contruct');
}
public ngOnInit(): void {
console.log('CoreModule init');
}
}
export { CoreModule };
だから問題はここにある - 私は私のブラウザでからスタック/正の出力に失敗した取得する必要がありますテストを実行したときに、私が取得することは、これは次のとおりです。 
私はこの問題は、それをmodyfing becuase私のconfigureのテストモジュールである賭けますウェルカムファイルからのhtml出力は表示されませんが、代わりにスタックトレースが失敗します。しかし、私が望むのは、このテストをパスすることだけです。誰でも私を助けることができますか？
applyBusinessArea(ba : string) {
localStorage.setItem('ba', ba);
this.router.navigate(['']); }
さて問題は、あなたが何を今まで「」にあなたのテストでnagivateここにある：あなたはすべての方法、この方法に進み関数を呼び出すあなたがそこに「WelcomeComponent」のngOnitを実行して、テストで