IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -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": [ "packages/grafana-ui/src/components/MatchersUI/fieldMatchersUI.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"] [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": [ "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.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"], [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`, MenuGroup: (title: string) => `${title} menu group`,
MenuItem: (title: string) => `${title} menu item`, MenuItem: (title: string) => `${title} menu item`,
SubMenu: { SubMenu: {
container: 'SubMenu container', container: 'data-testid SubMenu container',
icon: 'SubMenu icon', icon: 'data-testid SubMenu icon',
}, },
}, },
Panels: { Panels: {

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

@ -39,12 +39,12 @@ describe('MenuItem', () => {
render(getMenuItem({ childItems })); render(getMenuItem({ childItems }));
expect(screen.getByLabelText(selectors.components.Menu.MenuItem('Test')).nodeName).toBe('DIV'); expect(screen.getByLabelText(selectors.components.Menu.MenuItem('Test')).nodeName).toBe('DIV');
expect(screen.getByLabelText(selectors.components.Menu.SubMenu.icon)).toBeInTheDocument(); expect(screen.getByTestId(selectors.components.Menu.SubMenu.icon)).toBeInTheDocument();
expect(screen.queryByLabelText(selectors.components.Menu.SubMenu.container)).not.toBeInTheDocument(); expect(screen.queryByTestId(selectors.components.Menu.SubMenu.container)).not.toBeInTheDocument();
fireEvent.mouseOver(screen.getByLabelText(selectors.components.Menu.MenuItem('Test'))); 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).toBeInTheDocument();
expect(subMenuContainer.firstChild?.childNodes.length).toBe(2); expect(subMenuContainer.firstChild?.childNodes.length).toBe(2);
@ -72,10 +72,10 @@ describe('MenuItem', () => {
render(getMenuItem({ childItems })); 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' }); 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()} /> <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).toBeInTheDocument();
expect(subMenuContainer.firstChild?.childNodes.length).toBe(2); 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 ( 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} /> <Icon name="angle-right" className={styles.icon} />
</div> </div>
{isOpen && ( {isOpen && (
<div <div
ref={localRef} ref={localRef}
className={cx(styles.subMenu, { [styles.pushLeft]: pushLeft })} className={cx(styles.subMenu, { [styles.pushLeft]: pushLeft })}
aria-label={selectors.components.Menu.SubMenu.container} data-testid={selectors.components.Menu.SubMenu.container}
style={customStyle} style={customStyle}
> >
<div tabIndex={-1} className={styles.itemsWrapper} role="menu" onKeyDown={handleKeys}> <div tabIndex={-1} className={styles.itemsWrapper} role="menu" onKeyDown={handleKeys}>