@instructure/ui-text-input 10.0.1-snapshot-6 → 10.0.1-snapshot-8

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.0.1-snapshot-6](https://github.com/instructure/instructure-ui/compare/v10.0.0...v10.0.1-snapshot-6) (2024-08-09)
+## [10.0.1-snapshot-8](https://github.com/instructure/instructure-ui/compare/v10.0.0...v10.0.1-snapshot-8) (2024-08-13)
 
 **Note:** Version bump only for package @instructure/ui-text-input
 

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

@@ -0,0 +1,221 @@
+var _TextInput, _TextInput2, _TextInput3, _TextInput4, _TextInput5, _TextInput6;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+import '@testing-library/jest-dom';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import { TextInput } from '../index';
+describe('<TextInput/>', () => {
+  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 include a label', async () => {
+    const _render = render(_TextInput || (_TextInput = /*#__PURE__*/React.createElement(TextInput, {
+        renderLabel: "Name"
+      }))),
+      container = _render.container;
+    const label = container.querySelector('label');
+    expect(label).toHaveTextContent('Name');
+  });
+  it('should focus the input when focus is called', async () => {
+    var _ref;
+    let ref;
+    render( /*#__PURE__*/React.createElement(TextInput, {
+      renderLabel: "Name"
+      //@ts-expect-error TODO this is coming from ReactComponentWrapper
+      ,
+      inputRef: el => {
+        ref = el;
+      }
+    }));
+    const input = screen.getByRole('textbox');
+    (_ref = ref) === null || _ref === void 0 ? void 0 : _ref.focus();
+    expect(input).toHaveFocus();
+  });
+  it('should provide an inputRef prop', async () => {
+    const inputRef = vi.fn();
+    render( /*#__PURE__*/React.createElement(TextInput, {
+      renderLabel: "Name",
+      inputRef: inputRef
+    }));
+    const input = screen.getByRole('textbox');
+    expect(inputRef).toHaveBeenCalledWith(input);
+  });
+  it('should provide a value getter', async () => {
+    var _ref2;
+    let ref;
+    render( /*#__PURE__*/React.createElement(TextInput, {
+      renderLabel: "Name",
+      defaultValue: "bar"
+      //@ts-expect-error TODO this is coming from ReactComponentWrapper
+      ,
+      inputRef: el => {
+        ref = el;
+      }
+    }));
+    expect((_ref2 = ref) === null || _ref2 === void 0 ? void 0 : _ref2.value).toBe('bar');
+  });
+  it('should provide messageId to FormField', async () => {
+    render( /*#__PURE__*/React.createElement(TextInput, {
+      renderLabel: "Name",
+      messages: [{
+        text: 'yup',
+        type: 'error'
+      }]
+    }));
+    const input = screen.getByRole('textbox');
+    expect(input).toHaveAttribute('aria-describedby');
+  });
+  it('should have equal messagesId and aria-describedby values', async () => {
+    const _render2 = render( /*#__PURE__*/React.createElement(TextInput, {
+        renderLabel: "Name",
+        messages: [{
+          text: 'yup',
+          type: 'error'
+        }]
+      })),
+      container = _render2.container;
+    const id = screen.getByRole('textbox').getAttribute('aria-describedby');
+    const messages = container.querySelector('span[class$="-formFieldMessages"]');
+    expect(messages).toHaveAttribute('id', id);
+  });
+  it('should handle multiple aria-describedby ids', async () => {
+    render( /*#__PURE__*/React.createElement(TextInput, {
+      renderLabel: "Name",
+      "aria-describedby": "assistive-id",
+      messages: [{
+        text: 'yup',
+        type: 'error'
+      }]
+    }));
+    const ids = screen.getByRole('textbox').getAttribute('aria-describedby');
+    expect(ids).toMatch('assistive-id TextInput-messages');
+  });
+  describe('events', () => {
+    it('responds to onChange event', async () => {
+      const onChange = vi.fn();
+      render( /*#__PURE__*/React.createElement(TextInput, {
+        renderLabel: "Name",
+        onChange: onChange
+      }));
+      const input = screen.getByRole('textbox');
+      fireEvent.change(input, {
+        target: {
+          value: 'foo'
+        }
+      });
+      await waitFor(() => {
+        expect(onChange).toHaveBeenCalledTimes(1);
+      });
+    });
+    it('responds to onBlur event', async () => {
+      const onBlur = vi.fn();
+      render( /*#__PURE__*/React.createElement(TextInput, {
+        renderLabel: "Name",
+        onBlur: onBlur
+      }));
+      userEvent.tab();
+      userEvent.tab();
+      await waitFor(() => {
+        expect(onBlur).toHaveBeenCalled();
+      });
+    });
+    it('responds to onFocus event', async () => {
+      const onFocus = vi.fn();
+      render( /*#__PURE__*/React.createElement(TextInput, {
+        renderLabel: "Name",
+        onFocus: onFocus
+      }));
+      const input = screen.getByRole('textbox');
+      input.focus();
+      await waitFor(() => {
+        expect(onFocus).toHaveBeenCalled();
+      });
+    });
+  });
+  describe('interaction', () => {
+    it('should set the disabled attribute when `interaction` is disabled', async () => {
+      render(_TextInput2 || (_TextInput2 = /*#__PURE__*/React.createElement(TextInput, {
+        renderLabel: "Name",
+        interaction: "disabled"
+      })));
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('disabled');
+    });
+    it('should set the disabled attribute when `disabled` is set', async () => {
+      render(_TextInput3 || (_TextInput3 = /*#__PURE__*/React.createElement(TextInput, {
+        renderLabel: "Name",
+        disabled: true
+      })));
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('disabled');
+    });
+    it('should set the readonly attribute when `interaction` is readonly', async () => {
+      render(_TextInput4 || (_TextInput4 = /*#__PURE__*/React.createElement(TextInput, {
+        renderLabel: "Name",
+        interaction: "readonly"
+      })));
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('readonly');
+    });
+    it('should set the readonly attribute when `readOnly` is set', async () => {
+      render(_TextInput5 || (_TextInput5 = /*#__PURE__*/React.createElement(TextInput, {
+        renderLabel: "Name",
+        readOnly: true
+      })));
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('readonly');
+    });
+  });
+  describe('for a11y', () => {
+    it('should meet standards', async () => {
+      const _render3 = render(_TextInput6 || (_TextInput6 = /*#__PURE__*/React.createElement(TextInput, {
+          renderLabel: "Name"
+        }))),
+        container = _render3.container;
+      const axeCheck = await runAxeCheck(container);
+      expect(axeCheck).toBe(true);
+    });
+    it('should set aria-invalid when errors prop is set', async () => {
+      render( /*#__PURE__*/React.createElement(TextInput, {
+        renderLabel: "Name",
+        messages: [{
+          type: 'error',
+          text: 'some error message'
+        }]
+      }));
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('aria-invalid');
+    });
+  });
+});

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

