From 77dbee8ed9b691a547e78cc0fba1988bdc0cd471 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Wed, 25 Jan 2023 16:41:22 +0100 Subject: [PATCH] Fix E2E tests (https://github.com/woocommerce/woocommerce-blocks/pull/8263) * Fix E2E tests * skip catalog sorting E2E tests --- plugins/woocommerce-blocks/package-lock.json | 157 ++++++++++++++---- plugins/woocommerce-blocks/package.json | 2 +- .../e2e/specs/backend/active-filters.test.js | 2 + .../specs/backend/attribute-filter.test.js | 2 + .../tests/e2e/specs/backend/cart.test.js | 18 +- .../e2e/specs/backend/catalog-sorting.test.js | 4 +- .../tests/e2e/specs/backend/checkout.test.js | 24 ++- .../specs/backend/customer-account.test.js | 6 +- .../e2e/specs/backend/price-filter.test.js | 4 + .../e2e/specs/backend/product-query.test.ts | 6 +- .../product-query/advanced-filters.test.ts | 2 + .../product-query/popular-filters.test.ts | 2 + .../e2e/specs/backend/rating-filter.test.js | 6 +- .../e2e/specs/backend/stock-filter.test.js | 6 +- .../e2e/specs/merchant/checkout-terms.test.js | 3 + .../shopper/cart-checkout/checkout.test.js | 5 +- .../cart-checkout/translations.test.js | 1 - .../filter-products-by-attribute.test.ts | 7 +- .../shopper/filter-products-by-price.test.ts | 4 + .../shopper/filter-products-by-rating.test.ts | 4 + .../shopper/filter-products-by-stock.test.ts | 3 + .../product-query-with-templates.test.ts | 3 + .../e2e/specs/shopper/product-query/utils.ts | 3 + plugins/woocommerce-blocks/tests/e2e/utils.js | 4 +- .../woocommerce-blocks/tests/utils/index.js | 1 + ...spector-tab-when-gutenberg-is-installed.ts | 19 +++ 26 files changed, 242 insertions(+), 56 deletions(-) create mode 100644 plugins/woocommerce-blocks/tests/utils/switch-block-inspector-tab-when-gutenberg-is-installed.ts diff --git a/plugins/woocommerce-blocks/package-lock.json b/plugins/woocommerce-blocks/package-lock.json index fdabce23cc7..a44794053a2 100644 --- a/plugins/woocommerce-blocks/package-lock.json +++ b/plugins/woocommerce-blocks/package-lock.json @@ -99,7 +99,7 @@ "@wordpress/data-controls": "2.2.7", "@wordpress/dependency-extraction-webpack-plugin": "3.2.1", "@wordpress/dom": "3.16.0", - "@wordpress/e2e-test-utils": "9.0.0", + "@wordpress/e2e-test-utils": "9.2.0", "@wordpress/e2e-tests": "4.6.0", "@wordpress/element": "4.20.0", "@wordpress/env": "^4.9.0", @@ -13803,15 +13803,15 @@ } }, "node_modules/@wordpress/e2e-test-utils": { - "version": "9.0.0", - "resolved": "https://registry.npmjs.org/@wordpress/e2e-test-utils/-/e2e-test-utils-9.0.0.tgz", - "integrity": "sha512-ERu7Ze/3hzHIbU/3CU8RwsWvHADUVMMJkGE3KBSPT7mCPVvbk42/2RbqUiQwcwWgM2tY0zfhY7JAg7F9WmnbEw==", + "version": "9.2.0", + "resolved": "https://registry.npmjs.org/@wordpress/e2e-test-utils/-/e2e-test-utils-9.2.0.tgz", + "integrity": "sha512-kfnIwgoo4fd1+h85btWFyoMcPBqYA4szwWI3GmrBny8ybyFljRed1XVleZ/oD6MaFgid4uB6V4+OKTlsw5mg/Q==", "dev": true, "dependencies": { "@babel/runtime": "^7.16.0", - "@wordpress/api-fetch": "^6.20.0", - "@wordpress/keycodes": "^3.23.0", - "@wordpress/url": "^3.24.0", + "@wordpress/api-fetch": "^6.22.0", + "@wordpress/keycodes": "^3.25.0", + "@wordpress/url": "^3.26.0", "change-case": "^4.1.2", "form-data": "^4.0.0", "node-fetch": "^2.6.0" @@ -13824,10 +13824,44 @@ "puppeteer-core": ">=11" } }, + "node_modules/@wordpress/e2e-test-utils/node_modules/@wordpress/api-fetch": { + "version": "6.22.0", + "resolved": "https://registry.npmjs.org/@wordpress/api-fetch/-/api-fetch-6.22.0.tgz", + "integrity": "sha512-IO7Shv1Qz93bo/Rq20beAV+p1qSOCs4uUi98rzhhih7U0SF88Jo69mlNmQbpALWcG040a2DRQR8E18Mj7JwViQ==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.16.0", + "@wordpress/i18n": "^4.25.0", + "@wordpress/url": "^3.26.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@wordpress/e2e-test-utils/node_modules/@wordpress/i18n": { + "version": "4.25.0", + "resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-4.25.0.tgz", + "integrity": "sha512-cKU5Ox1DKa3WShRu+QrCU+QzNvyoQhrNtS6kcvw17DfMBjPe7AsYjd7ZBb7Io327jP97Oqh5BtaYdUq/4S1cIw==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.16.0", + "@wordpress/hooks": "^3.25.0", + "gettext-parser": "^1.3.1", + "memize": "^1.1.0", + "sprintf-js": "^1.1.1", + "tannin": "^1.2.0" + }, + "bin": { + "pot-to-php": "tools/pot-to-php.js" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/@wordpress/e2e-test-utils/node_modules/@wordpress/url": { - "version": "3.24.0", - "resolved": "https://registry.npmjs.org/@wordpress/url/-/url-3.24.0.tgz", - "integrity": "sha512-NFDz2rCe+ubt6UfXoB0dWhCgQHF9LbuW7ug8C0hCggAVYhI3Dhs1oLyqElLWT4t16s3fovxFIASGoTqB4i01JQ==", + "version": "3.26.0", + "resolved": "https://registry.npmjs.org/@wordpress/url/-/url-3.26.0.tgz", + "integrity": "sha512-oqIYWqUo1sr1qU4jxbRhzusSqMClSHn4bNtlR835VcqZoBnTM7/RwfrmTo6aCWDcSAd7LQVV1vykTjJsAYdxsA==", "dev": true, "dependencies": { "@babel/runtime": "^7.16.0", @@ -15980,9 +16014,9 @@ } }, "node_modules/@wordpress/hooks": { - "version": "3.24.0", - "resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-3.24.0.tgz", - "integrity": "sha512-Nm8Y+IdahS2dg4fSMVZmb7FDqxTHJu9jTQ8BgCFKuX0b4M1brZatvg8VMMj5ZbDm2XMai+07lsFBrxWHpNm18Q==", + "version": "3.25.0", + "resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-3.25.0.tgz", + "integrity": "sha512-xdSUsyStn6b5Ts4vaMuCDsxy4D9hWPUkCItF3q16Zh6DgPAXeRvGozVt6Y+kW8xZ3dHI3t6uzP0VXSiVWkK8Gw==", "dependencies": { "@babel/runtime": "^7.16.0" }, @@ -16138,12 +16172,12 @@ "license": "MIT" }, "node_modules/@wordpress/keycodes": { - "version": "3.23.0", - "resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-3.23.0.tgz", - "integrity": "sha512-CfvxhqwgVU2c3f2B1F09i8E+1/HMkgf4gmmf+0dyKFMmYesByY4GKuvOvKw5dklFWp96qECz6Jf+L2F4vw7//w==", + "version": "3.25.0", + "resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-3.25.0.tgz", + "integrity": "sha512-y55wL9bj/XrW7Uyvg6kyQeVjPQOezG7HTI+L3nzI12waL50eGhqM1DSOv6PhMrcoHG4CN5Lg8bXNUF6TrAntfA==", "dependencies": { "@babel/runtime": "^7.16.0", - "@wordpress/i18n": "^4.23.0", + "@wordpress/i18n": "^4.25.0", "change-case": "^4.1.2", "lodash": "^4.17.21" }, @@ -16151,6 +16185,25 @@ "node": ">=12" } }, + "node_modules/@wordpress/keycodes/node_modules/@wordpress/i18n": { + "version": "4.25.0", + "resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-4.25.0.tgz", + "integrity": "sha512-cKU5Ox1DKa3WShRu+QrCU+QzNvyoQhrNtS6kcvw17DfMBjPe7AsYjd7ZBb7Io327jP97Oqh5BtaYdUq/4S1cIw==", + "dependencies": { + "@babel/runtime": "^7.16.0", + "@wordpress/hooks": "^3.25.0", + "gettext-parser": "^1.3.1", + "memize": "^1.1.0", + "sprintf-js": "^1.1.1", + "tannin": "^1.2.0" + }, + "bin": { + "pot-to-php": "tools/pot-to-php.js" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/@wordpress/keycodes/node_modules/change-case": { "version": "4.1.2", "license": "MIT", @@ -60203,24 +60256,49 @@ } }, "@wordpress/e2e-test-utils": { - "version": "9.0.0", - "resolved": "https://registry.npmjs.org/@wordpress/e2e-test-utils/-/e2e-test-utils-9.0.0.tgz", - "integrity": "sha512-ERu7Ze/3hzHIbU/3CU8RwsWvHADUVMMJkGE3KBSPT7mCPVvbk42/2RbqUiQwcwWgM2tY0zfhY7JAg7F9WmnbEw==", + "version": "9.2.0", + "resolved": "https://registry.npmjs.org/@wordpress/e2e-test-utils/-/e2e-test-utils-9.2.0.tgz", + "integrity": "sha512-kfnIwgoo4fd1+h85btWFyoMcPBqYA4szwWI3GmrBny8ybyFljRed1XVleZ/oD6MaFgid4uB6V4+OKTlsw5mg/Q==", "dev": true, "requires": { "@babel/runtime": "^7.16.0", - "@wordpress/api-fetch": "^6.20.0", - "@wordpress/keycodes": "^3.23.0", - "@wordpress/url": "^3.24.0", + "@wordpress/api-fetch": "^6.22.0", + "@wordpress/keycodes": "^3.25.0", + "@wordpress/url": "^3.26.0", "change-case": "^4.1.2", "form-data": "^4.0.0", "node-fetch": "^2.6.0" }, "dependencies": { + "@wordpress/api-fetch": { + "version": "6.22.0", + "resolved": "https://registry.npmjs.org/@wordpress/api-fetch/-/api-fetch-6.22.0.tgz", + "integrity": "sha512-IO7Shv1Qz93bo/Rq20beAV+p1qSOCs4uUi98rzhhih7U0SF88Jo69mlNmQbpALWcG040a2DRQR8E18Mj7JwViQ==", + "dev": true, + "requires": { + "@babel/runtime": "^7.16.0", + "@wordpress/i18n": "^4.25.0", + "@wordpress/url": "^3.26.0" + } + }, + "@wordpress/i18n": { + "version": "4.25.0", + "resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-4.25.0.tgz", + "integrity": "sha512-cKU5Ox1DKa3WShRu+QrCU+QzNvyoQhrNtS6kcvw17DfMBjPe7AsYjd7ZBb7Io327jP97Oqh5BtaYdUq/4S1cIw==", + "dev": true, + "requires": { + "@babel/runtime": "^7.16.0", + "@wordpress/hooks": "^3.25.0", + "gettext-parser": "^1.3.1", + "memize": "^1.1.0", + "sprintf-js": "^1.1.1", + "tannin": "^1.2.0" + } + }, "@wordpress/url": { - "version": "3.24.0", - "resolved": "https://registry.npmjs.org/@wordpress/url/-/url-3.24.0.tgz", - "integrity": "sha512-NFDz2rCe+ubt6UfXoB0dWhCgQHF9LbuW7ug8C0hCggAVYhI3Dhs1oLyqElLWT4t16s3fovxFIASGoTqB4i01JQ==", + "version": "3.26.0", + "resolved": "https://registry.npmjs.org/@wordpress/url/-/url-3.26.0.tgz", + "integrity": "sha512-oqIYWqUo1sr1qU4jxbRhzusSqMClSHn4bNtlR835VcqZoBnTM7/RwfrmTo6aCWDcSAd7LQVV1vykTjJsAYdxsA==", "dev": true, "requires": { "@babel/runtime": "^7.16.0", @@ -61693,9 +61771,9 @@ } }, "@wordpress/hooks": { - "version": "3.24.0", - "resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-3.24.0.tgz", - "integrity": "sha512-Nm8Y+IdahS2dg4fSMVZmb7FDqxTHJu9jTQ8BgCFKuX0b4M1brZatvg8VMMj5ZbDm2XMai+07lsFBrxWHpNm18Q==", + "version": "3.25.0", + "resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-3.25.0.tgz", + "integrity": "sha512-xdSUsyStn6b5Ts4vaMuCDsxy4D9hWPUkCItF3q16Zh6DgPAXeRvGozVt6Y+kW8xZ3dHI3t6uzP0VXSiVWkK8Gw==", "requires": { "@babel/runtime": "^7.16.0" } @@ -61791,16 +61869,29 @@ } }, "@wordpress/keycodes": { - "version": "3.23.0", - "resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-3.23.0.tgz", - "integrity": "sha512-CfvxhqwgVU2c3f2B1F09i8E+1/HMkgf4gmmf+0dyKFMmYesByY4GKuvOvKw5dklFWp96qECz6Jf+L2F4vw7//w==", + "version": "3.25.0", + "resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-3.25.0.tgz", + "integrity": "sha512-y55wL9bj/XrW7Uyvg6kyQeVjPQOezG7HTI+L3nzI12waL50eGhqM1DSOv6PhMrcoHG4CN5Lg8bXNUF6TrAntfA==", "requires": { "@babel/runtime": "^7.16.0", - "@wordpress/i18n": "^4.23.0", + "@wordpress/i18n": "^4.25.0", "change-case": "^4.1.2", "lodash": "^4.17.21" }, "dependencies": { + "@wordpress/i18n": { + "version": "4.25.0", + "resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-4.25.0.tgz", + "integrity": "sha512-cKU5Ox1DKa3WShRu+QrCU+QzNvyoQhrNtS6kcvw17DfMBjPe7AsYjd7ZBb7Io327jP97Oqh5BtaYdUq/4S1cIw==", + "requires": { + "@babel/runtime": "^7.16.0", + "@wordpress/hooks": "^3.25.0", + "gettext-parser": "^1.3.1", + "memize": "^1.1.0", + "sprintf-js": "^1.1.1", + "tannin": "^1.2.0" + } + }, "change-case": { "version": "4.1.2", "requires": { diff --git a/plugins/woocommerce-blocks/package.json b/plugins/woocommerce-blocks/package.json index 16cab83e76a..a8a8690fbb1 100644 --- a/plugins/woocommerce-blocks/package.json +++ b/plugins/woocommerce-blocks/package.json @@ -146,7 +146,7 @@ "@wordpress/data-controls": "2.2.7", "@wordpress/dependency-extraction-webpack-plugin": "3.2.1", "@wordpress/dom": "3.16.0", - "@wordpress/e2e-test-utils": "9.0.0", + "@wordpress/e2e-test-utils": "9.2.0", "@wordpress/e2e-tests": "4.6.0", "@wordpress/element": "4.20.0", "@wordpress/env": "^4.9.0", diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/backend/active-filters.test.js b/plugins/woocommerce-blocks/tests/e2e/specs/backend/active-filters.test.js index ef8ed76f940..7cfd2bff722 100644 --- a/plugins/woocommerce-blocks/tests/e2e/specs/backend/active-filters.test.js +++ b/plugins/woocommerce-blocks/tests/e2e/specs/backend/active-filters.test.js @@ -9,6 +9,7 @@ import { import { visitBlockPage, selectBlockByName, + switchBlockInspectorTabWhenGutenbergIsInstalled, } from '@woocommerce/blocks-test-utils'; const block = { @@ -31,6 +32,7 @@ describe( `${ block.name } Block`, () => { describe( 'attributes', () => { beforeEach( async () => { await openDocumentSettingsSidebar(); + await switchBlockInspectorTabWhenGutenbergIsInstalled( 'Settings' ); await selectBlockByName( block.slug ); } ); diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/backend/attribute-filter.test.js b/plugins/woocommerce-blocks/tests/e2e/specs/backend/attribute-filter.test.js index 5c8de1e7a17..4bda1c37ef2 100644 --- a/plugins/woocommerce-blocks/tests/e2e/specs/backend/attribute-filter.test.js +++ b/plugins/woocommerce-blocks/tests/e2e/specs/backend/attribute-filter.test.js @@ -10,6 +10,7 @@ import { visitBlockPage, saveOrPublish, selectBlockByName, + switchBlockInspectorTabWhenGutenbergIsInstalled, } from '@woocommerce/blocks-test-utils'; const block = { @@ -64,6 +65,7 @@ describe( `${ block.name } Block`, () => { beforeEach( async () => { await openDocumentSettingsSidebar(); await selectBlockByName( block.slug ); + await switchBlockInspectorTabWhenGutenbergIsInstalled( 'Settings' ); } ); it( "allows changing the block's title", async () => { diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/backend/cart.test.js b/plugins/woocommerce-blocks/tests/e2e/specs/backend/cart.test.js index bf0849dd146..ebb3e94fe09 100644 --- a/plugins/woocommerce-blocks/tests/e2e/specs/backend/cart.test.js +++ b/plugins/woocommerce-blocks/tests/e2e/specs/backend/cart.test.js @@ -5,12 +5,14 @@ import { clickBlockToolbarButton, openDocumentSettingsSidebar, switchUserToAdmin, - getAllBlocks, + searchForBlock, + openGlobalBlockInserter, } from '@wordpress/e2e-test-utils'; import { findLabelWithText, visitBlockPage, selectBlockByName, + switchBlockInspectorTabWhenGutenbergIsInstalled, } from '@woocommerce/blocks-test-utils'; import { merchant } from '@woocommerce/e2e-utils'; @@ -18,8 +20,6 @@ import { merchant } from '@woocommerce/e2e-utils'; * Internal dependencies */ import { - searchForBlock, - insertBlockDontWaitForInsertClose, openWidgetEditor, closeModalIfExists, openWidgetsEditorBlockInserter, @@ -29,6 +29,9 @@ const block = { name: 'Cart', slug: 'woocommerce/cart', class: '.wp-block-woocommerce-cart', + selectors: { + insertButton: "//button//span[text()='Cart']", + }, }; const filledCartBlock = { @@ -62,8 +65,10 @@ describe( `${ block.name } Block`, () => { } ); it( 'can only be inserted once', async () => { - await insertBlockDontWaitForInsertClose( block.name ); - expect( await getAllBlocks() ).toHaveLength( 1 ); + await openGlobalBlockInserter(); + await page.keyboard.type( block.name ); + const button = await page.$x( block.selectors.insertButton ); + expect( button ).toHaveLength( 0 ); } ); it( 'renders without crashing', async () => { @@ -114,6 +119,9 @@ describe( `${ block.name } Block`, () => { describe( 'attributes', () => { beforeEach( async () => { await openDocumentSettingsSidebar(); + await switchBlockInspectorTabWhenGutenbergIsInstalled( + 'Settings' + ); await selectBlockByName( 'woocommerce/cart-order-summary-shipping-block' ); diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/backend/catalog-sorting.test.js b/plugins/woocommerce-blocks/tests/e2e/specs/backend/catalog-sorting.test.js index 7f2bbefb583..dba4948b46d 100644 --- a/plugins/woocommerce-blocks/tests/e2e/specs/backend/catalog-sorting.test.js +++ b/plugins/woocommerce-blocks/tests/e2e/specs/backend/catalog-sorting.test.js @@ -6,8 +6,8 @@ import { createNewPost, insertBlock, switchUserToAdmin, + searchForBlock, } from '@wordpress/e2e-test-utils'; -import { searchForBlock } from '@wordpress/e2e-test-utils/build/inserter'; /** * Internal dependencies @@ -41,7 +41,7 @@ describe( `${ block.name } Block`, () => { } ); } ); - describe( 'in FSE editor', () => { + describe.skip( 'in FSE editor', () => { useTheme( 'emptytheme' ); beforeEach( async () => { diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/backend/checkout.test.js b/plugins/woocommerce-blocks/tests/e2e/specs/backend/checkout.test.js index 195bcf41377..0c6eaf869c8 100644 --- a/plugins/woocommerce-blocks/tests/e2e/specs/backend/checkout.test.js +++ b/plugins/woocommerce-blocks/tests/e2e/specs/backend/checkout.test.js @@ -2,14 +2,15 @@ * External dependencies */ import { - getAllBlocks, openDocumentSettingsSidebar, switchUserToAdmin, + openGlobalBlockInserter, } from '@wordpress/e2e-test-utils'; import { findLabelWithText, visitBlockPage, selectBlockByName, + switchBlockInspectorTabWhenGutenbergIsInstalled, } from '@woocommerce/blocks-test-utils'; import { merchant } from '@woocommerce/e2e-utils'; @@ -18,17 +19,18 @@ import { merchant } from '@woocommerce/e2e-utils'; */ import { searchForBlock, - insertBlockDontWaitForInsertClose, openWidgetEditor, closeModalIfExists, openWidgetsEditorBlockInserter, - closeInserter, } from '../../utils.js'; const block = { name: 'Checkout', slug: 'woocommerce/checkout', class: '.wp-block-woocommerce-checkout', + selectors: { + insertButton: "//button//span[text()='Checkout']", + }, }; if ( process.env.WOOCOMMERCE_BLOCKS_PHASE < 2 ) { @@ -44,9 +46,10 @@ describe( `${ block.name } Block`, () => { } ); it( 'can only be inserted once', async () => { - await insertBlockDontWaitForInsertClose( block.name ); - await closeInserter(); - expect( await getAllBlocks() ).toHaveLength( 1 ); + await openGlobalBlockInserter(); + await page.keyboard.type( block.name ); + const button = await page.$x( block.selectors.insertButton ); + expect( button ).toHaveLength( 0 ); } ); it( 'renders without crashing', async () => { @@ -56,6 +59,9 @@ describe( `${ block.name } Block`, () => { describe( 'attributes', () => { beforeEach( async () => { await openDocumentSettingsSidebar(); + await switchBlockInspectorTabWhenGutenbergIsInstalled( + 'Settings' + ); await selectBlockByName( block.slug ); } ); @@ -80,6 +86,9 @@ describe( `${ block.name } Block`, () => { describe( 'shipping address block attributes', () => { beforeEach( async () => { await openDocumentSettingsSidebar(); + await switchBlockInspectorTabWhenGutenbergIsInstalled( + 'Settings' + ); await selectBlockByName( 'woocommerce/checkout-shipping-address-block' ); @@ -129,6 +138,9 @@ describe( `${ block.name } Block`, () => { describe( 'action block attributes', () => { beforeEach( async () => { await openDocumentSettingsSidebar(); + await switchBlockInspectorTabWhenGutenbergIsInstalled( + 'Settings' + ); await selectBlockByName( 'woocommerce/checkout-actions-block' ); } ); diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/backend/customer-account.test.js b/plugins/woocommerce-blocks/tests/e2e/specs/backend/customer-account.test.js index 7742de349b5..073eb8b4996 100644 --- a/plugins/woocommerce-blocks/tests/e2e/specs/backend/customer-account.test.js +++ b/plugins/woocommerce-blocks/tests/e2e/specs/backend/customer-account.test.js @@ -5,7 +5,10 @@ import { switchUserToAdmin, openDocumentSettingsSidebar, } from '@wordpress/e2e-test-utils'; -import { visitBlockPage } from '@woocommerce/blocks-test-utils'; +import { + visitBlockPage, + switchBlockInspectorTabWhenGutenbergIsInstalled, +} from '@woocommerce/blocks-test-utils'; const block = { name: 'Customer account', @@ -33,6 +36,7 @@ describe( `${ block.name } Block`, () => { describe( 'attributes', () => { beforeEach( async () => { await openDocumentSettingsSidebar(); + await switchBlockInspectorTabWhenGutenbergIsInstalled( 'Settings' ); await page.click( block.class ); } ); diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/backend/price-filter.test.js b/plugins/woocommerce-blocks/tests/e2e/specs/backend/price-filter.test.js index 03009e48af0..cc142e7e95e 100644 --- a/plugins/woocommerce-blocks/tests/e2e/specs/backend/price-filter.test.js +++ b/plugins/woocommerce-blocks/tests/e2e/specs/backend/price-filter.test.js @@ -8,6 +8,7 @@ import { import { visitBlockPage, selectBlockByName, + switchBlockInspectorTabWhenGutenbergIsInstalled, } from '@woocommerce/blocks-test-utils'; const block = { @@ -30,6 +31,9 @@ describe( `${ block.name } Block`, () => { describe( 'Attributes', () => { beforeEach( async () => { await openDocumentSettingsSidebar(); + await switchBlockInspectorTabWhenGutenbergIsInstalled( + 'Settings' + ); await selectBlockByName( block.slug ); } ); diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/backend/product-query.test.ts b/plugins/woocommerce-blocks/tests/e2e/specs/backend/product-query.test.ts index 0133bef87cd..5e2dd9dfd75 100644 --- a/plugins/woocommerce-blocks/tests/e2e/specs/backend/product-query.test.ts +++ b/plugins/woocommerce-blocks/tests/e2e/specs/backend/product-query.test.ts @@ -8,7 +8,10 @@ import { openDocumentSettingsSidebar, openListView, } from '@wordpress/e2e-test-utils'; -import { visitBlockPage } from '@woocommerce/blocks-test-utils'; +import { + visitBlockPage, + switchBlockInspectorTabWhenGutenbergIsInstalled, +} from '@woocommerce/blocks-test-utils'; /** * Internal dependencies @@ -51,6 +54,7 @@ describeOrSkip( GUTENBERG_EDITOR_CONTEXT === 'gutenberg' )( await visitBlockPage( `${ block.name } Block` ); const canvasEl = canvas(); await openDocumentSettingsSidebar(); + await switchBlockInspectorTabWhenGutenbergIsInstalled( 'Settings' ); await openListView(); await page.click( '.block-editor-list-view-block__contents-container a.components-button' diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/backend/product-query/advanced-filters.test.ts b/plugins/woocommerce-blocks/tests/e2e/specs/backend/product-query/advanced-filters.test.ts index 58787fe0840..36d4e45b34e 100644 --- a/plugins/woocommerce-blocks/tests/e2e/specs/backend/product-query/advanced-filters.test.ts +++ b/plugins/woocommerce-blocks/tests/e2e/specs/backend/product-query/advanced-filters.test.ts @@ -8,6 +8,7 @@ import { getFixtureProductsData, shopper, getToggleIdByLabel, + switchBlockInspectorTabWhenGutenbergIsInstalled, } from '@woocommerce/blocks-test-utils'; import { ElementHandle } from 'puppeteer'; import { setCheckbox } from '@woocommerce/e2e-utils'; @@ -47,6 +48,7 @@ describeOrSkip( GUTENBERG_EDITOR_CONTEXT === 'gutenberg' )( await resetProductQueryBlockPage(); await ensureSidebarOpened(); await selectBlockByName( block.slug ); + await switchBlockInspectorTabWhenGutenbergIsInstalled( 'Settings' ); $productFiltersPanel = await findToolsPanelWithTitle( 'Advanced Filters' ); diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/backend/product-query/popular-filters.test.ts b/plugins/woocommerce-blocks/tests/e2e/specs/backend/product-query/popular-filters.test.ts index 86bb8241716..0a393d29e76 100644 --- a/plugins/woocommerce-blocks/tests/e2e/specs/backend/product-query/popular-filters.test.ts +++ b/plugins/woocommerce-blocks/tests/e2e/specs/backend/product-query/popular-filters.test.ts @@ -11,6 +11,7 @@ import { selectBlockByName, visitBlockPage, saveOrPublish, + switchBlockInspectorTabWhenGutenbergIsInstalled, } from '@woocommerce/blocks-test-utils'; /** @@ -28,6 +29,7 @@ import { const getPopularFilterPanel = async () => { await ensureSidebarOpened(); await selectBlockByName( block.slug ); + await switchBlockInspectorTabWhenGutenbergIsInstalled( 'Settings' ); return await findSidebarPanelWithTitle( 'Popular Filters' ); }; diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/backend/rating-filter.test.js b/plugins/woocommerce-blocks/tests/e2e/specs/backend/rating-filter.test.js index 3a0088db217..1bd04ea9106 100644 --- a/plugins/woocommerce-blocks/tests/e2e/specs/backend/rating-filter.test.js +++ b/plugins/woocommerce-blocks/tests/e2e/specs/backend/rating-filter.test.js @@ -5,7 +5,10 @@ import { switchUserToAdmin, openDocumentSettingsSidebar, } from '@wordpress/e2e-test-utils'; -import { visitBlockPage } from '@woocommerce/blocks-test-utils'; +import { + visitBlockPage, + switchBlockInspectorTabWhenGutenbergIsInstalled, +} from '@woocommerce/blocks-test-utils'; /** * Internal dependencies @@ -30,6 +33,7 @@ describe( `${ block.name } Block`, () => { describe( 'attributes', () => { beforeEach( async () => { await openDocumentSettingsSidebar(); + await switchBlockInspectorTabWhenGutenbergIsInstalled( 'Settings' ); await page.click( block.class ); } ); diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/backend/stock-filter.test.js b/plugins/woocommerce-blocks/tests/e2e/specs/backend/stock-filter.test.js index ef201ab5139..a8f65050fd5 100644 --- a/plugins/woocommerce-blocks/tests/e2e/specs/backend/stock-filter.test.js +++ b/plugins/woocommerce-blocks/tests/e2e/specs/backend/stock-filter.test.js @@ -5,7 +5,10 @@ import { switchUserToAdmin, openDocumentSettingsSidebar, } from '@wordpress/e2e-test-utils'; -import { visitBlockPage } from '@woocommerce/blocks-test-utils'; +import { + visitBlockPage, + switchBlockInspectorTabWhenGutenbergIsInstalled, +} from '@woocommerce/blocks-test-utils'; /** * Internal dependencies @@ -31,6 +34,7 @@ describe( `${ block.name } Block`, () => { describe( 'attributes', () => { beforeEach( async () => { await openDocumentSettingsSidebar(); + await switchBlockInspectorTabWhenGutenbergIsInstalled( 'Settings' ); await page.click( block.class ); } ); diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/merchant/checkout-terms.test.js b/plugins/woocommerce-blocks/tests/e2e/specs/merchant/checkout-terms.test.js index f8c1ac23b97..632786ac7e4 100644 --- a/plugins/woocommerce-blocks/tests/e2e/specs/merchant/checkout-terms.test.js +++ b/plugins/woocommerce-blocks/tests/e2e/specs/merchant/checkout-terms.test.js @@ -11,6 +11,7 @@ import { visitBlockPage, selectBlockByName, saveOrPublish, + switchBlockInspectorTabWhenGutenbergIsInstalled, } from '@woocommerce/blocks-test-utils'; /** @@ -65,6 +66,7 @@ describe( 'Merchant → Checkout → Can adjust T&S and Privacy Policy options', await merchant.login(); await visitBlockPage( 'Checkout Block' ); await openDocumentSettingsSidebar(); + await switchBlockInspectorTabWhenGutenbergIsInstalled( 'Settings' ); await selectBlockByName( 'woocommerce/checkout-terms-block' ); const [ termsCheckboxLabel ] = await page.$x( `//label[contains(text(), "Require checkbox") and contains(@class, "components-toggle-control__label")]` @@ -99,6 +101,7 @@ describe( 'Merchant → Checkout → Can adjust T&S and Privacy Policy options', // Deactivate checkboxes for T&S and Privacy Policy links. await visitBlockPage( 'Checkout Block' ); await openDocumentSettingsSidebar(); + await switchBlockInspectorTabWhenGutenbergIsInstalled( 'Settings' ); await selectBlockByName( 'woocommerce/checkout-terms-block' ); await unsetCheckbox( termsCheckboxId ); await saveOrPublish(); diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/shopper/cart-checkout/checkout.test.js b/plugins/woocommerce-blocks/tests/e2e/specs/shopper/cart-checkout/checkout.test.js index 39a76e0c2fc..4aa7a161e85 100644 --- a/plugins/woocommerce-blocks/tests/e2e/specs/shopper/cart-checkout/checkout.test.js +++ b/plugins/woocommerce-blocks/tests/e2e/specs/shopper/cart-checkout/checkout.test.js @@ -13,6 +13,7 @@ import { selectBlockByName, saveOrPublish, getToggleIdByLabel, + switchBlockInspectorTabWhenGutenbergIsInstalled, } from '@woocommerce/blocks-test-utils'; /** @@ -70,6 +71,7 @@ describe( 'Shopper → Checkout', () => { await merchant.login(); await visitBlockPage( 'Checkout Block' ); await openDocumentSettingsSidebar(); + await switchBlockInspectorTabWhenGutenbergIsInstalled( 'Settings' ); await selectBlockByName( 'woocommerce/checkout-shipping-address-block' ); @@ -83,6 +85,7 @@ describe( 'Shopper → Checkout', () => { await shopper.block.emptyCart(); await visitBlockPage( 'Checkout Block' ); await openDocumentSettingsSidebar(); + await switchBlockInspectorTabWhenGutenbergIsInstalled( 'Settings' ); await selectBlockByName( 'woocommerce/checkout-shipping-address-block' ); @@ -301,7 +304,7 @@ describe( 'Shopper → Checkout', () => { await shopper.block.goToCheckout(); await shopper.block.applyCouponFromCheckout( coupon.code ); await page.waitForSelector( - '.wc-block-components-validation-error' + '.wc-block-components-notices__notice' ); await expect( page ).toMatch( 'Coupon usage limit has been reached.' diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/shopper/cart-checkout/translations.test.js b/plugins/woocommerce-blocks/tests/e2e/specs/shopper/cart-checkout/translations.test.js index ca67a3abab4..3a6c26308ca 100644 --- a/plugins/woocommerce-blocks/tests/e2e/specs/shopper/cart-checkout/translations.test.js +++ b/plugins/woocommerce-blocks/tests/e2e/specs/shopper/cart-checkout/translations.test.js @@ -52,7 +52,6 @@ describe( 'Shopper → Cart & Checkout → Translations', () => { await expect( orderSummary ).toMatch( 'Totaal' ); } ); - // The translation of WooCommerce Core is taking over translations of WC Blocks. We have to fix this issue https://github.com/woocommerce/woocommerce-blocks/issues/7775 before we can enable this test. it( 'User can view translated Checkout block', async () => { await shopper.block.goToCheckout(); diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts b/plugins/woocommerce-blocks/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts index 2647ad8b908..2431491f3df 100644 --- a/plugins/woocommerce-blocks/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts +++ b/plugins/woocommerce-blocks/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts @@ -13,6 +13,7 @@ import { import { selectBlockByName, insertBlockUsingSlash, + switchBlockInspectorTabWhenGutenbergIsInstalled, } from '@woocommerce/blocks-test-utils'; /** @@ -189,8 +190,10 @@ describe( `${ block.name } Block`, () => { postId: productCatalogTemplateId, } ); - await selectBlockByName( block.slug ); await ensureSidebarOpened(); + await selectBlockByName( block.slug ); + await switchBlockInspectorTabWhenGutenbergIsInstalled( 'Settings' ); + const [ filterButtonToggle ] = await page.$x( block.selectors.editor.filterButtonToggle ); @@ -308,6 +311,8 @@ describe( `${ block.name } Block`, () => { await page.goto( editorPageUrl ); await ensureSidebarOpened(); await selectBlockByName( block.slug ); + await switchBlockInspectorTabWhenGutenbergIsInstalled( 'Settings' ); + const [ filterButtonToggle ] = await page.$x( block.selectors.editor.filterButtonToggle ); diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/shopper/filter-products-by-price.test.ts b/plugins/woocommerce-blocks/tests/e2e/specs/shopper/filter-products-by-price.test.ts index 169b8f6d714..cd5ca7c68e4 100644 --- a/plugins/woocommerce-blocks/tests/e2e/specs/shopper/filter-products-by-price.test.ts +++ b/plugins/woocommerce-blocks/tests/e2e/specs/shopper/filter-products-by-price.test.ts @@ -12,6 +12,7 @@ import { import { selectBlockByName, insertBlockUsingSlash, + switchBlockInspectorTabWhenGutenbergIsInstalled, } from '@woocommerce/blocks-test-utils'; /** @@ -187,6 +188,8 @@ describe( `${ block.name } Block`, () => { await selectBlockByName( block.slug ); await ensureSidebarOpened(); + await switchBlockInspectorTabWhenGutenbergIsInstalled( 'Settings' ); + await page.waitForXPath( block.selectors.editor.filterButtonToggle ); @@ -297,6 +300,7 @@ describe( `${ block.name } Block`, () => { await ensureSidebarOpened(); await selectBlockByName( block.slug ); + await switchBlockInspectorTabWhenGutenbergIsInstalled( 'Settings' ); await page.waitForXPath( block.selectors.editor.filterButtonToggle ); diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/shopper/filter-products-by-rating.test.ts b/plugins/woocommerce-blocks/tests/e2e/specs/shopper/filter-products-by-rating.test.ts index 610f9b1cdec..80a0a02151b 100644 --- a/plugins/woocommerce-blocks/tests/e2e/specs/shopper/filter-products-by-rating.test.ts +++ b/plugins/woocommerce-blocks/tests/e2e/specs/shopper/filter-products-by-rating.test.ts @@ -14,6 +14,7 @@ import { insertBlockUsingSlash, saveOrPublish, getToggleIdByLabel, + switchBlockInspectorTabWhenGutenbergIsInstalled, } from '@woocommerce/blocks-test-utils'; import { setCheckbox } from '@woocommerce/e2e-utils'; @@ -162,6 +163,8 @@ describe( `${ block.name } Block`, () => { await waitForCanvas(); await selectBlockByName( block.slug ); await ensureSidebarOpened(); + await switchBlockInspectorTabWhenGutenbergIsInstalled( 'Settings' ); + await page.waitForXPath( block.selectors.editor.filterButtonToggle ); @@ -268,6 +271,7 @@ describe( `${ block.name } Block`, () => { await waitForCanvas(); await ensureSidebarOpened(); await selectBlockByName( block.slug ); + await switchBlockInspectorTabWhenGutenbergIsInstalled( 'Settings' ); await setCheckbox( await getToggleIdByLabel( "Show 'Apply filters' button", 1 ) ); diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/shopper/filter-products-by-stock.test.ts b/plugins/woocommerce-blocks/tests/e2e/specs/shopper/filter-products-by-stock.test.ts index d5cc56098c6..7fdacc9a793 100644 --- a/plugins/woocommerce-blocks/tests/e2e/specs/shopper/filter-products-by-stock.test.ts +++ b/plugins/woocommerce-blocks/tests/e2e/specs/shopper/filter-products-by-stock.test.ts @@ -14,6 +14,7 @@ import { insertBlockUsingSlash, getToggleIdByLabel, saveOrPublish, + switchBlockInspectorTabWhenGutenbergIsInstalled, } from '@woocommerce/blocks-test-utils'; import { setCheckbox } from '@woocommerce/e2e-utils'; @@ -168,6 +169,7 @@ describe( `${ block.name } Block`, () => { await waitForCanvas(); await selectBlockByName( block.slug ); await ensureSidebarOpened(); + await switchBlockInspectorTabWhenGutenbergIsInstalled( 'Settings' ); await page.waitForXPath( block.selectors.editor.filterButtonToggle ); @@ -274,6 +276,7 @@ describe( `${ block.name } Block`, () => { await waitForCanvas(); await ensureSidebarOpened(); await selectBlockByName( block.slug ); + await switchBlockInspectorTabWhenGutenbergIsInstalled( 'Settings' ); await setCheckbox( await getToggleIdByLabel( "Show 'Apply filters' button" ) ); diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/shopper/product-query/product-query-with-templates.test.ts b/plugins/woocommerce-blocks/tests/e2e/specs/shopper/product-query/product-query-with-templates.test.ts index 0da2bc88a61..26740c556d4 100644 --- a/plugins/woocommerce-blocks/tests/e2e/specs/shopper/product-query/product-query-with-templates.test.ts +++ b/plugins/woocommerce-blocks/tests/e2e/specs/shopper/product-query/product-query-with-templates.test.ts @@ -6,6 +6,8 @@ import { ensureSidebarOpened, } from '@wordpress/e2e-test-utils'; +import { switchBlockInspectorTabWhenGutenbergIsInstalled } from '@woocommerce/blocks-test-utils'; + /** * Internal dependencies */ @@ -36,6 +38,7 @@ describe( `${ block.name } Block`, () => { } ); await ensureSidebarOpened(); await addProductQueryBlock(); + await switchBlockInspectorTabWhenGutenbergIsInstalled( 'Settings' ); } ); it( 'when Inherit Query from template is disabled all the settings that customize the query should be hide', async () => { diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/shopper/product-query/utils.ts b/plugins/woocommerce-blocks/tests/e2e/specs/shopper/product-query/utils.ts index de09d9e445f..26b3d232b89 100644 --- a/plugins/woocommerce-blocks/tests/e2e/specs/shopper/product-query/utils.ts +++ b/plugins/woocommerce-blocks/tests/e2e/specs/shopper/product-query/utils.ts @@ -2,6 +2,8 @@ * External dependencies */ import { insertBlock, ensureSidebarOpened } from '@wordpress/e2e-test-utils'; +import { switchBlockInspectorTabWhenGutenbergIsInstalled } from '@woocommerce/blocks-test-utils'; + /** * Internal dependencies */ @@ -39,6 +41,7 @@ const enableInheritQueryFromTemplateSetting = async () => { export const configurateProductQueryBlock = async () => { await ensureSidebarOpened(); + await switchBlockInspectorTabWhenGutenbergIsInstalled( 'Settings' ); await enableInheritQueryFromTemplateSetting(); }; diff --git a/plugins/woocommerce-blocks/tests/e2e/utils.js b/plugins/woocommerce-blocks/tests/e2e/utils.js index a67a185230c..ccee264f1cd 100644 --- a/plugins/woocommerce-blocks/tests/e2e/utils.js +++ b/plugins/woocommerce-blocks/tests/e2e/utils.js @@ -10,6 +10,7 @@ import { visitAdminPage, pressKeyWithModifier, searchForBlock as searchForFSEBlock, + enterEditMode, } from '@wordpress/e2e-test-utils'; import { addQueryArgs } from '@wordpress/url'; import { WP_ADMIN_DASHBOARD } from '@woocommerce/e2e-utils'; @@ -172,8 +173,7 @@ export async function goToSiteEditor( params = {} ) { GUTENBERG_EDITOR_CONTEXT === 'gutenberg' && ( params?.postId || Object.keys( params ).length === 0 ) ) { - await page.waitForSelector( SELECTORS.templateEditor.editButton ); - await page.click( SELECTORS.templateEditor.editButton ); + await enterEditMode(); } } diff --git a/plugins/woocommerce-blocks/tests/utils/index.js b/plugins/woocommerce-blocks/tests/utils/index.js index 9b0148bfedc..5093bacb05d 100644 --- a/plugins/woocommerce-blocks/tests/utils/index.js +++ b/plugins/woocommerce-blocks/tests/utils/index.js @@ -24,3 +24,4 @@ export { getToggleIdByLabel } from './get-toggle-id-by-label'; export { insertBlockUsingQuickInserter } from './insert-block-using-quick-inserter'; export { insertBlockUsingSlash } from './insert-block-using-slash'; export { insertShortcodeBlock } from './insert-shortcode-block'; +export { switchBlockInspectorTabWhenGutenbergIsInstalled } from './switch-block-inspector-tab-when-gutenberg-is-installed'; diff --git a/plugins/woocommerce-blocks/tests/utils/switch-block-inspector-tab-when-gutenberg-is-installed.ts b/plugins/woocommerce-blocks/tests/utils/switch-block-inspector-tab-when-gutenberg-is-installed.ts new file mode 100644 index 00000000000..ba399795e85 --- /dev/null +++ b/plugins/woocommerce-blocks/tests/utils/switch-block-inspector-tab-when-gutenberg-is-installed.ts @@ -0,0 +1,19 @@ +/** + * External dependencies + */ +import { switchBlockInspectorTab } from '@wordpress/e2e-test-utils'; + +/** + * Internal dependencies + */ +import { GUTENBERG_EDITOR_CONTEXT } from '../e2e/utils'; + +// @todo Remove this function when WP 6.2 is released. We can use the "switchBlockInspectorTab" function directly. +export const switchBlockInspectorTabWhenGutenbergIsInstalled = async ( + tabName: string +) => { + if ( GUTENBERG_EDITOR_CONTEXT === 'core' ) { + return; + } + await switchBlockInspectorTab( tabName ); +};