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

Question

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

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

这是我的组件函数，

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();
  });
});

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

Answer 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']);
  });
});

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

How to create simple navigate test cases - Karma Testing Angular

angular

karma-jasmine

karma-coverage