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 NewIcon component.

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/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/__tests__/NewIcon.test.jsx

@@ -3,11 +3,23 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import {describe} from '@gsa/testing';
+import {describe, test} from '@gsa/testing';
 import NewIcon from 'web/components/icon/NewIcon';
 import {testIcon} from 'web/components/icon/Testing';
-
+import {render} from 'web/utils/Testing';
 
 describe('NewIcon component tests', () => {
   testIcon(NewIcon);
+
+  test('should render with default data-testid', () => {
+    const {element} = render(<NewIcon />);
+
+    expect(element).toHaveAttribute('data-testid', 'new-icon');
+  });
+
+  test('should render with custom data-testid', () => {
+    const {element} = render(<NewIcon data-testid="custom-new-icon" />);
+
+    expect(element).toHaveAttribute('data-testid', 'custom-new-icon');
+  });
 });

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

@@ -6,7 +6,10 @@
 import {describe, test, expect, testing} from '@gsa/testing';
 import React, {useEffect} from 'react';
 import CloneIcon from 'web/components/icon/CloneIcon';
-import {useStateWithMountCheck, useIsMountedRef} from 'web/components/icon/SvgIcon';
+import SvgIcon, {
+  useStateWithMountCheck,
+  useIsMountedRef,
+} from 'web/components/icon/SvgIcon';
 import {render, fireEvent, act} from 'web/utils/Testing';
 
 const entity = {name: 'entity'};
@@ -54,6 +57,22 @@ describe('SVG icon component tests', () => {
 
     expect(element).toHaveAttribute('title', 'Clone Entity');
   });
+
+  test('should render with default data-testid', () => {
+    const {element} = render(<SvgIcon active={true}>{() => null}</SvgIcon>);
+
+    expect(element).toHaveAttribute('data-testid', 'svg-icon');
+  });
+
+  test('should render with custom data-testid', () => {
+    const {element} = render(
+      <SvgIcon active={true} data-testid="foo">
+        {() => null}
+      </SvgIcon>,
+    );
+
+    expect(element).toHaveAttribute('data-testid', 'foo');
+  });
 });
 
 describe('useStateWithMountCheck() hook tests', () => {
@@ -76,6 +95,7 @@ describe('useStateWithMountCheck() hook tests', () => {
     expect(element).toHaveTextContent('false');
   });
 });
+
 describe('useIsMountedRef() hook tests', () => {
   test('should return false after component is unmounted', () => {
     const callback = testing.fn();