Add JS lint scripts for woocommerce plugin (#46214)

plugins/woocommerce/.eslintignore

@@ -1,20 +1,27 @@
 *.min.js
 
-/assets/js/accounting/**
-/assets/js/flexslider/**
-/assets/js/jquery-blockui/**
-/assets/js/jquery-cookie/**
-/assets/js/jquery-flot/**
-/assets/js/jquery-payment/**
-/assets/js/jquery-qrcode/**
-/assets/js/jquery-serializejson/**
-/assets/js/jquery-tiptip/**
-/assets/js/jquery-ui-touch-punch/**
-/assets/js/js-cookie/**
-/assets/js/photoswipe/**
-/assets/js/prettyPhoto/**
-/assets/js/round/**
-/assets/js/select2/**
-/assets/js/selectWoo/**
-/assets/js/stupidtable/**
-/assets/js/zoom/**
+/.wireit/**
+/assets/**
+/bin/composer/**
+/client/legacy/build/**
+/client/legacy/js/accounting/**
+/client/legacy/js/flexslider/**
+/client/legacy/js/jquery-blockui/**
+/client/legacy/js/jquery-cookie/**
+/client/legacy/js/jquery-flot/**
+/client/legacy/js/jquery-payment/**
+/client/legacy/js/jquery-qrcode/**
+/client/legacy/js/jquery-serializejson/**
+/client/legacy/js/jquery-tiptip/**
+/client/legacy/js/jquery-ui-touch-punch/**
+/client/legacy/js/js-cookie/**
+/client/legacy/js/photoswipe/**
+/client/legacy/js/prettyPhoto/**
+/client/legacy/js/round/**
+/client/legacy/js/select2/**
+/client/legacy/js/selectWoo/**
+/client/legacy/js/stupidtable/**
+/client/legacy/js/zoom/**
+/includes/gateways/**
+/tests/e2e/**
+/vendor/**

plugins/woocommerce/.eslintrc.js

@@ -1,5 +1,3 @@
-/** @format */
-
 module.exports = {
 	env: {
 		browser: true,

plugins/woocommerce/bin/eslint-branch.sh

@@ -0,0 +1,23 @@
+#!/usr/bin/env bash
+# Lint branch
+#
+# Runs eslint, comparing the current branch to its "base" or "parent" branch.
+# The base branch defaults to trunk, but another branch name can be specified as an
+# optional positional argument.
+#
+# Example:
+# ./eslint-branch.sh base-branch
+
+baseBranch=${1:-"trunk"}
+
+# shellcheck disable=SC2046
+changedFiles=$(git diff $(git merge-base HEAD $baseBranch) --relative --name-only --diff-filter=d -- '*.js' '*ts' '*tsx')
+
+# Only complete this if changed files are detected.
+if [[ -z $changedFiles ]]; then
+    echo "No changed files detected."
+    exit 0
+fi
+
+# shellcheck disable=SC2086
+pnpm eslint $changedFiles

plugins/woocommerce/bin/package-update-textdomain.js

@@ -20,6 +20,6 @@ wpTextdomain( 'packages/**/*.php', {
 		'_nx:1,2,4c,5d',
 		'_n_noop:1,2,3d',
 		'_nx_noop:1,2,3c,4d',
-		'wp_set_script_translations:1,2d,3'
+		'wp_set_script_translations:1,2d,3',
 	],
 } );

plugins/woocommerce/changelog/tools-add-js-lint-in-woocommerce-plugin

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Adds JS linting scripts for woocommerce plugin

plugins/woocommerce/client/legacy/.eslintrc.js

@@ -17,7 +17,6 @@ module.exports = {
 		'max-len': [ 2, { 'code': 140 } ],
 		'no-console': 1
 	},
-	parser: 'babel-eslint',
 	parserOptions: {
 		ecmaVersion: 8,
 		ecmaFeatures: {

plugins/woocommerce/package.json

@@ -35,8 +35,12 @@
 		"preinstall": "npx only-allow pnpm",
 		"postinstall": "composer install",
 		"lint": "pnpm --if-present '/^lint:lang:.*$/'",
+		"lint:changes:branch": "pnpm '/^lint:changes:branch:.*$/'",
 		"lint:fix": "pnpm --if-present '/^lint:fix:lang:.*$/'",
 		"lint:fix:lang:php": "composer run-script phpcbf",
+		"lint:changes:branch:js": "bash ./bin/eslint-branch.sh",
+		"lint:changes:branch:php": "pnpm lint:php:changes:branch",
+		"lint:lang:js": "eslint . --ext=js,ts",
 		"lint:lang:php": "composer run-script phpcs",
 		"lint:php": "composer run-script phpcs",
 		"lint:php:changes": "composer run-script lint",
@@ -80,7 +84,7 @@
 		"build_step": "pnpm build:zip",
 		"ci": {
 			"lint": {
-				"command": "lint:php:changes:branch <baseRef>",
+				"command": "lint:changes:branch <baseRef>",
 				"changes": [
 					"composer.lock",
 					"includes/**/*.php",
@@ -89,7 +93,8 @@
 					"templates/**/*.php",
 					"tests/php/**/*.php",
 					"tests/legacy/unit-tests/**/*.php",
-					"tests/unit-tests/**/*.php"
+					"tests/unit-tests/**/*.php",
+					"tests/**/*.js"
 				]
 			},
 			"tests": [

plugins/woocommerce/tests/e2e-pw/tests/merchant/product-edit.spec.js

@@ -1,6 +1,5 @@
 const { test: baseTest, expect } = require( '../../fixtures/fixtures' );
 
-baseTest.describe( 'Products > Edit Product', () => {
 const test = baseTest.extend( {
 	storageState: process.env.ADMINSTATE,
 	products: async ( { api }, use ) => {
@@ -62,9 +61,7 @@ baseTest.describe( 'Products > Edit Product', () => {
 		await page
 			.getByLabel( 'Regular price ($)' )
 			.fill( newProduct.regularPrice );
-			await page
-				.getByLabel( 'Sale price ($)' )
-				.fill( newProduct.salePrice );
+		await page.getByLabel( 'Sale price ($)' ).fill( newProduct.salePrice );
 	} );
 
 	await test.step( 'publish the updated product', async () => {
@@ -75,9 +72,9 @@ baseTest.describe( 'Products > Edit Product', () => {
 		await expect( page.getByLabel( 'Product name' ) ).toHaveValue(
 			newProduct.name
 		);
-			await expect(
-				page.locator( '.wp-editor-area' ).first()
-			).toContainText( newProduct.description );
+		await expect( page.locator( '.wp-editor-area' ).first() ).toContainText(
+			newProduct.description
+		);
 		await expect( page.getByLabel( 'Regular price ($)' ) ).toHaveValue(
 			newProduct.regularPrice
 		);
@@ -112,9 +109,7 @@ baseTest.describe( 'Products > Edit Product', () => {
 	await test.step( 'update the regular price', async () => {
 		await page
 			.locator( 'select[name="change_regular_price"]' )
-				.selectOption(
-					'Increase existing price by (fixed amount or %):'
-				);
+			.selectOption( 'Increase existing price by (fixed amount or %):' );
 		await page
 			.getByPlaceholder( 'Enter price ($)' )
 			.fill( `${ regularPriceIncrease }%` );
@@ -156,8 +151,7 @@ baseTest.describe( 'Products > Edit Product', () => {
 				expectedRegularPrice *
 				( 1 - salePriceDecrease / 100 )
 			).toFixed( 2 );
-				const expectedStockQty =
-					product.stock_quantity + stockQtyIncrease;
+			const expectedStockQty = product.stock_quantity + stockQtyIncrease;
 
 			await expect
 				.soft(
@@ -181,4 +175,3 @@ baseTest.describe( 'Products > Edit Product', () => {
 		}
 	} );
 } );
-} );