@instructure/ui-radio-input 10.6.0 → 10.6.1-snapshot-2

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

@@ -0,0 +1,227 @@
+"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 _RadioInput, _RadioInput2, _RadioInput3;
+/*
+ * 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('<RadioInput />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution
+    consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  it('renders an input with type "radio"', async () => {
+    const _render = (0, _react2.render)(_RadioInput || (_RadioInput = /*#__PURE__*/_react.default.createElement(_index.RadioInput, {
+        label: "fake label",
+        value: "someValue",
+        name: "someName"
+      }))),
+      container = _render.container;
+    const input = container.querySelector('input');
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute('type', 'radio');
+  });
+  describe('events', () => {
+    it('responds to onClick event', async () => {
+      const onClick = _vitest.vi.fn();
+      const _render2 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.RadioInput, {
+          label: "fake label",
+          value: "someValue",
+          name: "someName",
+          onClick: onClick
+        })),
+        container = _render2.container;
+      const input = container.querySelector('input');
+      _userEvent.default.click(input);
+      await (0, _react2.waitFor)(() => {
+        expect(onClick).toHaveBeenCalled();
+      });
+    });
+    it('does not respond to onClick event when disabled', async () => {
+      const onClick = _vitest.vi.fn();
+      const _render3 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.RadioInput, {
+          disabled: true,
+          label: "fake label",
+          value: "someValue",
+          name: "someName",
+          onClick: onClick
+        })),
+        container = _render3.container;
+      const input = container.querySelector('input');
+      _react2.fireEvent.click(input);
+      await (0, _react2.waitFor)(() => {
+        expect(onClick).not.toHaveBeenCalled();
+        expect(input).toBeDisabled();
+      });
+    });
+    it('does not respond to onClick event when readOnly', async () => {
+      const onClick = _vitest.vi.fn();
+      const _render4 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.RadioInput, {
+          readOnly: true,
+          label: "fake label",
+          value: "someValue",
+          name: "someName",
+          onClick: onClick
+        })),
+        container = _render4.container;
+      const input = container.querySelector('input');
+      _react2.fireEvent.click(input);
+      await (0, _react2.waitFor)(() => {
+        expect(onClick).not.toHaveBeenCalled();
+        expect(input).toBeDisabled();
+      });
+    });
+    it('responds to onChange event', async () => {
+      const onChange = _vitest.vi.fn();
+      const _render5 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.RadioInput, {
+          label: "fake label",
+          value: "someValue",
+          name: "someName",
+          onChange: onChange
+        })),
+        container = _render5.container;
+      const input = container.querySelector('input');
+      _userEvent.default.click(input);
+      await (0, _react2.waitFor)(() => {
+        expect(onChange).toHaveBeenCalled();
+      });
+    });
+    it('does not respond to onChange event when disabled', async () => {
+      const onChange = _vitest.vi.fn();
+      const _render6 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.RadioInput, {
+          disabled: true,
+          label: "fake label",
+          value: "someValue",
+          name: "someName",
+          onChange: onChange
+        })),
+        container = _render6.container;
+      const input = container.querySelector('input');
+      _react2.fireEvent.click(input);
+      await (0, _react2.waitFor)(() => {
+        expect(onChange).not.toHaveBeenCalled();
+      });
+    });
+    it('does not respond to onChange event when readOnly', async () => {
+      const onChange = _vitest.vi.fn();
+      const _render7 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.RadioInput, {
+          readOnly: true,
+          label: "fake label",
+          value: "someValue",
+          name: "someName",
+          onChange: onChange
+        })),
+        container = _render7.container;
+      const input = container.querySelector('input');
+      _react2.fireEvent.click(input);
+      await (0, _react2.waitFor)(() => {
+        expect(onChange).not.toHaveBeenCalled();
+      });
+    });
+    it('responds to onBlur event', async () => {
+      const onBlur = _vitest.vi.fn();
+      const _render8 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.RadioInput, {
+          label: "fake label",
+          value: "someValue",
+          name: "someName",
+          onBlur: onBlur
+        })),
+        container = _render8.container;
+      const input = container.querySelector('input');
+      _react2.fireEvent.focusOut(input);
+      await (0, _react2.waitFor)(() => {
+        expect(onBlur).toHaveBeenCalled();
+      });
+    });
+    it('responds to onFocus event', async () => {
+      const onFocus = _vitest.vi.fn();
+      const _render9 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.RadioInput, {
+          label: "fake label",
+          value: "someValue",
+          name: "someName",
+          onFocus: onFocus
+        })),
+        container = _render9.container;
+      const input = container.querySelector('input');
+      _react2.fireEvent.focus(input);
+      await (0, _react2.waitFor)(() => {
+        expect(onFocus).toHaveBeenCalled();
+      });
+    });
+    it('sets input to checked when selected', async () => {
+      const _render10 = (0, _react2.render)(_RadioInput2 || (_RadioInput2 = /*#__PURE__*/_react.default.createElement(_index.RadioInput, {
+          checked: true,
+          label: "fake label",
+          value: "someValue",
+          name: "someName"
+        }))),
+        container = _render10.container;
+      const input = container.querySelector('input');
+      expect(input).toHaveAttribute('checked');
+    });
+    it('focuses with the focus helper', async () => {
+      let ref;
+      const _render11 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.RadioInput, {
+          label: "fake label",
+          value: "someValue",
+          name: "someName"
+          // @ts-expect-error this is managed by the testing framework
+          ,
+          ref: el => ref = el
+        })),
+        container = _render11.container;
+      const input = container.querySelector('input');
+      ref.focus();
+      await (0, _react2.waitFor)(() => {
+        expect(document.activeElement).toBe(input);
+      });
+    });
+  });
+  describe('for a11y', () => {
+    it('simple variant should meet a11y standards', async () => {
+      const _render12 = (0, _react2.render)(_RadioInput3 || (_RadioInput3 = /*#__PURE__*/_react.default.createElement(_index.RadioInput, {
+          variant: "simple",
+          label: "fake label",
+          value: "someValue",
+          name: "someName"
+        }))),
+        container = _render12.container;
+      const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+      expect(axeCheck).toBe(true);
+    });
+  });
+});

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

@@ -0,0 +1,243 @@
+"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 _RadioInput13 = require("../../RadioInput");
+var _index = require("../index");
+var _RadioInputGroup, _RadioInputGroup2, _RadioInput, _RadioInput2, _RadioInput3, _RadioInput4, _RadioInput5, _RadioInput6, _RadioInput7, _RadioInput8, _RadioInput9, _RadioInput10, _RadioInput11, _RadioInput12, _RadioInputGroup3, _RadioInputGroup4, _RadioInputGroup5;
+/*
+ * 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('<RadioInputGroup />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  it('adds the name props to all RadioInput types', async () => {
+    const _render = (0, _react2.render)(_RadioInputGroup || (_RadioInputGroup = /*#__PURE__*/_react.default.createElement(_index.RadioInputGroup, {
+        name: "fruit",
+        description: "Select a fruit"
+      }, /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+        label: "Apple",
+        value: "apple"
+      }), /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+        label: "Banana",
+        value: "banana"
+      }), /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+        label: "Orange",
+        value: "orange"
+      })))),
+      container = _render.container;
+    const inputs = await container.querySelectorAll('input[name="fruit"]');
+    expect(inputs.length).toBe(3);
+  });
+  it('requires an `onChange` prop with a `value` prop', async () => {
+    (0, _react2.render)(_RadioInputGroup2 || (_RadioInputGroup2 = /*#__PURE__*/_react.default.createElement(_index.RadioInputGroup, {
+      name: "fruit",
+      description: "Select a fruit",
+      value: "banana"
+    }, /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+      label: "Apple",
+      value: "apple"
+    }), /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+      label: "Banana",
+      value: "banana"
+    }), /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+      label: "Orange",
+      value: "orange"
+    }))));
+    const expectedErrorMessage = `provided a 'value' prop without an 'onChange' handler`;
+    expect(consoleErrorMock).toHaveBeenCalledWith(expect.any(String), expect.any(String), expect.stringContaining(expectedErrorMessage), expect.any(String));
+  });
+  it('calls the onChange prop', async () => {
+    const onChange = _vitest.vi.fn();
+    const _render2 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.RadioInputGroup, {
+        name: "fruit",
+        description: "Select a fruit",
+        onChange: onChange
+      }, _RadioInput || (_RadioInput = /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+        label: "Apple",
+        value: "apple"
+      })), _RadioInput2 || (_RadioInput2 = /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+        label: "Banana",
+        value: "banana"
+      })), _RadioInput3 || (_RadioInput3 = /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+        label: "Orange",
+        value: "orange"
+      })))),
+      container = _render2.container;
+    const input = container.querySelector('input');
+    _userEvent.default.click(input);
+    await (0, _react2.waitFor)(() => {
+      expect(onChange).toHaveBeenCalled();
+    });
+  });
+  it('does not call the onChange prop when disabled', async () => {
+    const onChange = _vitest.vi.fn();
+    const _render3 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.RadioInputGroup, {
+        disabled: true,
+        name: "fruit",
+        description: "Select a fruit",
+        onChange: onChange
+      }, _RadioInput4 || (_RadioInput4 = /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+        label: "Apple",
+        value: "apple"
+      })), _RadioInput5 || (_RadioInput5 = /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+        label: "Banana",
+        value: "banana"
+      })), _RadioInput6 || (_RadioInput6 = /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+        label: "Orange",
+        value: "orange"
+      })))),
+      container = _render3.container;
+    const input = container.querySelector('input');
+    _react2.fireEvent.click(input);
+    await (0, _react2.waitFor)(() => {
+      expect(onChange).not.toHaveBeenCalled();
+      expect(input).toBeDisabled();
+    });
+  });
+  it('does not call the onChange prop when readOnly', async () => {
+    const onChange = _vitest.vi.fn();
+    const _render4 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.RadioInputGroup, {
+        readOnly: true,
+        name: "fruit",
+        description: "Select a fruit",
+        onChange: onChange
+      }, _RadioInput7 || (_RadioInput7 = /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+        label: "Apple",
+        value: "apple"
+      })), _RadioInput8 || (_RadioInput8 = /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+        label: "Banana",
+        value: "banana"
+      })), _RadioInput9 || (_RadioInput9 = /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+        label: "Orange",
+        value: "orange"
+      })))),
+      container = _render4.container;
+    const input = container.querySelector('input');
+    _react2.fireEvent.click(input);
+    await (0, _react2.waitFor)(() => {
+      expect(onChange).not.toHaveBeenCalled();
+      expect(input).toBeDisabled();
+    });
+  });
+  it('should not update the value when the value prop is set', async () => {
+    const _render5 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.RadioInputGroup, {
+        name: "fruit",
+        description: "Select a fruit",
+        value: "orange",
+        onChange: () => {}
+      }, _RadioInput10 || (_RadioInput10 = /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+        label: "Apple",
+        value: "apple"
+      })), _RadioInput11 || (_RadioInput11 = /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+        label: "Banana",
+        value: "banana"
+      })), _RadioInput12 || (_RadioInput12 = /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+        label: "Orange",
+        value: "orange"
+      })))),
+      container = _render5.container;
+    const banana = container.querySelector('input[value="banana"]');
+    const orange = container.querySelector('input[value="orange"]');
+    expect(orange).toHaveAttribute('checked');
+    _userEvent.default.click(banana);
+    await (0, _react2.waitFor)(() => {
+      expect(orange).toHaveAttribute('checked');
+    });
+  });
+  it('adds the correct tabindex to RadioInputs when none are checked', async () => {
+    const _render6 = (0, _react2.render)(_RadioInputGroup3 || (_RadioInputGroup3 = /*#__PURE__*/_react.default.createElement(_index.RadioInputGroup, {
+        name: "fruit",
+        description: "Select a fruit"
+      }, /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+        label: "Apple",
+        value: "apple"
+      }), /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+        label: "Banana",
+        value: "banana"
+      }), /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+        label: "Orange",
+        value: "orange"
+      })))),
+      container = _render6.container;
+    const inputs = container.querySelectorAll('input[name="fruit"]');
+    expect(inputs[0]).toHaveAttribute('tabindex', '0');
+    expect(inputs[1]).toHaveAttribute('tabindex', '-1');
+    expect(inputs[2]).toHaveAttribute('tabindex', '-1');
+  });
+  it('adds the correct tabindex to RadioInputs when checked', async () => {
+    const _render7 = (0, _react2.render)(_RadioInputGroup4 || (_RadioInputGroup4 = /*#__PURE__*/_react.default.createElement(_index.RadioInputGroup, {
+        name: "fruit",
+        description: "Select a fruit",
+        defaultValue: "banana"
+      }, /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+        label: "Apple",
+        value: "apple"
+      }), /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+        label: "Banana",
+        value: "banana"
+      }), /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+        label: "Orange",
+        value: "orange"
+      })))),
+      container = _render7.container;
+    const inputs = container.querySelectorAll('input[name="fruit"]');
+    expect(inputs[0]).toHaveAttribute('tabindex', '-1');
+    expect(inputs[1]).toHaveAttribute('tabindex', '0');
+    expect(inputs[2]).toHaveAttribute('tabindex', '-1');
+  });
+  describe('for a11y', () => {
+    it('should meet a11y standards', async () => {
+      const _render8 = (0, _react2.render)(_RadioInputGroup5 || (_RadioInputGroup5 = /*#__PURE__*/_react.default.createElement(_index.RadioInputGroup, {
+          name: "fruit",
+          description: "Select a fruit"
+        }, /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+          label: "Apple",
+          value: "apple"
+        }), /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+          label: "Banana",
+          value: "banana"
+        }), /*#__PURE__*/_react.default.createElement(_RadioInput13.RadioInput, {
+          label: "Orange",
+          value: "orange"
+        })))),
+        container = _render8.container;
+      const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+      expect(axeCheck).toBe(true);
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-radio-input",
-  "version": "10.6.0",
+  "version": "10.6.1-snapshot-2",
   "description": "A styled HTML input type='radio' element",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,21 +24,25 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.25.6",
-    "@instructure/emotion": "10.6.0",
-    "@instructure/shared-types": "10.6.0",
-    "@instructure/ui-dom-utils": "10.6.0",
-    "@instructure/ui-form-field": "10.6.0",
-    "@instructure/ui-prop-types": "10.6.0",
-    "@instructure/ui-react-utils": "10.6.0",
-    "@instructure/ui-testable": "10.6.0",
+    "@instructure/emotion": "10.6.1-snapshot-2",
+    "@instructure/shared-types": "10.6.1-snapshot-2",
+    "@instructure/ui-dom-utils": "10.6.1-snapshot-2",
+    "@instructure/ui-form-field": "10.6.1-snapshot-2",
+    "@instructure/ui-prop-types": "10.6.1-snapshot-2",
+    "@instructure/ui-react-utils": "10.6.1-snapshot-2",
+    "@instructure/ui-testable": "10.6.1-snapshot-2",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.6.0",
-    "@instructure/ui-color-utils": "10.6.0",
-    "@instructure/ui-test-locator": "10.6.0",
-    "@instructure/ui-test-utils": "10.6.0",
-    "@instructure/ui-themes": "10.6.0"
+    "@instructure/ui-axe-check": "10.6.1-snapshot-2",
+    "@instructure/ui-babel-preset": "10.6.1-snapshot-2",
+    "@instructure/ui-color-utils": "10.6.1-snapshot-2",
+    "@instructure/ui-test-utils": "10.6.1-snapshot-2",
+    "@instructure/ui-themes": "10.6.1-snapshot-2",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "vitest": "^2.1.1"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"