@instructure/ui-number-input 10.2.2-snapshot-15 → 10.2.2-snapshot-16

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.2.2-snapshot-15](https://github.com/instructure/instructure-ui/compare/v10.2.1...v10.2.2-snapshot-15) (2024-09-13)
+## [10.2.2-snapshot-16](https://github.com/instructure/instructure-ui/compare/v10.2.1...v10.2.2-snapshot-16) (2024-09-13)
 
 **Note:** Version bump only for package @instructure/ui-number-input
 

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

@@ -1,3 +1,4 @@
+var _NumberInput, _NumberInput2, _NumberInput3, _NumberInput4;
 /*
  * The MIT License (MIT)
  *
@@ -22,14 +23,17 @@
  * SOFTWARE.
  */
 
-import { render } from '@testing-library/react';
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { vi } from 'vitest';
 import { runAxeCheck } from '@instructure/ui-axe-check';
+import '@testing-library/jest-dom';
 import { NumberInput } from '../index';
 import NumberInputExamples from '../__examples__/NumberInput.examples';
 // eslint-disable-next-line no-restricted-imports
 import { generateA11yTests } from '@instructure/ui-scripts/lib/test/generateA11yTests';
-describe('<Breadcrumb />', () => {
+describe('<NumberInput />', () => {
   let consoleWarningMock;
   let consoleErrorMock;
   beforeEach(() => {
@@ -41,13 +45,212 @@ describe('<Breadcrumb />', () => {
     consoleWarningMock.mockRestore();
     consoleErrorMock.mockRestore();
   });
-  const generatedComponents = generateA11yTests(NumberInput, NumberInputExamples);
-  for (const component of generatedComponents) {
-    it(component.description, async () => {
-      const _render = render(component.content),
-        container = _render.container;
-      const axeCheck = await runAxeCheck(container);
-      expect(axeCheck).toBe(true);
+  it('sets value on the input', async () => {
+    const onChange = vi.fn();
+    render( /*#__PURE__*/React.createElement(NumberInput, {
+      renderLabel: "Label",
+      onChange: onChange,
+      value: "42"
+    }));
+    const input = screen.getByRole('spinbutton');
+    expect(input).toHaveValue(42);
+  });
+  it('should accept a number for the value', async () => {
+    const onChange = vi.fn();
+    render( /*#__PURE__*/React.createElement(NumberInput, {
+      renderLabel: "Label",
+      onChange: onChange,
+      value: 42
+    }));
+    const input = screen.getByRole('spinbutton');
+    expect(input).toHaveValue(42);
+  });
+  it('displays the label', async () => {
+    const _render = render(_NumberInput || (_NumberInput = /*#__PURE__*/React.createElement(NumberInput, {
+        renderLabel: "Label"
+      }))),
+      container = _render.container;
+    const label = container.querySelector('span[class$="-formFieldLabel"]');
+    expect(label).toHaveTextContent('Label');
+  });
+  it('passes the input element to inputRef', async () => {
+    const inputRef = vi.fn();
+    render( /*#__PURE__*/React.createElement(NumberInput, {
+      renderLabel: "Label",
+      inputRef: inputRef
+    }));
+    const input = screen.getByRole('spinbutton');
+    expect(inputRef).toHaveBeenCalledTimes(1);
+    expect(inputRef).toHaveBeenCalledWith(input);
+  });
+  it('passes change events to onChange handler', async () => {
+    const onChange = vi.fn();
+    render( /*#__PURE__*/React.createElement(NumberInput, {
+      renderLabel: "Label",
+      onChange: onChange
+    }));
+    const input = screen.getByRole('spinbutton');
+    userEvent.type(input, '5');
+    await waitFor(() => {
+      const event = onChange.mock.calls[0][0];
+      const args = onChange.mock.calls[0][1];
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(args).toBe('5');
+      expect(event.target.value).toBe('5');
+    });
+  });
+  it('passes keyboard events to the onKeyDown handler', async () => {
+    const onKeyDown = vi.fn();
+    render( /*#__PURE__*/React.createElement(NumberInput, {
+      renderLabel: "Label",
+      onKeyDown: onKeyDown
+    }));
+    const input = screen.getByRole('spinbutton');
+    userEvent.type(input, '5');
+    await waitFor(() => {
+      expect(onKeyDown).toHaveBeenCalledTimes(1);
+    });
+  });
+  it('passes blur events to onBlur handler', async () => {
+    const onBlur = vi.fn();
+    render( /*#__PURE__*/React.createElement(NumberInput, {
+      renderLabel: "Label",
+      onBlur: onBlur
+    }));
+    userEvent.tab();
+    userEvent.tab();
+    await waitFor(() => {
+      expect(onBlur).toHaveBeenCalledTimes(1);
+    });
+  });
+  it('passes focus events to onFocus handler', async () => {
+    const onFocus = vi.fn();
+    render( /*#__PURE__*/React.createElement(NumberInput, {
+      renderLabel: "Label",
+      onFocus: onFocus
+    }));
+    const input = screen.getByRole('spinbutton');
+    input.focus();
+    await waitFor(() => {
+      expect(onFocus).toHaveBeenCalledTimes(1);
+    });
+  });
+  it('shows arrow spinbuttons by default', async () => {
+    const _render2 = render(_NumberInput2 || (_NumberInput2 = /*#__PURE__*/React.createElement(NumberInput, {
+        renderLabel: "Label"
+      }))),
+      container = _render2.container;
+    const buttons = container.querySelectorAll('button[class$="-numberInput_arrow');
+    expect(buttons).toHaveLength(2);
+  });
+  it('hides arrow spinbuttons when showArrows is false', async () => {
+    const _render3 = render(_NumberInput3 || (_NumberInput3 = /*#__PURE__*/React.createElement(NumberInput, {
+        renderLabel: "Label",
+        showArrows: false
+      }))),
+      container = _render3.container;
+    const buttons = container.querySelectorAll('button[class$="-numberInput_arrow');
+    expect(buttons).toHaveLength(0);
+  });
+  it('calls onIncrement when up arrow spinbutton is clicked', async () => {
+    const onIncrement = vi.fn();
+    const _render4 = render( /*#__PURE__*/React.createElement(NumberInput, {
+        renderLabel: "Label",
+        onIncrement: onIncrement
+      })),
+      container = _render4.container;
+    const buttons = container.querySelectorAll('button[class$="-numberInput_arrow');
+    userEvent.click(buttons[0]);
+    await waitFor(() => {
+      expect(onIncrement).toHaveBeenCalledTimes(1);
     });
-  }
+  });
+  it('does not call onIncrement when `interaction` is set to readonly', async () => {
+    const onIncrement = vi.fn();
+    const _render5 = render( /*#__PURE__*/React.createElement(NumberInput, {
+        renderLabel: "Label",
+        interaction: "readonly",
+        onIncrement: onIncrement
+      })),
+      container = _render5.container;
+    const buttons = container.querySelectorAll('button[class$="-numberInput_arrow');
+    userEvent.click(buttons[0]);
+    await waitFor(() => {
+      expect(onIncrement).toHaveBeenCalledTimes(0);
+    });
+  });
+  it('does not call onIncrement when `readOnly` is set', async () => {
+    const onIncrement = vi.fn();
+    const _render6 = render( /*#__PURE__*/React.createElement(NumberInput, {
+        renderLabel: "Label",
+        readOnly: true,
+        onIncrement: onIncrement
+      })),
+      container = _render6.container;
+    const buttons = container.querySelectorAll('button[class$="-numberInput_arrow');
+    userEvent.click(buttons[0]);
+    await waitFor(() => {
+      expect(onIncrement).toHaveBeenCalledTimes(0);
+    });
+  });
+  it('calls onDecrement when down arrow spinbutton is clicked', async () => {
+    const onDecrement = vi.fn();
+    const _render7 = render( /*#__PURE__*/React.createElement(NumberInput, {
+        renderLabel: "Label",
+        onDecrement: onDecrement
+      })),
+      container = _render7.container;
+    const buttons = container.querySelectorAll('button[class$="-numberInput_arrow');
+    userEvent.click(buttons[1]);
+    await waitFor(() => {
+      expect(onDecrement).toHaveBeenCalledTimes(1);
+    });
+  });
+  it('does not call onDecrement when `interaction` is set to readonly', async () => {
+    const onDecrement = vi.fn();
+    const _render8 = render( /*#__PURE__*/React.createElement(NumberInput, {
+        renderLabel: "Label",
+        interaction: "readonly",
+        onDecrement: onDecrement
+      })),
+      container = _render8.container;
+    const buttons = container.querySelectorAll('button[class$="-numberInput_arrow');
+    userEvent.click(buttons[1]);
+    await waitFor(() => {
+      expect(onDecrement).toHaveBeenCalledTimes(0);
+    });
+  });
+  it('does not call onDecrement when `readOnly` is set', async () => {
+    const onDecrement = vi.fn();
+    const _render9 = render( /*#__PURE__*/React.createElement(NumberInput, {
+        renderLabel: "Label",
+        readOnly: true,
+        onDecrement: onDecrement
+      })),
+      container = _render9.container;
+    const buttons = container.querySelectorAll('button[class$="-numberInput_arrow');
+    userEvent.click(buttons[1]);
+    await waitFor(() => {
+      expect(onDecrement).toHaveBeenCalledTimes(0);
+    });
+  });
+  it('puts inputMode prop to input', async () => {
+    render(_NumberInput4 || (_NumberInput4 = /*#__PURE__*/React.createElement(NumberInput, {
+      renderLabel: "Label",
+      inputMode: "decimal"
+    })));
+    const input = screen.getByRole('spinbutton');
+    expect(input).toHaveAttribute('inputMode', 'decimal');
+  });
+  describe('with generated examples', () => {
+    const generatedComponents = generateA11yTests(NumberInput, NumberInputExamples);
+    for (const component of generatedComponents) {
+      it(component.description, async () => {
+        const _render10 = render(component.content),
+          container = _render10.container;
+        const axeCheck = await runAxeCheck(container);
+        expect(axeCheck).toBe(true);
+      });
+    }
+  });
 });

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

@@ -1,12 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = require("@testing-library/react");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _vitest = require("vitest");
 var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+require("@testing-library/jest-dom");
 var _index = require("../index");
-var _NumberInput = _interopRequireDefault(require("../__examples__/NumberInput.examples"));
+var _NumberInput5 = _interopRequireDefault(require("../__examples__/NumberInput.examples"));
 var _generateA11yTests = require("@instructure/ui-scripts/lib/test/generateA11yTests");
+var _NumberInput, _NumberInput2, _NumberInput3, _NumberInput4;
 /*
  * The MIT License (MIT)
  *
@@ -30,10 +34,8 @@ var _generateA11yTests = require("@instructure/ui-scripts/lib/test/generateA11yT
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 // eslint-disable-next-line no-restricted-imports
-
-describe('<Breadcrumb />', () => {
+describe('<NumberInput />', () => {
   let consoleWarningMock;
   let consoleErrorMock;
   beforeEach(() => {
@@ -45,13 +47,212 @@ describe('<Breadcrumb />', () => {
     consoleWarningMock.mockRestore();
     consoleErrorMock.mockRestore();
   });
-  const generatedComponents = (0, _generateA11yTests.generateA11yTests)(_index.NumberInput, _NumberInput.default);
-  for (const component of generatedComponents) {
-    it(component.description, async () => {
-      const _render = (0, _react.render)(component.content),
-        container = _render.container;
-      const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
-      expect(axeCheck).toBe(true);
+  it('sets value on the input', async () => {
+    const onChange = _vitest.vi.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.NumberInput, {
+      renderLabel: "Label",
+      onChange: onChange,
+      value: "42"
+    }));
+    const input = _react2.screen.getByRole('spinbutton');
+    expect(input).toHaveValue(42);
+  });
+  it('should accept a number for the value', async () => {
+    const onChange = _vitest.vi.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.NumberInput, {
+      renderLabel: "Label",
+      onChange: onChange,
+      value: 42
+    }));
+    const input = _react2.screen.getByRole('spinbutton');
+    expect(input).toHaveValue(42);
+  });
+  it('displays the label', async () => {
+    const _render = (0, _react2.render)(_NumberInput || (_NumberInput = /*#__PURE__*/_react.default.createElement(_index.NumberInput, {
+        renderLabel: "Label"
+      }))),
+      container = _render.container;
+    const label = container.querySelector('span[class$="-formFieldLabel"]');
+    expect(label).toHaveTextContent('Label');
+  });
+  it('passes the input element to inputRef', async () => {
+    const inputRef = _vitest.vi.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.NumberInput, {
+      renderLabel: "Label",
+      inputRef: inputRef
+    }));
+    const input = _react2.screen.getByRole('spinbutton');
+    expect(inputRef).toHaveBeenCalledTimes(1);
+    expect(inputRef).toHaveBeenCalledWith(input);
+  });
+  it('passes change events to onChange handler', async () => {
+    const onChange = _vitest.vi.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.NumberInput, {
+      renderLabel: "Label",
+      onChange: onChange
+    }));
+    const input = _react2.screen.getByRole('spinbutton');
+    _userEvent.default.type(input, '5');
+    await (0, _react2.waitFor)(() => {
+      const event = onChange.mock.calls[0][0];
+      const args = onChange.mock.calls[0][1];
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(args).toBe('5');
+      expect(event.target.value).toBe('5');
+    });
+  });
+  it('passes keyboard events to the onKeyDown handler', async () => {
+    const onKeyDown = _vitest.vi.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.NumberInput, {
+      renderLabel: "Label",
+      onKeyDown: onKeyDown
+    }));
+    const input = _react2.screen.getByRole('spinbutton');
+    _userEvent.default.type(input, '5');
+    await (0, _react2.waitFor)(() => {
+      expect(onKeyDown).toHaveBeenCalledTimes(1);
     });
