IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-22 08:56:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

Frontend: Migrate SubMenu.tsx: from aria-label e2e selectors to data-testid (#79662)

Browse Source
This commit is contained in:
Jamin 2023-12-21 11:52:57 +00:00 committed by GitHub
parent c46da8ea9b
commit 38f176edfb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 11 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.betterer.results
View File

@ -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"],

4
packages/grafana-e2e-selectors/src/selectors/components.ts
View File

@ -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: {

10
packages/grafana-ui/src/components/Menu/MenuItem.test.tsx
View File

@ -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();
});
});

4
packages/grafana-ui/src/components/Menu/SubMenu.test.tsx
View File

@ -17,9 +17,9 @@ describe('SubMenu', () => {
<SubMenu items={items} isOpen={true} openedWithArrow={false} setOpenedWithArrow={jest.fn()} close={jest.fn()} />
);
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);

4
packages/grafana-ui/src/components/Menu/SubMenu.tsx
View File

@ -49,14 +49,14 @@ export const SubMenu = React.memo(
return (
<>
<div className={styles.iconWrapper} aria-hidden aria-label={selectors.components.Menu.SubMenu.icon}>
<div className={styles.iconWrapper} aria-hidden data-testid={selectors.components.Menu.SubMenu.icon}>
<Icon name="angle-right" className={styles.icon} />
</div>
{isOpen && (
<div
ref={localRef}
className={cx(styles.subMenu, { [styles.pushLeft]: pushLeft })}
aria-label={selectors.components.Menu.SubMenu.container}
data-testid={selectors.components.Menu.SubMenu.container}
style={customStyle}
>
<div tabIndex={-1} className={styles.itemsWrapper} role="menu" onKeyDown={handleKeys}>