chore: test @shared/UsaIcon.jsx #4668

Author: sknep

frontend/shared/UsaIcon.jsx

@@ -1,30 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-function UsaIcon({ focusable = false, role = 'img', name, size = null }) {
+function UsaIcon({ role = 'img', name, size = null }) {
   return (
     <svg
       className={size ? `usa-icon usa-icon--size-${size}` : 'usa-icon'}
-      aria-hidden="true"
-      focusable={focusable}
+      focusable={role === 'button' || role === 'link'}
       role={role}
     >
-      <use xlinkHref={`/img/sprite.svg#${name}`} />
+      <use href={`/img/sprite.svg#${name}`} />
     </svg>
   );
 }
 
 UsaIcon.propTypes = {
-  role: PropTypes.string,
-  focusable: PropTypes.bool,
+  role: PropTypes.oneOf(['img', 'presentation', 'button', 'link', 'status', 'none']),
   name: PropTypes.string.isRequired,
-  size: PropTypes.number,
-};
-
-UsaIcon.defaultProps = {
-  role: 'img',
-  focusable: false,
-  size: null,
+  size: PropTypes.oneOf([3, 4, 5, 6, 7, 8, 9]),
 };
 
 export default UsaIcon;

frontend/shared/UsaIcon.test.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import UsaIcon from './UsaIcon';
+
+describe('<UsaIcon />', () => {
+  it('renders an SVG icon with USDWDS classes', () => {
+    render(<UsaIcon name="check" />);
+    const svgElement = screen.getByRole('img');
+    expect(svgElement).toBeInstanceOf(SVGSVGElement);
+    expect(svgElement).toHaveClass('usa-icon');
+  });
+
+  it('renders the icon as unfocusable img role', () => {
+    render(<UsaIcon name="check" />);
+    const svgElement = screen.getByRole('img');
+    expect(svgElement).toHaveAttribute('focusable', 'false');
+  });
+
+  it('renders the icon as focusable when the role is button', () => {
+    render(<UsaIcon name="check" role="button" />);
+    const svgElement = screen.getByRole('button');
+    expect(svgElement).toHaveAttribute('focusable', 'true');
+  });
+
+  it('renders the icon as focusable when the role is link', () => {
+    render(<UsaIcon name="check" role="link" />);
+    const svgElement = screen.getByRole('link');
+    expect(svgElement).toHaveAttribute('focusable', 'true');
+  });
+
+  it('renders the icon with a size class when size is set', () => {
+    render(<UsaIcon name="check" size={4} />);
+    const svgElement = screen.getByRole('img');
+    expect(svgElement).toHaveClass('usa-icon--size-4');
+  });
+
+  it('uses a role attribute when provided', () => {
+    render(<UsaIcon name="check" role="presentation" />);
+    const svgElement = screen.getByRole('presentation');
+    expect(svgElement).toBeInTheDocument();
+  });
+});