Fix: Allow to pass and override the data-testid prop of SvgIcon compo…

…nents

The data-testid was hardcoded to `svg-icon` even it should have been
overridden in the more specific component.

src/web/components/icon/CloneIcon.jsx

@@ -9,7 +9,7 @@ import withSvgIcon from 'web/components/icon/withSvgIcon';
 const CloneIconComponent = withSvgIcon()(Icon);
 
 const CloneIcon = props => (
-  <CloneIconComponent {...props} data-testid="clone-icon" />
+  <CloneIconComponent data-testid="clone-icon" {...props} />
 );
 
 export default CloneIcon;

src/web/components/icon/DeleteIcon.jsx

@@ -12,7 +12,6 @@ import withSvgIcon from 'web/components/icon/withSvgIcon';
 import PropTypes from 'web/utils/PropTypes';
 import SelectionType from 'web/utils/SelectionType';
 
-
 const DeleteSvgIcon = withSvgIcon()(props => (
   <IconWithStrokeWidth
     IconComponent={Icon}
@@ -31,7 +30,7 @@ const DeleteIcon = ({selectionType, title, ...props}) => {
       title = _('Delete all filtered');
     }
   }
-  return <DeleteSvgIcon {...props} title={title} />;
+  return <DeleteSvgIcon data-testid="delete-icon" {...props} title={title} />;
 };
 
 DeleteIcon.propTypes = {

src/web/components/icon/EditIcon.jsx

@@ -7,12 +7,12 @@ import {Pencil as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 import withSvgIcon from 'web/components/icon/withSvgIcon';
 
-const EditIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth
-    IconComponent={Icon}
-    {...props}
-    data-testid="edit-icon"
-  />
+const EditIconComponent = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
 ));
 
+const EditIcon = props => (
+  <EditIconComponent data-testid="edit-icon" {...props} />
+);
+
 export default EditIcon;

src/web/components/icon/ExportIcon.jsx

@@ -11,7 +11,6 @@ import withSvgIcon from 'web/components/icon/withSvgIcon';
 import PropTypes from 'web/utils/PropTypes';
 import SelectionType from 'web/utils/SelectionType';
 
-
 const ExportSvgIcon = withSvgIcon()(props => (
   <IconWithStrokeWidth IconComponent={Icon} {...props} />
 ));
@@ -27,8 +26,8 @@ const ExportIcon = ({selectionType, title, ...other}) => {
   }
   return (
     <ExportSvgIcon
-      {...other}
       data-testid="export-icon"
+      {...other}
       title={download_title}
     />
   );

src/web/components/icon/FilterIcon.jsx

@@ -7,12 +7,12 @@ import {Filter as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 import withSvgIcon from 'web/components/icon/withSvgIcon';
 
-const FilterIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth
-    IconComponent={Icon}
-    {...props}
-    data-testid="filter-icon"
-  />
+const FilterIconComponent = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
 ));
 
+const FilterIcon = props => (
+  <FilterIconComponent data-testid="filter-icon" {...props} />
+);
+
 export default FilterIcon;

src/web/components/icon/HelpIcon.jsx

@@ -7,12 +7,12 @@ import {HelpCircle as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 import withSvgIcon from 'web/components/icon/withSvgIcon';
 
-const HelpIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth
-    IconComponent={Icon}
-    {...props}
-    data-testid="help-icon"
-  />
+const HelpIconComponent = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
 ));
 
+const HelpIcon = props => (
+  <HelpIconComponent data-testid="help-icon" {...props} />
+);
+
 export default HelpIcon;

src/web/components/icon/NewIcon.jsx

@@ -8,6 +8,6 @@ import withSvgIcon from 'web/components/icon/withSvgIcon';
 
 const NewIconComponent = withSvgIcon()(Icon);
 
-const NewIcon = props => <NewIconComponent {...props} data-testid="new-icon" />;
+const NewIcon = props => <NewIconComponent data-testid="new-icon" {...props} />;
 
 export default NewIcon;

src/web/components/icon/ResetIcon.jsx

@@ -7,12 +7,12 @@ import {RotateCcw as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 import withSvgIcon from 'web/components/icon/withSvgIcon';
 
-const ResetIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth
-    IconComponent={Icon}
-    {...props}
-    data-testid="reset-icon"
-  />
+const ResetIconComponent = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
 ));
 
+const ResetIcon = props => (
+  <ResetIconComponent data-testid="reset-icon" {...props} />
+);
+
 export default ResetIcon;

src/web/components/icon/ResumeIcon.jsx

@@ -7,12 +7,12 @@ import {StepForward as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 import withSvgIcon from 'web/components/icon/withSvgIcon';
 
-const ResumeIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth
-    IconComponent={Icon}
-    {...props}
-    data-testid="resume-icon"
-  />
+const ResumeIconComponent = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
 ));
 
