svg-loaders-react 3.1.5 → 4.0.0

package/test/helpers/loader-behavior.js

@@ -0,0 +1,111 @@
+import React, { StrictMode } from 'react';
+import { render } from '@testing-library/react';
+import { renderToStaticMarkup } from 'react-dom/server.node';
+
+const getSvg = (container) => container.querySelector('svg');
+
+// Shared behavior suite run against every loader component.
+// `defaults` lists the attributes the component sets on its root <svg>.
+export default function describeLoader(name, Component, defaults) {
+  describe(`<${name} />`, () => {
+    it('renders a single root <svg> element', () => {
+      const { container } = render(<Component />);
+      expect(container.children).toHaveLength(1);
+      expect(getSvg(container)).not.toBeNull();
+    });
+
+    it('renders the expected default attributes', () => {
+      const svg = getSvg(render(<Component />).container);
+      Object.entries(defaults).forEach(([attr, value]) => {
+        expect(svg.getAttribute(attr)).toBe(String(value));
+      });
+    });
+
+    it('has a viewBox with four numeric values', () => {
+      const viewBox = getSvg(render(<Component />).container).getAttribute('viewBox');
+      expect(viewBox.split(' ').map(Number).every(Number.isFinite)).toBe(true);
+      expect(viewBox.split(' ')).toHaveLength(4);
+    });
+
+    it('applies only the base class when no className is given', () => {
+      const svg = getSvg(render(<Component />).container);
+      expect(svg.getAttribute('class')).toBe('svg-loaders-svg');
+    });
+
+    it('appends a custom className to the base class', () => {
+      const svg = getSvg(render(<Component className="custom extra" />).container);
+      expect(svg.getAttribute('class')).toBe('svg-loaders-svg custom extra');
+    });
+
+    it('ignores an empty className', () => {
+      const svg = getSvg(render(<Component className="" />).container);
+      expect(svg.getAttribute('class')).toBe('svg-loaders-svg');
+    });
+
+    it('lets props override the default dimensions and colors', () => {
+      const svg = getSvg(render(
+        <Component width={10} height={20} fill="red" stroke="blue" viewBox="0 0 1 1" />,
+      ).container);
+      expect(svg.getAttribute('width')).toBe('10');
+      expect(svg.getAttribute('height')).toBe('20');
+      expect(svg.getAttribute('fill')).toBe('red');
+      expect(svg.getAttribute('stroke')).toBe('blue');
+      expect(svg.getAttribute('viewBox')).toBe('0 0 1 1');
+    });
+
+    it('passes through arbitrary props to the root <svg>', () => {
+      const onClick = jest.fn();
+      const svg = getSvg(render(
+        <Component
+          id="loader"
+          role="img"
+          aria-label="Loading"
+          data-testid="loader"
+          style={{ opacity: 0.5 }}
+          onClick={onClick}
+        />,
+      ).container);
+      expect(svg.id).toBe('loader');
+      expect(svg.getAttribute('role')).toBe('img');
+      expect(svg.getAttribute('aria-label')).toBe('Loading');
+      expect(svg.getAttribute('data-testid')).toBe('loader');
+      expect(svg.style.opacity).toBe('0.5');
+      svg.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('forwards a ref to the root <svg> (React 19 ref-as-prop)', () => {
+      const ref = React.createRef();
+      render(<Component ref={ref} />);
+      expect(ref.current).toBeInstanceOf(SVGSVGElement);
+    });
+
+    it('contains SVG animation elements', () => {
+      const { container } = render(<Component />);
+      expect(container.querySelectorAll('animate, animateTransform').length).toBeGreaterThan(0);
+    });
+
+    it('renders under StrictMode without errors or warnings', () => {
+      const error = jest.spyOn(console, 'error').mockImplementation(() => {});
+      const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      try {
+        render(<StrictMode><Component /></StrictMode>);
+        expect(error).not.toHaveBeenCalled();
+        expect(warn).not.toHaveBeenCalled();
+      } finally {
+        error.mockRestore();
+        warn.mockRestore();
+      }
+    });
+
+    it('renders on the server to the same markup as the client', () => {
+      const html = renderToStaticMarkup(<Component />);
+      expect(html.startsWith('<svg')).toBe(true);
+      expect(html).toBe(render(<Component />).container.innerHTML);
+    });
+
+    it('matches the markup snapshot', () => {
+      expect(getSvg(render(<Component />).container)).toMatchSnapshot();
+    });
+  });
+}

package/test/index.test.js

@@ -0,0 +1,16 @@
+import * as SVGLoaders from '../src';
+
+const EXPECTED = [
+  'Audio', 'BallTriangle', 'Bars', 'Circles', 'Grid', 'Hearts',
+  'Oval', 'Puff', 'Rings', 'SpinningCircles', 'TailSpin', 'ThreeDots',
+];
+
+describe('package entry point', () => {
+  it('exports exactly the twelve loader components', () => {
+    expect(Object.keys(SVGLoaders).sort()).toEqual([...EXPECTED].sort());
+  });
+
+  it.each(EXPECTED)('exports %s as a function component', (name) => {
+    expect(typeof SVGLoaders[name]).toBe('function');
+  });
+});

package/test/oval.test.js

@@ -1,14 +1,9 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
 import { Oval } from '../src/svg-loader-components/oval';
+import describeLoader from './helpers/loader-behavior';
 
-describe('Test <Oval />', () => {
-  it('renders without crashing', () => {
-    shallow(<Oval />);
-  });
-  it('viewBox property is defined', () => {
-    const OvalComponent = mount(<Oval />).find('svg');
-    expect(OvalComponent.prop('viewBox')).toBeDefined();
-  });
+describeLoader('Oval', Oval, {
+  width: '38',
+  height: '38',
+  stroke: '#fff',
+  viewBox: '0 0 38 38',
 });

package/test/puff.test.js

@@ -1,14 +1,9 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
 import { Puff } from '../src/svg-loader-components/puff';
+import describeLoader from './helpers/loader-behavior';
 
-describe('Test <Puff />', () => {
-  it('renders without crashing', () => {
-    shallow(<Puff />);
-  });
-  it('viewBox property is defined', () => {
-    const PuffComponent = mount(<Puff />).find('svg');
-    expect(PuffComponent.prop('viewBox')).toBeDefined();
-  });
+describeLoader('Puff', Puff, {
+  width: '44',
+  height: '44',
+  stroke: '#fff',
+  viewBox: '0 0 44 44',
 });

package/test/rings.test.js

@@ -1,14 +1,9 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
 import { Rings } from '../src/svg-loader-components/rings';
+import describeLoader from './helpers/loader-behavior';
 
-describe('Test <Rings />', () => {
-  it('renders without crashing', () => {
-    shallow(<Rings />);
-  });
-  it('viewBox property is defined', () => {
-    const RingsComponent = mount(<Rings />).find('svg');
-    expect(RingsComponent.prop('viewBox')).toBeDefined();
-  });
+describeLoader('Rings', Rings, {
+  width: '45',
+  height: '45',
+  stroke: '#fff',
+  viewBox: '0 0 45 45',
 });

package/test/spinning-circles.test.js

@@ -1,14 +1,8 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
 import { SpinningCircles } from '../src/svg-loader-components/spinning-circles';
+import describeLoader from './helpers/loader-behavior';
 
-describe('Test <SpinningCircles />', () => {
-  it('renders without crashing', () => {
-    shallow(<SpinningCircles />);
-  });
-  it('viewBox property is defined', () => {
-    const SpinningCirclesComponent = mount(<SpinningCircles />).find('svg');
-    expect(SpinningCirclesComponent.prop('viewBox')).toBeDefined();
-  });
+describeLoader('SpinningCircles', SpinningCircles, {
+  width: '58',
+  height: '58',
+  viewBox: '0 0 58 58',
 });

package/test/tail-spin.test.js

@@ -1,14 +1,8 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
 import { TailSpin } from '../src/svg-loader-components/tail-spin';
+import describeLoader from './helpers/loader-behavior';
 
-describe('Test <TailSpin />', () => {
-  it('renders without crashing', () => {
-    shallow(<TailSpin />);
-  });
-  it('viewBox property is defined', () => {
-    const TailSpinComponent = mount(<TailSpin />).find('svg');
-    expect(TailSpinComponent.prop('viewBox')).toBeDefined();
-  });
+describeLoader('TailSpin', TailSpin, {
+  width: '38',
+  height: '38',
+  viewBox: '0 0 38 38',
 });

package/test/three-dots.test.js

@@ -1,14 +1,9 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
 import { ThreeDots } from '../src/svg-loader-components/three-dots';
+import describeLoader from './helpers/loader-behavior';
 
-describe('Test <ThreeDots />', () => {
-  it('renders without crashing', () => {
-    shallow(<ThreeDots />);
-  });
-  it('viewBox property is defined', () => {
-    const ThreeDotsComponent = mount(<ThreeDots />).find('svg');
-    expect(ThreeDotsComponent.prop('viewBox')).toBeDefined();
-  });
+describeLoader('ThreeDots', ThreeDots, {
+  width: '120',
+  height: '30',
+  fill: '#fff',
+  viewBox: '0 0 120 30',
 });

package/src/setupTests.js

@@ -1,6 +0,0 @@
-import 'jsdom-global/register';
-
-import { configure } from 'enzyme';
-import Adapter from '@cfaester/enzyme-adapter-react-18';
-
-configure({ adapter: new Adapter() });