如何在Angular集成测试中断言Material对话框内容？

你已经成功检测到对话框打开，接下来可以通过以下步骤断言对话框内容的正确性：

核心步骤与代码示例 #

修改你的测试代码，添加内容断言逻辑：

describe('Members dialog', function testOpenMembers() {
    it('should open and display correct content', async function shouldOpenMembersDialog() {
      const testUser: Partial<User> = {uid: '1', displayName: 'inline user name', email: 'test@email.com'};
      (authService.user$ as Subject<User>).next(testUser as User);
      addTestActivity(mockStore, (activity) => {
        activity.confirmedTimes.ctid1.userDefaults = { 1: {status: 1, displayName: 'test name'} };
        activity.confirmedTimes.ctid1.admins.push({email: 'test@email.com'});
      });
      
      const fixture = TestBed.createComponent(UpcomingSessionsComponent);
      fixture.detectChanges();
      
      // 触发打开对话框的操作
      const membersChip = fixture.debugElement.query(By.css('#members-chip'));
      membersChip.triggerEventHandler('click', null);
      
      // 等待异步渲染完成
      fixture.detectChanges();
      await fixture.whenStable();

      // 获取对话框 harness
      const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
      const dialogs = await loader.getAllHarnesses(MatDialogHarness);
      expect(dialogs.length).toBe(1);
      
      // 拿到目标对话框实例
      const dialog = dialogs[0];

      // --------------------------
      // 方式1：统计指定类的元素数量
      // --------------------------
      const dialogHost = await dialog.getHost();
      // 查询所有带有.member-item类的元素
      const memberElements = await dialogHost.queryAll(By.css('.member-item'));
      // 断言数量符合预期
      expect(memberElements.length).toBe(2);

      // --------------------------
      // 方式2：断言特定文本内容存在
      // --------------------------
      const dialogContent = await dialogHost.text();
      expect(dialogContent).toContain('test@email.com');
      expect(dialogContent).toContain('test name');

      // --------------------------
      // 方式3：用Material组件Harness查询（推荐）
      // --------------------------
      // 如果对话框内用了Material组件（比如MatList），使用对应Harness更稳定
      const dialogLoader = await dialog.getRootHarnessLoader();
      const listItems = await dialogLoader.getAllHarnesses(MatListItemHarness);
      expect(listItems.length).toBe(2);

      // 还可以获取单个列表项的文本进行断言
      const firstItem = listItems[0];
      expect(await firstItem.getText()).toContain('test name');
    });
  });

关键说明 #

• await fixture.whenStable()：确保对话框的异步渲染完成，避免断言时DOM还未更新
• dialog.getHost()：获取对话框的宿主元素，以此为根节点查询内部内容
• 使用Material组件Harness（如MatListItemHarness）：相比直接查询DOM类名，这种方式不受组件内部DOM结构变化影响，测试更健壮
• 若需要测试自定义组件，也可以在对话框的根loader中获取自定义组件的Harness

内容的提问来源于stack exchange，提问作者Richard Castle