Question

我需要对位置进行简单的单元测试。

main.ts

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';

@Component({
  selector: 'app-product-information',
  templateUrl: './product-information.component.html',
  styleUrls: ['./product-information.component.scss']
})
export class ProductInformationComponent implements OnInit {

  constructor(
    private location: Location
  ) { }

  ngOnInit() {
  }

  close(): void {
    this.location.back();
  }
}

尝试过 main.spec.ts

  beforeEach(() => {
    fixture = TestBed.createComponent(ProductInformationComponent);
    component = fixture.componentInstance;
    de = fixture.debugElement;
    loc = jasmine.createSpyObj('Location', ['back']);
    fixture.detectChanges();
  });

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

  it('should clicked back', () => {
    el = fixture.debugElement.query(By.css('.btn-cancel')).nativeElement.click();
    expect(loc.back).toHaveBeenCalledTimes(1);
  });

它没有用，我遇到了错误

预期的间谍Location.back被调用过一次。它被称为0次。

Answer 1

我知道我迟到了。我今天刚刚面对这个问题，并提出以下解决方案。

使用SpyLocation中的@angular/common/testing

和代码如下

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SpyLocation } from '@angular/common/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { KnowMoreComponent } from './know-more.component';
import { Location } from '@angular/common';

describe('KnowMoreComponent', () => {
  let component: KnowMoreComponent;
  let fixture: ComponentFixture<KnowMoreComponent>;
  let location: SpyLocation;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [KnowMoreComponent],
      providers: [
        { provide: Location, useClass: SpyLocation }
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(KnowMoreComponent);
    component = fixture.componentInstance;
    location = TestBed.get(Location);
    fixture.detectChanges();
  });

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

  it('should go back to previous page on header button click', () => {
    spyOn(location, 'back');
    component.goBack();
    expect(location.back).toHaveBeenCalled();
  });
});

希望这对以后的人有所帮助！

Answer 2

我们可以创建一个位置存根。

试试这个：

describe('EditFaqsComponent', () => {
  let location;

  const locationStub = {
    back: jasmine.createSpy('back')
  }

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [..],
      declarations: [..],
      providers: [
        {provide: Location, useValue: locationStub},
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    ...
    location = fixture.debugElement.injector.get(Location);
    fixture.detectChanges();
  });

 it('should go back', () => {
    component.close();
    expect(location.back).toHaveBeenCalled();
 });

});

单元测试Angular 6位置返回

2 个答案: