@instructure/ui-link 9.2.1-snapshot-9 → 9.2.1-snapshot-11

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.
 
-## [9.2.1-snapshot-9](https://github.com/instructure/instructure-ui/compare/v9.2.0...v9.2.1-snapshot-9) (2024-07-16)
+## [9.2.1-snapshot-11](https://github.com/instructure/instructure-ui/compare/v9.2.0...v9.2.1-snapshot-11) (2024-07-16)
 
 **Note:** Version bump only for package @instructure/ui-link
 

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

@@ -0,0 +1,363 @@
+var _Link, _Link2, _Link3, _svg, _TruncateText2, _svg2, _Link4, _Link5, _Link6, _Link7, _Link8, _Link9, _Link10, _Link11, _Link12, _Link13, _Link14, _Link15, _Link16, _Link17;
+/*
+ * 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 { userEvent } from '@testing-library/user-event';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import { Link } from '../index';
+
+//<unknown> is needed for React 17 compatibility
+class TruncateText extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("span", null, this.props.children);
+  }
+}
+TruncateText.displayName = "TruncateText";
+describe('<Link />', () => {
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleErrorMock.mockRestore();
+  });
+  it('should render the children as text content', async () => {
+    render(_Link || (_Link = /*#__PURE__*/React.createElement(Link, {
+      href: "https://instructure.design"
+    }, "Hello World")));
+    const link = screen.getByRole('link');
+    expect(link).toHaveTextContent('Hello World');
+  });
+  it('should render a button', async () => {
+    const onClick = vi.fn();
+    render( /*#__PURE__*/React.createElement(Link, {
+      onClick: onClick
+    }, "Hello World"));
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('type', 'button');
+  });
+  it('should meet a11y standards', async () => {
+    const _render = render(_Link2 || (_Link2 = /*#__PURE__*/React.createElement(Link, {
+        href: "https://instructure.design"
+      }, "Hello World"))),
+      container = _render.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+  it('should focus with the focus helper', async () => {
+    let linkRef;
+    render( /*#__PURE__*/React.createElement(Link, {
+      href: "https://instructure.design",
+      elementRef: el => {
+        linkRef = el;
+      }
+    }, "Hello World"));
+    const linkElement = screen.getByRole('link');
+    linkRef.focus();
+    expect(linkElement).toHaveFocus();
+  });
+  it('should display block when TruncateText is a child', async () => {
+    render(_Link3 || (_Link3 = /*#__PURE__*/React.createElement(Link, {
+      href: "example.html"
+    }, /*#__PURE__*/React.createElement(TruncateText, null, "Hello World"))));
+    const link = screen.getByRole('link');
+    expect(link).toHaveStyle('display: block');
+  });
+  it('should display inline-flex when TruncateText is a child and there is an icon', async () => {
+    const customIcon = _svg || (_svg = /*#__PURE__*/React.createElement("svg", {
+      height: "24",
+      width: "24"
+    }, /*#__PURE__*/React.createElement("title", null, "Custom icon"), /*#__PURE__*/React.createElement("circle", {
+      cx: "50",
+      cy: "50",
+      r: "40"
+    })));
+    render( /*#__PURE__*/React.createElement(Link, {
+      href: "example.html",
+      renderIcon: customIcon
+    }, _TruncateText2 || (_TruncateText2 = /*#__PURE__*/React.createElement(TruncateText, null, "Hello World"))));
+    const link = screen.getByRole('link');
+    expect(link).toHaveStyle('display: inline-flex');
+  });
+  it('should call the onClick prop when clicked', async () => {
+    const onClick = vi.fn();
+    render( /*#__PURE__*/React.createElement(Link, {
+      onClick: onClick
+    }, "Hello World"));
+    const link = screen.getByRole('button');
+    userEvent.click(link);
+    await waitFor(() => {
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+  it('should call the onMouseEnter prop when mouseEntered', async () => {
+    const onMouseEnter = vi.fn();
+    const _render2 = render( /*#__PURE__*/React.createElement(Link, {
+        onMouseEnter: onMouseEnter
+      }, "Hello World")),
+      container = _render2.container;
+    const link = container.querySelector('span[class$="-link"]');
+    userEvent.hover(link);
+    await waitFor(() => {
+      expect(onMouseEnter).toHaveBeenCalledTimes(1);
+    });
+  });
+  it('should pass down an icon via the icon property', async () => {
+    const customIcon = _svg2 || (_svg2 = /*#__PURE__*/React.createElement("svg", {
+      "data-testid": "svg",
+      height: "100",
+      width: "100"
+    }, /*#__PURE__*/React.createElement("title", null, "Custom icon"), /*#__PURE__*/React.createElement("circle", {
+      cx: "50",
+      cy: "50",
+      r: "40"
+    })));
+    render( /*#__PURE__*/React.createElement(Link, {
+      href: "https://instructure.design",
+      renderIcon: customIcon
+    }, "Hello World"));
+    const title = screen.getByText('Custom icon');
+    const icon = screen.getByTestId('svg');
+    expect(title).toBeInTheDocument();
+    expect(icon).toBeInTheDocument();
+  });
+  describe('when interaction is disabled', () => {
+    it('should apply aria-disabled when interaction is disabled', async () => {
+      render(_Link4 || (_Link4 = /*#__PURE__*/React.createElement(Link, {
+        href: "example.html",
+        interaction: "disabled"
+      }, "Hello World")));
+      const link = screen.getByRole('link');
+      expect(link).toHaveAttribute('aria-disabled');
+    });
+  });
+  it('should apply aria-disabled when `disabled` is set', async () => {
+    render(_Link5 || (_Link5 = /*#__PURE__*/React.createElement(Link, {
+      href: "example.html",
+      disabled: true
+    }, "Hello World")));
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('aria-disabled');
+  });
+  it('should not be clickable when interaction is disabled', async () => {
+    const onClick = vi.fn();
+    render( /*#__PURE__*/React.createElement(Link, {
+      onClick: onClick,
+      interaction: "disabled"
+    }, "Hello World"));
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('aria-disabled', 'true');
+  });
+  it('should not be clickable when `disabled` is set', async () => {
+    const onClick = vi.fn();
+    render( /*#__PURE__*/React.createElement(Link, {
+      onClick: onClick,
+      disabled: true
+    }, "Hello World"));
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('aria-disabled', 'true');
+  });
+});
+describe('with `as` prop', () => {
+  describe('with `onClick`', () => {
+    it('should render designated tag', async () => {
+      const onClick = vi.fn();
+      render( /*#__PURE__*/React.createElement(Link, {
+        as: "a",
+        onClick: onClick
+      }, "Hello World"));
+      const link = screen.getByText('Hello World');
+      expect(link.tagName).toBe('A');
+    });
+    it('should set role="button"', async () => {
+      const onClick = vi.fn();
+      render( /*#__PURE__*/React.createElement(Link, {
+        as: "span",
+        onClick: onClick
+      }, "Hello World"));
+      const spanLink = screen.getByRole('button');
+      expect(spanLink).toHaveAttribute('role', 'button');
+    });
+  });
+  describe('should not set type="button", unless it is actually a button', () => {
+    it('should not set type="button" on other things like <span>s', async () => {
+      const onClick = vi.fn();
+      render( /*#__PURE__*/React.createElement(Link, {
+        as: "span",
+        onClick: onClick
+      }, "Hello World"));
+      const link = screen.getByText('Hello World');
+      expect(link).not.toHaveAttribute('type', 'button');
+    });
+    it('should set type="button" on <button>s', async () => {
+      const onClick = vi.fn();
+      render( /*#__PURE__*/React.createElement(Link, {
+        as: "button",
+        onClick: onClick
+      }, "Hello World"));
+      const button = screen.getByText('Hello World');
+      expect(button).toHaveAttribute('type', 'button');
+    });
+    it('should set tabIndex="0"', async () => {
+      const onClick = vi.fn();
+      render( /*#__PURE__*/React.createElement(Link, {
+        as: "span",
+        onClick: onClick
+      }, "Hello World"));
+      const spanLink = screen.getByText('Hello World');
+      expect(spanLink).toHaveAttribute('tabIndex', '0');
+    });
+  });
+  describe('without `onClick`', () => {
+    it('should render designated tag', async () => {
+      render(_Link6 || (_Link6 = /*#__PURE__*/React.createElement(Link, {
+        as: "a"
+      }, "Hello World")));
+      const link = screen.getByText('Hello World');
+      expect(link.tagName).toBe('A');
+    });
+    it('should not set role="button"', async () => {
+      render(_Link7 || (_Link7 = /*#__PURE__*/React.createElement(Link, {
+        as: "span"
+      }, "Hello World")));
+      const link = screen.getByText('Hello World');
+      expect(link).not.toHaveAttribute('role', 'button');
+    });
+    it('should not set type="button"', async () => {
+      render(_Link8 || (_Link8 = /*#__PURE__*/React.createElement(Link, {
+        as: "span"
+      }, "Hello World")));
+      const link = screen.getByText('Hello World');
+      expect(link).not.toHaveAttribute('type', 'button');
+    });
+    it('should not set tabIndex="0"', async () => {
+      render(_Link9 || (_Link9 = /*#__PURE__*/React.createElement(Link, {
+        as: "span"
+      }, "Hello World")));
+      const link = screen.getByText('Hello World');
+      expect(link).not.toHaveAttribute('tabIndex', '0');
+    });
+  });
+  describe('when an href is provided', () => {
+    it('should render an anchor element', async () => {
+      render(_Link10 || (_Link10 = /*#__PURE__*/React.createElement(Link, {
+        href: "example.html"
+      }, "Hello World")));
+      const link = screen.getByRole('link');
+      expect(link.tagName).toBe('A');
+    });
+    it('should set the href attribute', async () => {
+      render(_Link11 || (_Link11 = /*#__PURE__*/React.createElement(Link, {
+        href: "example.html"
+      }, "Hello World")));
+      const link = screen.getByRole('link');
+      expect(link).toHaveAttribute('href', 'example.html');
+    });
+    it('should not set role="button"', async () => {
+      render(_Link12 || (_Link12 = /*#__PURE__*/React.createElement(Link, {
+        href: "example.html"
+      }, "Hello World")));
+      const link = screen.getByRole('link');
+      expect(link).not.toHaveAttribute('role', 'button');
+    });
+    it('should not set type="button"', async () => {
+      render(_Link13 || (_Link13 = /*#__PURE__*/React.createElement(Link, {
+        href: "example.html"
+      }, "Hello World")));
+      const link = screen.getByRole('link');
+      expect(link).not.toHaveAttribute('type', 'button');
+    });
+  });
+  describe('when a `role` is provided', () => {
+    it('should set role', async () => {
+      render(_Link14 || (_Link14 = /*#__PURE__*/React.createElement(Link, {
+        href: "example.html",
+        role: "button"
+      }, "Hello World")));
+      const link = screen.getByText('Hello World');
+      expect(link).toHaveAttribute('role', 'button');
+    });
+    it('should not override button role when it is forced by default', async () => {
+      const onClick = vi.fn();
+      render( /*#__PURE__*/React.createElement(Link, {
+        role: "link",
+        onClick: onClick,
+        as: "a"
+      }, "Hello World"));
+      const link = screen.getByText('Hello World');
+      expect(link).toHaveAttribute('role', 'button');
+    });
+  });
+  describe('when a `forceButtonRole` is set to false', () => {
+    it('should not force button role', async () => {
+      const onClick = vi.fn();
+      render( /*#__PURE__*/React.createElement(Link, {
+        onClick: onClick,
+        as: "a",
+        forceButtonRole: false
+      }, "Hello World"));
+      const link = screen.getByText('Hello World');
+      expect(link).not.toHaveAttribute('role');
+    });
+    it('should override button role with `role` prop', async () => {
+      const onClick = vi.fn();
+      render( /*#__PURE__*/React.createElement(Link, {
+        role: "link",
+        onClick: onClick,
+        as: "a",
+        forceButtonRole: false
+      }, "Hello World"));
+      const link = screen.getByText('Hello World');
+      expect(link).toHaveAttribute('role', 'link');
+    });
+  });
+  describe('when a `to` is provided', () => {
+    it('should render an anchor element', async () => {
+      render(_Link15 || (_Link15 = /*#__PURE__*/React.createElement(Link, {
+        to: "/example"
+      }, "Hello World")));
+      const link = screen.getByText('Hello World');
+      expect(link.tagName).toBe('A');
+    });
+    it('should set the to attribute', async () => {
+      render(_Link16 || (_Link16 = /*#__PURE__*/React.createElement(Link, {
+        to: "/example"
+      }, "Hello World")));
+      const link = screen.getByText('Hello World');
+      expect(link).toHaveAttribute('to', '/example');
+    });
+    it('should not set role="button"', async () => {
+      render(_Link17 || (_Link17 = /*#__PURE__*/React.createElement(Link, {
+        to: "/example"
+      }, "Hello World")));
+      const link = screen.getByText('Hello World');
+      expect(link).not.toHaveAttribute('role', 'button');
+    });
+  });
+});