fix: Allow DS dropdown to have custom data-test attributes (#5284)

Co-authored-by: Geoffroy Baccarini <[email protected]>
Talend · Apr 23, 2024 · 25fb283 · 25fb283
1 parent 4998047
commit 25fb283
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 8 deletions.
diff --git a/.changeset/fifty-fishes-shake.md b/.changeset/fifty-fishes-shake.md
@@ -0,0 +1,5 @@
+---
+"@talend/design-system": patch
+---
+
+Allow Design System dropdown to have custom data-test attributes
diff --git a/packages/design-system/src/components/Dropdown/Dropdown.test.tsx b/packages/design-system/src/components/Dropdown/Dropdown.test.tsx
@@ -48,6 +48,8 @@ describe('Dropdown', () => {
 							{
 								label: 'Link as',
 								type: 'link',
+								'data-testid': 'link-as',
+								'data-test': 'link-as',
 								as: <RouterLink to="/route" />,
 							},
 						]}

diff --git a/packages/design-system/src/components/Dropdown/Dropdown.tsx b/packages/design-system/src/components/Dropdown/Dropdown.tsx
@@ -114,6 +114,8 @@ export const Dropdown = ({
 						const id = `${label}-${index}`;
 						return (
 							<DropdownButton
+								data-testid={`${menuItemTestId}.${id}`}
+								data-test={`${menuItemTest}.${id}`}
 								{...entryRest}
 								// {...menu}
 								onClick={(event: MouseEvent<HTMLButtonElement> | KeyboardEvent) => {
@@ -123,8 +125,6 @@ export const Dropdown = ({
 								key={uuid}
 								tabIndex={0}
 								id={uuid}
-								data-testid={`${menuItemTestId}.${id}`}
-								data-test={`${menuItemTest}.${id}`}
 							>
 								{label}
 							</DropdownButton>
@@ -161,6 +161,8 @@ export const Dropdown = ({
 					const id = `${label}-${index}`;
 					return (
 						<DropdownLink
+							data-testid={`${menuItemTestId}.${id}`}
+							data-test={`${menuItemTest}.${id}`}
 							as={as}
 							{...entryRest}
 							// {...menu}
@@ -172,8 +174,6 @@ export const Dropdown = ({
 									entry.onClick(event);
 								}
 							}}
-							data-testid={`${menuItemTestId}.${id}`}
-							data-test={`${menuItemTest}.${id}`}
 						>
 							{label}
 						</DropdownLink>

diff --git a/packages/design-system/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/packages/design-system/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -116,8 +116,8 @@ exports[`Dropdown should render a11y html 1`] = `
         </button>
         <a
           class="theme-linkable theme-dropdownEntry"
-          data-test="dropdown.menuitem.Link as-5"
-          data-testid="dropdown.menuitem.Link as-5"
+          data-test="link-as"
+          data-testid="link-as"
           href="/route"
           id="mocked-uuid-11"
         >

diff --git a/packages/design-system/src/stories/clickable/Dropdown.stories.tsx b/packages/design-system/src/stories/clickable/Dropdown.stories.tsx
@@ -1,6 +1,8 @@
-import { Story } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
 import { BrowserRouter, Link as RouterLink } from 'react-router-dom';
+
+import { action } from '@storybook/addon-actions';
+import { Story } from '@storybook/react';
+
 import { ButtonIcon, ButtonPrimary, ButtonSecondary, ButtonTertiary, Dropdown } from '../../';
 
 export default {
@@ -246,6 +248,8 @@ export const Basic = () => (
 						label: 'Router link with too much copy to create an overflow',
 						type: 'link',
 						icon: 'plus-stroke',
+						'data-testid': 'link-as',
+						'data-test': 'link-as',
 						as: <RouterLink to="/documentation" />,
 					},
 					{