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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-link",
-  "version": "9.2.1-snapshot-9",
+  "version": "9.2.1-snapshot-11",
   "description": "A component for creating links",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,25 +24,28 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "9.2.1-snapshot-9",
-    "@instructure/emotion": "9.2.1-snapshot-9",
-    "@instructure/shared-types": "9.2.1-snapshot-9",
-    "@instructure/ui-a11y-utils": "9.2.1-snapshot-9",
-    "@instructure/ui-color-utils": "9.2.1-snapshot-9",
-    "@instructure/ui-dom-utils": "9.2.1-snapshot-9",
-    "@instructure/ui-icons": "9.2.1-snapshot-9",
-    "@instructure/ui-prop-types": "9.2.1-snapshot-9",
-    "@instructure/ui-react-utils": "9.2.1-snapshot-9",
-    "@instructure/ui-testable": "9.2.1-snapshot-9",
-    "@instructure/ui-view": "9.2.1-snapshot-9",
+    "@instructure/console": "9.2.1-snapshot-11",
+    "@instructure/emotion": "9.2.1-snapshot-11",
+    "@instructure/shared-types": "9.2.1-snapshot-11",
+    "@instructure/ui-a11y-utils": "9.2.1-snapshot-11",
+    "@instructure/ui-color-utils": "9.2.1-snapshot-11",
+    "@instructure/ui-dom-utils": "9.2.1-snapshot-11",
+    "@instructure/ui-icons": "9.2.1-snapshot-11",
+    "@instructure/ui-prop-types": "9.2.1-snapshot-11",
+    "@instructure/ui-react-utils": "9.2.1-snapshot-11",
+    "@instructure/ui-testable": "9.2.1-snapshot-11",
+    "@instructure/ui-view": "9.2.1-snapshot-11",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "9.2.1-snapshot-9",
-    "@instructure/ui-test-locator": "9.2.1-snapshot-9",
-    "@instructure/ui-test-queries": "9.2.1-snapshot-9",
-    "@instructure/ui-test-utils": "9.2.1-snapshot-9",
-    "@instructure/ui-themes": "9.2.1-snapshot-9"
+    "@instructure/ui-axe-check": "9.2.1-snapshot-11",
+    "@instructure/ui-babel-preset": "9.2.1-snapshot-11",
+    "@instructure/ui-test-utils": "9.2.1-snapshot-11",
+    "@instructure/ui-themes": "9.2.1-snapshot-11",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2",
+    "vitest": "^1.6.0"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"