@instructure/ui-buttons 8.55.1-snapshot-0 → 8.55.1-snapshot-4

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.55.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v8.55.0...v8.55.1-snapshot-0) (2024-04-17)
+## [8.55.1-snapshot-4](https://github.com/instructure/instructure-ui/compare/v8.55.0...v8.55.1-snapshot-4) (2024-04-17)
 
 **Note:** Version bump only for package @instructure/ui-buttons
 

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

@@ -0,0 +1,361 @@
+var _BaseButton, _BaseButton2, _BaseButton3, _BaseButton4, _BaseButton5, _svg, _BaseButton6, _BaseButton7, _BaseButton8, _BaseButton9, _BaseButton10, _BaseButton11;
+/*
+ * 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 { BaseButton } from '../index';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+describe('<BaseButton/>', () => {
+  let consoleWarningMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution
+    consoleWarningMock = jest.spyOn(console, 'warn').mockImplementation();
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+  });
+  it('should render a button and the children as button text', () => {
+    render(_BaseButton || (_BaseButton = /*#__PURE__*/React.createElement(BaseButton, null, "Hello World")));
+    const button = document.querySelector('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent('Hello World');
+  });
+  it('should not error with a null child', () => {
+    render(_BaseButton2 || (_BaseButton2 = /*#__PURE__*/React.createElement(BaseButton, null, "Hello World", null)));
+    const button = document.querySelector('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent('Hello World');
+  });
+  it('should render a link styled as a button if href is provided', () => {
+    render(_BaseButton3 || (_BaseButton3 = /*#__PURE__*/React.createElement(BaseButton, {
+      href: "example.html"
+    }, "Hello World")));
+    const linkButton = screen.getByRole('link', {
+      name: 'Hello World'
+    });
+    expect(linkButton).toBeInTheDocument();
+    expect(linkButton).toHaveAttribute('href', 'example.html');
+  });
+  it('should render as a link when `to` prop is provided', () => {
+    const _render = render(_BaseButton4 || (_BaseButton4 = /*#__PURE__*/React.createElement(BaseButton, {
+        to: "/example"
+      }, "Test"))),
+      container = _render.container;
+    const linkButton = container.querySelector('a');
+    expect(linkButton.getAttribute('to')).toBe('/example');
+  });
+  it('should render designated tag if `as` prop is specified', () => {
+    const _render2 = render(_BaseButton5 || (_BaseButton5 = /*#__PURE__*/React.createElement(BaseButton, {
+        as: "span"
+      }, "Hello World"))),
+      container = _render2.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 _render3 = render( /*#__PURE__*/React.createElement(BaseButton, {
+        as: "span",
+        onClick: onClick
+      }, "Hello World")),
+      container = _render3.container;
+    const button = container.querySelector('span[type="button"]');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('role', 'button');
+  });
+  it('should set tabIndex="0"', () => {
+    const onClick = jest.fn();
+    render( /*#__PURE__*/React.createElement(BaseButton, {
+      as: "span",
+      onClick: onClick
+    }, "Hello World"));
+    const button = screen.getByRole('button', {
+      name: 'Hello World'
+    });
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('tabIndex', '0');
+  });
+  it('should pass down the type prop to the button element', async () => {
+    const onClick = jest.fn();
+    render( /*#__PURE__*/React.createElement(BaseButton, {
+      type: "submit",
+      onClick: onClick
+    }, "Hello World"));
+    const button = screen.getByRole('button', {
+      name: 'Hello World'
+    });
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('type', 'submit');
+  });
+  it('should pass down an icon via the icon property', () => {
+    const SomeIcon = () => _svg || (_svg = /*#__PURE__*/React.createElement("svg", null, /*#__PURE__*/React.createElement("circle", {
+      cx: "25",
+      cy: "75",
+      r: "20"
+    })));
+    render( /*#__PURE__*/React.createElement(BaseButton, {
+      renderIcon: SomeIcon
+    }, "Hello World"));
+    const icon = document.querySelector('svg');
+    expect(icon).toBeInTheDocument();
+  });
+  it('focuses with the focus helper', async () => {
+    render(_BaseButton6 || (_BaseButton6 = /*#__PURE__*/React.createElement(BaseButton, null, "Hello World")));
+    const button = screen.getByRole('button', {
+      name: 'Hello World'
+    });
+    button.focus();
+    expect(document.activeElement).toBe(button);
+  });
+  it('should provide an  elementRef prop', async () => {
+    const elementRef = jest.fn();
+    render( /*#__PURE__*/React.createElement(BaseButton, {
+      elementRef: elementRef
+    }, "Hello World"));
+    const button = screen.getByRole('button', {
+      name: 'Hello World'
+    });
+    expect(elementRef).toBeCalledWith(button);
+  });
+  describe('onClick', () => {
+    it('should call onClick when clicked', async () => {
+      const onClick = jest.fn();
+      render( /*#__PURE__*/React.createElement(BaseButton, {
+        onClick: onClick
+      }, "Hello World"));
+      const button = screen.getByRole('button', {
+        name: 'Hello World'
+      });
+      await userEvent.click(button);
+      await waitFor(() => {
+        expect(onClick).toHaveBeenCalledTimes(1);
+      });
+    });
+    it('should not call onClick when interaction is "disabled"', async () => {
+      const onClick = jest.fn();
+      render( /*#__PURE__*/React.createElement(BaseButton, {
+        interaction: "disabled",
+        onClick: onClick
+      }, "Hello World"));
+      const button = screen.getByRole('button', {
+        name: 'Hello World'
+      });
+      await userEvent.click(button);
+      await waitFor(() => {
+        expect(onClick).not.toHaveBeenCalled();
+      });
+    });
+    it('should not call onClick when disabled is set"', async () => {
+      const onClick = jest.fn();
+      render( /*#__PURE__*/React.createElement(BaseButton, {
+        disabled: true,
+        onClick: onClick
+      }, "Hello World"));
+      const button = screen.getByRole('button', {
+        name: 'Hello World'
+      });
+      await userEvent.click(button);
+      await waitFor(() => {
+        expect(onClick).not.toHaveBeenCalled();
+      });
+    });
+    it('should not call onClick when interaction is "readonly"', async () => {
+      const onClick = jest.fn();
+      render( /*#__PURE__*/React.createElement(BaseButton, {
+        interaction: "readonly",
+        onClick: onClick
+      }, "Hello World"));
+      const button = screen.getByRole('button', {
+        name: 'Hello World'
+      });
+      await userEvent.click(button);
+      await waitFor(() => {
+        expect(onClick).not.toHaveBeenCalled();
+      });
+    });
+    it('should not call onClick when readOnly is set', async () => {
+      const onClick = jest.fn();
+      render( /*#__PURE__*/React.createElement(BaseButton, {
+        readOnly: true,
+        onClick: onClick
+      }, "Hello World"));
+      const button = screen.getByRole('button', {
+        name: 'Hello World'
+      });
+      await userEvent.click(button);
+      await 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();
+      render(_BaseButton7 || (_BaseButton7 = /*#__PURE__*/React.createElement(BaseButton, {
+        href: "#"
+      }, "Hello World")));
+      const button = screen.getByRole('link', {
+        name: 'Hello World'
+      });
+      await userEvent.click(button);
+      await waitFor(() => {
+        expect(onClick).not.toHaveBeenCalled();
+      });
+    });
+    it('should not call onClick when interaction is "readonly" and an href prop is provided', async () => {
+      const onClick = jest.fn();
+      render( /*#__PURE__*/React.createElement(BaseButton, {
+        interaction: "readonly",
+        onClick: onClick,
+        href: "#"
+      }, "Hello World"));
+      const button = screen.getByRole('link', {
+        name: 'Hello World'
+      });
+      await userEvent.click(button);
+      await waitFor(() => {
+        expect(onClick).not.toHaveBeenCalled();
+      });
+    });
+    it('should call onClick when space key is pressed if href is provided', async () => {
+      const onClick = jest.fn();
+      render( /*#__PURE__*/React.createElement(BaseButton, {
+        onClick: onClick,
+        href: "#"
+      }, "Hello World"));
+      const button = screen.getByRole('link', {
+        name: 'Hello World'
+      });
+      await userEvent.type(button, '{space}');
+      await waitFor(() => {
+        expect(onClick).toHaveBeenCalled();
+      });
+    });
+    it('should call onClick when enter key is pressed when not a button or link', async () => {
+      const onClick = jest.fn();
+      render( /*#__PURE__*/React.createElement(BaseButton, {
+        as: "span",
+        onClick: onClick
+      }, "Hello World"));
+      const button = screen.getByRole('button', {
+        name: 'Hello World'
+      });
+      await userEvent.type(button, '{enter}');
+      await waitFor(() => {
+        expect(onClick).toHaveBeenCalled();
+      });
+    });
+    it('should not call onClick when interaction is "disabled" and space key is pressed', async () => {
+      const onClick = jest.fn();
+      render( /*#__PURE__*/React.createElement(BaseButton, {
+        interaction: "disabled",
+        onClick: onClick,
+        href: "#"
+      }, "Hello World"));
+      const button = screen.getByRole('link', {
+        name: 'Hello World'
+      });
+      await userEvent.type(button, '{space}');
+      await waitFor(() => {
+        expect(onClick).not.toHaveBeenCalled();
+      });
+    });
+    it('should not call onClick when interaction is "readonly" and space key is pressed', async () => {
+      const onClick = jest.fn();
+      render( /*#__PURE__*/React.createElement(BaseButton, {
+        interaction: "readonly",
+        onClick: onClick,
+        href: "#"
+      }, "Hello World"));
+      const button = screen.getByRole('link', {
+        name: 'Hello World'
+      });
+      await userEvent.type(button, '{space}');
+      await waitFor(() => {
+        expect(onClick).not.toHaveBeenCalled();
+      });
+    });
+  });
+  describe('when passing down props to View', () => {
+    it("passes cursor='pointer' to View by default", async () => {
+      render(_BaseButton8 || (_BaseButton8 = /*#__PURE__*/React.createElement(BaseButton, null, "Hello World")));
+      const button = screen.getByRole('button', {
+        name: 'Hello World'
+      });
+      const style = window.getComputedStyle(button);
+      expect(style.cursor).toBe('pointer');
+    });
+    it("passes cursor='not-allowed' to View when disabled", async () => {
+      render(_BaseButton9 || (_BaseButton9 = /*#__PURE__*/React.createElement(BaseButton, {
+        interaction: "disabled"
+      }, "Hello World")));
+      const button = screen.getByRole('button', {
+        name: 'Hello World'
+      });
+      const style = window.getComputedStyle(button);
+      expect(style.cursor).toBe('not-allowed');
+    });
+  });
+  describe('for a11y', () => {
+    it('should meet standards when onClick is given', async () => {
+      const onClick = jest.fn();
+      render( /*#__PURE__*/React.createElement(BaseButton, {
+        onClick: onClick
+      }, "Hello World"));
+      const button = screen.getByRole('button', {
+        name: 'Hello World'
+      });
+      await userEvent.click(button);
+      await waitFor(async () => {
+        const axeCheck = await runAxeCheck(button);
+        expect(axeCheck).toBe(true);
+      });
+    });
+    describe('when disabled', () => {
+      it('sets the disabled attribute so that the button is not in tab order', () => {
+        render(_BaseButton10 || (_BaseButton10 = /*#__PURE__*/React.createElement(BaseButton, {
+          interaction: "disabled"
+        }, "Hello World")));
+        const button = 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', async () => {
+        render(_BaseButton11 || (_BaseButton11 = /*#__PURE__*/React.createElement(BaseButton, {
+          interaction: "readonly"
+        }, "Hello World")));
+        const button = screen.getByRole('button', {
+          name: 'Hello World'
+        });
+        expect(button).toHaveAttribute('disabled');
+      });
+    });
+  });
+});