From 746d63e9349403c6669cccda9587efa3abd5dc5f Mon Sep 17 00:00:00 2001 From: Blake Mason Date: Mon, 1 Aug 2022 17:29:51 -0700 Subject: [PATCH] [C] Additional example unit tests + linting - includes additional eslint deps and config --- .eslintrc.js | 4 +- browser.testcaferc.js | 4 +- components/atomic/Button/button.test.js | 49 +++++++++----- components/atomic/Button/index.js | 1 + .../atomic/Button/patterns/SSOButton.js | 1 + e2e/int-tests/404.js | 11 ++-- e2e/int-tests/homepage.js | 24 ++++--- int.testcaferc.js | 6 +- jest.config.js | 8 ++- package.json | 4 +- yarn.lock | 65 +++++++++++++++++++ 11 files changed, 133 insertions(+), 44 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index c73836ce..2e464bf6 100644 --- a/.eslintrc.js +++ b/.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"], }, ], diff --git a/browser.testcaferc.js b/browser.testcaferc.js index 769f814c..86e27459 100644 --- a/browser.testcaferc.js +++ b/browser.testcaferc.js @@ -7,5 +7,5 @@ module.exports = { "chrome:emulation:device=iphone X", "safari", "edge", - ] -} \ No newline at end of file + ], +}; diff --git a/components/atomic/Button/button.test.js b/components/atomic/Button/button.test.js index 82206aa5..17c09b39 100644 --- a/components/atomic/Button/button.test.js +++ b/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 = {text}; +const className = "some-class"; +const id = "some-id"; -describe('Button', () => { - - it('renders text', () => { +describe("Button", () => { + it("Renders text", () => { render(); - const buttonText = screen.getByRole('button', { + const buttonText = screen.getByTestId("button", { name: text, }); expect(buttonText).toBeInTheDocument(); - }) - - // it('renders text', () => { - // render(); - - // const buttonText = screen.getByRole('button', { - // name: text, - // }); - - // expect(buttonText).toBeInTheDocument(); - // }) -}) \ No newline at end of file + }); + + it("Inherits attr-shaped props as attrs", () => { + render( + + ); + + 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( diff --git a/e2e/int-tests/404.js b/e2e/int-tests/404.js index b06ba843..e7a7fc7c 100644 --- a/e2e/int-tests/404.js +++ b/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(); -}); \ No newline at end of file +}); diff --git a/e2e/int-tests/homepage.js b/e2e/int-tests/homepage.js index 3a5f94f4..7acc365f 100644 --- a/e2e/int-tests/homepage.js +++ b/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, -// }); \ No newline at end of file +// }); diff --git a/int.testcaferc.js b/int.testcaferc.js index 7edb1c8e..ef13e04d 100644 --- a/int.testcaferc.js +++ b/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, -} \ No newline at end of file +}; diff --git a/jest.config.js b/jest.config.js index 883b2d62..415cb331 100644 --- a/jest.config.js +++ b/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: ["/jest.setup.js"], - moduleDirectories: ['node_modules', ''], - moduleNameMapper: new JsConfigPathsMapper({ configFileName: "jsconfig.json" }), + moduleDirectories: ["node_modules", ""], + moduleNameMapper: new JsConfigPathsMapper({ + configFileName: "jsconfig.json", + }), testEnvironment: "jest-environment-jsdom", }; diff --git a/package.json b/package.json index b2bb08b8..1b894a07 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 8d7e9d6d..c080f32a 100644 --- a/yarn.lock +++ b/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/scope-manager@5.32.0": + 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/types@5.30.6": version "5.30.6" resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.30.6.tgz#86369d0a7af8c67024115ac1da3e8fb2d38907e1" integrity sha512-HdnP8HioL1F7CwVmT4RaaMX57RrfqsOMclZc08wGMiDYJBsLGBM7JwXM4cZJmbWLzIR/pXg1kkrBBVpxTOwfUg== +"@typescript-eslint/types@5.32.0": + 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/typescript-estree@5.30.6": 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/typescript-estree@5.32.0": + 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/visitor-keys@5.30.6": 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/visitor-keys@5.32.0": + 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"