Test case for mat-menu.

[pradhanadi]

So I have a component that uses mat-menu. When I call fireEvent.click(), I get an error: TestingLibraryElementError: Unable to find role="menu" in console.

test('it should open pages menu on button click', async () => {
  
  let component = await render(PaginationComponent, {
    imports:[MaterialModule]
  });
  let buttonCLick = fireEvent.click(screen.getByTestId('openChangePageSizeMenu'));
  expect(buttonCLick).toBeTruthy();

  await screen.findByRole('menu');

});

This is the code that I wrote. Can someone help me out? I am fairly new in Testing.

Thanks.

[timdeschryver]

Can you create a runnable reproduction @pradhanadi ? Either in this repository, or somewhere else.

[pradhanadi]

Can you create a runnable reproduction @pradhanadi ? Either in this repository, or somewhere else.

Hi @timdeschryver, I have created a repo.
Link: https://github.com/pradhanadi/angular-material, branch: dev

This code is pretty much similar to what I am trying to do in my actual code. Please go ahead and check.

I am using jest and @testing-library/angular for running my test cases.

[timdeschryver]

This is because the menu is hidden to testing library, as a fix you can do the following.

screen.getByRole('menu', { hidden: true });

[pradhanadi]

Will this work for mat dialog as well? Getting same error for mat-dialog

[pradhanadi]

This is because the menu is hidden to testing library, as a fix you can do the following.

screen.getByRole('menu', { hidden: true });

This worked!. Thanks @timdeschryver :)

[timdeschryver]

Yes, it will work.
You can also configure TL to have hidden true as default, so you don't have to repeat it in tests.

I think this is due to the overlay of material, but i'll have to investigate it more to be sure.

configure({
  dom: {
    defaultHidden: true,
  },
});

[pradhanadi]

Can you also help me out with service test case for mat dialog? I'll share the code.

[pradhanadi]

Yes, it will work.
You can also configure TL to have hidden true as default, so you don't have to repeat it in tests.

I think this is due to the overlay of material, but i'll have to investigate it more to be sure.

configure({
  dom: {
    defaultHidden: true,
  },
});

Yes it worked with mat-dialog as well. Can't believe {hidden:true} was the solution my team and me were not able to find.