How can I assert the contents of an Angular Material dialog in an integration test?

40 Views Asked by At

I'm trying to assert the contents of a material dialog in an integration test. I basically want to start with a component, click a button that calls MatDialog.open, and then assert that the dialog is displaying the right data. I can currently see that one dialog has been opened via the MatDialogHarness, but I cannot figure out how to, for example, count the amount of elements with a certain class.

Here's my current code:

describe('Members dialog', function testOpenMembers() {
    it('should open', async function shouldOpenMembersDialog() {
      const testUser: Partial<User> = {uid: '1', displayName: 'inline user name', email: '[email protected]'};
      (authService.user$ as Subject<User>).next(testUser as User);
      addTestActivity(mockStore, (activity) => {
        activity.confirmedTimes.ctid1.userDefaults = { 1: {status: 1, displayName: 'test name'} }, {uid: '1', displayName: 'inline user name'};
        activity.confirmedTimes.ctid1.admins.push({email: '[email protected]'});
      });
      const fixture = TestBed.createComponent(UpcomingSessionsComponent);
      fixture.detectChanges(false);
      const membersChip = fixture.debugElement.query(By.css('#members-chip'));
      membersChip.triggerEventHandler('click', membersChip.nativeElement);
      const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
      const dialogs = await loader.getAllHarnesses(MatDialogHarness);
      expect(dialogs.length).toBe(1);
    });
  });

The expect at the bottom is working, so I know it's creating a dialog. But how do I test the dialog to make sure it's displaying the right thing?

0

There are 0 best solutions below