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

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

@@ -0,0 +1,181 @@
+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.
+ */
+
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { CondensedButton } from '../index';
+describe('<CondensedButton/>', () => {
+  var _CondensedButton8;
+  const icon = /*#__PURE__*/React.createElement("svg", {
+    "data-title": "myIcon",
+    height: "1em",
+    width: "1em",
+    style: {
+      fill: 'currentcolor'
+    }
+  }, _circle || (_circle = /*#__PURE__*/React.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';
+    render( /*#__PURE__*/React.createElement(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;
+    render( /*#__PURE__*/React.createElement(CondensedButton, {
+      ref: component => {
+        componentRef = component;
+      }
+    }, "Hello"));
+    const button = 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;
+    render( /*#__PURE__*/React.createElement(CondensedButton, {
+      ref: component => {
+        componentRef = component;
+      }
+    }, "Hello"));
+    const button = 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', () => {
+    render(_CondensedButton || (_CondensedButton = /*#__PURE__*/React.createElement(CondensedButton, {
+      type: "submit"
+    }, "Hello")));
+    const button = screen.getByRole('button', {
+      name: 'Hello'
+    });
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('type', 'submit');
+  });
+  it('should pass the `elementRef` prop', async () => {
+    const elementRef = jest.fn();
+    render( /*#__PURE__*/React.createElement(CondensedButton, {
+      elementRef: elementRef
+    }, "Hello"));
+    const button = screen.getByRole('button', {
+      name: 'Hello'
+    });
+    expect(elementRef).toHaveBeenCalledWith(button);
+  });
+  it('should pass the `as` prop', () => {
+    const _render = render(_CondensedButton2 || (_CondensedButton2 = /*#__PURE__*/React.createElement(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', () => {
+    render(_CondensedButton3 || (_CondensedButton3 = /*#__PURE__*/React.createElement(CondensedButton, {
+      interaction: "disabled"
+    }, "Hello")));
+    const button = screen.getByRole('button', {
+      name: 'Hello'
+    });
+    expect(button).toHaveAttribute('disabled');
+  });
+  it('should set the disabled attribute when `disabled` is set', () => {
+    render(_CondensedButton4 || (_CondensedButton4 = /*#__PURE__*/React.createElement(CondensedButton, {
+      disabled: true
+    }, "Hello")));
+    const button = screen.getByRole('button', {
+      name: 'Hello'
+    });
+    expect(button).toHaveAttribute('disabled');
+  });
+  it('should set the disabled attribute when `interaction` is set to readonly', () => {
+    render(_CondensedButton5 || (_CondensedButton5 = /*#__PURE__*/React.createElement(CondensedButton, {
+      interaction: "readonly"
+    }, "Hello")));
+    const button = screen.getByRole('button', {
+      name: 'Hello'
+    });
+    expect(button).toHaveAttribute('disabled');
+  });
+  it('should set the disabled attribute when `readOnly` is set', () => {
+    render(_CondensedButton6 || (_CondensedButton6 = /*#__PURE__*/React.createElement(CondensedButton, {
+      readOnly: true
+    }, "Hello")));
+    const button = screen.getByRole('button', {
+      name: 'Hello'
+    });
+    expect(button).toHaveAttribute('disabled');
+  });
+  it('should pass the `href` prop', () => {
+    render(_CondensedButton7 || (_CondensedButton7 = /*#__PURE__*/React.createElement(CondensedButton, {
+      href: "#"
+    }, "Hello")));
+    const linkButton = screen.getByRole('link', {
+      name: 'Hello'
+    });
+    expect(linkButton).toBeInTheDocument();
+    expect(linkButton).toHaveAttribute('href', '#');
+  });
+  it('should pass the `renderIcon` prop', async () => {
+    render(_CondensedButton8 || (_CondensedButton8 = /*#__PURE__*/React.createElement(CondensedButton, {
+      renderIcon: icon
+    }, "Hello")));
+    const svgIcon = document.querySelector(iconSelector);
+    const button = screen.getByRole('button', {
+      name: 'Hello'
+    });
+    expect(button).toBeInTheDocument();
+    expect(svgIcon).toBeInTheDocument();
+  });
+  it('should pass the `onClick` prop', async () => {
+    const onClick = jest.fn();
+    render( /*#__PURE__*/React.createElement(CondensedButton, {
+      onClick: onClick
+    }, "Hello"));
+    const button = screen.getByRole('button', {
+      name: 'Hello'
+    });
+    await userEvent.click(button);
+    await waitFor(() => {
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+});

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

@@ -0,0 +1,185 @@
+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.
+ */
+
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { IconButton } from '../index';
+describe('<IconButton/>', () => {
+  var _IconButton, _IconButton2, _IconButton3, _IconButton4, _IconButton5, _IconButton6, _IconButton7, _IconButton8, _IconButton9;
+  const icon = /*#__PURE__*/React.createElement("svg", {
+    "data-title": "myIcon",
+    height: "1em",
+    width: "1em",
+    style: {
+      fill: 'currentcolor'
+    }
+  }, _circle || (_circle = /*#__PURE__*/React.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', () => {
+    render(_IconButton || (_IconButton = /*#__PURE__*/React.createElement(IconButton, {
+      screenReaderLabel: "some action"
+    }, icon)));
+    const svgIcon = document.querySelector(iconSelector);
+    const button = 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', () => {
+    render(_IconButton2 || (_IconButton2 = /*#__PURE__*/React.createElement(IconButton, {
+      screenReaderLabel: "some action",
+      renderIcon: icon
+    })));
+    const svgIcon = document.querySelector(iconSelector);
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(svgIcon).toBeInTheDocument();
+  });
+  it('should provide a focused getter', () => {
+    var _componentRef;
+    let componentRef;
+    render( /*#__PURE__*/React.createElement(IconButton, {
+      screenReaderLabel: "some action",
+      renderIcon: icon,
+      ref: component => {
+        componentRef = component;
+      }
+    }));
+    const button = 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;
+    render( /*#__PURE__*/React.createElement(IconButton, {
+      screenReaderLabel: "some action",
+      renderIcon: icon,
+      ref: component => {
+        componentRef = component;
+      }
+    }));
+    const button = screen.getByRole('button');
+    (_componentRef2 = componentRef) === null || _componentRef2 === void 0 ? void 0 : _componentRef2.focus();
+    expect(document.activeElement).toBe(button);
+  });
+  it('should pass the `href` prop', () => {
+    render(_IconButton3 || (_IconButton3 = /*#__PURE__*/React.createElement(IconButton, {
+      screenReaderLabel: "some action",
+      renderIcon: icon,
+      href: "#"
+    })));
+    const linkButton = screen.getByRole('link');
+    expect(linkButton).toBeInTheDocument();
+    expect(linkButton).toHaveAttribute('href', '#');
+  });
+  it('should pass the `type` prop', () => {
+    render(_IconButton4 || (_IconButton4 = /*#__PURE__*/React.createElement(IconButton, {
+      screenReaderLabel: "some action",
+      renderIcon: icon,
+      type: "reset"
+    })));
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('type', 'reset');
+  });
+  it('should pass the `elementRef` prop', () => {
+    const elementRef = jest.fn();
+    render( /*#__PURE__*/React.createElement(IconButton, {
+      screenReaderLabel: "some action",
+      renderIcon: icon,
+      elementRef: elementRef
+    }));
+    const button = screen.getByRole('button');
+    expect(elementRef).toHaveBeenCalledWith(button);
+  });
+  it('should pass the `as` prop', () => {
+    const _render = render(_IconButton5 || (_IconButton5 = /*#__PURE__*/React.createElement(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', () => {
+    render(_IconButton6 || (_IconButton6 = /*#__PURE__*/React.createElement(IconButton, {
+      screenReaderLabel: "some action",
+      renderIcon: icon,
+      interaction: "disabled"
+    })));
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('disabled');
+  });
+  it('should set the disabled attribute when `disabled` is set', () => {
+    render(_IconButton7 || (_IconButton7 = /*#__PURE__*/React.createElement(IconButton, {
+      screenReaderLabel: "some action",
+      renderIcon: icon,
+      disabled: true
+    })));
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('disabled');
+  });
+  it('should set the disabled attribute when `interaction` is set to readonly', () => {
+    render(_IconButton8 || (_IconButton8 = /*#__PURE__*/React.createElement(IconButton, {
+      screenReaderLabel: "some action",
+      renderIcon: icon,
+      interaction: "readonly"
+    })));
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('disabled');
+  });
+  it('should set the disabled attribute when `readOnly` is set', () => {
+    render(_IconButton9 || (_IconButton9 = /*#__PURE__*/React.createElement(IconButton, {
+      screenReaderLabel: "some action",
+      renderIcon: icon,
+      readOnly: true
+    })));
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('disabled');
+  });
+  it('should pass the `onClick` prop', async () => {
+    const onClick = jest.fn();
+    render( /*#__PURE__*/React.createElement(IconButton, {
+      screenReaderLabel: "some action",
+      renderIcon: icon,
+      onClick: onClick
+    }));
+    const button = screen.getByRole('button');
+    await userEvent.click(button);
+    await waitFor(() => {
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+});

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

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