From 46f41bb4e8d6c0a9146cc6ba009055bb8a40f307 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 06:07:20 +0000 Subject: [PATCH 1/5] build(deps): bump the npm_and_yarn group with 2 updates Bumps the npm_and_yarn group with 2 updates: [axios](https://github.com/axios/axios) and [micromatch](https://github.com/micromatch/micromatch). Updates `axios` from 1.6.8 to 1.7.7 - [Release notes](https://github.com/axios/axios/releases) - [Changelog](https://github.com/axios/axios/blob/v1.x/CHANGELOG.md) - [Commits](https://github.com/axios/axios/compare/v1.6.8...v1.7.7) Updates `micromatch` from 4.0.5 to 4.0.8 - [Release notes](https://github.com/micromatch/micromatch/releases) - [Changelog](https://github.com/micromatch/micromatch/blob/master/CHANGELOG.md) - [Commits](https://github.com/micromatch/micromatch/compare/4.0.5...4.0.8) --- updated-dependencies: - dependency-name: axios dependency-type: indirect dependency-group: npm_and_yarn - dependency-name: micromatch dependency-type: indirect dependency-group: npm_and_yarn ... Signed-off-by: dependabot[bot] --- yarn.lock | 26 +++++--------------------- 1 file changed, 5 insertions(+), 21 deletions(-) diff --git a/yarn.lock b/yarn.lock index 8b2ea1e1..f0e8cafa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5262,9 +5262,9 @@ axe-core@^4.9.1: integrity sha512-Mr2ZakwQ7XUAjp7pAwQWRhhK8mQQ6JAaNWSjmjxil0R8BPioMtQsTLOolGYkji1rcL++3dCqZA3zWqpT+9Ew6g== axios@^1.6.1: - version "1.6.8" - resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.8.tgz#66d294951f5d988a00e87a0ffb955316a619ea66" - integrity sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ== + version "1.7.7" + resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.7.tgz#2f554296f9892a72ac8d8e4c5b79c14a91d0a47f" + integrity sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q== dependencies: follow-redirects "^1.15.6" form-data "^4.0.0" @@ -5570,7 +5570,7 @@ brace-expansion@^2.0.1: dependencies: balanced-match "^1.0.0" -braces@^3.0.2, braces@^3.0.3, braces@~3.0.2: +braces@^3.0.3, braces@~3.0.2: version "3.0.3" resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789" integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA== @@ -10542,23 +10542,7 @@ methods@~1.1.2: resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee" integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w== -micromatch@^4.0.0, micromatch@^4.0.2, micromatch@^4.0.4: - version "4.0.5" - resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6" - integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA== - dependencies: - braces "^3.0.2" - picomatch "^2.3.1" - -micromatch@^4.0.6: - version "4.0.7" - resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.7.tgz#33e8190d9fe474a9895525f5618eee136d46c2e5" - integrity sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q== - dependencies: - braces "^3.0.3" - picomatch "^2.3.1" - -micromatch@^4.0.8: +micromatch@^4.0.0, micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.6, micromatch@^4.0.8: version "4.0.8" resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202" integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA== From 63c11c948d9d263c97e18d09dec2d63e5eadf07a Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 4 Sep 2024 14:21:50 +1000 Subject: [PATCH 2/5] chore(deps): update all dependencies (major) (#1080) --- .eslintrc.js | 79 - eslint.config.mjs | 134 ++ package.json | 30 +- .../AccordionSection.test.tsx | 1 - .../ActionButton/ActionButton.test.tsx | 4 - src/components/Card/Card.test.tsx | 1 - .../CheckableInput/CheckableInput.test.tsx | 3 - .../CodeSnippet/CodeSnippet.test.tsx | 15 +- .../ConfirmationModal/ConfirmationModal.tsx | 4 +- .../ContextualMenu/ContextualMenu.test.tsx | 6 - .../ContextualMenuDropdown.test.tsx | 2 +- src/components/Field/Field.test.tsx | 8 +- src/components/Icon/Icon.test.tsx | 4 - src/components/Input/Input.test.tsx | 33 +- src/components/List/List.test.tsx | 6 +- .../MainTable/MainTable.stories.tsx | 2 +- src/components/MainTable/MainTable.test.tsx | 2 - src/components/MainTable/MainTable.tsx | 2 +- src/components/ModularTable/ModularTable.tsx | 9 +- .../FadeInDown/FadeInDown.test.tsx | 1 - src/components/Navigation/Navigation.test.tsx | 11 +- .../NavigationLink/NavigationLink.tsx | 2 +- .../NotificationProvider.tsx | 1 + src/components/Pagination/Pagination.test.tsx | 1 - .../PaginationButton.test.tsx | 1 - .../FilterPanelSection.test.tsx | 7 - .../SearchAndFilter/SearchAndFilter.test.tsx | 16 - src/components/SearchBox/SearchBox.test.tsx | 1 - .../SideNavigation/SideNavigation.test.tsx | 8 +- .../SideNavigationItem.stories.tsx | 4 +- .../SideNavigationLink/SideNavigationLink.tsx | 2 +- src/components/Spinner/Spinner.test.tsx | 14 +- src/components/Strip/Strip.test.tsx | 3 - src/components/TableCell/TableCell.test.tsx | 11 +- .../TablePagination/TablePagination.test.tsx | 1 - .../TablePaginationControls.test.tsx | 1 - src/components/Textarea/Textarea.test.tsx | 1 - yarn.lock | 1604 ++++------------- 38 files changed, 541 insertions(+), 1494 deletions(-) delete mode 100644 .eslintrc.js create mode 100644 eslint.config.mjs diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index 96f813f7..00000000 --- a/.eslintrc.js +++ /dev/null @@ -1,79 +0,0 @@ -module.exports = { - parser: "@babel/eslint-parser", - plugins: ["prettier", "cypress", "testing-library"], - extends: [ - "react-app", // Use the recommended rules from CRA. - "plugin:cypress/recommended", - "plugin:prettier/recommended", // Ensure this is last in the list. - ], - parserOptions: { - ecmaFeatures: { - jsx: true, - }, - ecmaVersion: 2018, - sourceType: "module", - }, - rules: { - "react/forbid-component-props": [ - "error", - { - forbid: [ - { - propName: "data-test", - message: "Use `data-testid` instead of `data-test` attribute", - }, - ], - }, - ], - "react/forbid-dom-props": [ - "error", - { - forbid: [ - { - propName: "data-test", - message: "Use `data-testid` instead of `data-test` attribute", - }, - ], - }, - ], - }, - settings: { - react: { - version: "detect", - }, - }, - overrides: [ - { - files: ["**/*.ts?(x)"], - parser: "@typescript-eslint/parser", - extends: [ - "react-app", // Uses the recommended rules from CRA. - "plugin:prettier/recommended", // Ensure this is last in the list. - ], - parserOptions: { - ecmaFeatures: { - jsx: true, - }, - ecmaVersion: 2018, - sourceType: "module", - }, - rules: { - "prettier/prettier": "error", - }, - settings: { - react: { - version: "detect", - }, - }, - }, - { - files: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"], - extends: ["plugin:testing-library/react"], - rules: { - "testing-library/no-node-access": "warn", - "testing-library/no-container": "warn", - "testing-library/no-render-in-lifecycle": "warn", - }, - }, - ], -}; diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 00000000..9f68a24d --- /dev/null +++ b/eslint.config.mjs @@ -0,0 +1,134 @@ +import { fixupConfigRules, fixupPluginRules } from "@eslint/compat"; +import prettier from "eslint-plugin-prettier"; +import cypress from "eslint-plugin-cypress"; +import testingLibrary from "eslint-plugin-testing-library"; +import babelParser from "@babel/eslint-parser"; +import path from "node:path"; +import tseslint from "typescript-eslint"; +import { fileURLToPath } from "node:url"; +import js from "@eslint/js"; +import { FlatCompat } from "@eslint/eslintrc"; +import react from "eslint-plugin-react"; +import hooksPlugin from "eslint-plugin-react-hooks"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); +const compat = new FlatCompat({ + baseDirectory: __dirname, + recommendedConfig: js.configs.recommended, + allConfig: js.configs.all, +}); + +export default [ + ...fixupConfigRules( + compat.extends("plugin:cypress/recommended", "plugin:prettier/recommended"), + ), + ...tseslint.configs.recommended, + react.configs.flat.recommended, + { + plugins: { + "react-hooks": fixupPluginRules(hooksPlugin), + }, + rules: hooksPlugin.configs.recommended.rules, + }, + { + plugins: { + prettier: fixupPluginRules(prettier), + cypress: fixupPluginRules(cypress), + "@typescript-eslint": tseslint.plugin, + }, + languageOptions: { + parser: babelParser, + ecmaVersion: 2018, + sourceType: "module", + parserOptions: { + ecmaFeatures: { + jsx: true, + }, + }, + }, + settings: { + react: { + version: "detect", + }, + }, + rules: { + "react/forbid-component-props": [ + "error", + { + forbid: [ + { + propName: "data-test", + message: "Use `data-testid` instead of `data-test` attribute", + }, + ], + }, + ], + "react/forbid-dom-props": [ + "error", + { + forbid: [ + { + propName: "data-test", + message: "Use `data-testid` instead of `data-test` attribute", + }, + ], + }, + ], + "react/display-name": "off", + "react/prop-types": "off", + "react/no-unescaped-entities": "off", + "@typescript-eslint/no-empty-object-type": "off", + "@typescript-eslint/no-unused-expressions": "off", + "@typescript-eslint/no-unused-vars": [ + "error", + { + argsIgnorePattern: "^_", + destructuredArrayIgnorePattern: "^_", + varsIgnorePattern: "^_", + }, + ], + }, + }, + ...fixupConfigRules(compat.extends("plugin:prettier/recommended")).map( + (config) => ({ + ...config, + files: ["**/*.ts?(x)"], + }), + ), + { + files: ["**/*.ts?(x)"], + languageOptions: { + parser: tseslint.parser, + ecmaVersion: 2018, + sourceType: "module", + parserOptions: { + ecmaFeatures: { + jsx: true, + }, + }, + }, + settings: { + react: { + version: "detect", + }, + }, + rules: { + "prettier/prettier": "error", + }, + }, + { + plugins: { + "testing-library": fixupPluginRules({ + rules: testingLibrary.rules, + }), + }, + files: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"], + rules: { + ...testingLibrary.configs["flat/react"].rules, + "testing-library/no-node-access": "off", + "testing-library/no-container": "off", + "testing-library/no-render-in-lifecycle": "off", + }, + }, +]; diff --git a/package.json b/package.json index 49efed71..e50522db 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,12 @@ "devDependencies": { "@babel/cli": "7.25.6", "@babel/eslint-parser": "7.25.1", + "@babel/plugin-proposal-class-properties": "7.18.6", + "@babel/preset-react": "7.24.7", "@babel/preset-typescript": "7.24.7", + "@eslint/compat": "1.1.1", + "@eslint/eslintrc": "3.1.0", + "@eslint/js": "9.9.1", "@percy/cli": "1.29.3", "@percy/storybook": "6.0.2", "@semantic-release/changelog": "6.0.3", @@ -44,11 +49,9 @@ "@testing-library/cypress": "10.0.2", "@testing-library/dom": "10.4.0", "@testing-library/jest-dom": "6.5.0", - "@testing-library/react": "15.0.7", + "@testing-library/react": "16.0.1", "@testing-library/user-event": "14.5.2", "@types/lodash.isequal": "4", - "@typescript-eslint/eslint-plugin": "7.18.0", - "@typescript-eslint/parser": "7.18.0", "babel-jest": "29.7.0", "babel-loader": "9.1.3", "babel-plugin-module-resolver": "5.0.2", @@ -57,29 +60,29 @@ "css-loader": "7.1.2", "cypress": "13.14.1", "deepmerge": "4.3.1", - "eslint": "8.57.0", + "eslint": "9.9.1", "eslint-config-prettier": "9.1.0", - "eslint-config-react-app": "7.0.1", "eslint-plugin-cypress": "3.5.0", "eslint-plugin-flowtype": "8.0.3", "eslint-plugin-import": "2.29.1", "eslint-plugin-jsx-a11y": "6.9.0", "eslint-plugin-prettier": "5.2.1", - "eslint-plugin-react": "7.35.1", + "eslint-plugin-react": "7.35.2", "eslint-plugin-react-hooks": "4.6.2", "eslint-plugin-storybook": "0.8.0", "eslint-plugin-testing-library": "6.3.0", "formik": "2.4.6", "jest": "29.7.0", - "npm-package-json-lint": "7.1.0", + "npm-package-json-lint": "8.0.0", "prettier": "3.3.3", "react": "18.3.1", "react-docgen-typescript-loader": "3.7.2", "react-dom": "18.3.1", "sass": "1.77.8", - "sass-loader": "14.2.1", - "semantic-release": "23.1.1", + "sass-loader": "16.0.1", + "semantic-release": "24.1.0", "storybook": "8.2.9", + "strip-ansi": "7.1.0", "style-loader": "4.0.0", "stylelint": "16.9.0", "stylelint-config-prettier": "9.0.5", @@ -89,8 +92,9 @@ "ts-jest": "29.2.5", "tsc-alias": "1.8.10", "typescript": "5.5.4", + "typescript-eslint": "8.4.0", "vanilla-framework": "4.15.0", - "wait-on": "7.2.0", + "wait-on": "8.0.0", "webpack": "5.94.0" }, "dependencies": { @@ -110,7 +114,8 @@ "@types/react": "18.3.5", "@types/react-dom": "18.3.0", "postcss": "^8.3.11", - "jackspeak": "2.3.6" + "jackspeak": "2.1.1", + "strip-ansi": "6.0.1" }, "peerDependencies": { "@types/react": "^18.0.0", @@ -145,9 +150,6 @@ "semantic-release": "semantic-release", "semantic-release-dry-run": "semantic-release --dry-run --no-ci" }, - "eslintConfig": { - "extends": "react-app" - }, "browserslist": { "production": [ ">0.2%", diff --git a/src/components/Accordion/AccordionSection/AccordionSection.test.tsx b/src/components/Accordion/AccordionSection/AccordionSection.test.tsx index 55e089da..2c3da2cb 100644 --- a/src/components/Accordion/AccordionSection/AccordionSection.test.tsx +++ b/src/components/Accordion/AccordionSection/AccordionSection.test.tsx @@ -29,7 +29,6 @@ describe("AccordionSection ", () => { />, ); // Query for the specific element as defined in the titleElement prop. - // eslint-disable-next-line testing-library/no-node-access const title = screen.getByRole("heading"); expect(title.tagName).toBe("H4"); expect(title).not.toHaveAttribute("aria-level"); diff --git a/src/components/ActionButton/ActionButton.test.tsx b/src/components/ActionButton/ActionButton.test.tsx index 4a47724f..506df6e4 100644 --- a/src/components/ActionButton/ActionButton.test.tsx +++ b/src/components/ActionButton/ActionButton.test.tsx @@ -31,7 +31,6 @@ describe("ActionButton", () => { expect(screen.getByLabelText(Label.WAITING)).toBeInTheDocument(); const icon = ".p-icon--spinner"; // Check for the visual element. - // eslint-disable-next-line testing-library/no-node-access expect(document.querySelector(icon)).toBeInTheDocument(); // Move on to the success state. rerender(Click me); @@ -39,7 +38,6 @@ describe("ActionButton", () => { jest.advanceTimersByTime(LOADER_MIN_DURATION); }); expect(screen.queryByLabelText(Label.WAITING)).not.toBeInTheDocument(); - // eslint-disable-next-line testing-library/no-node-access expect(document.querySelector(icon)).not.toBeInTheDocument(); }); @@ -54,13 +52,11 @@ describe("ActionButton", () => { expect(screen.getByLabelText(Label.SUCCESS)).toBeInTheDocument(); const icon = ".p-icon--success"; // Check for the visual element. - // eslint-disable-next-line testing-library/no-node-access expect(document.querySelector(icon)).toBeInTheDocument(); act(() => { jest.advanceTimersByTime(SUCCESS_DURATION + 1); }); expect(screen.queryByLabelText(Label.SUCCESS)).not.toBeInTheDocument(); - // eslint-disable-next-line testing-library/no-node-access expect(document.querySelector(icon)).not.toBeInTheDocument(); }); }); diff --git a/src/components/Card/Card.test.tsx b/src/components/Card/Card.test.tsx index bfd503ca..6f36ed6f 100644 --- a/src/components/Card/Card.test.tsx +++ b/src/components/Card/Card.test.tsx @@ -19,7 +19,6 @@ describe("Card ", () => { it("can display a header", () => { render(); // Find the visible image in the DOM. - // eslint-disable-next-line testing-library/no-node-access const image = document.querySelector(".p-card__thumbnail"); expect(image).toBeInTheDocument(); expect(image).toHaveAttribute("src", "test.png"); diff --git a/src/components/CheckboxInput/CheckableInput/CheckableInput.test.tsx b/src/components/CheckboxInput/CheckableInput/CheckableInput.test.tsx index 8ac0c488..ce3d35c1 100644 --- a/src/components/CheckboxInput/CheckableInput/CheckableInput.test.tsx +++ b/src/components/CheckboxInput/CheckableInput/CheckableInput.test.tsx @@ -30,7 +30,6 @@ describe("CheckableInput ", () => { required >, ); - // eslint-disable-next-line testing-library/no-node-access expect(document.querySelector("label")).toHaveClass("is-required"); }); @@ -42,7 +41,6 @@ describe("CheckableInput ", () => { inline >, ); - // eslint-disable-next-line testing-library/no-node-access expect(document.querySelector("label")).toHaveClass("p-radio--inline"); }); @@ -65,7 +63,6 @@ describe("CheckableInput ", () => { labelClassName="label-class-name" />, ); - // eslint-disable-next-line testing-library/no-node-access expect(document.querySelector("label")).toHaveClass("label-class-name"); }); }); diff --git a/src/components/CodeSnippet/CodeSnippet.test.tsx b/src/components/CodeSnippet/CodeSnippet.test.tsx index 4c7d3bdb..f4c16607 100644 --- a/src/components/CodeSnippet/CodeSnippet.test.tsx +++ b/src/components/CodeSnippet/CodeSnippet.test.tsx @@ -46,7 +46,6 @@ describe("CodeSnippet ", () => { />, ); expect( - // eslint-disable-next-line testing-library/no-node-access document.querySelector(".p-code-snippet__block--numbered"), ).toBeInTheDocument(); expect(screen.getByText("Test line 1;")).toBeInTheDocument(); @@ -57,7 +56,7 @@ describe("CodeSnippet ", () => { it("renders line numbers when an array is passed in", () => { const multilineCode = [ "Test line 1;", - Test line 2;, + Test line 2;, "Test line 3;", ]; @@ -72,13 +71,9 @@ describe("CodeSnippet ", () => { />, ); expect( - // eslint-disable-next-line testing-library/no-node-access document.querySelector(".p-code-snippet__block--numbered"), ).toBeInTheDocument(); - expect( - // eslint-disable-next-line testing-library/no-node-access - document.querySelectorAll(".p-code-snippet__line"), - ).toHaveLength(3); + expect(document.querySelectorAll(".p-code-snippet__line")).toHaveLength(3); expect(screen.getByText("Test line 1;")).toBeInTheDocument(); expect(screen.getByText("Test line 2;")).toBeInTheDocument(); expect(screen.getByText("Test line 3;")).toBeInTheDocument(); @@ -113,7 +108,6 @@ describe("CodeSnippet ", () => { />, ); expect( - // eslint-disable-next-line testing-library/no-node-access document.querySelector(".p-code-snippet__block--icon"), ).toBeInTheDocument(); }); @@ -130,7 +124,6 @@ describe("CodeSnippet ", () => { />, ); expect( - // eslint-disable-next-line testing-library/no-node-access document.querySelector(".p-code-snippet__block--icon.is-windows-prompt"), ).toBeInTheDocument(); }); @@ -142,14 +135,12 @@ describe("CodeSnippet ", () => { />, ); expect( - // eslint-disable-next-line testing-library/no-node-access document.querySelector(".p-code-snippet__block--icon.is-url"), ).toBeInTheDocument(); }); it("renders code block with line wrapping", () => { render(); - // eslint-disable-next-line testing-library/no-node-access expect(document.querySelector(".is-wrapped")).toBeInTheDocument(); }); @@ -196,9 +187,7 @@ describe("CodeSnippet ", () => { ]} />, ); - // eslint-disable-next-line testing-library/no-node-access expect(document.querySelector(".test")).toBeInTheDocument(); - // eslint-disable-next-line testing-library/no-node-access expect(document.querySelector(".is-bordered")).toBeInTheDocument(); }); diff --git a/src/components/ConfirmationModal/ConfirmationModal.tsx b/src/components/ConfirmationModal/ConfirmationModal.tsx index f0b36a73..5f629b87 100644 --- a/src/components/ConfirmationModal/ConfirmationModal.tsx +++ b/src/components/ConfirmationModal/ConfirmationModal.tsx @@ -68,7 +68,9 @@ export const ConfirmationModal = ({ ...props }: Props): ReactElement => { const handleClick = - (action: A | null | undefined) => + ( // eslint-disable-line @typescript-eslint/no-unsafe-function-type + action: A | null | undefined, + ) => (event: MouseEvent) => { if (!props.shouldPropagateClickEvent) { event.stopPropagation(); diff --git a/src/components/ContextualMenu/ContextualMenu.test.tsx b/src/components/ContextualMenu/ContextualMenu.test.tsx index 272a3c6e..5c2f991b 100644 --- a/src/components/ContextualMenu/ContextualMenu.test.tsx +++ b/src/components/ContextualMenu/ContextualMenu.test.tsx @@ -49,7 +49,6 @@ describe("ContextualMenu ", () => { it("can have a toggle button with just an icon", () => { render(); expect( - // eslint-disable-next-line testing-library/no-node-access document.querySelector( ".p-contextual-menu__toggle .p-contextual-menu__indicator", ), @@ -63,7 +62,6 @@ describe("ContextualMenu ", () => { , ); expect( - // eslint-disable-next-line testing-library/no-node-access document.querySelector( ".p-contextual-menu__toggle .p-contextual-menu__indicator", ), @@ -100,7 +98,6 @@ describe("ContextualMenu ", () => { render(); expect(screen.getByRole("button", { name: "Toggle" })).toBeInTheDocument(); expect( - // eslint-disable-next-line testing-library/no-node-access document.querySelector(".p-contextual-menu__indicator"), ).not.toBeInTheDocument(); }); @@ -145,7 +142,6 @@ describe("ContextualMenu ", () => { it("can display links in groups", () => { render(); - // eslint-disable-next-line testing-library/no-node-access const group = document.querySelector( ".p-contextual-menu__group", ) as HTMLElement; @@ -162,7 +158,6 @@ describe("ContextualMenu ", () => { visible />, ); - // eslint-disable-next-line testing-library/no-node-access const group = document.querySelector( ".p-contextual-menu__group", ) as HTMLElement; @@ -184,7 +179,6 @@ describe("ContextualMenu ", () => { ); expect(screen.getByTestId("content")).toBeInTheDocument(); expect( - // eslint-disable-next-line testing-library/no-node-access document.querySelector(".p-contextual-menu__link"), ).not.toBeInTheDocument(); }); diff --git a/src/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.test.tsx b/src/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.test.tsx index d34e0412..22d1568e 100644 --- a/src/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.test.tsx +++ b/src/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.test.tsx @@ -201,7 +201,7 @@ describe("ContextualMenuDropdown ", () => { // get the dropdown menu dom element and set its height // NOTE: we can only do this after the component has been rendered at least once - let dropdownNode = document.querySelector( + const dropdownNode = document.querySelector( ".p-contextual-menu__dropdown", ) as HTMLElement; diff --git a/src/components/Field/Field.test.tsx b/src/components/Field/Field.test.tsx index 825fb05e..b1f7edcc 100644 --- a/src/components/Field/Field.test.tsx +++ b/src/components/Field/Field.test.tsx @@ -139,7 +139,6 @@ describe("Field ", () => { expect(field.childNodes[0]).toHaveClass("label-node"); // The label should not be inside the control. expect( - // eslint-disable-next-line testing-library/no-node-access document.querySelector(".p-form__control .p-form__label"), ).not.toBeInTheDocument(); }); @@ -151,7 +150,6 @@ describe("Field ", () => { expect(field.childNodes[0]).not.toHaveClass("label-node"); // The label should be inside the control. expect( - // eslint-disable-next-line testing-library/no-node-access document.querySelector(".p-form__control .p-form__label"), ).toBeInTheDocument(); }); @@ -174,13 +172,9 @@ describe("Field ", () => { it("can be stacked", () => { render(); // The Label should be inside a col-4. - expect( - // eslint-disable-next-line testing-library/no-node-access - document.querySelector(".col-4 .p-form__label"), - ).toBeInTheDocument(); + expect(document.querySelector(".col-4 .p-form__label")).toBeInTheDocument(); // The control should be inside a col-8. expect( - // eslint-disable-next-line testing-library/no-node-access document.querySelector(".col-8 .p-form__control"), ).toBeInTheDocument(); expect(screen.getByTestId("field")).toHaveClass("row"); diff --git a/src/components/Icon/Icon.test.tsx b/src/components/Icon/Icon.test.tsx index af0e0911..972ffe9d 100644 --- a/src/components/Icon/Icon.test.tsx +++ b/src/components/Icon/Icon.test.tsx @@ -6,26 +6,22 @@ import Icon, { ICONS } from "./Icon"; describe("Icon", () => { it("renders", () => { const { container } = render(); - // eslint-disable-next-line testing-library/no-node-access expect(container.firstChild).toMatchSnapshot(); }); it("sets correct class name based on given name", () => { const { container } = render(); - // eslint-disable-next-line testing-library/no-node-access expect(container.firstChild).toHaveClass("p-icon--test"); }); it("can be given a custom class name", () => { const { container } = render(); - // eslint-disable-next-line testing-library/no-node-access expect(container.firstChild).toHaveClass("custom-class p-icon--test"); }); it("can be given standard HTML props", () => { const style = { width: "200px" }; const { container } = render(); - // eslint-disable-next-line testing-library/no-node-access expect(container.firstChild).toHaveAttribute("style", "width: 200px;"); }); }); diff --git a/src/components/Input/Input.test.tsx b/src/components/Input/Input.test.tsx index a2131bfa..84acf72a 100644 --- a/src/components/Input/Input.test.tsx +++ b/src/components/Input/Input.test.tsx @@ -18,29 +18,17 @@ describe("Input", () => { it("moves the label for radio buttons", () => { render(); - expect( - // eslint-disable-next-line testing-library/no-node-access - document.querySelector(".p-radio__label"), - ).toBeInTheDocument(); + expect(document.querySelector(".p-radio__label")).toBeInTheDocument(); expect(screen.getByRole("radio")).toHaveAccessibleName("text label"); - expect( - // eslint-disable-next-line testing-library/no-node-access - document.querySelector(".p-form__label"), - ).not.toBeInTheDocument(); + expect(document.querySelector(".p-form__label")).not.toBeInTheDocument(); }); it("moves the label for checkboxes", () => { render(); expect(screen.getByRole("checkbox")).toHaveAccessibleName("text label"); - expect( - // eslint-disable-next-line testing-library/no-node-access - document.querySelector(".p-checkbox__label"), - ).toBeInTheDocument(); - expect( - // eslint-disable-next-line testing-library/no-node-access - document.querySelector(".p-form__label"), - ).not.toBeInTheDocument(); + expect(document.querySelector(".p-checkbox__label")).toBeInTheDocument(); + expect(document.querySelector(".p-form__label")).not.toBeInTheDocument(); }); it("can take focus on first render", () => { @@ -82,18 +70,14 @@ describe("Input", () => { it("can set a label class name for a radiobutton", () => { render(); - expect( - // eslint-disable-next-line testing-library/no-node-access - document.querySelector(".p-radio"), - ).toHaveClass("label-class-name"); + expect(document.querySelector(".p-radio")).toHaveClass("label-class-name"); }); it("can set a label class name for a checkbox", () => { render(); - expect( - // eslint-disable-next-line testing-library/no-node-access - document.querySelector(".p-checkbox"), - ).toHaveClass("label-class-name"); + expect(document.querySelector(".p-checkbox")).toHaveClass( + "label-class-name", + ); }); it("renders", () => { @@ -147,7 +131,6 @@ describe("Input", () => { "p-form-validation__input", "extra-class", ); - // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access expect(container.querySelector(".p-form-help-text")).toHaveClass( "additional-help-text-class", ); diff --git a/src/components/List/List.test.tsx b/src/components/List/List.test.tsx index 4b3de2e4..417ef703 100644 --- a/src/components/List/List.test.tsx +++ b/src/components/List/List.test.tsx @@ -17,7 +17,11 @@ describe("List ", () => { }); it("can define items as JSX", () => { - render(test, items]} />); + render( + test, items]} + />, + ); expect( within(screen.getAllByRole("listitem")[0]).getByRole("button"), ).toBeInTheDocument(); diff --git a/src/components/MainTable/MainTable.stories.tsx b/src/components/MainTable/MainTable.stories.tsx index 6e91e1a6..8e89c5a7 100644 --- a/src/components/MainTable/MainTable.stories.tsx +++ b/src/components/MainTable/MainTable.stories.tsx @@ -226,7 +226,7 @@ export const Sortable: Story = { export const Expanding: Story = { render: () => { // eslint-disable-next-line react-hooks/rules-of-hooks - let [expandedRow, setExpandedRow] = useState(1); + const [expandedRow, setExpandedRow] = useState(1); return ( { render(); expect(screen.getByRole("grid")).toHaveClass("p-table--expanding"); // Need to query the DOM as this cell is not exposed by default. - // eslint-disable-next-line testing-library/no-node-access const heads = document.querySelectorAll("th"); // There should be an additional hidden table header to account for the // expanding cell expect(heads.length).toEqual(headers.length + 1); expect(heads[heads.length - 1]).toHaveAttribute("aria-hidden", "true"); - // eslint-disable-next-line testing-library/no-node-access const columns = document.querySelectorAll("tr:last-child td"); // There should be an additional table cell for the expanding content. expect(columns.length).toEqual(rows[rows.length - 1].columns.length + 1); diff --git a/src/components/MainTable/MainTable.tsx b/src/components/MainTable/MainTable.tsx index 88934c6c..f566f03b 100644 --- a/src/components/MainTable/MainTable.tsx +++ b/src/components/MainTable/MainTable.tsx @@ -205,7 +205,7 @@ const generateRows = ({ Pick) => rows.map( ( - { columns, expanded, expandedContent, key, sortData, ...rowProps }, + { columns, expanded, expandedContent, key, sortData: _, ...rowProps }, index, ) => { const cellItems = columns?.map(({ content, ...cellProps }, index) => { diff --git a/src/components/ModularTable/ModularTable.tsx b/src/components/ModularTable/ModularTable.tsx index 7c70a2a1..5be04a1e 100644 --- a/src/components/ModularTable/ModularTable.tsx +++ b/src/components/ModularTable/ModularTable.tsx @@ -41,7 +41,7 @@ export type Props> = PropsWithSpread< /** * Optional argument to make the tables be sortable and use the `useSortBy` plugin. */ - sortable?: Boolean; + sortable?: boolean; /** * This function is used to resolve any props needed for a particular column's header cell. */ @@ -246,10 +246,11 @@ function ModularTable>({ return ( - {headerGroups.map((headerGroup) => ( - - {headerGroup.headers.map((column) => ( + {headerGroups.map((headerGroup, i) => ( + + {headerGroup.headers.map((column, j) => ( { , ); - // eslint-disable-next-line testing-library/no-node-access const element = screen.getByText("Content").parentElement; expect(element).toHaveAttribute("aria-hidden", "false"); expect(element).toHaveClass("fade-in--down test-class"); diff --git a/src/components/Navigation/Navigation.test.tsx b/src/components/Navigation/Navigation.test.tsx index ec7de53a..ff3f66d6 100644 --- a/src/components/Navigation/Navigation.test.tsx +++ b/src/components/Navigation/Navigation.test.tsx @@ -14,7 +14,6 @@ const items = [ }, ]; -/* eslint-disable testing-library/no-node-access */ it("displays light theme", () => { render(} theme={Theme.LIGHT} />); expect(screen.getByRole("banner").className.includes("is-light")).toBe(true); @@ -85,7 +84,7 @@ it("can display a standard logo with a generated link", () => { { if (isNavigationAnchor(link)) { - const { url, label, isSelected, ...props } = link; + const { url, label, isSelected: _, ...props } = link; return ( {label} @@ -305,9 +304,11 @@ it("closes the search form when clicking on the overlay", async () => { await userEvent.click(screen.getAllByRole("button", { name: "Search" })[0]); expect(banner.className.includes("has-search-open")).toBe(true); expect(screen.getByRole("searchbox")).toBeInTheDocument(); - await userEvent.click( - document.querySelector(".p-navigation__search-overlay"), - ); + const overlay = document.querySelector(".p-navigation__search-overlay"); + expect(overlay).toBeInTheDocument(); + if (overlay) { + await userEvent.click(overlay); + } expect(banner.className.includes("has-search-open")).toBe(false); expect(screen.queryByRole("searchbox")).not.toBeInTheDocument(); }); diff --git a/src/components/Navigation/NavigationLink/NavigationLink.tsx b/src/components/Navigation/NavigationLink/NavigationLink.tsx index 220a1053..34f61f9a 100644 --- a/src/components/Navigation/NavigationLink/NavigationLink.tsx +++ b/src/components/Navigation/NavigationLink/NavigationLink.tsx @@ -37,7 +37,7 @@ const NavigationLink = ({ generateLink, link }: Props): JSX.Element | null => { ); } else if (isNavigationButton(link)) { - const { isSelected, label, url, ...linkProps } = link; + const { isSelected, label, url: _url, ...linkProps } = link; return ( , + , ], }, ]} @@ -115,7 +117,7 @@ it("displays links using a custom component", () => { { label: "Link one", }, - Link two, + Link two, ], }, ]} @@ -136,7 +138,7 @@ it("displays a mix of links and custom components", () => { label: "Link one", href: "#", }, - Link two, + Link two, ], }, ]} diff --git a/src/components/SideNavigation/SideNavigationItem/SideNavigationItem.stories.tsx b/src/components/SideNavigation/SideNavigationItem/SideNavigationItem.stories.tsx index 23d09020..c42b62c9 100644 --- a/src/components/SideNavigation/SideNavigationItem/SideNavigationItem.stories.tsx +++ b/src/components/SideNavigation/SideNavigationItem/SideNavigationItem.stories.tsx @@ -11,7 +11,9 @@ const meta: Meta = { render: (args) => ( ] }]} + items={[ + { items: [] }, + ]} /> ), tags: ["autodocs"], diff --git a/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.tsx b/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.tsx index 29179057..15493174 100644 --- a/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.tsx +++ b/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.tsx @@ -18,7 +18,7 @@ export type Props = Omit< component?: SideNavigationBaseProps["component"]; }; const SideNavigationLink = forwardRef( - ({ component, ref, ...props }: Props) => { + ({ component, ...props }: Props) => { let className: string | null = null; if ("className" in props && typeof props.className === "string") { className = props.className; diff --git a/src/components/Spinner/Spinner.test.tsx b/src/components/Spinner/Spinner.test.tsx index 7313d202..683beee1 100644 --- a/src/components/Spinner/Spinner.test.tsx +++ b/src/components/Spinner/Spinner.test.tsx @@ -20,7 +20,6 @@ describe("", () => { // unit tests it("renders a spinner icon", () => { render(); - // eslint-disable-next-line testing-library/no-node-access expect(document.querySelector(".p-icon--spinner")).toBeInTheDocument(); expect(screen.getByText("Loading")).toBeInTheDocument(); }); @@ -31,17 +30,15 @@ describe("", () => { expect(screen.getByText(text)).toBeInTheDocument(); expect( - // eslint-disable-next-line testing-library/no-node-access document.querySelector(".p-icon--spinner")?.textContent, ).not.toContain(text); }); it("renders Loading... for icon text if no text prop is provided", () => { render(); - expect( - // eslint-disable-next-line testing-library/no-node-access - document.querySelector(".p-icon--spinner")?.textContent, - ).toBe("Loading"); + expect(document.querySelector(".p-icon--spinner")?.textContent).toBe( + "Loading", + ); }); it("renders an assertive spinner", () => { @@ -53,10 +50,7 @@ describe("", () => { it("renders a light spinner if given isLight prop", () => { render(); - expect( - // eslint-disable-next-line testing-library/no-node-access - document.querySelector(".p-icon--spinner"), - ).toHaveClass("is-light"); + expect(document.querySelector(".p-icon--spinner")).toHaveClass("is-light"); }); it("renders a custom aria-label", () => { diff --git a/src/components/Strip/Strip.test.tsx b/src/components/Strip/Strip.test.tsx index 7fb3ad35..da387cd6 100644 --- a/src/components/Strip/Strip.test.tsx +++ b/src/components/Strip/Strip.test.tsx @@ -89,7 +89,6 @@ describe("Strip ", () => { Test content , ); - // eslint-disable-next-line testing-library/no-node-access expect(document.querySelector(".row .col-4")).toBeInTheDocument(); }); @@ -99,7 +98,6 @@ describe("Strip ", () => { Test content , ); - // eslint-disable-next-line testing-library/no-node-access expect(document.querySelector(".row .col-12")).not.toBeInTheDocument(); }); @@ -109,7 +107,6 @@ describe("Strip ", () => { Test content , ); - // eslint-disable-next-line testing-library/no-node-access expect(document.querySelector(".row")).toHaveClass("row--extra"); }); diff --git a/src/components/TableCell/TableCell.test.tsx b/src/components/TableCell/TableCell.test.tsx index 45a5d8e8..b505bc82 100644 --- a/src/components/TableCell/TableCell.test.tsx +++ b/src/components/TableCell/TableCell.test.tsx @@ -1,4 +1,3 @@ -/* eslint-disable testing-library/no-node-access */ import { render, isInaccessible } from "@testing-library/react"; import React from "react"; @@ -17,9 +16,15 @@ describe("TableCell", () => { it("can be hidden", () => { const { container, rerender } = render(