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

Question

我有一个 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 但没有运气，所以我真的希望这次能幸运一些.

Answer 1

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

  loader = TestbedHarnessEnvironment.documentRootLoader(fixture);

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

Angular test cannot find the open dialog

jasmine

karma-runner

karma-jasmine

angular-material

angular