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

Posted 2023-03-16

【中文标题】如何创建简单的导航测试用例 - Karma Testing Angular

【英文标题】：How to create simple navigate test cases - 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();
  );
);

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

【参考方案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']);
  );
);