test: added jest test setup (#1)

* test: added jest test setup

* chore: move button stories inside folder

* chore: added test workflow action

* test: added axe test case

* chore: remove check-type command from action

* chore: jest eslint rules

Author: anuraghazra

.eslintrc.json

@@ -9,6 +9,13 @@
     "prettier/@typescript-eslint"
   ],
   "rules": {
-    "no-console": "off"
+    "no-console": "off",
+    "testing-library/prefer-explicit-assert": ["error"],
+    "testing-library/consistent-data-testid": [
+      2,
+      {
+        "testIdPattern": "^testid(-.*\\w)?$"
+      }
+    ]
   }
 }

.github/workflows/test.yml

@@ -0,0 +1,43 @@
+name: Test
+
+on:
+  push:
+    branches:
+      - "*"
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v2
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Setup timezone
+        uses: zcong1993/setup-timezone@master
+        with:
+          timezone: Asia/Kolkata
+
+      - name: Install deps
+        run: yarn
+      - name: Test
+        run: yarn test

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules\\typescript\\lib"
+}

index.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/extend-expect";

jest.config.ts

@@ -0,0 +1,20 @@
+/*
+ * For a detailed explanation regarding each configuration property and type check, visit:
+ * https://jestjs.io/docs/en/configuration.html
+ */
+const { join } = require("path");
+const pkg = require("./package.json");
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  rootDir: __dirname,
+  displayName: pkg.name,
+  testMatch: [join(__dirname, "src/**/*.test.{js,ts,tsx}")],
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  moduleNameMapper: {
+    "\\.(css|less|sass|scss)$": "<rootDir>/src/__mocks__/styleMock.js",
+    "^@shared(.*)$": "<rootDir>/shared$1",
+  },
+  coveragePathIgnorePatterns: ["node_modules", "__mocks__", "stories"],
+  clearMocks: true,
+};

jest.setup.js

@@ -0,0 +1,34 @@
+const {
+  matcherHint,
+  printReceived,
+  printExpected,
+} = require("jest-matcher-utils");
+const { toHaveNoViolations: axeMatchers } = require("jest-axe");
+const matchers = require("@testing-library/jest-dom/matchers");
+
+// Consider [aria-activedescendant="${id}"] #${id} as the focused element.
+function toHaveFocus(element) {
+  const result = matchers.toHaveFocus.call(this, element);
+  const { activeElement } = element.ownerDocument;
+  const activeId =
+    activeElement && activeElement.getAttribute("aria-activedescendant");
+  return {
+    ...result,
+    pass: result.pass || activeId === element.id,
+    message: () => {
+      if (activeId) {
+        return [
+          matcherHint(`${this.isNot ? ".not" : ""}.toHaveFocus`, "element", ""),
+          "",
+          "Expected:",
+          `  ${printExpected(element)}`,
+          "Received:",
+          `  ${printReceived(element.ownerDocument.getElementById(activeId))}`,
+        ].join("\n");
+      }
+      return result.message();
+    },
+  };
+}
+
+expect.extend({ ...matchers, ...axeMatchers, toHaveFocus });

package.json

@@ -36,7 +36,8 @@
     "postrelease": "concurrently yarn:release:*",
     "release:github": "conventional-github-releaser -p angular",
     "release:tags": "git push --follow-tags origin main",
-    "storybook": "start-storybook -p 6006"
+    "storybook": "start-storybook -p 6006",
+    "test": "jest --config ./jest.config.ts --no-cache"
   },
   "browserslist": {
     "production": [
@@ -65,9 +66,17 @@
     "@storybook/addon-essentials": "^6.1.10",
     "@storybook/addon-links": "^6.1.10",
     "@storybook/react": "^6.1.10",
+    "@testing-library/dom": "^7.28.1",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
+    "@testing-library/react-hooks": "^3.5.0",
+    "@testing-library/user-event": "^12.5.0",
+    "@types/jest": "^26.0.16",
+    "@types/jest-axe": "^3.5.1",
     "@types/node": "^14.14.10",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/testing-library__jest-dom": "^5.9.5",
     "@typescript-eslint/eslint-plugin": "^4.9.0",
     "@typescript-eslint/parser": "^4.9.0",
     "babel-eslint": "^10.1.0",
@@ -89,13 +98,16 @@
     "eslint-plugin-testing-library": "^3.10.1",
     "gacp": "^2.10.2",
     "husky": "^4.3.5",
+    "jest": "^26.6.3",
+    "jest-axe": "^4.1.0",
     "lint-staged": "^10.5.3",
     "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rimraf": "^3.0.2",
     "sort-package-json": "^1.48.0",
     "standard-version": "^9.0.0",
+    "ts-node": "^9.1.0",
     "typescript": "^4.1.2"
   },
   "peer-dependencies": {

src/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

src/button/__tests__/Button.test.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { Button } from "../Button";
+
+import { configureAxe } from "jest-axe";
+import { render, screen } from "@testing-library/react";
+
+const axe = configureAxe({
+  rules: {
+    // disabled landmark rules when testing isolated components.
+    region: { enabled: false },
+  },
+});
+
+describe("Testing Button", () => {
+  it("should render properly", () => {
+    render(<Button label="Hello world" />);
+
+    expect(screen.getByRole("button")).toHaveTextContent(/hello world/i);
+  });
+
+  it("should not have axe violations", async () => {
+    const { container } = render(<Button label="ally" />);
+    const results = await axe(container);
+
+    expect(results).toHaveNoViolations();
+  });
+});

src/stories/Button.stories.tsx src/button/stories/Button.stories.tsxsrc/stories/Button.stories.tsx renamed to src/button/stories/Button.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Story, Meta } from "@storybook/react/types-6-0";
 
 import "./button.css";
-import { Button, ButtonProps } from "../index";
+import { Button, ButtonProps } from "../../index";
 
 export default {
   title: "Button",