如何创建简单的导航测试用例 - Karma Testing Angular答案

【问题标题】：How to create simple navigate test cases - Karma Testing Angular如何创建简单的导航测试用例 - Karma Testing Angular
【发布时间】：2020-11-16 18:44:45
【问题描述】：

我是业力测试的新手......

如何创建简单的导航测试用例，

这是我的组件函数，

continue() {
    this.spinner.show();
    this.router.navigate(['deliveryaddress']);
    this.spinner.hide();
  }

这是我的 spec.ts

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

import { HomeComponent } from './home.component';
import { RouterTestingModule } from '@angular/router/testing';
import { HttpClient, HttpHandler, HttpClientModule } from '@angular/common/http';
import { FormBuilder } from '@angular/forms';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ HomeComponent ],
      imports: [RouterTestingModule,HttpClientModule],
      providers: [HttpClient,FormBuilder,HttpHandler]
    })
    .compileComponents();
  }));

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

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

谢谢.................................................. ..................................................... ....................................

【问题讨论】：

标签： angular karma-jasmine karma-coverage

【解决方案1】：

假设你已经正确地模拟了spinner，你可以这样做：

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

import { HomeComponent } from './home.component';
import { Router } from '@angular/router'; // import the router
import { RouterTestingModule } from '@angular/router/testing';
import { HttpClient, HttpHandler, HttpClientModule } from '@angular/common/http';
import { FormBuilder } from '@angular/forms';

describe('HomeComponent', () => {
  let component: HomeComponent;
  let fixture: ComponentFixture<HomeComponent>;
  let router: Router; // assign router variable;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ HomeComponent ],
      imports: [RouterTestingModule,HttpClientModule],
      providers: [HttpClient,FormBuilder,HttpHandler]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
    router = TestBed.inject(Router); // If you're using Angular 9 and above, this is .inject
   // if you're using an older version, it should be TestBed.get
    fixture.detectChanges();
  });

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

  it('should navigate to deliveryaddress on continue', () => { // add this test
    spyOn(router, 'navigate'); // create a spy on the navigate function
    component.continue();
    expect(router.navigate).toHaveBeenCalledWith(['deliveryaddress']);
  });
});

【讨论】：