test: added tests for progress (#31)

* test: jest testing setup * test: fixed jest typescript definitions * fix: test script * chore(deps): move deps to dev * test: added tests for accordion * test: added husky precommit test * test: axe container test * chore(infra): added github action test * test: added tests for number input * fix: a11y aria-valuetext issue with NumberInput * test: added tests for Slider * test: added tests for progress
adaptui · Sep 10, 2020 · 02415bf · 02415bf
1 parent 88175da
commit 02415bf
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -53,7 +53,7 @@
     "@storybook/react": "6.0.21",
     "@testing-library/jest-dom": "5.11.4",
     "@testing-library/react": "11.0.2",
-    "@testing-library/react-hooks": "3.4.1",
+    "@testing-library/react-hooks": "^3.4.1",
     "@types/jest": "26.0.13",
     "@types/jest-axe": "3.5.0",
     "@types/react": "16.9.49",

diff --git a/src/progress/__tests__/Progress.test.tsx b/src/progress/__tests__/Progress.test.tsx
@@ -0,0 +1,51 @@
+import * as React from "react";
+import { axe } from "jest-axe";
+import { render } from "reakit-test-utils";
+
+import { Progress, ProgressProps, useProgressState } from "..";
+
+const ProgressComp = (props: Partial<ProgressProps>) => {
+  const progress = useProgressState(props);
+
+  return (
+    <div>
+      <Progress data-testid="progress" {...progress} />
+    </div>
+  );
+};
+
+describe("Progress", () => {
+  it("should render correctly", () => {
+    const { baseElement } = render(<ProgressComp value={10} />);
+
+    expect(baseElement).toMatchInlineSnapshot(`
+      <body>
+        <div>
+          <div>
+            <div
+              aria-valuemax="100"
+              aria-valuemin="0"
+              aria-valuenow="10"
+              aria-valuetext="10"
+              data-testid="progress"
+              role="progressbar"
+            />
+          </div>
+        </div>
+      </body>
+    `);
+  });
+
+  it("should render isIndeterminate", () => {
+    const { getByTestId: testid } = render(<ProgressComp />);
+
+    expect(testid("progress")).toHaveAttribute("data-indeterminate", "");
+  });
+
+  test("Progress renders with no a11y violations", async () => {
+    const { container } = render(<ProgressComp value={50} />);
+    const results = await axe(container);
+
+    expect(results).toHaveNoViolations();
+  });
+});