Angular 测试失败

Question

我正在关注一个视频，其中讨论了异步测试，并且我编写了相同的代码，但由于 Angular 版本而存在一些差异（该视频已有 2 年历史）。但是，我遇到了异步测试的问题。

预期未定义等于“testTtess”

import { TtessComponent } from './ttess.component'
import { TestBed, ComponentFixture, tick, async } from '@angular/core/testing';
import { TtessService } from './ttes.service';
import { of } from 'rxjs'
import { delay } from 'rxjs/operators';

describe('TtesComponent', () => {

  let fixture: ComponentFixture<TtessComponent>;
  let component: TtessComponent;
  let ttessService: TtessService;
beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [TtessComponent]
  });
  fixture = TestBed.createComponent(TtessComponent);
  component = fixture.debugElement.componentInstance;
  ttessService = fixture.debugElement.injector.get(TtessService);
});

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


it(`it should render h1 tag with title 'My car header'`, () => {
  fixture.detectChanges();
  const nativeEl = fixture.debugElement.nativeElement;
  expect(nativeEl.querySelector('h1').textContent).toEqual('My car header')
})

it('should inject Ttess service', () => {
  fixture.detectChanges();
  expect(component.isCarVisible).toEqual(ttessService.getVisibility());
})


it('should display car if is not visible', () => {
  ttessService.showTtess();
  fixture.detectChanges();
  const nativeEl = fixture.debugElement.nativeElement;
  expect(nativeEl.querySelector('span').textContent).toEqual('Car is visible');

})

it(`shouldn't get car name if not async`, () => {
  spyOn(ttessService, 'getTtessName')
  .and.returnValue(of('testTtess')
  .pipe(delay(100)));
  fixture.detectChanges();
  expect(component.ttessName).toBe(undefined);
})

it(`should get car name if async`, async(() => {
  spyOn(ttessService, 'getTtessName').and.returnValue(of('testTtess').pipe(delay(100)));
  fixture.detectChanges();
  fixture.whenStable().then(() => {
    expect(component.ttessName).toEqual('testTtess');
  });

}));

});


\===========Service===============\

export class TtessService {
    private IsCarVisible: boolean = true;

    showTtess() {
        this.IsCarVisible = true;
    }
    hideIttess() {
        this.IsCarVisible = false;
    }

    getVisibility() {
        return this.IsCarVisible;
    }

    getTtessName(): Observable<string> {
        return of('Ford').pipe(delay(100));
    }
}

\===============Component=================\
import { Component, OnInit } from '@angular/core';
import { TtessService } from './ttes.service';

@Component({
  selector: 'app-ttess',
  templateUrl: './ttess.component.html',
  styleUrls: ['./ttess.component.scss'],
  providers: [TtessService]
})
export class TtessComponent implements OnInit {
  isCarVisible:boolean;
title = 'My car header';
ttessName: string;
  constructor(private ttess: TtessService) { }

  ngOnInit() {
    this.isCarVisible = this.ttess.getVisibility();
    this.ttess.getTtessName()
    .subscribe(name => this.ttessName);
  }

}

Answer 1

试试看

  ngOnInit() {
    this.isCarVisible = this.ttess.getVisibility();
    this.ttess.getTtessName()
    .subscribe(name => this.ttessName = name);
  }

Answer 2

您是如何创建组件的？如果您使用 cli 创建组件，您将获得一个样板测试规范。

ng g c Ttess

将为组件、模板 css 和规范文件创建外壳，并将组件添加到您的模块中。

然后你会看到最新的规范样板已经在每个之前都是异步的，并且组件已经准备好进行测试了。

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

import { TtessComponent } from './ttess.component';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ AcfiHeadingComponent ]
    })
    .compileComponents();
  }));

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

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