test(tag): added tests for Tag (#30)

* test(tag): added test for tag * test(tag): added TagGroup test & removed snapshots because of id change
adaptui · Jan 7, 2021 · 3ea2456 · 3ea2456 · vercel · Jan 7, 2021
1 parent fb2ad25
commit 3ea2456
Show file tree

Hide file tree

Showing 6 changed files with 114 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -126,6 +126,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-icons": "^4.1.0",
+    "reakit-test-utils": "^0.15.1",
     "rimraf": "^3.0.2",
     "sort-package-json": "^1.48.0",
     "standard-version": "^9.0.0",

diff --git a/src/Tag/Tag.tsx b/src/Tag/Tag.tsx
@@ -94,6 +94,8 @@ const ClosableElement: React.FC<{
 
   return (
     <CompositeItem
+      aria-label="close"
+      data-testid="testid-close-element"
       as={Clickable}
       className={theme.tag.suffix}
       onClick={handleClick}

diff --git a/src/Tag/TagGroup.tsx b/src/Tag/TagGroup.tsx
@@ -7,14 +7,16 @@ import { TagsContext } from "./Tag";
 export type TagGroupProps = {
   allowArrowNavigation?: boolean;
   className?: string;
+  baseId?: string;
 };
 
 export const TagGroup: React.FC<TagGroupProps> = ({
   children,
   allowArrowNavigation = false,
+  baseId,
   ...props
 }) => {
-  const composite = useCompositeState();
+  const composite = useCompositeState({ baseId });
 
   return allowArrowNavigation ? (
     <TagsContext.Provider value={composite}>

diff --git a/src/Tag/tests/Tag.test.tsx b/src/Tag/tests/Tag.test.tsx
@@ -0,0 +1,63 @@
+import * as React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import { Tag } from "../Tag";
+import { testA11y } from "../../utils/testUtils";
+
+const spyWarn = jest.spyOn(console, "warn");
+
+beforeEach(() => {
+  spyWarn.mockReset();
+});
+
+afterEach(() => {
+  expect(spyWarn).not.toHaveBeenCalled();
+});
+
+describe("<Tag />", () => {
+  it("should be closable", () => {
+    const onCloseFn = jest.fn();
+    render(
+      <Tag closable onClose={onCloseFn}>
+        hello
+      </Tag>,
+    );
+
+    fireEvent.click(screen.getByRole("button"));
+    expect(onCloseFn).toHaveBeenCalled();
+  });
+
+  it("close icon should not be visible if closable=false", () => {
+    render(<Tag>hello</Tag>);
+
+    expect(
+      screen.queryByTestId("testid-close-element"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("custom suffix", () => {
+    render(
+      <Tag closable suffix={<p>Suffix</p>}>
+        hello
+      </Tag>,
+    );
+
+    expect(screen.queryByTestId("testid-close-element")).toBeInTheDocument();
+    expect(screen.getByText(/suffix/i)).toBeInTheDocument();
+  });
+
+  // TODO: Fix spy warn not firing
+  it.skip("should throw warning if suffix is provided with and closable is false", () => {
+    render(<Tag suffix={<p>Suffix</p>}>hello</Tag>);
+
+    expect(
+      screen.queryByTestId("testid-close-element"),
+    ).not.toBeInTheDocument();
+
+    expect(spyWarn).toBeCalledTimes(1);
+  });
+
+  it("should not have a11y violations", async () => {
+    await testA11y(<Tag>Ally</Tag>);
+  });
+});
diff --git a/src/Tag/tests/TagGroup.test.tsx b/src/Tag/tests/TagGroup.test.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { press } from "reakit-test-utils";
+import { Tag, TagGroup } from "../";
+import { testA11y } from "../../utils/testUtils";
+
+describe("<TagGroup />", () => {
+  it("should allowArrowNavigation", () => {
+    const onCloseFn = jest.fn();
+    render(
+      <TagGroup allowArrowNavigation>
+        <Tag closable>Tag 1</Tag>
+        <Tag closable onClose={onCloseFn}>
+          Tag 2
+        </Tag>
+      </TagGroup>,
+    );
+
+    press.Tab();
+    press.ArrowRight();
+    press.Enter();
+
+    expect(onCloseFn).toBeCalledTimes(1);
+    expect(screen.getAllByTestId("testid-close-element")[1]).toHaveFocus();
+  });
+
+  it("should not have a11y violations", async () => {
+    await testA11y(
+      <TagGroup>
+        <Tag closable>Tag 1</Tag>
+        <Tag closable>Tag 2</Tag>
+      </TagGroup>,
+    );
+  });
+});
diff --git a/yarn.lock b/yarn.lock
@@ -8735,7 +8735,7 @@ jake@^10.6.1:
     filelist "^1.0.1"
     minimatch "^3.0.4"
 
-jest-axe@^4.1.0:
+jest-axe@4.1.0, jest-axe@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/jest-axe/-/jest-axe-4.1.0.tgz#5e73069c6517ffa106f31bb6a589a09250e4a04c"
   integrity sha512-TPWRbwQYwdt1jtvM0DRi//0e51omWirMkyf99paeY7kYS5XsUZ9IcyP4omrqPKJ46xHDxs1AYqIwVz/minBoFw==
@@ -11881,6 +11881,15 @@ reakit-system@^0.15.1:
   dependencies:
     reakit-utils "^0.15.1"
 
+reakit-test-utils@^0.15.1:
+  version "0.15.1"
+  resolved "https://registry.yarnpkg.com/reakit-test-utils/-/reakit-test-utils-0.15.1.tgz#a83cf5172d5ee53f57f3c02fa00ce44278c70234"
+  integrity sha512-f4DKML8C+iDSE8bRPz1vH7mpiCkDbtORadZtwDvXdLO6+DJaFwB2fe4wwHHlUkHukvAqnZjbhhjGuu70emyXCg==
+  dependencies:
+    jest-axe "4.1.0"
+    reakit-utils "^0.15.1"
+    reakit-warning "^0.6.1"
+
 [email protected]:
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/reakit-utils/-/reakit-utils-0.15.0.tgz#41a53e4b768002d282aee76994737f2532be5afc"