Angular 测试找不到打开的对话框

Angular test cannot find the open dialog

我有一个 angular 组件 (HostComponent),其中包含一些应该打开对话框的按钮。我正在使用 Angular 的 TestBed 为此 HostComponent 编写测试。在测试中,我 select 按钮,单击它并尝试断言打开了一个对话框。当我 运行 在浏览器中进行测试时(因为 Karma 提供测试),我可以看到一个对话框成功打开,但是我的测试仍然失败并显示错误:

Error: Failed to find element matching one of the following queries:
    (MatDialogHarness with host element matching selector: ".mat-dialog-container")

这是规范的深入版本:

describe('HostComponent', () => {
    let fixture: ComponentFixture<HostComponent>;
    let loader: HarnessLoader;

    beforeEach(() => {
        fixture = TestBed.configureTestingModule({
            declarations: [HostComponent, MyTestDialogComponent],
            providers: [FormBuilder],
            imports: [MatDialogModule, NoopAnimationsModule, MatAutocompleteModule, ReactiveFormsModule, MatSelectModule, MatInputModule]
        }).createComponent(WidgetGroupConfigComponent);

        loader = TestbedHarnessEnvironment.loader(fixture);
        fixture.detectChanges();
    });

    const buttonWithText = (text: string) => {
        const allButtons: HTMLButtonElement[] = fixture.debugElement.nativeElement.querySelectorAll('button');
        const allButtonsArr = [...allButtons];
        return allButtonsArr.find(button => button.innerText === text);
    };

    it('Opens the dialog when button is clicked', fakeAsync(async () => {
        const testButton = buttonWithText('TestTimberDevice01')!;
        expect(testButton).toBeDefined(); // passes

        testButton.click();
        tick();
        fixture.detectChanges();

        const dialog = await loader.getHarness(MatDialogHarness); // fails here
        expect(dialog).toBeDefined();

    }));
});

这是显示即使测试失败也打开了对话框的屏幕截图:

我对 Angular 的测试功能真的很困惑,我试过问类似的问题 before 但没有运气,所以我真的希望这次能幸运一些.

对话框在组件夹具之外呈现,所以这里的解决方法是使用 documentRootLoader 而不是简单的夹具

  loader = TestbedHarnessEnvironment.documentRootLoader(fixture);