test: added tests for link

adaptui · Sep 10, 2020 · 4d62f99 · 4d62f99
1 parent 7962d34
commit 4d62f99
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 3 deletions.
diff --git a/src/accordion/__tests__/Accordion.test.tsx b/src/accordion/__tests__/Accordion.test.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { axe } from "jest-axe";
 import { render, press } from "reakit-test-utils";
 
 import {
@@ -7,7 +8,6 @@ import {
   AccordionTrigger,
   useAccordionState,
 } from "..";
-import { axe } from "jest-axe";
 
 const AccordionComponent = (props: any) => {
   const state = useAccordionState(props);

diff --git a/src/link/__tests__/AriaLink.test.tsx b/src/link/__tests__/AriaLink.test.tsx
@@ -0,0 +1,76 @@
+import * as React from "react";
+import { axe } from "jest-axe";
+import { click, render } from "reakit-test-utils";
+
+import { AriaLink } from "..";
+
+const AriaLinkComp = () => {
+  return (
+    <div>
+      <AriaLink
+        href="https://adobe.com"
+        target="_blank"
+        style={{
+          color: "blue",
+          textDecoration: "underline",
+          cursor: "pointer",
+        }}
+      >
+        Adobe
+      </AriaLink>
+    </div>
+  );
+};
+
+describe("AriaLink", () => {
+  it("should render correctly", () => {
+    const { baseElement } = render(<AriaLinkComp />);
+
+    expect(baseElement).toMatchInlineSnapshot(`
+      <body>
+        <div>
+          <div>
+            <a
+              href="https://adobe.com"
+              style="color: blue; text-decoration: underline; cursor: pointer;"
+              target="_blank"
+            >
+              Adobe
+            </a>
+          </div>
+        </div>
+      </body>
+    `);
+  });
+
+  [true, false].forEach(state => {
+    const should = state ? "should" : "should not";
+    test(`onPress ${should} fire when isDisabled prop is "${state}"`, () => {
+      const alertFn = jest.fn();
+      const { getByText: text } = render(
+        <AriaLink
+          href="#"
+          style={{
+            color: "blue",
+            textDecoration: "underline",
+            cursor: "pointer",
+          }}
+          onPress={alertFn}
+          isDisabled={state}
+        >
+          Adobe
+        </AriaLink>,
+      );
+
+      click(text("Adobe"));
+      expect(alertFn).toBeCalledTimes(state ? 0 : 1);
+    });
+  });
+
+  test("Link renders with no a11y violations", async () => {
+    const { container } = render(<AriaLinkComp />);
+    const results = await axe(container);
+
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/src/link/__tests__/Link.test.tsx b/src/link/__tests__/Link.test.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+import { axe } from "jest-axe";
+import { render } from "reakit-test-utils";
+
+import { Link } from "..";
+
+describe("ReakitLink", () => {
+  it("should render correctly", () => {
+    const { baseElement } = render(
+      <Link href="#" isExternal disabled>
+        link
+      </Link>,
+    );
+
+    expect(baseElement).toMatchInlineSnapshot(`
+      <body>
+        <div>
+          <a
+            aria-disabled="true"
+            disabled=""
+            href="#"
+            rel="noopener noreferrer"
+            style="pointer-events: none;"
+            target="_blank"
+          >
+            link
+          </a>
+        </div>
+      </body>
+    `);
+  });
+
+  test("Link renders with no a11y violations", async () => {
+    const { container } = render(<Link href="#">link</Link>);
+    const results = await axe(container);
+
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/src/number-input/__test__/NumberInput.test.tsx b/src/number-input/__test__/NumberInput.test.tsx
@@ -1,12 +1,12 @@
 import * as React from "react";
+import { axe } from "jest-axe";
 import { render, press, click, fireEvent } from "reakit-test-utils";
 
-import { axe } from "jest-axe";
 import {
+  NumberInput,
   UseNumberInputProps,
   useNumberInputState,
   NumberInputDecrementButton,
-  NumberInput,
   NumberInputIncrementButton,
 } from "..";