@instructure/ui-buttons 8.55.0 → 8.55.1-snapshot-3

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

@@ -0,0 +1,461 @@
+"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"));
+require("@testing-library/jest-dom");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _index = require("../index");
+var _circle, _Button, _Button2, _Button3, _Button4, _Button5, _Button6, _Button7, _Button8, _Button10, _Button11, _Button12, _Button13, _Button14, _Button15, _Button16, _Button17, _Button18;
+/*
+ * 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('<Button/>', () => {
+  var _Button9;
+  let consoleWarningMock;
+  const iconSelector = 'svg[data-title="myIcon"]';
+  const icon = /*#__PURE__*/_react.default.createElement("svg", {
+    "data-title": "myIcon",
+    height: "1em",
+    width: "1em",
+    style: {
+      fill: 'currentcolor'
+    }
+  }, _circle || (_circle = /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "0.5em",
+    cy: "0.5em",
+    r: "0.5em"
+  })));
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution
+    consoleWarningMock = jest.spyOn(console, 'warn').mockImplementation();
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+  });
+  it('should render children', () => {
+    const children = 'Hello world';
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, null, children));
+    const button = document.querySelector('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent(children);
+  });
+  it('should render a button', () => {
+    (0, _react2.render)(_Button || (_Button = /*#__PURE__*/_react.default.createElement(_index.Button, null, "Hello World")));
+    const button = _react2.screen.getByRole('button', {
+      name: 'Hello World'
+    });
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('type', 'button');
+  });
+  it('should provide a focused getter', () => {
+    var _componentRef;
+    let componentRef;
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button
+    //@ts-expect-error TODO this is coming from ReactComponentWrapper
+    , {
+      ref: component => {
+        componentRef = component;
+      }
+    }, "Hello"));
+    const button = _react2.screen.getByRole('button', {
+      name: 'Hello'
+    });
+    button.focus();
+    expect((_componentRef = componentRef) === null || _componentRef === void 0 ? void 0 : _componentRef.focused).toBe(true);
+  });
+  it('should provide a focus function', () => {
+    var _componentRef2;
+    let componentRef;
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button
+    //@ts-expect-error TODO this is coming from ReactComponentWrapper
+    , {
+      ref: component => {
+        componentRef = component;
+      }
+    }, "Hello"));
+    const button = _react2.screen.getByRole('button', {
+      name: 'Hello'
+    });
+    (_componentRef2 = componentRef) === null || _componentRef2 === void 0 ? void 0 : _componentRef2.focus();
+    expect(document.activeElement).toBe(button);
+  });
+  it('should pass the type attribute', () => {
+    (0, _react2.render)(_Button2 || (_Button2 = /*#__PURE__*/_react.default.createElement(_index.Button, {
+      type: "submit"
+    }, "Hello")));
+    const button = _react2.screen.getByRole('button', {
+      name: 'Hello'
+    });
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('type', 'submit');
+  });
+  it('should pass the `elementRef` prop', () => {
+    const elementRef = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
+      elementRef: elementRef
+    }, "Hello"));
+    const button = _react2.screen.getByRole('button', {
+      name: 'Hello'
+    });
+    expect(elementRef).toHaveBeenCalledWith(button);
+  });
+  it('should pass the `as` prop', () => {
+    const _render = (0, _react2.render)(_Button3 || (_Button3 = /*#__PURE__*/_react.default.createElement(_index.Button, {
+        as: "li"
+      }, "Hello"))),
+      container = _render.container;
+    const button = container.querySelector('[type="button"]');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent('Hello');
+    expect(button.tagName).toBe('LI');
+  });
+  it('should set the disabled attribute when `interaction` is set to disabled', () => {
+    (0, _react2.render)(_Button4 || (_Button4 = /*#__PURE__*/_react.default.createElement(_index.Button, {
+      interaction: "disabled"
+    }, "Hello")));
+    const button = _react2.screen.getByRole('button', {
+      name: 'Hello'
+    });
+    expect(button).toHaveAttribute('disabled');
+  });
+  it('should set the disabled attribute when `disabled` is set', () => {
+    (0, _react2.render)(_Button5 || (_Button5 = /*#__PURE__*/_react.default.createElement(_index.Button, {
+      disabled: true
+    }, "Hello")));
+    const button = _react2.screen.getByRole('button', {
+      name: 'Hello'
+    });
+    expect(button).toHaveAttribute('disabled');
+  });
+  it('should set the disabled attribute when `interaction` is set to readonly', () => {
+    (0, _react2.render)(_Button6 || (_Button6 = /*#__PURE__*/_react.default.createElement(_index.Button, {
+      interaction: "readonly"
+    }, "Hello")));
+    const button = _react2.screen.getByRole('button', {
+      name: 'Hello'
+    });
+    expect(button).toHaveAttribute('disabled');
+  });
+  it('should set the disabled attribute when `readOnly` is set', () => {
+    (0, _react2.render)(_Button7 || (_Button7 = /*#__PURE__*/_react.default.createElement(_index.Button, {
+      readOnly: true
+    }, "Hello")));
+    const button = _react2.screen.getByRole('button', {
+      name: 'Hello'
+    });
+    expect(button).toHaveAttribute('disabled');
+  });
+  it('should pass the `href` prop', () => {
+    (0, _react2.render)(_Button8 || (_Button8 = /*#__PURE__*/_react.default.createElement(_index.Button, {
+      href: "#"
+    }, "Hello")));
+    const linkButton = _react2.screen.getByRole('link', {
+      name: 'Hello'
+    });
+    expect(linkButton).toBeInTheDocument();
+    expect(linkButton).toHaveAttribute('href', '#');
+  });
+  it('should pass the `renderIcon` prop', () => {
+    (0, _react2.render)(_Button9 || (_Button9 = /*#__PURE__*/_react.default.createElement(_index.Button, {
+      renderIcon: icon
+    }, "Hello")));
+    const svgIcon = document.querySelector(iconSelector);
+    const button = _react2.screen.getByRole('button', {
+      name: 'Hello'
+    });
+    expect(button).toBeInTheDocument();
+    expect(svgIcon).toBeInTheDocument();
+  });
+  it('should pass the `onClick` prop', async () => {
+    const onClick = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
+      onClick: onClick
+    }, "Hello"));
+    const button = _react2.screen.getByRole('button', {
+      name: 'Hello'
+    });
+    await _userEvent.default.click(button);
+    await (0, _react2.waitFor)(() => {
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+  it('should render the children as button text', () => {
+    (0, _react2.render)(_Button10 || (_Button10 = /*#__PURE__*/_react.default.createElement(_index.Button, null, "Hello World")));
+    const button = _react2.screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent('Hello World');
+  });
+  it('should render a button', async () => {
+    (0, _react2.render)(_Button11 || (_Button11 = /*#__PURE__*/_react.default.createElement(_index.Button, null, "Hello World")));
+    const button = _react2.screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('type', 'button');
+    expect(button).toHaveTextContent('Hello World');
+  });
+  it('should not error with a null child', () => {
+    (0, _react2.render)(_Button12 || (_Button12 = /*#__PURE__*/_react.default.createElement(_index.Button, null, "Hello World", null)));
+    const button = _react2.screen.getByRole('button', {
+      name: 'Hello World'
+    });
+    expect(button).toBeInTheDocument();
+  });
+  it('should render a link styled as a button if href is provided', () => {
+    (0, _react2.render)(_Button13 || (_Button13 = /*#__PURE__*/_react.default.createElement(_index.Button, {
+      href: "example.html"
+    }, "Hello World")));
+    const button = _react2.screen.getAllByRole('link', {
+      name: 'Hello World'
+    });
+    expect(button).toHaveLength(1);
+    expect(button[0]).toHaveAttribute('href', 'example.html');
+  });
+  it('should render as a link when `to` prop is provided', () => {
+    const _render2 = (0, _react2.render)(_Button14 || (_Button14 = /*#__PURE__*/_react.default.createElement(_index.Button, {
+        to: "/example"
+      }, "Test"))),
+      container = _render2.container;
+    const linkButton = container.querySelector('a');
+    expect(linkButton).toBeInTheDocument();
+    expect(linkButton).toHaveAttribute('to', '/example');
+  });
+  it('should render designated tag if `as` prop is specified', () => {
+    const _render3 = (0, _react2.render)(_Button15 || (_Button15 = /*#__PURE__*/_react.default.createElement(_index.Button, {
+        as: "span"
+      }, "Hello World"))),
+      container = _render3.container;
+    const button = container.querySelector('[type="button"]');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent('Hello World');
+    expect(button.tagName).toBe('SPAN');
+  });
+  it('should set role="button"', () => {
+    const onClick = jest.fn();
+    const _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
+        as: "span",
+        onClick: onClick
+      }, "Hello World")),
+      container = _render4.container;
+    const button = container.querySelector('[type="button"]');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('role', 'button');
+  });
+  it('should set tabIndex="0"', () => {
+    const onClick = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
+      as: "span",
+      onClick: onClick
+    }, "Hello World"));
+    const button = _react2.screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('tabIndex', '0');
+  });
+  it('should pass down the type prop to the button element', () => {
+    const onClick = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
+      type: "submit",
+      onClick: onClick
+    }, "Hello World"));
+    const button = _react2.screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('type', 'submit');
+  });
+  it('focuses with the focus helper', () => {
+    const onFocus = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
+      onFocus: onFocus
+    }, "Hello World"));
+    const button = _react2.screen.getByRole('button');
+    button.focus();
+    expect(onFocus).toHaveBeenCalled();
+    expect(document.activeElement).toBe(button);
+  });
+  describe('onClick', () => {
+    it('should call onClick when clicked', async () => {
+      const onClick = jest.fn();
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
+        onClick: onClick
+      }, "Hello World"));
+      const button = _react2.screen.getByRole('button', {
+        name: 'Hello World'
+      });
+      await _userEvent.default.click(button);
+      await (0, _react2.waitFor)(() => {
+        expect(onClick).toHaveBeenCalled();
+      });
+    });
+    it('should not call onClick when button is disabled', async () => {
+      const onClick = jest.fn();
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
+        disabled: true,
+        onClick: onClick
+      }, "Hello World"));
+      const button = _react2.screen.getByRole('button', {
+        name: 'Hello World'
+      });
+      await _userEvent.default.click(button);
+      await (0, _react2.waitFor)(() => {
+        expect(onClick).not.toHaveBeenCalled();
+      });
+    });
+    it('should not call onClick when button is readOnly', async () => {
+      const onClick = jest.fn();
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
+        readOnly: true,
+        onClick: onClick
+      }, "Hello World"));
+      const button = _react2.screen.getByRole('button', {
+        name: 'Hello World'
+      });
+      await _userEvent.default.click(button);
+      await (0, _react2.waitFor)(() => {
+        expect(onClick).not.toHaveBeenCalled();
+      });
+    });
+    it('should not call onClick when button is disabled and an href prop is provided', async () => {
+      const onClick = jest.fn();
+      (0, _react2.render)(_Button16 || (_Button16 = /*#__PURE__*/_react.default.createElement(_index.Button, {
+        href: "#"
+      }, "Hello World")));
+      const button = _react2.screen.getByRole('link', {
+        name: 'Hello World'
+      });
+      await _userEvent.default.click(button);
+      await (0, _react2.waitFor)(() => {
+        expect(onClick).not.toHaveBeenCalled();
+      });
+    });
+    it('should not call onClick when button is readOnly and an href prop is provided', async () => {
+      const onClick = jest.fn();
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
+        readOnly: true,
+        onClick: onClick,
+        href: "#"
+      }, "Hello World"));
+      const button = _react2.screen.getByRole('link', {
+        name: 'Hello World'
+      });
+      await _userEvent.default.click(button);
+      await (0, _react2.waitFor)(() => {
+        expect(onClick).not.toHaveBeenCalled();
+      });
+    });
+    it('should call onClick when space key is pressed if href is provided', async () => {
+      const onClick = jest.fn();
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
+        onClick: onClick,
+        href: "#"
+      }, "Hello World"));
+      const button = _react2.screen.getByRole('link', {
+        name: 'Hello World'
+      });
+      await _userEvent.default.type(button, '{space}');
+      await (0, _react2.waitFor)(() => {
+        expect(onClick).toHaveBeenCalled();
+      });
+    });
+    it('should call onClick when enter key is pressed when not a button or link', async () => {
+      const onClick = jest.fn();
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
+        as: "span",
+        onClick: onClick
+      }, "Hello World"));
+      const button = _react2.screen.getByRole('button', {
+        name: 'Hello World'
+      });
+      await _userEvent.default.type(button, '{enter}');
+      await (0, _react2.waitFor)(() => {
+        expect(onClick).toHaveBeenCalled();
+      });
+    });
+    it('should not call onClick when button is disabled and space key is pressed', async () => {
+      const onClick = jest.fn();
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
+        disabled: true,
+        onClick: onClick,
+        href: "#"
+      }, "Hello World"));
+      const button = _react2.screen.getByRole('link', {
+        name: 'Hello World'
+      });
+      await _userEvent.default.type(button, '{spaec}');
+      await (0, _react2.waitFor)(() => {
+        expect(onClick).not.toHaveBeenCalled();
+      });
+    });
+    it('should not call onClick when button is readOnly and space key is pressed', async () => {
+      const onClick = jest.fn();
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
+        readOnly: true,
+        onClick: onClick,
+        href: "#"
+      }, "Hello World"));
+      const button = _react2.screen.getByRole('link', {
+        name: 'Hello World'
+      });
+      await _userEvent.default.type(button, '{space}');
+      await (0, _react2.waitFor)(() => {
+        expect(onClick).not.toHaveBeenCalled();
+      });
+    });
+  });
+  describe('for a11y', () => {
+    it('should meet standards when onClick is given', async () => {
+      const onClick = jest.fn();
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Button, {
+        onClick: onClick
+      }, "Hello World"));
+      const button = _react2.screen.getByRole('button', {
+        name: 'Hello World'
+      });
+      await _userEvent.default.click(button);
+      await (0, _react2.waitFor)(async () => {
+        const axeCheck = await (0, _runAxeCheck.runAxeCheck)(button);
+        expect(axeCheck).toBe(true);
+      });
+    });
+    describe('when disabled', () => {
+      it('sets the disabled attribute so that the button is not in tab order', () => {
+        (0, _react2.render)(_Button17 || (_Button17 = /*#__PURE__*/_react.default.createElement(_index.Button, {
+          disabled: true
+        }, "Hello World")));
+        const button = _react2.screen.getByRole('button', {
+          name: 'Hello World'
+        });
+        expect(button).toHaveAttribute('disabled');
+      });
+    });
+    describe('when readOnly', () => {
+      it('sets the disabled attribute so that the button is not in tab order', () => {
+        (0, _react2.render)(_Button18 || (_Button18 = /*#__PURE__*/_react.default.createElement(_index.Button, {
+          readOnly: true
+        }, "Hello World")));
+        const button = _react2.screen.getByRole('button', {
+          name: 'Hello World'
+        });
+        expect(button).toHaveAttribute('disabled');
+      });
+    });
+  });
+});

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

@@ -0,0 +1,65 @@
+"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"));
+require("@testing-library/jest-dom");
+var _index = require("../index");
+var _CloseButton;
+/*
+ * 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('<CloseButton />', () => {
+  let consoleWarningMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution
+    consoleWarningMock = jest.spyOn(console, 'warn').mockImplementation();
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+  });
+  it('should render with x icon', async () => {
+    (0, _react2.render)(_CloseButton || (_CloseButton = /*#__PURE__*/_react.default.createElement(_index.CloseButton, {
+      screenReaderLabel: "Close"
+    })));
+    const button = _react2.screen.getByRole('button');
+    const icon = document.querySelector('svg');
+    expect(icon).toBeInTheDocument();
+    expect(icon).toHaveAttribute('name', 'IconX');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent('Close');
+  });
+  it('should pass the `onClick` prop', async () => {
+    const onClick = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.CloseButton, {
+      onClick: onClick,
+      screenReaderLabel: "Hello"
+    }));
+    const button = _react2.screen.getByRole('button');
+    await _userEvent.default.click(button);
+    await (0, _react2.waitFor)(() => {
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+});