Merge pull request #1372 from City-of-Helsinki/hds-2448-logo-testid

HDS-2448: Fix data-test-id with Logo
City-of-Helsinki · Oct 8, 2024 · cd22523 · cd22523
2 parents 4cfc78e + c20fbe8
commit cd22523
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,11 +20,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 #### Changed
 
 Changes that are not related to specific components
+
 - [Component] What has been changed
 
 #### Fixed
 
-- [Component] What bugs/typos are fixed?
+- [Logo] Fixed data-testid attribute not being set with native props
 
 ### Core
 
@@ -39,6 +40,7 @@ Changes that are not related to specific components
 #### Changed
 
 Changes that are not related to specific components
+
 - [Component] What has been changed
 
 #### Fixed
@@ -58,6 +60,7 @@ Changes that are not related to specific components
 #### Changed
 
 Changes that are not related to specific components
+
 - [Component] What has been changed
 
 #### Fixed
@@ -77,6 +80,7 @@ Changes that are not related to specific components
 #### Changed
 
 Changes that are not related to specific components
+
 - [Component] What has been changed
 
 #### Fixed
@@ -96,6 +100,7 @@ Changes that are not related to specific components
 #### Changed
 
 Changes that are not related to specific components
+
 - [Component] What has been changed
 
 #### Fixed
@@ -115,6 +120,7 @@ Changes that are not related to specific components
 #### Changed
 
 Changes that are not related to specific components
+
 - [Component] What has been changed
 
 #### Fixed
@@ -134,6 +140,7 @@ Changes that are not related to specific components
 #### Changed
 
 Changes that are not related to specific components
+
 - [Component] What has been changed
 
 #### Fixed

diff --git a/packages/react/src/components/logo/Logo.test.tsx b/packages/react/src/components/logo/Logo.test.tsx
@@ -28,6 +28,23 @@ describe('<Logo /> spec', () => {
  getElementAttributesMisMatches(element, {
  ...imgProps,
  dataTestId: undefined,
+ 'data-testid': imgProps.dataTestId,
+ } as HTMLAttributes<HTMLImageElement>),
+ ).toHaveLength(0);
+ });
+ it('The data-testid works and overrides dataTestId', async () => {
+ const propsWithDataTestId = {
+ 'data-testid': 'data-testid',
+ dataTestId: 'dataTestId',
+ };
+ const { getByTestId } = render(
+ <Logo {...propsWithDataTestId} src="dummyPath" alt="logo" title="Helsingin kaupunki" />,
+ );
+ const element = getByTestId(propsWithDataTestId['data-testid']);
+ expect(
+ getElementAttributesMisMatches(element, {
+ ...propsWithDataTestId,
+ dataTestId: undefined,
  } as HTMLAttributes<HTMLImageElement>),
  ).toHaveLength(0);
  });

diff --git a/packages/react/src/components/logo/Logo.tsx b/packages/react/src/components/logo/Logo.tsx
@@ -81,12 +81,12 @@ export type LogoProps = AllElementPropsWithoutRef<'img'> &
 
 export const Logo = ({ alt, className, dataTestId, size = 'full', style, ...rest }: LogoProps) => {
  const props = {
+ 'data-testid': dataTestId,
  ...rest,
  alt,
  size,
  className: classNames(styles.logo, size !== 'full' && styles[size], className),
  style,
- 'data-testid': dataTestId,
  };
 
  return <img alt={alt} {...props} />;