时间戳

首页 > 解决方案 > Angular 测试失败

angular - Angular 测试失败

问题描述

我正在关注一个视频，其中讨论了异步测试，并且我编写了相同的代码，但由于 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);
  }

}

标签： angulartestingpromiserxjs

解决方案

试试看

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

推荐阅读