Karma正在加載頁面而不是測試結果

最近我們開始在Angular 4中重寫我們的應用程序的前端。我負責專注於使用茉莉花和業力進行單元測試。我對這個框架和測試跑步者完全陌生，大部分都是整個前線，所以如果我錯過了一些非常重要的東西 - 對不起。所以我的問題是測試html輸出。當我運行我的測試時，我通常會得到一些關於哪些失敗以及發生了哪種失敗的信息 - 這很好。自那以後，我正在進行測試，最終使其中一些最簡單的工作。現在我開始研究需要一些簡單模擬的組件活動。因此，這裏是我的spec.tsKarma正在加載頁面而不是測試結果

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它不會顯示歡迎文件的html輸出，而是失敗的堆棧跟蹤。然而，我只想讓這個測試通過。任何人都可以幫助我？

來源

2017-08-25 Mac Ryze

在您的測試運行「WelcomeComponent」的ngOnit有你把那個叫走一路這種方法的功能：

applyBusinessArea(ba : string) { 
localStorage.setItem('ba', ba); 
    this.router.navigate(['']); }

現在的問題就出在這裏，你在你的測試，以「」什麼都瞭解它們在那裏得到顯示。

來源

2017-08-25 09:14:12 Swoox

Karma正在加載頁面而不是測試結果

回答

相關問題