@instructure/ui-spinner 10.10.1-snapshot-14 → 10.11.0

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.10.1-snapshot-14](https://github.com/instructure/instructure-ui/compare/v10.10.0...v10.10.1-snapshot-14) (2025-02-03)
+# [10.11.0](https://github.com/instructure/instructure-ui/compare/v10.10.0...v10.11.0) (2025-02-03)
 
 **Note:** Version bump only for package @instructure/ui-spinner
 

package/es/Spinner/__new-tests__/Spinner.test.js

@@ -1,4 +1,4 @@
-var _Spinner;
+var _Spinner, _Spinner2, _Spinner3, _Spinner4;
 /*
  * The MIT License (MIT)
  *
@@ -24,12 +24,95 @@ var _Spinner;
  */
 import React from 'react';
 import { render, waitFor, screen } from '@testing-library/react';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import { vi, expect } from 'vitest';
 import '@testing-library/jest-dom';
+import { View } from '@instructure/ui-view';
 import Spinner from '../index';
 describe('<Spinner />', () => {
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleErrorMock.mockRestore();
+  });
+  it('should render', async () => {
+    const _render = render(_Spinner || (_Spinner = /*#__PURE__*/React.createElement(Spinner, {
+        renderTitle: "Loading",
+        size: "small"
+      }))),
+      container = _render.container;
+    const spinner = container.querySelector('div[class$="-spinner"]');
+    expect(spinner).toBeInTheDocument();
+  });
+  it('should render the title prop text in the SVG element title', async () => {
+    const _render2 = render(_Spinner2 || (_Spinner2 = /*#__PURE__*/React.createElement(Spinner, {
+        renderTitle: "Loading",
+        size: "large"
+      }))),
+      container = _render2.container;
+    const spinner = container.querySelector('div[class$="-spinner"]');
+    expect(spinner).toHaveTextContent('Loading');
+  });
+  it('should meet a11y standards', async () => {
+    const _render3 = render(_Spinner3 || (_Spinner3 = /*#__PURE__*/React.createElement(Spinner, {
+        renderTitle: "Loading",
+        size: "small"
+      }))),
+      container = _render3.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+  it('should render the contents of a component used in renderTitle', async () => {
+    const Translation = ({
+      children
+    }) => /*#__PURE__*/React.createElement("span", null, "I have translated ", children, ".");
+    const _render4 = render(/*#__PURE__*/React.createElement(Spinner, {
+        renderTitle: /*#__PURE__*/React.createElement(Translation, null, "Loading"),
+        size: "small"
+      })),
+      container = _render4.container;
+    const spinner = container.querySelector('div[class$="-spinner"]');
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+    expect(spinner).toHaveTextContent('I have translated Loading');
+  });
+  describe('when passing down props to View', () => {
+    const allowedProps = {
+      margin: 'small',
+      elementRef: () => {},
+      as: 'div'
+    };
+    View.allowedProps.filter(prop => prop !== 'children').forEach(prop => {
+      if (Object.keys(allowedProps).indexOf(prop) < 0) {
+        it(`should NOT allow the '${prop}' prop`, async () => {
+          const props = {
+            [prop]: 'foo'
+          };
+          const expectedErrorMessage = `prop '${prop}' is not allowed.`;
+          render(/*#__PURE__*/React.createElement(Spinner, Object.assign({
+            renderTitle: "Loading"
+          }, props)));
+          expect(consoleErrorMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
+        });
+      } else {
+        it(`should allow the '${prop}' prop`, async () => {
+          const props = {
+            [prop]: allowedProps[prop]
+          };
+          render(/*#__PURE__*/React.createElement(Spinner, Object.assign({
+            renderTitle: "Loading"
+          }, props)));
+          expect(consoleErrorMock).not.toHaveBeenCalled();
+        });
+      }
+    });
+  });
   describe('with the delay prop', () => {
     it('should delay rendering', async () => {
-      render(_Spinner || (_Spinner = /*#__PURE__*/React.createElement(Spinner, {
+      render(_Spinner4 || (_Spinner4 = /*#__PURE__*/React.createElement(Spinner, {
         renderTitle: "Loading",
         delay: 300
       })));

package/lib/Spinner/__new-tests__/Spinner.test.js

@@ -3,9 +3,12 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _vitest = require("vitest");
 require("@testing-library/jest-dom");
+var _View = require("@instructure/ui-view/lib/View");
 var _index = _interopRequireDefault(require("../index"));
-var _Spinner;
+var _Spinner, _Spinner2, _Spinner3, _Spinner4;
 /*
  * The MIT License (MIT)
  *
@@ -30,18 +33,98 @@ var _Spinner;
  * SOFTWARE.
  */
 describe('<Spinner />', () => {
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleErrorMock.mockRestore();
+  });
+  it('should render', async () => {
+    const _render = (0, _react2.render)(_Spinner || (_Spinner = /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderTitle: "Loading",
+        size: "small"
+      }))),
+      container = _render.container;
+    const spinner = container.querySelector('div[class$="-spinner"]');
+    (0, _vitest.expect)(spinner).toBeInTheDocument();
+  });
+  it('should render the title prop text in the SVG element title', async () => {
+    const _render2 = (0, _react2.render)(_Spinner2 || (_Spinner2 = /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderTitle: "Loading",
+        size: "large"
+      }))),
+      container = _render2.container;
+    const spinner = container.querySelector('div[class$="-spinner"]');
+    (0, _vitest.expect)(spinner).toHaveTextContent('Loading');
+  });
+  it('should meet a11y standards', async () => {
+    const _render3 = (0, _react2.render)(_Spinner3 || (_Spinner3 = /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderTitle: "Loading",
+        size: "small"
+      }))),
+      container = _render3.container;
+    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+    (0, _vitest.expect)(axeCheck).toBe(true);
+  });
+  it('should render the contents of a component used in renderTitle', async () => {
+    const Translation = ({
+      children
+    }) => /*#__PURE__*/_react.default.createElement("span", null, "I have translated ", children, ".");
+    const _render4 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+        renderTitle: /*#__PURE__*/_react.default.createElement(Translation, null, "Loading"),
+        size: "small"
+      })),
+      container = _render4.container;
+    const spinner = container.querySelector('div[class$="-spinner"]');
+    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+    (0, _vitest.expect)(axeCheck).toBe(true);
+    (0, _vitest.expect)(spinner).toHaveTextContent('I have translated Loading');
+  });
+  describe('when passing down props to View', () => {
+    const allowedProps = {
+      margin: 'small',
+      elementRef: () => {},
+      as: 'div'
+    };
+    _View.View.allowedProps.filter(prop => prop !== 'children').forEach(prop => {
+      if (Object.keys(allowedProps).indexOf(prop) < 0) {
+        it(`should NOT allow the '${prop}' prop`, async () => {
+          const props = {
+            [prop]: 'foo'
+          };
+          const expectedErrorMessage = `prop '${prop}' is not allowed.`;
+          (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, Object.assign({
+            renderTitle: "Loading"
+          }, props)));
+          (0, _vitest.expect)(consoleErrorMock).toHaveBeenCalledWith(_vitest.expect.stringContaining(expectedErrorMessage), _vitest.expect.any(String));
+        });
+      } else {
+        it(`should allow the '${prop}' prop`, async () => {
+          const props = {
+            [prop]: allowedProps[prop]
+          };
+          (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, Object.assign({
+            renderTitle: "Loading"
+          }, props)));
+          (0, _vitest.expect)(consoleErrorMock).not.toHaveBeenCalled();
+        });
+      }
+    });
+  });
   describe('with the delay prop', () => {
     it('should delay rendering', async () => {
-      (0, _react2.render)(_Spinner || (_Spinner = /*#__PURE__*/_react.default.createElement(_index.default, {
+      (0, _react2.render)(_Spinner4 || (_Spinner4 = /*#__PURE__*/_react.default.createElement(_index.default, {
         renderTitle: "Loading",
         delay: 300
       })));
-      expect(_react2.screen.queryByText('Loading')).not.toBeInTheDocument();
+      (0, _vitest.expect)(_react2.screen.queryByText('Loading')).not.toBeInTheDocument();
       await (0, _react2.waitFor)(async () => {
         const title = await _react2.screen.findByText('Loading');
         const icon = await _react2.screen.findByRole('img');
-        expect(title).toBeInTheDocument();
-        expect(icon).toBeInTheDocument();
+        (0, _vitest.expect)(title).toBeInTheDocument();
+        (0, _vitest.expect)(icon).toBeInTheDocument();
       }, {
         timeout: 400
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-spinner",
-  "version": "10.10.1-snapshot-14",
+  "version": "10.11.0",
   "description": "A spinner/loading component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,22 +24,22 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.10.1-snapshot-14",
-    "@instructure/emotion": "10.10.1-snapshot-14",
-    "@instructure/shared-types": "10.10.1-snapshot-14",
-    "@instructure/ui-color-utils": "10.10.1-snapshot-14",
-    "@instructure/ui-react-utils": "10.10.1-snapshot-14",
-    "@instructure/ui-testable": "10.10.1-snapshot-14",
-    "@instructure/ui-utils": "10.10.1-snapshot-14",
-    "@instructure/ui-view": "10.10.1-snapshot-14",
-    "@instructure/uid": "10.10.1-snapshot-14",
+    "@instructure/console": "10.11.0",
+    "@instructure/emotion": "10.11.0",
+    "@instructure/shared-types": "10.11.0",
+    "@instructure/ui-color-utils": "10.11.0",
+    "@instructure/ui-react-utils": "10.11.0",
+    "@instructure/ui-testable": "10.11.0",
+    "@instructure/ui-utils": "10.11.0",
+    "@instructure/ui-view": "10.11.0",
+    "@instructure/uid": "10.11.0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.10.1-snapshot-14",
-    "@instructure/ui-test-locator": "10.10.1-snapshot-14",
-    "@instructure/ui-test-utils": "10.10.1-snapshot-14",
-    "@instructure/ui-themes": "10.10.1-snapshot-14",
+    "@instructure/ui-axe-check": "10.11.0",
+    "@instructure/ui-babel-preset": "10.11.0",
+    "@instructure/ui-test-utils": "10.11.0",
+    "@instructure/ui-themes": "10.11.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "vitest": "^2.1.8"

package/src/Spinner/__new-tests__/Spinner.test.tsx

@@ -23,11 +23,100 @@
  */
 import React from 'react'
 import { render, waitFor, screen } from '@testing-library/react'
+import { runAxeCheck } from '@instructure/ui-axe-check'
+import { vi, expect } from 'vitest'
+import type { MockInstance } from 'vitest'
 
 import '@testing-library/jest-dom'
+import { View } from '@instructure/ui-view'
 import Spinner from '../index'
+import type { SpinnerProps } from '../props'
 
 describe('<Spinner />', () => {
+  let consoleErrorMock: ReturnType<typeof vi.spyOn>
+
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleErrorMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {}) as MockInstance
+  })
+
+  afterEach(() => {
+    consoleErrorMock.mockRestore()
+  })
+
+  it('should render', async () => {
+    const { container } = render(<Spinner renderTitle="Loading" size="small" />)
+    const spinner = container.querySelector('div[class$="-spinner"]')
+
+    expect(spinner).toBeInTheDocument()
+  })
+
+  it('should render the title prop text in the SVG element title', async () => {
+    const { container } = render(<Spinner renderTitle="Loading" size="large" />)
+    const spinner = container.querySelector('div[class$="-spinner"]')
+
+    expect(spinner).toHaveTextContent('Loading')
+  })
+
+  it('should meet a11y standards', async () => {
+    const { container } = render(<Spinner renderTitle="Loading" size="small" />)
+    const axeCheck = await runAxeCheck(container)
+    expect(axeCheck).toBe(true)
+  })
+
+  it('should render the contents of a component used in renderTitle', async () => {
+    const Translation = ({ children }: SpinnerProps) => (
+      <span>I have translated {children}.</span>
+    )
+
+    const { container } = render(
+      <Spinner renderTitle={<Translation>Loading</Translation>} size="small" />
+    )
+
+    const spinner = container.querySelector('div[class$="-spinner"]')
+    const axeCheck = await runAxeCheck(container)
+
+    expect(axeCheck).toBe(true)
+    expect(spinner).toHaveTextContent('I have translated Loading')
+  })
+
+  describe('when passing down props to View', () => {
+    const allowedProps: { [key: string]: any } = {
+      margin: 'small',
+      elementRef: () => {},
+      as: 'div'
+    }
+
+    View.allowedProps
+      .filter((prop) => prop !== 'children')
+      .forEach((prop) => {
+        if (Object.keys(allowedProps).indexOf(prop) < 0) {
+          it(`should NOT allow the '${prop}' prop`, async () => {
+            const props = {
+              [prop]: 'foo'
+            }
+            const expectedErrorMessage = `prop '${prop}' is not allowed.`
+
+            render(<Spinner renderTitle="Loading" {...props} />)
+
+            expect(consoleErrorMock).toHaveBeenCalledWith(
+              expect.stringContaining(expectedErrorMessage),
+              expect.any(String)
+            )
+          })
+        } else {
+          it(`should allow the '${prop}' prop`, async () => {
+            const props = { [prop]: allowedProps[prop] }
+            render(<Spinner renderTitle="Loading" {...props} />)
+
+            expect(consoleErrorMock).not.toHaveBeenCalled()
+          })
+        }
+      })
+  })
+
   describe('with the delay prop', () => {
     it('should delay rendering', async () => {
       render(<Spinner renderTitle="Loading" delay={300} />)

package/tsconfig.build.json

@@ -7,6 +7,7 @@
   },
   "include": ["src"],
   "references": [
+    { "path": "../ui-axe-check/tsconfig.build.json" },
     { "path": "../console/tsconfig.build.json" },
     { "path": "../emotion/tsconfig.build.json" },
     { "path": "../shared-types/tsconfig.build.json" },
@@ -17,7 +18,6 @@
     { "path": "../ui-view/tsconfig.build.json" },
     { "path": "../uid/tsconfig.build.json" },
     { "path": "../ui-babel-preset/tsconfig.build.json" },
-    { "path": "../ui-test-locator/tsconfig.build.json" },
     { "path": "../ui-test-utils/tsconfig.build.json" },
     { "path": "../ui-themes/tsconfig.build.json" }
   ]