diff --git a/.betterer.results b/.betterer.results index 3bffa9c22c8..15f0b6cd595 100644 --- a/.betterer.results +++ b/.betterer.results @@ -653,10 +653,6 @@ exports[`better eslint`] = { "packages/grafana-ui/src/components/MatchersUI/fieldMatchersUI.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], - "packages/grafana-ui/src/components/Menu/SubMenu.tsx:5381": [ - [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"], - [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "1"] - ], "packages/grafana-ui/src/components/Modal/ModalsContext.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"], diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts index 3d651915ede..d115697de25 100644 --- a/packages/grafana-e2e-selectors/src/selectors/components.ts +++ b/packages/grafana-e2e-selectors/src/selectors/components.ts @@ -72,8 +72,8 @@ export const Components = { MenuGroup: (title: string) => `${title} menu group`, MenuItem: (title: string) => `${title} menu item`, SubMenu: { - container: 'SubMenu container', - icon: 'SubMenu icon', + container: 'data-testid SubMenu container', + icon: 'data-testid SubMenu icon', }, }, Panels: { diff --git a/packages/grafana-ui/src/components/Menu/MenuItem.test.tsx b/packages/grafana-ui/src/components/Menu/MenuItem.test.tsx index 0a9c729903a..cb64a4e9603 100644 --- a/packages/grafana-ui/src/components/Menu/MenuItem.test.tsx +++ b/packages/grafana-ui/src/components/Menu/MenuItem.test.tsx @@ -39,12 +39,12 @@ describe('MenuItem', () => { render(getMenuItem({ childItems })); expect(screen.getByLabelText(selectors.components.Menu.MenuItem('Test')).nodeName).toBe('DIV'); - expect(screen.getByLabelText(selectors.components.Menu.SubMenu.icon)).toBeInTheDocument(); - expect(screen.queryByLabelText(selectors.components.Menu.SubMenu.container)).not.toBeInTheDocument(); + expect(screen.getByTestId(selectors.components.Menu.SubMenu.icon)).toBeInTheDocument(); + expect(screen.queryByTestId(selectors.components.Menu.SubMenu.container)).not.toBeInTheDocument(); fireEvent.mouseOver(screen.getByLabelText(selectors.components.Menu.MenuItem('Test'))); - const subMenuContainer = await screen.findByLabelText(selectors.components.Menu.SubMenu.container); + const subMenuContainer = await screen.findByTestId(selectors.components.Menu.SubMenu.container); expect(subMenuContainer).toBeInTheDocument(); expect(subMenuContainer.firstChild?.childNodes.length).toBe(2); @@ -72,10 +72,10 @@ describe('MenuItem', () => { render(getMenuItem({ childItems })); - expect(screen.queryByLabelText(selectors.components.Menu.SubMenu.container)).not.toBeInTheDocument(); + expect(screen.queryByTestId(selectors.components.Menu.SubMenu.container)).not.toBeInTheDocument(); fireEvent.keyDown(screen.getByLabelText(selectors.components.Menu.MenuItem('Test')), { key: 'ArrowRight' }); - expect(await screen.findByLabelText(selectors.components.Menu.SubMenu.container)).toBeInTheDocument(); + expect(await screen.findByTestId(selectors.components.Menu.SubMenu.container)).toBeInTheDocument(); }); }); diff --git a/packages/grafana-ui/src/components/Menu/SubMenu.test.tsx b/packages/grafana-ui/src/components/Menu/SubMenu.test.tsx index a7785fe8974..67ea2daa520 100644 --- a/packages/grafana-ui/src/components/Menu/SubMenu.test.tsx +++ b/packages/grafana-ui/src/components/Menu/SubMenu.test.tsx @@ -17,9 +17,9 @@ describe('SubMenu', () => { ); - expect(screen.getByLabelText(selectors.components.Menu.SubMenu.icon)).toBeInTheDocument(); + expect(screen.getByTestId(selectors.components.Menu.SubMenu.icon)).toBeInTheDocument(); - const subMenuContainer = await screen.findByLabelText(selectors.components.Menu.SubMenu.container); + const subMenuContainer = await screen.findByTestId(selectors.components.Menu.SubMenu.container); expect(subMenuContainer).toBeInTheDocument(); expect(subMenuContainer.firstChild?.childNodes.length).toBe(2); diff --git a/packages/grafana-ui/src/components/Menu/SubMenu.tsx b/packages/grafana-ui/src/components/Menu/SubMenu.tsx index 4159f62a071..5016f72b776 100644 --- a/packages/grafana-ui/src/components/Menu/SubMenu.tsx +++ b/packages/grafana-ui/src/components/Menu/SubMenu.tsx @@ -49,14 +49,14 @@ export const SubMenu = React.memo( return ( <> -
+
{isOpen && (