SvgIcon: add tests

app/soapbox/components/__mocks__/react-inlinesvg.js

@@ -1,10 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-export default function InlineSVG({ src }) {
-  return <svg id={src} />;
-}
-
-InlineSVG.propTypes = {
-  src: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
-};

app/soapbox/components/__mocks__/react-inlinesvg.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+interface IInlineSVG {
+  loader?: JSX.Element,
+}
+
+const InlineSVG: React.FC<IInlineSVG> = ({ loader }): JSX.Element => {
+  if (loader) {
+    return loader;
+  } else {
+    throw 'You used react-inlinesvg without a loader! This will cause jumpy loading during render.';
+  }
+};
+
+export default InlineSVG;

app/soapbox/components/svg_icon.js

@@ -25,7 +25,7 @@ export default class SvgIcon extends React.PureComponent {
         className={classNames('svg-icon', className)}
         {...other}
       >
-        <InlineSVG src={src} title={alt} />
+        <InlineSVG src={src} title={alt} loader={<></>} />
       </div>
     );
   }

app/soapbox/components/ui/icon/__tests__/svg-icon.test.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import { render, screen } from '../../../../jest/test-helpers';
+import SvgIcon from '../svg-icon';
+
+describe('<SvgIcon />', () => {
+  it('renders loading element with default size', () => {
+    render(<SvgIcon className='text-primary-500' src={require('@tabler/icons/icons/code.svg')} />);
+
+    const svg = screen.getByTestId('svg-icon-loader');
+    expect(svg.getAttribute('width')).toBe('24');
+    expect(svg.getAttribute('height')).toBe('24');
+    expect(svg.getAttribute('class')).toBe('text-primary-500');
+  });
+});

app/soapbox/components/ui/icon/svg-icon.tsx

@@ -9,15 +9,28 @@ interface ISvgIcon {
 }
 
 /** Renders an inline SVG with an empty frame loading state */
-const SvgIcon = ({ src, alt, size = 24, className }: ISvgIcon): JSX.Element => (
-  <InlineSVG
-    className={className}
-    src={src}
-    title={alt}
-    width={size}
-    height={size}
-    loader={<svg className={className} width={size} height={size} />}
-  />
-);
+const SvgIcon: React.FC<ISvgIcon> = ({ src, alt, size = 24, className }): JSX.Element => {
+  const loader = (
+    <svg
+      className={className}
+      width={size}
+      height={size}
+      data-src={src}
+      data-testid='svg-icon-loader'
+    />
+  );
+
+  return (
+    <InlineSVG
+      className={className}
+      src={src}
+      title={alt}
+      width={size}
+      height={size}
+      loader={loader}
+      data-testid='svg-icon'
+    />
+  );
+};
 
 export default SvgIcon;