带有嵌套组件作为MatDialog内容的单元测试组件

问题描述

我想对显示项目列表的角度分量ListViewComponent进行单元测试。在某些情况下，它会显示一个用于编辑特定项目的编辑按钮，并提供一个用于添加新项目的添加按钮。编辑和添加是通过显示ItemFormComponent的模式完成的。该组件具有注入的依存关系ItemService，可将后端的更改持久化。对话框的结果是新的或已编辑的项目，因此ListViewComponent可能会在必要时更新其内容。

在测试ListViewComponent时，我在模拟MatDialog部分时遇到了问题。

我的第一个想法是为ItemService提供一个模拟，但是测试启动失败了，因为它无法在真实的ItemService中找到由环境变量提供的参数，因此该模拟未提供给ItemFormComponent。

这是我的代码：

describe("ListViewComponent",() => {
let component: ListViewComponent;
let fixture: ComponentFixture<ListViewComponent>;

let itemServiceSpy: jasmine.SpyObj<ItemService>;


beforeEach(() => {
    Testbed.configureTestingModule({
        declarations: [ListViewComponent],providers: [
            {provide: ItemService,useValue: itemServiceSpy}
        ]
    })
        .compileComponents();

    itemServiceSpy = Testbed.inject(ItemService) as jasmine.SpyObj<ItemService>;
    fixture = Testbed.createComponent(ListViewComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
});

it("should create",() => {
    expect(component).toBeTruthy();
});

}）;

对话框的实例通过

完成

    this.dialogRef = this.matDialog.open<ItemFormComponent>(ItemFormComponent,{
        data: {
            item: item
        }
    });

我认为更好的方法是完全模拟MatDialog部分，以便我可以伪造对话框结果并检查ListViewComponent的行为。

但是我不知道如何解决这个问题。

欢迎您提出任何提示或解决方案，谢谢！

亲切的问候，安德烈亚斯（Andreas）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular mat-dialog testbed unit-testing