Karma 正在加载页面而不是测试结果

Question

最近我们开始在 Angular 4 中重写应用程序的前端。我的任务是专注于使用 jasmine 和 karma 进行单元测试。我对这个框架和测试运行程序完全陌生，而且大部分时间都是在整个前端，所以如果我错过了一些非常重要的东西 - 很抱歉。所以我的问题是测试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();
  });
});

现在我的 .ts 文件包含 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(['']);
  }
}

这是我的 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 };

所以问题就在这里——当我运行测试时，我应该在浏览器中得到失败的堆栈/正输出，我得到的是：

我敢打赌，问题在于我的配置测试模块，因为修改它不会显示欢迎文件的 html 输出，而是失败的堆栈跟踪。但是，我只想通过此测试。谁能帮帮我？

Answer 1

在您的测试中，您运行“WelcomeComponent”的 ngOnit，在那里您调用了一个函数，该函数一直到此方法：

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

现在问题出在此处，您在测试中导航到 ' ' 那里的内容会得到显示。