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);
我有一个 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);