Javascript Angular 8茉莉花和业力测试：模拟的ngonit承诺值不在DOM中呈现

运行测试时，测试中的模拟数据不会显示在标记中。无论我尝试什么（fakeasync、done、stubs），在运行测试后，承诺的内容都不会呈现在标记中

谁能告诉我为什么这个模拟的承诺数据不会显示在dom中。我已经花了两天的时间在这上面了，无论我怎么做都不管用。我使用angular 8，开始认为它是框架中的一个bug

我有以下标记：

<div>
    <div class="pt-8">
        <!-- Displays -->
        <ul>
            <li *ngFor="let worker of workers">{{worker.getName()}}</li>
        </ul>

        <!-- DOES NOT DISPLAY -->
        <ol>
            <li *ngFor="let centre of centres">{{centre.name}}</li>
        </ol>
    </div>
</div>

这就是测试：

import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { WorkcentersService } from 'app/services/workcenters.service';
import { Workcenter } from 'app/model/workcenter';
import { TestComponent } from './test.component';

fdescribe('TestComponent', () => {
  let component: TestComponent;
  let fixture: ComponentFixture<TestComponent>;

  beforeEach(async () => {
    const mockCentres = createMockCentres();
    const mockWorkcentersService = jasmine.createSpyObj(["getWorkcentersList"]);
    mockWorkcentersService.getWorkcentersList.and.returnValue(Promise.resolve(mockCentres));

    TestBed.configureTestingModule({
      declarations: [TestComponent],
      imports: [],
      providers: [
        { provide: WorkcentersService, useValue: mockWorkcentersService }
      ]
    });

    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    await fixture.whenStable();
    fixture.detectChanges();
  });

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

  // Passes
  it('should render users', async () => {
    const displayedUsers = fixture.nativeElement.querySelectorAll("ul li");
    expect(displayedUsers.length).toEqual(3);
  });

  // Fails
  it('should render centres', async () => {
    const displayedUsers = fixture.nativeElement.querySelectorAll("ol li");
    expect(displayedUsers.length).toEqual(2);
  });

  // Fails
  it('should display "hello"', fakeAsync(() => {
    fixture.detectChanges();
    tick();
    const displayedUsers = fixture.nativeElement.querySelectorAll("ol li");
    expect(displayedUsers.length).toEqual(2);
  }));

  function createMockCentres(): Workcenter[] {
    const mockCentre1 = new Workcenter();mockCentre1.id = 1;mockCentre1.name = "Test centre 1";
    const mockCentre2 = new Workcenter();mockCentre2.id = 2;mockCentre2.name = "Test centre 2";
    return [mockCentre1, mockCentre2];
  }
});

从'@angular/core/testing'导入{ComponentFixture，TestBed，fakeAsync，tick}；
从“app/services/workcenters.service”导入{WorkcentersService}；
从'app/model/Workcenter'导入{Workcenter}；
从“./test.component”导入{TestComponent}；
fdescribe（'TestComponent'，（）=>{
let组件：TestComponent；
let夹具：组件夹具；
beforeach（异步（）=>{
const mockcenters=createmockcenters（）；
const mockWorkcentersService=jasmine.createSpyObj（[“getWorkcentersList]”）；
mockWorkcentersService.getWorkcentersList.and.returnValue（Promise.resolve（mockcenters））；
TestBed.configureTestingModule({
声明：[TestComponent]，
进口：[]，
供应商：[
{提供：WorkcentersService，使用值：mockWorkcentersService}
]
});
fixture=TestBed.createComponent（TestComponent）；
组件=fixture.componentInstance；
等待fixture.whenStable（）；
fixture.detectChanges（）；
});
//通行证
它（'应该创建'，（）=>{
expect（component.toBeTruthy（）；
});
//通行证
它（'应该呈现用户'，异步（）=>{
const displayedUsers=fixture.nativeElement.querySelectorAll（“ul li”）；
expect（displayedUsers.length）.toEqual（3）；
});
//失败
它（'should render centers'，async（）=>{
const displayedUsers=fixture.nativeElement.querySelectorAll（“ol li”）；
expect（displayedUsers.length）.toEqual（2）；
});
//失败
它（'应该显示“hello”，fakeAsync（（）=>{
fixture.detectChanges（）；
勾选（）；
const displayedUsers=fixture.nativeElement.querySelectorAll（“ol li”）；
expect（displayedUsers.length）.toEqual（2）；
}));
函数createMockCentres（）：工作中心[]{
const mockCentre1=new Workcenter（）；mockCentre1.id=1；mockCentre1.name=“测试中心1”；
const mockCentre2=new Workcenter（）；mockCentre2.id=2；mockCentre2.name=“测试中心2”；
返回[mockCentre1，mockCentre2]；
}
});

