récemment, nous avons commencé à réécrire avant de notre application en Angular 4. Je devais me concentrer sur les tests unitaires en utilisant le jasmin et le karma. Je suis complètement nouveau dans ce framework et testeur et surtout sur tout le front, donc si quelque chose me manque vraiment - désolé pour ça. Donc, mon problème est la sortie de test html. Quand j'exécutais mes tests, j'avais généralement des informations sur les échecs et les échecs. Depuis que je travaillais sur des tests pour finalement en faire le plus simple au travail. Maintenant, j'ai commencé à travailler sur une activité qui nécessite de simples simulacres. Alors, voici mes spec.tsKarma est la page de chargement au lieu des résultats de test
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();
});
});
maintenant mon fichier .ts contenant WelcomeComponent:
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(['']);
}
}
Voici mon fichier 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>
est ici mon coreModule, nous n'avons pas module dédié pour fenêtre de bienvenue,
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 };
Le problème se trouve ici - quand je lance le test je devrais pas pile/sortie positive de celui-ci dans mon navigateur, ce que je reçois est le suivant: 
Je parie problème réside dans mes modules de test configure becuase acteur de modification, il n'affiche pas la sortie html du fichier de bienvenue, mais a échoué la trace de la pile. Cependant tout ce que je veux c'est faire passer ce test. Est-ce que quelqu'un peut m'aider?