@@ -0,0 +1,223 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _vitest = require("vitest");
+require("@testing-library/jest-dom");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _index = require("../index");
+var _TextInput, _TextInput2, _TextInput3, _TextInput4, _TextInput5, _TextInput6;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+describe('<TextInput/>', () => {
+  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 include a label', async () => {
+    const _render = (0, _react2.render)(_TextInput || (_TextInput = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
+        renderLabel: "Name"
+      }))),
+      container = _render.container;
+    const label = container.querySelector('label');
+    expect(label).toHaveTextContent('Name');
+  });
+  it('should focus the input when focus is called', async () => {
+    var _ref;
+    let ref;
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TextInput, {
+      renderLabel: "Name"
+      //@ts-expect-error TODO this is coming from ReactComponentWrapper
+      ,
+      inputRef: el => {
+        ref = el;
+      }
+    }));
+    const input = _react2.screen.getByRole('textbox');
+    (_ref = ref) === null || _ref === void 0 ? void 0 : _ref.focus();
+    expect(input).toHaveFocus();
+  });
+  it('should provide an inputRef prop', async () => {
+    const inputRef = _vitest.vi.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TextInput, {
+      renderLabel: "Name",
+      inputRef: inputRef
+    }));
+    const input = _react2.screen.getByRole('textbox');
+    expect(inputRef).toHaveBeenCalledWith(input);
+  });
+  it('should provide a value getter', async () => {
+    var _ref2;
+    let ref;
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TextInput, {
+      renderLabel: "Name",
+      defaultValue: "bar"
+      //@ts-expect-error TODO this is coming from ReactComponentWrapper
+      ,
+      inputRef: el => {
+        ref = el;
+      }
+    }));
+    expect((_ref2 = ref) === null || _ref2 === void 0 ? void 0 : _ref2.value).toBe('bar');
+  });
+  it('should provide messageId to FormField', async () => {
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TextInput, {
+      renderLabel: "Name",
+      messages: [{
+        text: 'yup',
+        type: 'error'
+      }]
+    }));
+    const input = _react2.screen.getByRole('textbox');
+    expect(input).toHaveAttribute('aria-describedby');
+  });
+  it('should have equal messagesId and aria-describedby values', async () => {
+    const _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TextInput, {
+        renderLabel: "Name",
+        messages: [{
+          text: 'yup',
+          type: 'error'
+        }]
+      })),
+      container = _render2.container;
+    const id = _react2.screen.getByRole('textbox').getAttribute('aria-describedby');
+    const messages = container.querySelector('span[class$="-formFieldMessages"]');
+    expect(messages).toHaveAttribute('id', id);
+  });
+  it('should handle multiple aria-describedby ids', async () => {
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TextInput, {
+      renderLabel: "Name",
+      "aria-describedby": "assistive-id",
+      messages: [{
+        text: 'yup',
+        type: 'error'
+      }]
+    }));
+    const ids = _react2.screen.getByRole('textbox').getAttribute('aria-describedby');
+    expect(ids).toMatch('assistive-id TextInput-messages');
+  });
+  describe('events', () => {
+    it('responds to onChange event', async () => {
+      const onChange = _vitest.vi.fn();
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TextInput, {
+        renderLabel: "Name",
+        onChange: onChange
+      }));
+      const input = _react2.screen.getByRole('textbox');
+      _react2.fireEvent.change(input, {
+        target: {
+          value: 'foo'
+        }
+      });
+      await (0, _react2.waitFor)(() => {
+        expect(onChange).toHaveBeenCalledTimes(1);
+      });
+    });
+    it('responds to onBlur event', async () => {
+      const onBlur = _vitest.vi.fn();
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TextInput, {
+        renderLabel: "Name",
+        onBlur: onBlur
+      }));
+      _userEvent.default.tab();
+      _userEvent.default.tab();
+      await (0, _react2.waitFor)(() => {
+        expect(onBlur).toHaveBeenCalled();
+      });
+    });
+    it('responds to onFocus event', async () => {
+      const onFocus = _vitest.vi.fn();
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TextInput, {
+        renderLabel: "Name",
+        onFocus: onFocus
+      }));
+      const input = _react2.screen.getByRole('textbox');
+      input.focus();
+      await (0, _react2.waitFor)(() => {
+        expect(onFocus).toHaveBeenCalled();
+      });
+    });
+  });
+  describe('interaction', () => {
+    it('should set the disabled attribute when `interaction` is disabled', async () => {
+      (0, _react2.render)(_TextInput2 || (_TextInput2 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
+        renderLabel: "Name",
+        interaction: "disabled"
+      })));
+      const input = _react2.screen.getByRole('textbox');
+      expect(input).toHaveAttribute('disabled');
+    });
+    it('should set the disabled attribute when `disabled` is set', async () => {
+      (0, _react2.render)(_TextInput3 || (_TextInput3 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
+        renderLabel: "Name",
+        disabled: true
+      })));
+      const input = _react2.screen.getByRole('textbox');
+      expect(input).toHaveAttribute('disabled');
+    });
+    it('should set the readonly attribute when `interaction` is readonly', async () => {
+      (0, _react2.render)(_TextInput4 || (_TextInput4 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
+        renderLabel: "Name",
+        interaction: "readonly"
+      })));
+      const input = _react2.screen.getByRole('textbox');
+      expect(input).toHaveAttribute('readonly');
+    });
+    it('should set the readonly attribute when `readOnly` is set', async () => {
+      (0, _react2.render)(_TextInput5 || (_TextInput5 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
+        renderLabel: "Name",
+        readOnly: true
+      })));
+      const input = _react2.screen.getByRole('textbox');
+      expect(input).toHaveAttribute('readonly');
+    });
+  });
+  describe('for a11y', () => {
+    it('should meet standards', async () => {
+      const _render3 = (0, _react2.render)(_TextInput6 || (_TextInput6 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
+          renderLabel: "Name"
+        }))),
+        container = _render3.container;
+      const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+      expect(axeCheck).toBe(true);
+    });
+    it('should set aria-invalid when errors prop is set', async () => {
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TextInput, {
+        renderLabel: "Name",
+        messages: [{
+          type: 'error',
+          text: 'some error message'
+        }]
+      }));
+      const input = _react2.screen.getByRole('textbox');
+      expect(input).toHaveAttribute('aria-invalid');
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-text-input",
-  "version": "10.0.1-snapshot-6",
+  "version": "10.0.1-snapshot-8",
   "description": "A styled HTML text input component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,24 +23,28 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.0.1-snapshot-6",
