Test the effect of opening an angular material dialog and closing it

Question

I've an openDialog method inside a component that opens a Material Angular dialog, and when the dialog is closed, updates its state:

class TodoAdderComponent implements OnInit {
  newTodoTitle: string = '';

  createNewTodo() {
    // redacted
  }

  openDialog() {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.closeOnNavigation = false;
    dialogConfig.autoFocus = true;
    dialogConfig.data = { title: this.newTodoTitle };

    const dialogRef = this.dialog.open(TodoAdderDialog, dialogConfig);

    dialogRef.afterClosed().subscribe((result) => {
      this.newTodoTitle = result.title;
      if (result.added) {
        this.createNewTodo();
      }
    });
  }

  constructor(private dialog: MatDialog) {}
  ngOnInit(): void {}
}

I've the following unit test to test the behavior of openDialog:

it('should update newTodoTitle when dialog is closed by cancel button', async () => {
  component.openDialog();
  const inputBox = await loader.getHarness(MatInputHarness);
  const [closeBtn, _] = await loader.getAllHarnesses(MatButtonHarness);

  const mockTitle = 'a mock tittle for testing';
  await inputBox.setValue(mockTitle);

  await closeBtn.click();
  expect(component.newTodoTitle).toBe(mockTitle);
});

newTodoTitle is updated if I test by hand, but this unit test fails. The problem is that openDialog is called on the first line, and by the time the rest of the unit test executes, it has already finished executing; during the unit test, it doesn't wait for the closure of the dialog before calling the subscribe method of afterClose().

How can I fix the test to test the effect of openDialog?

Answer 1

Seems there is a bug in Parcel js v2 somehow. Compiling this from command line with the sass module only works perfectly. I created an issue on this on Parcels github.