从'@angular/core/testing'导入{ComponentFixture，fakeAsync，TestBed，tick}；
从“./app.component”导入{AppComponent}；
从“./WorkCenter”导入{WorkCenter}；
从“./workcenters.service”导入{WorkcentersService}；
fdescribe（'TestComponent'，（）=>{
let组件：AppComponent；
let夹具：组件夹具

还尝试运行单个测试用例，以向您显示测试中心现在正在显示：-

@Aakash Garg我接受了你的答案，因为你答对了

在花了（更多）的时间之后，我发现事实上我们创造了不同的间谍并没有任何区别

关键的事实是你转身了
fixture.detectChanges（）；
等待fixture.whenStable（）；
我用另一种方式得到它们

您还在测试本身中添加了fixture.detectChanges（），这也是必要的。额外的whenStable调用似乎没有任何区别

最后，我使用fixture.autoDetectChanges（），这使得它在没有fixture.whenStable调用的情况下工作，如下所示：

beforeEach(async () => {
    const mockCentres = createMockCentres();
    const workers = { workers: createMockWorkers(), companyId: 22 };
    const mockWorkcentersService = jasmine.createSpyObj(["getWorkcentersList"]);
    mockWorkcentersService.getWorkcentersList.and.returnValue(Promise.resolve(mockCentres));

    TestBed.configureTestingModule({
      declarations: [CentreAssociateComponent],
      imports: [],
      providers: [
        //WorkcentersService,
        { provide: WorkcentersService, useValue: mockWorkcentersService },
        { provide: MAT_DIALOG_DATA, useValue: workers },
        { provide: MatDialogRef, useValue: {} }
      ]
    });

    fixture = TestBed.createComponent(CentreAssociateComponent);
    fixture.autoDetectChanges();
    component = fixture.componentInstance;

    await fixture.whenStable();
  });

  it('should render centres', async () => {
    const displayedUsers = fixture.nativeElement.querySelectorAll("ol li");
    expect(displayedUsers.length).toEqual(2);
  });

您希望它出现在哪个测试用例中？您的测试用例失败了吗？在测试“应该呈现中心”中。但是它应该在所有测试用例中都呈现。将其中一个测试用例的属性更改为适合，看看它是否呈现？你的意思是什么？它们中的任何一个都不会呈现。尝试下面的解决方案。这不会编译。MockWorkcenter服务在哪里实例化？以及如何用mock替换Workcenter服务？但你仍然没有声明mockWorkceINTERSSERVICE使代码现在无法编译，如果无法运行，请尝试从fixture获取服务。injector@AndyKing您检查了吗？它不工作。mockWorkcentersService=TestBed.get（WorkcentersService）；返回未定义
import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';

import { AppComponent } from './app.component';
import { WorkCenter } from './workCenter';
import { WorkcentersService } from './workcenters.service';

fdescribe('TestComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  let mockWorkcentersService: WorkcentersService;
  beforeEach(async () => {
    const mockCentres = createMockCentres();
    TestBed.configureTestingModule({
      declarations: [AppComponent],
      imports: [],
      providers: [
        WorkcentersService
      ]
    });

    fixture = TestBed.createComponent(AppComponent);
    mockWorkcentersService = TestBed.get(WorkcentersService);
    spyOn(mockWorkcentersService, 'getWorkcentersList').and.returnValue(new Promise((resolve, reject) => resolve(mockCentres)));
    component = fixture.componentInstance;
    await fixture.whenStable();
    fixture.detectChanges();
  });

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

  // Passes
  it('should render users', async () => {
    const displayedUsers = fixture.nativeElement.querySelectorAll('ul li');
    expect(displayedUsers.length).toEqual(3);
  });

  // Fails
  it('should render centres', async () => {
    expect(mockWorkcentersService.getWorkcentersList).toHaveBeenCalled();
    fixture.detectChanges();
    await fixture.whenStable();
    const displayedUsers = fixture.nativeElement.querySelectorAll('ol li');
    expect(displayedUsers.length).toEqual(2);
  });

  // Fails
  it('should display "hello"', fakeAsync(() => {
    fixture.detectChanges();
    tick();
    const displayedUsers = fixture.nativeElement.querySelectorAll('ol li');
    expect(displayedUsers.length).toEqual(2);
  }));

  function createMockCentres(): WorkCenter[] {
    const mockCentre1 = new WorkCenter(); mockCentre1.id = 1; mockCentre1.name = 'Test centre 1';
    const mockCentre2 = new WorkCenter(); mockCentre2.id = 2; mockCentre2.name = 'Test centre 2';
    return [mockCentre1, mockCentre2];
  }
});

beforeEach(async () => {
    const mockCentres = createMockCentres();
    const workers = { workers: createMockWorkers(), companyId: 22 };
    const mockWorkcentersService = jasmine.createSpyObj(["getWorkcentersList"]);
    mockWorkcentersService.getWorkcentersList.and.returnValue(Promise.resolve(mockCentres));

    TestBed.configureTestingModule({
      declarations: [CentreAssociateComponent],
      imports: [],
      providers: [
        //WorkcentersService,
        { provide: WorkcentersService, useValue: mockWorkcentersService },
        { provide: MAT_DIALOG_DATA, useValue: workers },
        { provide: MatDialogRef, useValue: {} }
      ]
    });

    fixture = TestBed.createComponent(CentreAssociateComponent);
    fixture.autoDetectChanges();
    component = fixture.componentInstance;

    await fixture.whenStable();
  });

  it('should render centres', async () => {
    const displayedUsers = fixture.nativeElement.querySelectorAll("ol li");
    expect(displayedUsers.length).toEqual(2);
  });