-  }
+  });
+  it('passes blur events to onBlur handler', async () => {
+    const onBlur = _vitest.vi.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.NumberInput, {
+      renderLabel: "Label",
+      onBlur: onBlur
+    }));
+    _userEvent.default.tab();
+    _userEvent.default.tab();
+    await (0, _react2.waitFor)(() => {
+      expect(onBlur).toHaveBeenCalledTimes(1);
+    });
+  });
+  it('passes focus events to onFocus handler', async () => {
+    const onFocus = _vitest.vi.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.NumberInput, {
+      renderLabel: "Label",
+      onFocus: onFocus
+    }));
+    const input = _react2.screen.getByRole('spinbutton');
+    input.focus();
+    await (0, _react2.waitFor)(() => {
+      expect(onFocus).toHaveBeenCalledTimes(1);
+    });
+  });
+  it('shows arrow spinbuttons by default', async () => {
+    const _render2 = (0, _react2.render)(_NumberInput2 || (_NumberInput2 = /*#__PURE__*/_react.default.createElement(_index.NumberInput, {
+        renderLabel: "Label"
+      }))),
+      container = _render2.container;
+    const buttons = container.querySelectorAll('button[class$="-numberInput_arrow');
+    expect(buttons).toHaveLength(2);
+  });
+  it('hides arrow spinbuttons when showArrows is false', async () => {
+    const _render3 = (0, _react2.render)(_NumberInput3 || (_NumberInput3 = /*#__PURE__*/_react.default.createElement(_index.NumberInput, {
+        renderLabel: "Label",
+        showArrows: false
+      }))),
+      container = _render3.container;
+    const buttons = container.querySelectorAll('button[class$="-numberInput_arrow');
+    expect(buttons).toHaveLength(0);
+  });
+  it('calls onIncrement when up arrow spinbutton is clicked', async () => {
+    const onIncrement = _vitest.vi.fn();
+    const _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.NumberInput, {
+        renderLabel: "Label",
+        onIncrement: onIncrement
+      })),
+      container = _render4.container;
+    const buttons = container.querySelectorAll('button[class$="-numberInput_arrow');
+    _userEvent.default.click(buttons[0]);
+    await (0, _react2.waitFor)(() => {
+      expect(onIncrement).toHaveBeenCalledTimes(1);
+    });
+  });
+  it('does not call onIncrement when `interaction` is set to readonly', async () => {
+    const onIncrement = _vitest.vi.fn();
+    const _render5 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.NumberInput, {
+        renderLabel: "Label",
+        interaction: "readonly",
+        onIncrement: onIncrement
+      })),
+      container = _render5.container;
+    const buttons = container.querySelectorAll('button[class$="-numberInput_arrow');
+    _userEvent.default.click(buttons[0]);
+    await (0, _react2.waitFor)(() => {
+      expect(onIncrement).toHaveBeenCalledTimes(0);
+    });
+  });
+  it('does not call onIncrement when `readOnly` is set', async () => {
+    const onIncrement = _vitest.vi.fn();
+    const _render6 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.NumberInput, {
+        renderLabel: "Label",
+        readOnly: true,
+        onIncrement: onIncrement
+      })),
+      container = _render6.container;
+    const buttons = container.querySelectorAll('button[class$="-numberInput_arrow');
+    _userEvent.default.click(buttons[0]);
+    await (0, _react2.waitFor)(() => {
+      expect(onIncrement).toHaveBeenCalledTimes(0);
+    });
+  });
+  it('calls onDecrement when down arrow spinbutton is clicked', async () => {
+    const onDecrement = _vitest.vi.fn();
+    const _render7 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.NumberInput, {
+        renderLabel: "Label",
+        onDecrement: onDecrement
+      })),
+      container = _render7.container;
+    const buttons = container.querySelectorAll('button[class$="-numberInput_arrow');
+    _userEvent.default.click(buttons[1]);
+    await (0, _react2.waitFor)(() => {
+      expect(onDecrement).toHaveBeenCalledTimes(1);
+    });
+  });
+  it('does not call onDecrement when `interaction` is set to readonly', async () => {
+    const onDecrement = _vitest.vi.fn();
+    const _render8 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.NumberInput, {
+        renderLabel: "Label",
+        interaction: "readonly",
+        onDecrement: onDecrement
+      })),
+      container = _render8.container;
+    const buttons = container.querySelectorAll('button[class$="-numberInput_arrow');
+    _userEvent.default.click(buttons[1]);
+    await (0, _react2.waitFor)(() => {
+      expect(onDecrement).toHaveBeenCalledTimes(0);
+    });
+  });
+  it('does not call onDecrement when `readOnly` is set', async () => {
+    const onDecrement = _vitest.vi.fn();
+    const _render9 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.NumberInput, {
+        renderLabel: "Label",
+        readOnly: true,
+        onDecrement: onDecrement
+      })),
+      container = _render9.container;
+    const buttons = container.querySelectorAll('button[class$="-numberInput_arrow');
+    _userEvent.default.click(buttons[1]);
+    await (0, _react2.waitFor)(() => {
+      expect(onDecrement).toHaveBeenCalledTimes(0);
+    });
+  });
+  it('puts inputMode prop to input', async () => {
+    (0, _react2.render)(_NumberInput4 || (_NumberInput4 = /*#__PURE__*/_react.default.createElement(_index.NumberInput, {
+      renderLabel: "Label",
+      inputMode: "decimal"
+    })));
+    const input = _react2.screen.getByRole('spinbutton');
+    expect(input).toHaveAttribute('inputMode', 'decimal');
+  });
+  describe('with generated examples', () => {
+    const generatedComponents = (0, _generateA11yTests.generateA11yTests)(_index.NumberInput, _NumberInput5.default);
+    for (const component of generatedComponents) {
+      it(component.description, async () => {
+        const _render10 = (0, _react2.render)(component.content),
+          container = _render10.container;
+        const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+        expect(axeCheck).toBe(true);
+      });
+    }
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-number-input",
-  "version": "10.2.2-snapshot-15",
+  "version": "10.2.2-snapshot-16",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "homepage": "https://instructure.github.io/instructure-ui/",
@@ -23,25 +23,26 @@
     "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.2.2-snapshot-15",
-    "@instructure/ui-babel-preset": "10.2.2-snapshot-15",
-    "@instructure/ui-scripts": "10.2.2-snapshot-15",
-    "@instructure/ui-test-locator": "10.2.2-snapshot-15",
-    "@instructure/ui-test-utils": "10.2.2-snapshot-15",
-    "@instructure/ui-themes": "10.2.2-snapshot-15",
+    "@instructure/ui-axe-check": "10.2.2-snapshot-16",
+    "@instructure/ui-babel-preset": "10.2.2-snapshot-16",
+    "@instructure/ui-scripts": "10.2.2-snapshot-16",
+    "@instructure/ui-test-utils": "10.2.2-snapshot-16",
+    "@instructure/ui-themes": "10.2.2-snapshot-16",
+    "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2",
     "vitest": "^2.0.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/emotion": "10.2.2-snapshot-15",
-    "@instructure/shared-types": "10.2.2-snapshot-15",
-    "@instructure/ui-form-field": "10.2.2-snapshot-15",
-    "@instructure/ui-icons": "10.2.2-snapshot-15",
-    "@instructure/ui-react-utils": "10.2.2-snapshot-15",
-    "@instructure/ui-testable": "10.2.2-snapshot-15",
-    "@instructure/ui-utils": "10.2.2-snapshot-15",
-    "@instructure/uid": "10.2.2-snapshot-15",
+    "@instructure/emotion": "10.2.2-snapshot-16",
+    "@instructure/shared-types": "10.2.2-snapshot-16",
+    "@instructure/ui-form-field": "10.2.2-snapshot-16",
+    "@instructure/ui-icons": "10.2.2-snapshot-16",
+    "@instructure/ui-react-utils": "10.2.2-snapshot-16",
+    "@instructure/ui-testable": "10.2.2-snapshot-16",
+    "@instructure/ui-utils": "10.2.2-snapshot-16",
+    "@instructure/uid": "10.2.2-snapshot-16",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },