[C] Additional example unit tests + linting

 - includes additional eslint deps and config

.eslintrc.js

@@ -15,6 +15,7 @@ module.exports = {
   },
   env: {
     browser: true,
+    "jest/globals": true,
   },
   settings: {
     react: {
@@ -99,6 +100,7 @@ module.exports = {
     "react-hooks",
     "unused-imports",
     "testcafe",
+    "jest",
     "testing-library",
   ],
   extends: [
@@ -118,7 +120,7 @@ module.exports = {
     },
     // Only uses Test Cafe lint rules in test files
     {
-      files: ["tests/**/*.[jt]s?(x)"],
+      files: ["e2e/**/*.[jt]s?(x)"],
       extends: ["plugin:testcafe/recommended"],
     },
   ],

browser.testcaferc.js

@@ -7,5 +7,5 @@ module.exports = {
     "chrome:emulation:device=iphone X",
     "safari",
     "edge",
-  ]
-}
+  ],
+};

components/atomic/Button/button.test.js

@@ -1,28 +1,41 @@
-import { render, screen } from '@testing-library/react'
-import Button from '@/atomic/Button';
+import { render, screen, within } from "@testing-library/react";
+import Button from "@/atomic/Button";
 
 const text = "Stuff and Things";
 const children = <span>{text}</span>;
+const className = "some-class";
+const id = "some-id";
 
-describe('Button', () => {
-
-  it('renders text', () => {
+describe("Button", () => {
+  it("Renders text", () => {
     render(<Button>{children}</Button>);
 
-    const buttonText = screen.getByRole('button', {
+    const buttonText = screen.getByTestId("button", {
       name: text,
     });
 
     expect(buttonText).toBeInTheDocument();
-  })
-
-  // it('renders text', () => {
-  //   render(<Button>{children}</Button>);
-
-  //   const buttonText = screen.getByRole('button', {
-  //     name: text,
-  //   });
-
-  //   expect(buttonText).toBeInTheDocument();
-  // })
-})
+  });
+
+  it("Inherits attr-shaped props as attrs", () => {
+    render(
+      <Button isInactive={true} className={className} id={id} type="submit">
+        {children}
+      </Button>
+    );
+
+    const button = screen.getByTestId("button");
+
+    expect(button).toHaveAttribute("aria-disabled", "true");
+    expect(button).toHaveAttribute("type", "submit");
+    expect(button).toHaveClass(className);
+    expect(button).toHaveAttribute("id", id);
+  });
+
+  it("Renders icon", () => {
+    render(<Button icon="caret" />);
+    const button = screen.getByTestId("button");
+    const icon = within(button).getByTitle("Caret icon");
+    expect(icon).toBeInTheDocument();
+  });
+});

components/atomic/Button/index.js

@@ -26,6 +26,7 @@ const Button = forwardRef(
         $hasIcon={!!icon}
         aria-disabled={isInactive || undefined}
         className={className}
+        data-testid="button"
         {...buttonProps}
       >
         {icon && (

components/atomic/Button/patterns/SSOButton.js

@@ -33,6 +33,7 @@ export default function SSOButton({
       isBlock
       onClick={handleClick}
       {...buttonProps}
+      data-testid="sso-button"
     >
       {pending ? t("sign_in.redirecting", { context: service }) : children}
     </Button>

e2e/int-tests/404.js

@@ -1,10 +1,9 @@
-import { Selector, Role } from "testcafe";
+import { Selector } from "testcafe";
 
-fixture `404`
-  .page("./totally-bogus-page-url");
+fixture`404`.page("./totally-bogus-page-url");
 
-test('404 Page Loads if route does not exist', async t => {
-  const errorHeading = await Selector('h1').withText("Page not found");
+test("404 Page Loads if route does not exist", async (t) => {
+  const errorHeading = await Selector("h1").withText("Page not found");
 
   await t.expect(errorHeading.exists).ok();
-});
+});

e2e/int-tests/homepage.js

@@ -1,28 +1,34 @@
-import { Selector, Role } from "testcafe";
+import { Selector } from "testcafe";
 
 const targetLoadTime = 10000;
 
-fixture `Homepage`;
+fixture`Homepage`;
 
-test("Page Loads", async t => {
+test("Page Loads", async (t) => {
   const errorHeading = await Selector("h1").withText("Page not found");
 
   await t.expect(errorHeading.exists).notOk();
 });
 
-test("Has News Items", async t => {
-
+test("Has News Items", async (t) => {
   const newsHeading = await Selector("h2").withText("News");
 
-  await t.expect(Selector(newsHeading.nextSibling("ul"), { timeout: targetLoadTime }).childElementCount).gte(1);
+  await t
+    .expect(
+      Selector(newsHeading.nextSibling("ul"), { timeout: targetLoadTime })
+        .childElementCount
+    )
+    .gte(1);
 });
 
-test("Has Slideshow", async t => {
-  await t.expect(Selector(".flickity-slider", { timeout: 12000 }).childElementCount).gte(1);
+test("Has Slideshow", async (t) => {
+  await t
+    .expect(Selector(".flickity-slider", { timeout: 12000 }).childElementCount)
+    .gte(1);
 });
 
 // .timeouts({
 //     pageLoadTimeout:    2000,
 //     pageRequestTimeout: 60000,
 //     ajaxRequestTimeout: 60000,
-// });
+// });

int.testcaferc.js

@@ -1,9 +1,7 @@
 module.exports = {
   src: "e2e/int-tests/**/*.js",
   baseUrl: "https://int.rubinobs.org",
-  browsers: [
-    "chrome:headless"
-  ],
+  browsers: ["chrome:headless"],
   retryTestPages: true,
   color: true,
-}
+};

jest.config.js

@@ -1,5 +1,5 @@
 const nextJest = require("next/jest");
-const JsConfigPathsMapper = require('jsconfig-paths-jest-mapper');
+const JsConfigPathsMapper = require("jsconfig-paths-jest-mapper");
 
 const createJestConfig = nextJest({
   // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
@@ -9,8 +9,10 @@ const createJestConfig = nextJest({
 // Add any custom config to be passed to Jest
 const customJestConfig = {
   setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
-  moduleDirectories: ['node_modules', '<rootDir>'],
-  moduleNameMapper: new JsConfigPathsMapper({ configFileName: "jsconfig.json" }),
+  moduleDirectories: ["node_modules", "<rootDir>"],
+  moduleNameMapper: new JsConfigPathsMapper({
+    configFileName: "jsconfig.json",
+  }),
   testEnvironment: "jest-environment-jsdom",
 };
 

package.json

@@ -23,7 +23,7 @@
     "test": "npm-run-all test:*",
     "test:int": "testcafe --config-file int.testcaferc.js",
     "test-int-local": "testcafe --config-file int.testcaferc.js --hostname localhost",
-    "test:unit": "jest"
+    "test:unit": "jest --config jest.config.js"
   },
   "babel": {
     "presets": [
@@ -97,6 +97,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^26.7.0",
     "eslint-plugin-jsx-a11y": "^6.6.0",
     "eslint-plugin-n": "^15.2.4",
     "eslint-plugin-prettier": "^4.2.1",
@@ -105,6 +106,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-standard": "^5.0.0",
     "eslint-plugin-testcafe": "^0.2.1",
+    "eslint-plugin-testing-library": "^5.6.0",
     "eslint-plugin-unused-imports": "^2.0.0",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",

yarn.lock

@@ -2055,6 +2055,11 @@
     "@types/parse5" "^6.0.3"
     "@types/tough-cookie" "*"
 
+"@types/json-schema@^7.0.9":
+  version "7.0.11"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
+  integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
+
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
@@ -2178,11 +2183,24 @@
     "@typescript-eslint/types" "5.30.6"
     "@typescript-eslint/visitor-keys" "5.30.6"
 
+"@typescript-eslint/[email protected]":
+  version "5.32.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.32.0.tgz#763386e963a8def470580cc36cf9228864190b95"
+  integrity sha512-KyAE+tUON0D7tNz92p1uetRqVJiiAkeluvwvZOqBmW9z2XApmk5WSMV9FrzOroAcVxJZB3GfUwVKr98Dr/OjOg==
+  dependencies:
+    "@typescript-eslint/types" "5.32.0"
+    "@typescript-eslint/visitor-keys" "5.32.0"
+
 "@typescript-eslint/[email protected]":
   version "5.30.6"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.30.6.tgz#86369d0a7af8c67024115ac1da3e8fb2d38907e1"
   integrity sha512-HdnP8HioL1F7CwVmT4RaaMX57RrfqsOMclZc08wGMiDYJBsLGBM7JwXM4cZJmbWLzIR/pXg1kkrBBVpxTOwfUg==
 
+"@typescript-eslint/[email protected]":
+  version "5.32.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.32.0.tgz#484273021eeeae87ddb288f39586ef5efeb6dcd8"
+  integrity sha512-EBUKs68DOcT/EjGfzywp+f8wG9Zw6gj6BjWu7KV/IYllqKJFPlZlLSYw/PTvVyiRw50t6wVbgv4p9uE2h6sZrQ==
+
 "@typescript-eslint/[email protected]":
   version "5.30.6"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.6.tgz#a84a0d6a486f9b54042da1de3d671a2c9f14484e"
@@ -2196,6 +2214,31 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
+"@typescript-eslint/[email protected]":
+  version "5.32.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.32.0.tgz#282943f34babf07a4afa7b0ff347a8e7b6030d12"
+  integrity sha512-ZVAUkvPk3ITGtCLU5J4atCw9RTxK+SRc6hXqLtllC2sGSeMFWN+YwbiJR9CFrSFJ3w4SJfcWtDwNb/DmUIHdhg==
+  dependencies:
+    "@typescript-eslint/types" "5.32.0"
+    "@typescript-eslint/visitor-keys" "5.32.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/utils@^5.10.0", "@typescript-eslint/utils@^5.13.0":
+  version "5.32.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.32.0.tgz#eccb6b672b94516f1afc6508d05173c45924840c"
+  integrity sha512-W7lYIAI5Zlc5K082dGR27Fczjb3Q57ECcXefKU/f0ajM5ToM0P+N9NmJWip8GmGu/g6QISNT+K6KYB+iSHjXCQ==
+  dependencies:
+    "@types/json-schema" "^7.0.9"
+    "@typescript-eslint/scope-manager" "5.32.0"
+    "@typescript-eslint/types" "5.32.0"
+    "@typescript-eslint/typescript-estree" "5.32.0"
+    eslint-scope "^5.1.1"
+    eslint-utils "^3.0.0"
+
 "@typescript-eslint/[email protected]":
   version "5.30.6"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.6.tgz#94dd10bb481c8083378d24de1742a14b38a2678c"
@@ -2204,6 +2247,14 @@
     "@typescript-eslint/types" "5.30.6"
     eslint-visitor-keys "^3.3.0"
 
+"@typescript-eslint/[email protected]":
+  version "5.32.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.32.0.tgz#b9715d0b11fdb5dd10fd0c42ff13987470525394"
+  integrity sha512-S54xOHZgfThiZ38/ZGTgB2rqx51CMJ5MCfVT2IplK4Q7hgzGfe0nLzLCcenDnc/cSjP568hdeKfeDcBgqNHD/g==
+  dependencies:
+    "@typescript-eslint/types" "5.32.0"
+    eslint-visitor-keys "^3.3.0"
+
 abab@^2.0.5, abab@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
@@ -3736,6 +3787,13 @@ eslint-plugin-import@^2.26.0:
     resolve "^1.22.0"
     tsconfig-paths "^3.14.1"
 
+eslint-plugin-jest@^26.7.0:
+  version "26.7.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-26.7.0.tgz#41d405ac9143e1284a3401282db47ed459436778"
+  integrity sha512-/YNitdfG3o3cC6juZziAdkk6nfJt01jXVfj4AgaYVLs7bupHzRDL5K+eipdzhDXtQsiqaX1TzfwSuRlEgeln1A==
+  dependencies:
+    "@typescript-eslint/utils" "^5.10.0"
+
 eslint-plugin-jsx-a11y@^6.5.1:
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.5.1.tgz#cdbf2df901040ca140b6ec14715c988889c2a6d8"
@@ -3834,6 +3892,13 @@ eslint-plugin-testcafe@^0.2.1:
   resolved "https://registry.yarnpkg.com/eslint-plugin-testcafe/-/eslint-plugin-testcafe-0.2.1.tgz#4089f646dadb69b1376a01d7e608184907e6036b"
   integrity sha512-LZMHQ2kHFXzbt6ZSS2yUOQhr8QaHwaqvmra1EnXKK0qEwpAvegLdjntCbRPtuD6bDGxPFG87Y7mkI3S9TjZA4A==
 
+eslint-plugin-testing-library@^5.6.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.6.0.tgz#91e810ecb838f86decc9b5202876c87e42d73ea7"
+  integrity sha512-y63TRzPhGCMNsnUwMGJU1MFWc/3GvYw+nzobp9QiyNTTKsgAt5RKAOT1I34+XqVBpX1lC8bScoOjCkP7iRv0Mw==
+  dependencies:
+    "@typescript-eslint/utils" "^5.13.0"
+
 eslint-plugin-unused-imports@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-2.0.0.tgz#d8db8c4d0cfa0637a8b51ce3fd7d1b6bc3f08520"