test: added tests for breadcrumb

adaptui · Sep 11, 2020 · 3e6e092 · 3e6e092
1 parent d402c58
commit 3e6e092
Showing 1 changed file with 96 additions and 0 deletions.
diff --git a/src/breadcrumbs/__tests__/Breadcrumbs.test.tsx b/src/breadcrumbs/__tests__/Breadcrumbs.test.tsx
@@ -0,0 +1,96 @@
+import * as React from "react";
+import { axe } from "jest-axe";
+import { render, press, click, fireEvent } from "reakit-test-utils";
+import { Breadcrumbs, BreadcrumbLink } from "..";
+
+const BreadcrumbComp = () => {
+  return (
+    <Breadcrumbs className="breadcrumb">
+      <ol>
+        <li>
+          <BreadcrumbLink href="https://www.w3.org/TR/wai-aria-practices-1.1/">
+            WAI-ARIA Authoring Practices 1.1
+          </BreadcrumbLink>
+        </li>
+        <li>
+          <BreadcrumbLink as="span" onClick={() => alert("Go to link")}>
+            Design Patterns
+          </BreadcrumbLink>
+        </li>
+        <li>
+          <BreadcrumbLink
+            isCurrent
+            href="https://www.w3.org/TR/wai-aria-practices-1.1/#breadcrumb"
+          >
+            Breadcrumb Pattern
+          </BreadcrumbLink>
+        </li>
+        <li>
+          <BreadcrumbLink href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/breadcrumb/index.html">
+            Breadcrumb Example
+          </BreadcrumbLink>
+        </li>
+      </ol>
+    </Breadcrumbs>
+  );
+};
+
+describe("Breadcrumb", () => {
+  it("should render correctly", () => {
+    const { getByTestId: testId, baseElement } = render(<BreadcrumbComp />);
+
+    expect(baseElement).toMatchInlineSnapshot(`
+      <body>
+        <div>
+          <nav
+            aria-label="Breadcrumb"
+            class="breadcrumb"
+          >
+            <ol>
+              <li>
+                <a
+                  href="https://www.w3.org/TR/wai-aria-practices-1.1/"
+                >
+                  WAI-ARIA Authoring Practices 1.1
+                </a>
+              </li>
+              <li>
+                <span
+                  role="link"
+                  tabindex="0"
+                >
+                  Design Patterns
+                </span>
+              </li>
+              <li>
+                <a
+                  aria-current="page"
+                  aria-disabled="true"
+                  disabled=""
+                  href="https://www.w3.org/TR/wai-aria-practices-1.1/#breadcrumb"
+                  style="pointer-events: none;"
+                >
+                  Breadcrumb Pattern
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/breadcrumb/index.html"
+                >
+                  Breadcrumb Example
+                </a>
+              </li>
+            </ol>
+          </nav>
+        </div>
+      </body>
+    `);
+  });
+
+  test("Breadcrumb renders with no a11y violations", async () => {
+    const { container } = render(<BreadcrumbComp />);
+    const results = await axe(container);
+
+    expect(results).toHaveNoViolations();
+  });
+});