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

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

@@ -0,0 +1,183 @@
+"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 _circle, _CondensedButton, _CondensedButton2, _CondensedButton3, _CondensedButton4, _CondensedButton5, _CondensedButton6, _CondensedButton7;
+/*
+ * 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('<CondensedButton/>', () => {
+  var _CondensedButton8;
+  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"
+  })));
+  const iconSelector = 'svg[data-title="myIcon"]';
+  it('should render children', () => {
+    const children = 'Hello world';
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.CondensedButton, null, children));
+    const button = document.querySelector('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent(children);
+  });
+  it('should provide a focused getter', () => {
+    var _componentRef;
+    let componentRef;
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.CondensedButton, {
+      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.CondensedButton, {
+      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)(_CondensedButton || (_CondensedButton = /*#__PURE__*/_react.default.createElement(_index.CondensedButton, {
+      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', async () => {
+    const elementRef = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.CondensedButton, {
+      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)(_CondensedButton2 || (_CondensedButton2 = /*#__PURE__*/_react.default.createElement(_index.CondensedButton, {
+        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)(_CondensedButton3 || (_CondensedButton3 = /*#__PURE__*/_react.default.createElement(_index.CondensedButton, {
+      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)(_CondensedButton4 || (_CondensedButton4 = /*#__PURE__*/_react.default.createElement(_index.CondensedButton, {
+      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)(_CondensedButton5 || (_CondensedButton5 = /*#__PURE__*/_react.default.createElement(_index.CondensedButton, {
+      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)(_CondensedButton6 || (_CondensedButton6 = /*#__PURE__*/_react.default.createElement(_index.CondensedButton, {
+      readOnly: true
+    }, "Hello")));
+    const button = _react2.screen.getByRole('button', {
+      name: 'Hello'
+    });
+    expect(button).toHaveAttribute('disabled');
+  });
+  it('should pass the `href` prop', () => {
+    (0, _react2.render)(_CondensedButton7 || (_CondensedButton7 = /*#__PURE__*/_react.default.createElement(_index.CondensedButton, {
+      href: "#"
+    }, "Hello")));
+    const linkButton = _react2.screen.getByRole('link', {
+      name: 'Hello'
+    });
+    expect(linkButton).toBeInTheDocument();
+    expect(linkButton).toHaveAttribute('href', '#');
+  });
+  it('should pass the `renderIcon` prop', async () => {
+    (0, _react2.render)(_CondensedButton8 || (_CondensedButton8 = /*#__PURE__*/_react.default.createElement(_index.CondensedButton, {
+      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.CondensedButton, {
+      onClick: onClick
+    }, "Hello"));
+    const button = _react2.screen.getByRole('button', {
+      name: 'Hello'
+    });
+    await _userEvent.default.click(button);
+    await (0, _react2.waitFor)(() => {
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+});

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

@@ -0,0 +1,187 @@
+"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 _circle;
+/*
+ * 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('<IconButton/>', () => {
+  var _IconButton, _IconButton2, _IconButton3, _IconButton4, _IconButton5, _IconButton6, _IconButton7, _IconButton8, _IconButton9;
+  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"
+  })));
+  const iconSelector = 'svg[data-title="myIcon"]';
+  it('should render an icon when provided as the `children` prop', () => {
+    (0, _react2.render)(_IconButton || (_IconButton = /*#__PURE__*/_react.default.createElement(_index.IconButton, {
+      screenReaderLabel: "some action"
+    }, icon)));
+    const svgIcon = document.querySelector(iconSelector);
+    const button = _react2.screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(svgIcon).toBeInTheDocument();
+    expect(button).toHaveTextContent('some action');
+  });
+  it('should render an icon when provided as the `renderIcon` prop', () => {
+    (0, _react2.render)(_IconButton2 || (_IconButton2 = /*#__PURE__*/_react.default.createElement(_index.IconButton, {
+      screenReaderLabel: "some action",
+      renderIcon: icon
+    })));
+    const svgIcon = document.querySelector(iconSelector);
+    const button = _react2.screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(svgIcon).toBeInTheDocument();
+  });
+  it('should provide a focused getter', () => {
+    var _componentRef;
+    let componentRef;
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.IconButton, {
+      screenReaderLabel: "some action",
+      renderIcon: icon,
+      ref: component => {
+        componentRef = component;
+      }
+    }));
+    const button = _react2.screen.getByRole('button');
+    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.IconButton, {
+      screenReaderLabel: "some action",
+      renderIcon: icon,
+      ref: component => {
+        componentRef = component;
+      }
+    }));
+    const button = _react2.screen.getByRole('button');
+    (_componentRef2 = componentRef) === null || _componentRef2 === void 0 ? void 0 : _componentRef2.focus();
+    expect(document.activeElement).toBe(button);
+  });
+  it('should pass the `href` prop', () => {
+    (0, _react2.render)(_IconButton3 || (_IconButton3 = /*#__PURE__*/_react.default.createElement(_index.IconButton, {
+      screenReaderLabel: "some action",
+      renderIcon: icon,
+      href: "#"
+    })));
+    const linkButton = _react2.screen.getByRole('link');
+    expect(linkButton).toBeInTheDocument();
+    expect(linkButton).toHaveAttribute('href', '#');
+  });
+  it('should pass the `type` prop', () => {
+    (0, _react2.render)(_IconButton4 || (_IconButton4 = /*#__PURE__*/_react.default.createElement(_index.IconButton, {
+      screenReaderLabel: "some action",
+      renderIcon: icon,
+      type: "reset"
+    })));
+    const button = _react2.screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('type', 'reset');
+  });
+  it('should pass the `elementRef` prop', () => {
+    const elementRef = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.IconButton, {
+      screenReaderLabel: "some action",
+      renderIcon: icon,
+      elementRef: elementRef
+    }));
+    const button = _react2.screen.getByRole('button');
+    expect(elementRef).toHaveBeenCalledWith(button);
+  });
+  it('should pass the `as` prop', () => {
+    const _render = (0, _react2.render)(_IconButton5 || (_IconButton5 = /*#__PURE__*/_react.default.createElement(_index.IconButton, {
+        screenReaderLabel: "some action",
+        renderIcon: icon,
+        as: "li"
+      }))),
+      container = _render.container;
+    const button = container.querySelector('[type="button"]');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent('some action');
+    expect(button.tagName).toBe('LI');
+  });
+  it('should set the disabled attribute when `interaction` is set to disabled', () => {
+    (0, _react2.render)(_IconButton6 || (_IconButton6 = /*#__PURE__*/_react.default.createElement(_index.IconButton, {
+      screenReaderLabel: "some action",
+      renderIcon: icon,
+      interaction: "disabled"
+    })));
+    const button = _react2.screen.getByRole('button');
+    expect(button).toHaveAttribute('disabled');
+  });
+  it('should set the disabled attribute when `disabled` is set', () => {
+    (0, _react2.render)(_IconButton7 || (_IconButton7 = /*#__PURE__*/_react.default.createElement(_index.IconButton, {
+      screenReaderLabel: "some action",
+      renderIcon: icon,
+      disabled: true
+    })));
+    const button = _react2.screen.getByRole('button');
+    expect(button).toHaveAttribute('disabled');
+  });
+  it('should set the disabled attribute when `interaction` is set to readonly', () => {
+    (0, _react2.render)(_IconButton8 || (_IconButton8 = /*#__PURE__*/_react.default.createElement(_index.IconButton, {
+      screenReaderLabel: "some action",
+      renderIcon: icon,
+      interaction: "readonly"
+    })));
+    const button = _react2.screen.getByRole('button');
+    expect(button).toHaveAttribute('disabled');
+  });
+  it('should set the disabled attribute when `readOnly` is set', () => {
+    (0, _react2.render)(_IconButton9 || (_IconButton9 = /*#__PURE__*/_react.default.createElement(_index.IconButton, {
+      screenReaderLabel: "some action",
+      renderIcon: icon,
+      readOnly: true
+    })));
+    const button = _react2.screen.getByRole('button');
+    expect(button).toHaveAttribute('disabled');
+  });
+  it('should pass the `onClick` prop', async () => {
+    const onClick = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.IconButton, {
+      screenReaderLabel: "some action",
+      renderIcon: icon,
+      onClick: onClick
+    }));
+    const button = _react2.screen.getByRole('button');
+    await _userEvent.default.click(button);
+    await (0, _react2.waitFor)(() => {
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+});

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

@@ -0,0 +1,165 @@
+"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 _svg;
+/*
+ * 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('<ToggleButton />', () => {
+  var _ToggleButton, _ToggleButton2, _ToggleButton3, _ToggleButton4, _ToggleButton5, _ToggleButton6, _ToggleButton7, _ToggleButton8, _ToggleButton9;
+  const icon = _svg || (_svg = /*#__PURE__*/_react.default.createElement("svg", {
+    "data-title": "myIcon",
+    height: "1em",
+    width: "1em"
+  }, /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "0.5em",
+    cy: "0.5em",
+    r: "0.5em"
+  })));
+  const iconSelector = 'svg[data-title="myIcon"]';
+  it('should render', () => {
+    (0, _react2.render)(_ToggleButton || (_ToggleButton = /*#__PURE__*/_react.default.createElement(_index.ToggleButton, {
+      screenReaderLabel: "This is a screen reader label",
+      renderIcon: icon,
+      renderTooltipContent: "This is tooltip content",
+      status: "pressed"
+    })));
+    const button = _react2.screen.getByRole('button');
+    const svgIcon = document.querySelector(iconSelector);
+    const tooltip = _react2.screen.getByRole('tooltip');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent('This is a screen reader label');
+    expect(svgIcon).toBeInTheDocument();
+    expect(tooltip).toBeInTheDocument();
+    expect(tooltip).toHaveTextContent('This is tooltip content');
+  });
+  it('should set `aria-pressed` to `true` if `status` is `pressed`', () => {
+    (0, _react2.render)(_ToggleButton2 || (_ToggleButton2 = /*#__PURE__*/_react.default.createElement(_index.ToggleButton, {
+      screenReaderLabel: "This is a screen reader label",
+      renderIcon: icon,
+      renderTooltipContent: "This is tooltip content",
+      status: "pressed"
+    })));
+    const button = _react2.screen.getByRole('button');
+    expect(button).toHaveAttribute('aria-pressed', 'true');
+  });
+  it('should set `aria-pressed` to `false` if `status` is `unpressed`', () => {
+    (0, _react2.render)(_ToggleButton3 || (_ToggleButton3 = /*#__PURE__*/_react.default.createElement(_index.ToggleButton, {
+      screenReaderLabel: "This is a screen reader label",
+      renderIcon: icon,
+      renderTooltipContent: "This is tooltip content",
+      status: "unpressed"
+    })));
+    const button = _react2.screen.getByRole('button');
+    expect(button).toHaveAttribute('aria-pressed', 'false');
+  });
+  it('should render an icon', () => {
+    (0, _react2.render)(_ToggleButton4 || (_ToggleButton4 = /*#__PURE__*/_react.default.createElement(_index.ToggleButton, {
+      screenReaderLabel: "This is a screen reader label",
+      renderIcon: icon,
+      renderTooltipContent: "This is tooltip content",
+      status: "pressed"
+    })));
+    const button = _react2.screen.getByRole('button');
+    const svgIcon = document.querySelector(iconSelector);
+    expect(button).toBeInTheDocument();
+    expect(svgIcon).toBeInTheDocument();
+  });
+  it('should pass the `as` prop', () => {
+    const _render = (0, _react2.render)(_ToggleButton5 || (_ToggleButton5 = /*#__PURE__*/_react.default.createElement(_index.ToggleButton, {
+        screenReaderLabel: "This is a screen reader label",
+        renderIcon: icon,
+        renderTooltipContent: "This is tooltip content",
+        as: "li",
+        status: "pressed"
+      }))),
+      container = _render.container;
+    const button = container.querySelector('[type="button"]');
+    expect(button).toBeInTheDocument();
+    expect(button.tagName).toBe('LI');
+  });
+  it('should set the disabled attribute when `interaction` prop is set to disabled', () => {
+    (0, _react2.render)(_ToggleButton6 || (_ToggleButton6 = /*#__PURE__*/_react.default.createElement(_index.ToggleButton, {
+      screenReaderLabel: "This is a screen reader label",
+      renderIcon: icon,
+      renderTooltipContent: "This is tooltip content",
+      interaction: "disabled",
+      status: "pressed"
+    })));
+    const button = _react2.screen.getByRole('button');
+    expect(button).toHaveAttribute('disabled');
+  });
+  it('should set the disabled attribute when `disabled` prop is set', () => {
+    (0, _react2.render)(_ToggleButton7 || (_ToggleButton7 = /*#__PURE__*/_react.default.createElement(_index.ToggleButton, {
+      screenReaderLabel: "This is a screen reader label",
+      renderIcon: icon,
+      renderTooltipContent: "This is tooltip content",
+      disabled: true,
+      status: "pressed"
+    })));
+    const button = _react2.screen.getByRole('button');
+    expect(button).toHaveAttribute('disabled');
+  });
+  it('should set the disabled attribute when `interaction` prop is set to readonly', () => {
+    (0, _react2.render)(_ToggleButton8 || (_ToggleButton8 = /*#__PURE__*/_react.default.createElement(_index.ToggleButton, {
+      screenReaderLabel: "This is a screen reader label",
+      renderIcon: icon,
+      renderTooltipContent: "This is tooltip content",
+      interaction: "readonly",
+      status: "pressed"
+    })));
+    const button = _react2.screen.getByRole('button');
+    expect(button).toHaveAttribute('disabled');
+  });
+  it('should set the disabled attribute when `readOnly` prop is set', () => {
+    (0, _react2.render)(_ToggleButton9 || (_ToggleButton9 = /*#__PURE__*/_react.default.createElement(_index.ToggleButton, {
+      screenReaderLabel: "This is a screen reader label",
+      renderIcon: icon,
+      renderTooltipContent: "This is tooltip content",
+      readOnly: true,
+      status: "pressed"
+    })));
+    const button = _react2.screen.getByRole('button');
+    expect(button).toHaveAttribute('disabled');
+  });
+  it('should pass the `onClick` prop', async () => {
+    const onClick = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.ToggleButton, {
+      screenReaderLabel: "This is a screen reader label",
+      renderIcon: icon,
+      renderTooltipContent: "This is tooltip content",
+      onClick: onClick,
+      status: "pressed"
+    }));
+    const button = _react2.screen.getByRole('button');
+    await _userEvent.default.click(button);
+    await (0, _react2.waitFor)(() => {
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-buttons",
-  "version": "8.55.0",
+  "version": "8.55.1-snapshot-3",
   "description": "Accessible button components",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,28 +23,30 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.55.0",
-    "@instructure/ui-test-locator": "8.55.0",
-    "@instructure/ui-test-queries": "8.55.0",
-    "@instructure/ui-test-utils": "8.55.0",
-    "@instructure/ui-themes": "8.55.0"
+    "@instructure/ui-axe-check": "8.55.1-snapshot-3",
+    "@instructure/ui-babel-preset": "8.55.1-snapshot-3",
+    "@instructure/ui-test-utils": "8.55.1-snapshot-3",
+    "@instructure/ui-themes": "8.55.1-snapshot-3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@instructure/console": "8.55.0",
-    "@instructure/emotion": "8.55.0",
-    "@instructure/shared-types": "8.55.0",
-    "@instructure/ui-a11y-content": "8.55.0",
-    "@instructure/ui-a11y-utils": "8.55.0",
-    "@instructure/ui-color-utils": "8.55.0",
-    "@instructure/ui-dom-utils": "8.55.0",
-    "@instructure/ui-icons": "8.55.0",
-    "@instructure/ui-position": "8.55.0",
-    "@instructure/ui-react-utils": "8.55.0",
-    "@instructure/ui-testable": "8.55.0",
-    "@instructure/ui-tooltip": "8.55.0",
-    "@instructure/ui-utils": "8.55.0",
-    "@instructure/ui-view": "8.55.0",
+    "@instructure/console": "8.55.1-snapshot-3",
+    "@instructure/emotion": "8.55.1-snapshot-3",
+    "@instructure/shared-types": "8.55.1-snapshot-3",
+    "@instructure/ui-a11y-content": "8.55.1-snapshot-3",
+    "@instructure/ui-a11y-utils": "8.55.1-snapshot-3",
+    "@instructure/ui-color-utils": "8.55.1-snapshot-3",
+    "@instructure/ui-dom-utils": "8.55.1-snapshot-3",
+    "@instructure/ui-icons": "8.55.1-snapshot-3",
+    "@instructure/ui-position": "8.55.1-snapshot-3",
+    "@instructure/ui-react-utils": "8.55.1-snapshot-3",
+    "@instructure/ui-testable": "8.55.1-snapshot-3",
+    "@instructure/ui-tooltip": "8.55.1-snapshot-3",
+    "@instructure/ui-utils": "8.55.1-snapshot-3",
+    "@instructure/ui-view": "8.55.1-snapshot-3",
     "keycode": "^2.2.1",
     "prop-types": "^15.8.1"
   },