+const ResumeIcon = props => (
+  <ResumeIconComponent data-testid="resume-icon" {...props} />
+);
+
 export default ResumeIcon;

src/web/components/icon/Settings2.jsx

@@ -7,12 +7,12 @@ import {Settings2 as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 import withSvgIcon from 'web/components/icon/withSvgIcon';
 
-const Settings2 = withSvgIcon()(props => (
-  <IconWithStrokeWidth
-    {...props}
-    IconComponent={Icon}
-    data-testid="settings-2-icon"
-  />
+const Settings2Component = withSvgIcon()(props => (
+  <IconWithStrokeWidth {...props} IconComponent={Icon} />
 ));
 
+const Settings2 = props => (
+  <Settings2Component data-testid="settings-2-icon" {...props} />
+);
+
 export default Settings2;

src/web/components/icon/StartIcon.jsx

@@ -7,12 +7,12 @@ import {Play as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 import withSvgIcon from 'web/components/icon/withSvgIcon';
 
-const StartIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth
-    IconComponent={Icon}
-    {...props}
-    data-testid="start-icon"
-  />
+const StartIconComponent = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
 ));
 
+const StartIcon = props => (
+  <StartIconComponent data-testid="start-icon" {...props} />
+);
+
 export default StartIcon;

src/web/components/icon/StopIcon.jsx

@@ -7,12 +7,12 @@ import {Square as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 import withSvgIcon from 'web/components/icon/withSvgIcon';
 
-const StopIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth
-    IconComponent={Icon}
-    {...props}
-    data-testid="stop-icon"
-  />
+const StopIconComponent = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
 ));
 
+const StopIcon = props => (
+  <StopIconComponent data-testid="stop-icon" {...props} />
+);
+
 export default StopIcon;

src/web/components/icon/SvgIcon.jsx

@@ -87,6 +87,7 @@ const SvgIcon = ({
   onClick,
   size,
   color = Theme.black,
+  ['data-testid']: dataTestId = 'svg-icon',
   ...other
 }) => {
   const [loading, setLoading] = useStateWithMountCheck(false);
@@ -125,7 +126,7 @@ const SvgIcon = ({
       $isLoading={loading}
       $width={width}
       color={color}
-      data-testid="svg-icon"
+      data-testid={dataTestId}
       title={title}
       onClick={
         isDefined(onClick) && !disabled && !loading ? handleClick : undefined

src/web/components/icon/Testing.jsx

@@ -4,11 +4,12 @@
  */
 
 import {test, expect, testing} from '@gsa/testing';
+import {isDefined} from 'gmp/utils/identity';
 import {ICON_SIZE_SMALL_PIXELS} from 'web/hooks/useIconSize';
 import {render, fireEvent, act} from 'web/utils/Testing';
 import Theme from 'web/utils/Theme';
 
-export const testIcon = Icon => {
+export const testIcon = (Icon, {dataTestId, customDataTestId} = {}) => {
   test('should render with default width and height', () => {
     const {element} = render(<Icon />);
 
@@ -91,4 +92,20 @@ export const testIcon = Icon => {
     expect(element).toHaveAttribute('title', 'foo');
     expect(svgElement).toHaveAttribute('title', 'foo');
   });
+
+  if (isDefined(dataTestId)) {
+    test('should render with default data-testid', () => {
+      const {element} = render(<Icon />);
+
+      expect(element).toHaveAttribute('data-testid', dataTestId);
+    });
+  }
+
+  if (isDefined(customDataTestId)) {
+    test('should render with custom data-testid', () => {
+      const {element} = render(<Icon data-testid={customDataTestId} />);
+
+      expect(element).toHaveAttribute('data-testid', customDataTestId);
+    });
+  }
 };

src/web/components/icon/TrashCanIcon.jsx

@@ -7,12 +7,12 @@ import {Trash2 as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 import withSvgIcon from 'web/components/icon/withSvgIcon';
 
-const TrashcanIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth
-    IconComponent={Icon}
-    {...props}
-    data-testid="trashcan-icon"
-  />
+const TrashcanIconComponent = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
 ));
 
+const TrashcanIcon = props => (
+  <TrashcanIconComponent data-testid="trashcan-icon" {...props} />
+);
+
 export default TrashcanIcon;

src/web/components/icon/TrashIcon.jsx

@@ -20,7 +20,7 @@ const TrashIcon = ({selectionType, title, ...other}) => {
       title = _('Move all filtered to trashcan');
     }
   }
-  return <TrashcanIcon {...other} data-testid="tash-icon" title={title} />;
+  return <TrashcanIcon data-testid="trash-icon" {...other} title={title} />;
 };
 
 TrashIcon.propTypes = {

src/web/components/icon/TrendMoreIcon.jsx

@@ -9,6 +9,6 @@ import withSvgIcon from 'web/components/icon/withSvgIcon';
 const TrendMoreIconComponent = withSvgIcon()(Icon);
 
 const TrendMoreIcon = props => (
-  <TrendMoreIconComponent {...props} data-testid="trend-more-icon" />
+  <TrendMoreIconComponent data-testid="trend-more-icon" {...props} />
 );
 export default TrendMoreIcon;

src/web/components/icon/TrendNoChangeIcon.jsx

@@ -9,7 +9,7 @@ import withSvgIcon from 'web/components/icon/withSvgIcon';
 const TrendNoChangeIconComponent = withSvgIcon()(Icon);
 
 const TrendNoChangeIcon = props => (
-  <TrendNoChangeIconComponent {...props} data-testid="trend-nochange-icon" />
+  <TrendNoChangeIconComponent data-testid="trend-nochange-icon" {...props} />
 );
 
 export default TrendNoChangeIcon;

src/web/components/icon/UploadIcon.jsx

@@ -7,12 +7,12 @@ import {Upload as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 import withSvgIcon from 'web/components/icon/withSvgIcon';
 
-const UploadIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth
-    IconComponent={Icon}
-    {...props}
-    data-testid="upload-icon"
-  />
+const UploadIconComponent = withSvgIcon()(props => (
+  <IconWithStrokeWidth IconComponent={Icon} {...props} />
 ));
 
+const UploadIcon = props => (
+  <UploadIconComponent data-testid="upload-icon" {...props} />
+);
+
 export default UploadIcon;

src/web/components/icon/__tests__/CloneIcon.test.jsx

@@ -7,7 +7,9 @@ import {describe} from '@gsa/testing';
 import CloneIcon from 'web/components/icon/CloneIcon';
 import {testIcon} from 'web/components/icon/Testing';
 
-
 describe('CloneIcon component tests', () => {
-  testIcon(CloneIcon);
+  testIcon(CloneIcon, {
+    dataTestId: 'clone-icon',
+    customDataTestId: 'custom-clone-icon',
+  });
 });

src/web/components/icon/__tests__/DeleteIcon.test.jsx

@@ -7,7 +7,9 @@ import {describe} from '@gsa/testing';
 import DeleteIcon from 'web/components/icon/DeleteIcon';
 import {testIcon} from 'web/components/icon/Testing';
 
-
 describe('DeleteIcon component tests', () => {
-  testIcon(DeleteIcon);
+  testIcon(DeleteIcon, {
+    dataTestId: 'delete-icon',
+    customDataTestId: 'custom-delete-icon',
+  });
 });

src/web/components/icon/__tests__/EditIcon.test.jsx

@@ -7,7 +7,9 @@ import {describe} from '@gsa/testing';
 import EditIcon from 'web/components/icon/EditIcon';
 import {testIcon} from 'web/components/icon/Testing';
 
-
 describe('EditIcon component tests', () => {
-  testIcon(EditIcon);
+  testIcon(EditIcon, {
+    dataTestId: 'edit-icon',
+    customDataTestId: 'custom-edit-icon',
+  });
 });

src/web/components/icon/__tests__/ExportIcon.test.jsx

@@ -7,7 +7,9 @@ import {describe} from '@gsa/testing';
 import ExportIcon from 'web/components/icon/ExportIcon';
 import {testIcon} from 'web/components/icon/Testing';
 
-
 describe('ExportIcon component tests', () => {
-  testIcon(ExportIcon);
+  testIcon(ExportIcon, {
+    dataTestId: 'export-icon',
+    customDataTestId: 'custom-export-icon',
+  });
 });

src/web/components/icon/__tests__/FilterIcon.test.jsx

@@ -7,7 +7,9 @@ import {describe} from '@gsa/testing';
 import FilterIcon from 'web/components/icon/FilterIcon';
 import {testIcon} from 'web/components/icon/Testing';
 
-
 describe('FilterIcon component tests', () => {
-  testIcon(FilterIcon);
+  testIcon(FilterIcon, {
+    dataTestId: 'filter-icon',
+    customDataTestId: 'custom-filter-icon',
+  });
 });

src/web/components/icon/__tests__/HelpIcon.test.jsx

@@ -7,7 +7,9 @@ import {describe} from '@gsa/testing';
 import HelpIcon from 'web/components/icon/HelpIcon';
 import {testIcon} from 'web/components/icon/Testing';
 
-
 describe('HelpIcon component tests', () => {
-  testIcon(HelpIcon);
+  testIcon(HelpIcon, {
+    dataTestId: 'help-icon',
+    customDataTestId: 'custom-help-icon',
+  });
 });