-    "@instructure/ui-badge": "10.0.1-snapshot-6",
-    "@instructure/ui-color-utils": "10.0.1-snapshot-6",
-    "@instructure/ui-test-utils": "10.0.1-snapshot-6",
-    "@instructure/ui-themes": "10.0.1-snapshot-6",
-    "react-dom": "^18.3.1"
+    "@instructure/ui-axe-check": "10.0.1-snapshot-8",
+    "@instructure/ui-babel-preset": "10.0.1-snapshot-8",
+    "@instructure/ui-badge": "10.0.1-snapshot-8",
+    "@instructure/ui-color-utils": "10.0.1-snapshot-8",
+    "@instructure/ui-test-utils": "10.0.1-snapshot-8",
+    "@instructure/ui-themes": "10.0.1-snapshot-8",
+    "@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.0.1-snapshot-6",
-    "@instructure/shared-types": "10.0.1-snapshot-6",
-    "@instructure/ui-dom-utils": "10.0.1-snapshot-6",
-    "@instructure/ui-form-field": "10.0.1-snapshot-6",
-    "@instructure/ui-icons": "10.0.1-snapshot-6",
-    "@instructure/ui-prop-types": "10.0.1-snapshot-6",
-    "@instructure/ui-react-utils": "10.0.1-snapshot-6",
-    "@instructure/ui-tag": "10.0.1-snapshot-6",
-    "@instructure/ui-testable": "10.0.1-snapshot-6",
+    "@instructure/emotion": "10.0.1-snapshot-8",
+    "@instructure/shared-types": "10.0.1-snapshot-8",
+    "@instructure/ui-dom-utils": "10.0.1-snapshot-8",
+    "@instructure/ui-form-field": "10.0.1-snapshot-8",
+    "@instructure/ui-icons": "10.0.1-snapshot-8",
+    "@instructure/ui-prop-types": "10.0.1-snapshot-8",
+    "@instructure/ui-react-utils": "10.0.1-snapshot-8",
+    "@instructure/ui-tag": "10.0.1-snapshot-8",
+    "@instructure/ui-testable": "10.0.1-snapshot-8",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {