AgGrid Jest 单元测试 - 如何等待网格初始化答案

【问题标题】：AgGrid Jest unit test - how to wait for the grid initializationAgGrid Jest 单元测试 - 如何等待网格初始化
【发布时间】：2021-02-14 01:56:51
【问题描述】：

我正在为使用 AgGrid 的 Angular 组件编写开玩笑的单元测试。测试失败，因为使用 cellRenderer 的单元未完成初始化。

我尝试添加一个 tick() 调用，这使测试通过，但随后出现关于 7 timer(s) still in the queue 的错误。

我也尝试了await fixture.whenStable();，但结果不一致，有时测试通过，有时在调用expect 时失败，因为单元格未完成渲染。

在测试之前等待单元格呈现的正确方法是什么？

这是我使用 tick() 时的代码：

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

  beforeEach(fakeAsync(() => {
    TestBed.configureTestingModule({
      imports: [
        testingImports
      ],
      declarations: [MethodListComponent],
      providers: [
        { provide: MethodsService, useValue: mockMethodsService },
        { provide: AuthService, useValue: mockAuthService }
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    });

    fixture = TestBed.createComponent(MethodListComponent);
    component = fixture.componentInstance;

    // make sure all columns are rendered for the tests
    component.activeMethodsGrid.gridOptions = {...component.activeMethodsGrid.gridOptions, 'suppressColumnVirtualisation': true};
  }));

  it('test archiving a test method', fakeAsync( async () => {
    // trigger onInit()
    fixture.detectChanges();

    tick(20);

    const archiveButtons = fixture.nativeElement.querySelectorAll(
      'ag-grid-angular .anticon-container'
    );
    expect(archiveButtons.length).toBe(2);
  }));
});

这是我使用await fixture.whenStable时的单元测试：

  it('test archiving a test method', async(done) => {
    // trigger onInit()
    fixture.detectChanges();
    
    await fixture.whenStable();
    
    const archiveButtons = fixture.nativeElement.querySelectorAll(
      'ag-grid-angular .anticon-container'
    );
    expect(archiveButtons.length).toBe(2);

    done();
  });

【问题讨论】：

标签： angular jestjs ag-grid

【解决方案1】：

对于它的价值，事实证明await fixture.whenStable 代码 sn-p 有效并且测试通过了。它并不总是通过的原因是我在运行测试用例时对它们进行了一些更改。

【讨论】：