From 8929a9f7240ec81107c798b2e750407ba1bec118 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= Date: Wed, 17 Aug 2022 06:51:52 +0200 Subject: [PATCH] ESLint Plugin: Remove all rules targeting test files from recommended presets (#43272) --- .../src/components/duotone/components.js | 10 +++---- packages/block-editor/src/hooks/duotone.js | 8 +++--- packages/docgen/lib/get-type-annotation.js | 2 +- .../global-styles/use-global-styles-output.js | 2 +- packages/eslint-plugin/CHANGELOG.md | 1 + packages/eslint-plugin/README.md | 18 ++++++------- .../configs/recommended-with-formatting.js | 26 +------------------ .../__device-tests__/helpers/utils.js | 6 ++--- packages/scripts/CHANGELOG.md | 1 + packages/scripts/config/.eslintrc.js | 7 +++++ packages/style-engine/src/styles/utils.ts | 10 +++---- 11 files changed, 38 insertions(+), 53 deletions(-) diff --git a/packages/block-editor/src/components/duotone/components.js b/packages/block-editor/src/components/duotone/components.js index 2ec019849a02a..471c03502c588 100644 --- a/packages/block-editor/src/components/duotone/components.js +++ b/packages/block-editor/src/components/duotone/components.js @@ -11,9 +11,9 @@ import { __unstableGetValuesFromColors as getValuesFromColors } from './index'; /** * SVG and stylesheet needed for rendering the duotone filter. * - * @param {Object} props Duotone props. - * @param {string} props.selector Selector to apply the filter to. - * @param {string} props.id Unique id for this duotone filter. + * @param {Object} props Duotone props. + * @param {string} props.selector Selector to apply the filter to. + * @param {string} props.id Unique id for this duotone filter. * * @return {WPElement} Duotone element. */ @@ -29,8 +29,8 @@ ${ selector } { /** * Stylesheet for disabling a global styles duotone filter. * - * @param {Object} props Duotone props. - * @param {string} props.selector Selector to disable the filter for. + * @param {Object} props Duotone props. + * @param {string} props.selector Selector to disable the filter for. * * @return {WPElement} Filter none style element. */ diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js index 5cc610ae1047b..9970484584409 100644 --- a/packages/block-editor/src/hooks/duotone.js +++ b/packages/block-editor/src/hooks/duotone.js @@ -35,10 +35,10 @@ extend( [ namesPlugin ] ); /** * SVG and stylesheet needed for rendering the duotone filter. * - * @param {Object} props Duotone props. - * @param {string} props.selector Selector to apply the filter to. - * @param {string} props.id Unique id for this duotone filter. - * @param {string[]|"unset"} props.colors Array of RGB color strings ordered from dark to light. + * @param {Object} props Duotone props. + * @param {string} props.selector Selector to apply the filter to. + * @param {string} props.id Unique id for this duotone filter. + * @param {string[]|"unset"} props.colors Array of RGB color strings ordered from dark to light. * * @return {WPElement} Duotone element. */ diff --git a/packages/docgen/lib/get-type-annotation.js b/packages/docgen/lib/get-type-annotation.js index 4df982e8d363f..c03c3104fd040 100644 --- a/packages/docgen/lib/get-type-annotation.js +++ b/packages/docgen/lib/get-type-annotation.js @@ -394,7 +394,7 @@ function getTypeAnnotation( typeAnnotation ) { * * @param {ASTNode} token Contains either a function or a call to a function-wrapper. * - * TODO: Remove the special-casing here once we're able to infer the types from TypeScript itself. + * TODO: Remove the special-casing here once we're able to infer the types from TypeScript itself. */ function unwrapWrappedSelectors( token ) { if ( babelTypes.isFunctionDeclaration( token ) ) { diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js index 2f1b601be30bc..4713ae9d67b33 100644 --- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js @@ -190,7 +190,7 @@ function flattenTree( input = {}, prefix, token ) { * * @param {boolean} useRootPaddingAlign Whether to use CSS custom properties in root selector. * - * @param {Object} tree A theme.json tree containing layout definitions. + * @param {Object} tree A theme.json tree containing layout definitions. * * @return {Array} An array of style declarations. */ diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md index 0ac931b3bd5bd..6a027c0697491 100644 --- a/packages/eslint-plugin/CHANGELOG.md +++ b/packages/eslint-plugin/CHANGELOG.md @@ -5,6 +5,7 @@ ### Breaking Change - Increase the minimum Node.js version to 14 and minimum npm version to 6.14.4 ([#43141](https://github.com/WordPress/gutenberg/pull/43141)). +- Remove all rules targeting test files from the `recommended` and `recommended-with-formatting` presets when Jest package is installed ([#43272](https://github.com/WordPress/gutenberg/pull/43272)). ## 12.8.0 (2022-07-27) diff --git a/packages/eslint-plugin/README.md b/packages/eslint-plugin/README.md index 4ea772f525c4d..3b49f4616b0f6 100644 --- a/packages/eslint-plugin/README.md +++ b/packages/eslint-plugin/README.md @@ -44,15 +44,15 @@ There is also `recommended-with-formatting` ruleset for projects that want to en Alternatively, you can opt-in to only the more granular rulesets offered by the plugin. These include: -- `custom` -- `es5` -- `esnext` -- `jsdoc` -- `jsx-a11y` -- `react` -- `i18n` -- `test-e2e` -- `test-unit` +- `custom` – custom rules for WordPress development. +- `es5` – rules for legacy ES5 environments. +- `esnext` – rules for ES2015+ environments. +- `i18n` – rules for internationalization. +- `jsdoc` – rules for JSDoc comments. +- `jsx-a11y` – rules for accessibility in JSX. +- `react` – rules for React components. +- `test-e2e` – rules for end-to-end tests written in Puppeteer. +- `test-unit`– rules for unit tests written in Jest. For example, if your project does not use React, you could consider extending including only the ESNext rules in your project using the following `extends` definition: diff --git a/packages/eslint-plugin/configs/recommended-with-formatting.js b/packages/eslint-plugin/configs/recommended-with-formatting.js index 66b7f39d06088..3c7ce025ce8fe 100644 --- a/packages/eslint-plugin/configs/recommended-with-formatting.js +++ b/packages/eslint-plugin/configs/recommended-with-formatting.js @@ -1,10 +1,5 @@ -/** - * Internal dependencies - */ -const { isPackageInstalled } = require( '../utils' ); - // Exclude bundled WordPress packages from the list. -const wpPackagesRegExp = '^@wordpress/(?!(icons|interface))'; +const wpPackagesRegExp = '^@wordpress/(?!(icons|interface|style-engine))'; const config = { extends: [ @@ -45,23 +40,4 @@ const config = { }, }; -// Don't apply Jest config if Playwright is installed. -if ( - isPackageInstalled( 'jest' ) && - ! isPackageInstalled( '@playwright/test' ) -) { - config.overrides = [ - { - // Unit test files and their helpers only. - files: [ '**/@(test|__tests__)/**/*.js', '**/?(*.)test.js' ], - extends: [ require.resolve( './test-unit.js' ) ], - }, - { - // End-to-end test files and their helpers only. - files: [ '**/specs/**/*.js', '**/?(*.)spec.js' ], - extends: [ require.resolve( './test-e2e.js' ) ], - }, - ]; -} - module.exports = config; diff --git a/packages/react-native-editor/__device-tests__/helpers/utils.js b/packages/react-native-editor/__device-tests__/helpers/utils.js index 538df4e57172c..7c05cb2db19a4 100644 --- a/packages/react-native-editor/__device-tests__/helpers/utils.js +++ b/packages/react-native-editor/__device-tests__/helpers/utils.js @@ -515,9 +515,9 @@ const waitForMediaLibrary = async ( driver ) => { /** * @param {string} driver * @param {string} elementLocator - * @param {number} maxIteration - Default value is 25 + * @param {number} maxIteration - Default value is 25 * @param {string} elementToReturn - Options are allElements, lastElement, firstElement. Defaults to "firstElement" - * @param {number} iteration - Default value is 0 + * @param {number} iteration - Default value is 0 * @return {string} - Returns the first element found, empty string if not found */ const waitForVisible = async ( @@ -567,7 +567,7 @@ const waitForVisible = async ( /** * @param {string} driver * @param {string} elementLocator - * @param {number} maxIteration - Default value is 25, can be adjusted to be less to wait for element to not be visible + * @param {number} maxIteration - Default value is 25, can be adjusted to be less to wait for element to not be visible * @param {string} elementToReturn - Options are allElements, lastElement, firstElement. Defaults to "firstElement" * @return {boolean} - Returns true if element is found, false otherwise */ diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md index 8c388197c6d79..c5c7c0c212df1 100644 --- a/packages/scripts/CHANGELOG.md +++ b/packages/scripts/CHANGELOG.md @@ -5,6 +5,7 @@ ### Breaking Change - Increase the minimum Node.js version to 14 and minimum npm version to 6.14.4 ([#43141](https://github.com/WordPress/gutenberg/pull/43141)). +- The bundled `@wordpress/eslint-plugin` package got updated to the new major version and the default linting for Jest unit tests is now handled in the default config in this package ([#43272](https://github.com/WordPress/gutenberg/pull/43272)). ## 23.7.1 (2022-08-12) diff --git a/packages/scripts/config/.eslintrc.js b/packages/scripts/config/.eslintrc.js index 96060985e0dd6..93d1619a1738b 100644 --- a/packages/scripts/config/.eslintrc.js +++ b/packages/scripts/config/.eslintrc.js @@ -6,6 +6,13 @@ const { hasBabelConfig } = require( '../utils' ); const eslintConfig = { root: true, extends: [ 'plugin:@wordpress/eslint-plugin/recommended' ], + overrides: [ + { + // Unit test files and their helpers only. + files: [ '**/@(test|__tests__)/**/*.js', '**/?(*.)test.js' ], + extends: [ 'plugin:@wordpress/eslint-plugin/test-unit' ], + }, + ], }; if ( ! hasBabelConfig() ) { diff --git a/packages/style-engine/src/styles/utils.ts b/packages/style-engine/src/styles/utils.ts index 28609794f23ad..64a761ae5d359 100644 --- a/packages/style-engine/src/styles/utils.ts +++ b/packages/style-engine/src/styles/utils.ts @@ -51,11 +51,11 @@ export function generateRule( /** * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left. * - * @param style Style object. - * @param options Options object with settings to adjust how the styles are generated. - * @param path An array of strings representing the path to the style value in the style object. - * @param ruleKeys An array of CSS property keys and patterns. - * @param individualProperties The "sides" or individual properties for which to generate rules. + * @param style Style object. + * @param options Options object with settings to adjust how the styles are generated. + * @param path An array of strings representing the path to the style value in the style object. + * @param ruleKeys An array of CSS property keys and patterns. + * @param individualProperties The "sides" or individual properties for which to generate rules. * * @return GeneratedCSSRule[] CSS rules. */