Allow to pass and override the data-testid prop of SvgIcon components

src/web/components/dashboard/Controls.jsx

@@ -29,7 +29,6 @@ import compose from 'web/utils/Compose';
 import PropTypes from 'web/utils/PropTypes';
 import withGmp from 'web/utils/withGmp';
 
-
 export class DashboardControls extends React.Component {
   constructor(...args) {
     super(...args);
@@ -113,6 +112,7 @@ export class DashboardControls extends React.Component {
             onClick={canAdd ? this.handleNewClick : undefined}
           />
           <ResetIcon
+            data-testid="reset-dashboard"
             title={_('Reset to Defaults')}
             onClick={this.handleResetClick}
           />

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/NewTicketIcon.jsx

@@ -3,15 +3,13 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import React from 'react';
 import Icon from 'web/components/icon/svg/new_ticket.svg';
-import SvgIcon from 'web/components/icon/SvgIcon';
+import withSvgIcon from 'web/components/icon/withSvgIcon';
 
+const NewTicketIconComponent = withSvgIcon()(Icon);
 
 const NewTicketIcon = props => (
-  <SvgIcon {...props}>
-    <Icon data-testid="new-ticket-icon"/>
-  </SvgIcon>
+  <NewTicketIconComponent data-testid="new-ticket-icon" {...props} />
 );
 
 export default NewTicketIcon;

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/TrendDownIcon.jsx

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

src/web/components/icon/TrendLessIcon.jsx

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

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/TrendUpIcon.jsx

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

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',
+  });
 });