[menu]: Using menu in test environments (Cypress, React Testing library) causes error

[rvsia]

Bug Description

Hello I am using Cypress to test webcomponents-react menu component

        cy.get('[data-cy^="open-menu"]')
            .eq(0)
            .click() // open first menu 
        cy.get('[role="menuitem"]').eq(0).click({ force: true }) // clicks on the first item there

This causes following error to happen:

TypeError
Cannot read properties of undefined (reading 'close')
Call Stack
 Menu._itemClick
  node_modules/@ui5/webcomponents/dist/Menu.js:351:31
 EventPart.handleEvent
  node_modules/lit-html/development/lit-html.js:1336:35
 List._fireEvent
  node_modules/@ui5/webcomponents-base/dist/UI5Element.js:702:44
 List.fireEvent
  node_modules/@ui5/webcomponents-base/dist/UI5Element.js:687:34
 List.onItemPress
  node_modules/@ui5/webcomponents/dist/List.js:523:19
 EventPart.handleEvent
  node_modules/lit-html/development/lit-html.js:1336:35
 StandardListItem._fireEvent
  node_modules/@ui5/webcomponents-base/dist/UI5Element.js:702:44
 StandardListItem.fireEvent
  node_modules/@ui5/webcomponents-base/dist/UI5Element.js:687:34
 StandardListItem.fireItemPress
  node_modules/@ui5/webcomponents/dist/ListItem.js:179:14
 StandardListItem._onclick
  node_modules/@ui5/webcomponents/dist/ListItem.js:143:14

it happens both in Cypress and React Testing Library (Jest) environment

Affected Component

menu

Expected Behaviour

No error should appear

Isolated Example

No response

Steps to Reproduce

1. Create a menu component
2. In test environment click on one of the menu item
3. Error appears (in Cypress not always)

Log Output, Stack Trace or Screenshots

TypeError Cannot read properties of undefined (reading 'close') Call Stack  Menu._itemClick   node_modules/@ui5/webcomponents/dist/Menu.js:351:31  EventPart.handleEvent   node_modules/lit-html/development/lit-html.js:1336:35  List._fireEvent   node_modules/@ui5/webcomponents-base/dist/UI5Element.js:702:44  List.fireEvent   node_modules/@ui5/webcomponents-base/dist/UI5Element.js:687:34  List.onItemPress   node_modules/@ui5/webcomponents/dist/List.js:523:19  EventPart.handleEvent   node_modules/lit-html/development/lit-html.js:1336:35  StandardListItem._fireEvent   node_modules/@ui5/webcomponents-base/dist/UI5Element.js:702:44  StandardListItem.fireEvent   node_modules/@ui5/webcomponents-base/dist/UI5Element.js:687:34  StandardListItem.fireItemPress   node_modules/@ui5/webcomponents/dist/ListItem.js:179:14  StandardListItem._onclick   node_modules/@ui5/webcomponents/dist/ListItem.js:143:14

Priority

High

UI5 Web Components Version

1.15.1

Browser

Chrome

Operating System

Test environment

Additional Context

No response

Organization

SAP Signavio

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[IlianaB]

Hello @Lukas742 , @MarcusNotheis , could you please have a look?

Regards, Iliana

[MarcusNotheis]

Hi @IlianaB,

this issue is reproducible using plain UI5 Web Components, so I you can remove the assignment of Lukas and myself 🙂

Codesandbox: https://codesandbox.io/p/sandbox/jolly-mcclintock-d2z7xp?file=%2Fsrc%2FApp.tsx

How to reproduce:

1. Download the sandbox to your computer
2. install dependencies running yarn install
3. run cypress tests using yarn test
4. see the error

[nnaydenow]

Hi @rvsia,

Seems like cypress is clicking the menu item when the popover is still not opened. We have attribute which says when the menu is opened and it will help with your case:

    cy.get('ui5-menu')
      .should('have.attr', "open");

I'm also forwarding the issue to the team who maintain the component in order to check if this is an issue at all.

BR, Nayden

[rvsia]

@nnaydenow

Still the same results to me:

        cy.get('ui5-menu').should('have.attr', 'open')
        cy.get('[role="menuitem"]')
            .eq(0)
            .click({ force: true })

Cannot read properties of undefined (reading 'close')

[nnaydenow]

Hi @rvsia,

I'm using the following code and it works to me. Could you please check it?

    cy.get("#btnOpenBasic").click();
    cy.get("#menuBasic").should("have.attr", "open");
    cy.get('[role="menuitem"]').eq(0).click({ force: true }); // clicks on the first item there

[rvsia]

@nnaydenow That's the same code I used in the comment before - just be aware, this is flaky, it's not failing all the time.