diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index db56521ef34..ab715b9ef0d 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -14,6 +14,7 @@ jobs: matrix: config: [ { name: Normal, file: playwright.config.ts, resultPath: test-results }, + { name: Classic, file: playwright.classic-theme.config.ts, resultPath: test-results-classic-theme }, { name: SideEffects, file: playwright.side-effects.config.ts, resultPath: test-results-side-effects }, ] steps: diff --git a/package.json b/package.json index 3b3547fafb7..e6f021d0759 100644 --- a/package.json +++ b/package.json @@ -83,6 +83,8 @@ "test:e2e:report": "sh ./bin/check-env.sh && npx playwright test --config=tests/e2e/playwright.config.ts --reporter=html", "test:e2e:side-effects": "npm run test:e2e -- --config=tests/e2e/playwright.side-effects.config.ts", "test:e2e:side-effects:report": "npm run test:e2e:report -- --config=tests/e2e/playwright.side-effects.config.ts", + "test:e2e:classic-theme": "npm run test:e2e -- --config=tests/e2e/playwright.classic-theme.config.ts", + "test:e2e:classic-theme:report": "npm run test:e2e:report -- --config=tests/e2e/playwright.classic-theme.config.ts", "test:e2e:jest": "npm run wp-env:config && cross-env JEST_PUPPETEER_CONFIG=tests/e2e-jest/config/jest-puppeteer.config.js NODE_CONFIG_DIR=tests/e2e-jest/config wp-scripts test-e2e --config tests/e2e-jest/config/jest.config.js", "test:e2e:jest:dev": "npm run wp-env:config && cross-env JEST_PUPPETEER_CONFIG=tests/e2e-jest/config/jest-puppeteer.config-dev.js NODE_CONFIG_DIR=tests/e2e-jest/config wp-scripts test-e2e --config tests/e2e-jest/config/jest.config.js", "test:e2e:jest:dev-watch": "npm run wp-env:config && cross-env JEST_PUPPETEER_CONFIG=tests/e2e-jest/config/jest-puppeteer.config-dev.js NODE_CONFIG_DIR=tests/e2e-jest/config wp-scripts test-e2e --config tests/e2e-jest/config/jest.config.js --watch", diff --git a/tests/e2e-jest/specs/backend/cart.test.js b/tests/e2e-jest/specs/backend/cart.test.js deleted file mode 100644 index e0f339d0274..00000000000 --- a/tests/e2e-jest/specs/backend/cart.test.js +++ /dev/null @@ -1,46 +0,0 @@ -/** - * External dependencies - */ -import { searchForBlock } from '@wordpress/e2e-test-utils'; -import { merchant } from '@woocommerce/e2e-utils'; - -/** - * Internal dependencies - */ -import { openWidgetEditor, closeModalIfExists } from '../../utils.js'; - -const block = { - name: 'Cart', - slug: 'woocommerce/cart', - class: '.wp-block-woocommerce-cart', - selectors: { - disabledInsertButton: - "//button[@aria-disabled='true']//span[text()='Cart']", - insertButton: "//button//span[text()='Cart']", - }, -}; - -if ( process.env.WOOCOMMERCE_BLOCKS_PHASE < 2 ) { - // eslint-disable-next-line jest/no-focused-tests, jest/expect-expect - test.only( `skipping ${ block.name } tests`, () => {} ); -} - -describe( `${ block.name } Block`, () => { - describe( 'in widget editor', () => { - it( "can't be inserted in a widget area", async () => { - await merchant.login(); - await openWidgetEditor(); - await closeModalIfExists(); - await searchForBlock( block.name ); - await page.waitForXPath( - `//button//span[text()='${ block.name }']` - ); - const cartButton = await page.$x( - `//button//span[text()='${ block.name }']` - ); - - // This one match is the Cart widget. - expect( cartButton ).toHaveLength( 1 ); - } ); - } ); -} ); diff --git a/tests/e2e/block-theme.setup.ts b/tests/e2e/block-theme.setup.ts index c0980580fa5..c0fa58cc158 100644 --- a/tests/e2e/block-theme.setup.ts +++ b/tests/e2e/block-theme.setup.ts @@ -1,6 +1,19 @@ /** * External dependencies */ -import { BLOCK_THEME_SLUG, cli } from '@woocommerce/e2e-utils'; +import { + BLOCK_THEME_NAME, + BLOCK_THEME_SLUG, + cli, +} from '@woocommerce/e2e-utils'; +import { test as setup, expect } from '@woocommerce/e2e-playwright-utils'; -cli( `npm run wp-env run tests-cli "wp theme activate ${ BLOCK_THEME_SLUG }` ); +setup( 'Sets up the block theme', async ( { admin } ) => { + await cli( + `npm run wp-env run tests-cli "wp theme install ${ BLOCK_THEME_SLUG } --activate"` + ); + await admin.page.goto( '/wp-admin/themes.php' ); + await expect( + admin.page.getByText( `Active: ${ BLOCK_THEME_NAME }` ) + ).toBeVisible(); +} ); diff --git a/tests/e2e/classic-theme.setup.ts b/tests/e2e/classic-theme.setup.ts index 1c76538a6de..d0e47ba9fe6 100644 --- a/tests/e2e/classic-theme.setup.ts +++ b/tests/e2e/classic-theme.setup.ts @@ -1,8 +1,19 @@ /** * External dependencies */ -import { CLASSIC_THEME_SLUG, cli } from '@woocommerce/e2e-utils'; +import { + CLASSIC_THEME_NAME, + CLASSIC_THEME_SLUG, + cli, +} from '@woocommerce/e2e-utils'; +import { test as setup, expect } from '@woocommerce/e2e-playwright-utils'; -cli( - `npm run wp-env run tests-cli "wp theme activate ${ CLASSIC_THEME_SLUG }` -); +setup( 'Sets up the classic theme', async ( { admin } ) => { + await cli( + `npm run wp-env run tests-cli "wp theme install ${ CLASSIC_THEME_SLUG } --activate"` + ); + await admin.page.goto( '/wp-admin/themes.php' ); + await expect( + admin.page.getByText( `Active: ${ CLASSIC_THEME_NAME }` ) + ).toBeVisible(); +} ); diff --git a/tests/e2e/playwright.classic-theme.config.ts b/tests/e2e/playwright.classic-theme.config.ts new file mode 100644 index 00000000000..94b28115f3d --- /dev/null +++ b/tests/e2e/playwright.classic-theme.config.ts @@ -0,0 +1,32 @@ +/** + * External dependencies + */ +import { defineConfig } from '@playwright/test'; +import path from 'path'; + +/** + * Internal dependencies + */ +import config from './playwright.config'; + +export default defineConfig( { + ...config, + outputDir: path.join( + process.cwd(), + 'artifacts/test-results-side-effects' + ), + fullyParallel: false, + workers: 1, + projects: [ + { + name: 'classicThemeConfiguration', + testDir: '.', + testMatch: /classic-theme.setup.ts/, + }, + { + name: 'classicTheme', + testMatch: /.*.classic_theme.spec.ts/, + dependencies: [ 'classicThemeConfiguration' ], + }, + ], +} ); diff --git a/tests/e2e/playwright.config.ts b/tests/e2e/playwright.config.ts index ea5749a697d..35ee4430cc8 100644 --- a/tests/e2e/playwright.config.ts +++ b/tests/e2e/playwright.config.ts @@ -44,6 +44,7 @@ const config: ExtendedPlaywrightTestConfig = { projects: [ { name: 'blockThemeConfiguration', + testDir: '.', testMatch: /block-theme.setup.ts/, }, { @@ -51,15 +52,6 @@ const config: ExtendedPlaywrightTestConfig = { testMatch: /.*.block_theme.spec.ts/, dependencies: [ 'blockThemeConfiguration' ], }, - { - name: 'classicThemeConfiguration', - testMatch: /classic-theme.setup.ts/, - }, - { - name: 'classicTheme', - testMatch: /.*.classic_theme.spec.ts/, - dependencies: [ 'classicThemeConfiguration' ], - }, ], }; diff --git a/tests/e2e/playwright.side-effects.config.ts b/tests/e2e/playwright.side-effects.config.ts index cb8cf02bae7..04549945513 100644 --- a/tests/e2e/playwright.side-effects.config.ts +++ b/tests/e2e/playwright.side-effects.config.ts @@ -20,6 +20,7 @@ export default defineConfig( { projects: [ { name: 'blockThemeConfiguration', + testDir: '.', testMatch: /block-theme.setup.ts/, }, { diff --git a/tests/e2e/tests/cart/cart-block.merchant.classic_theme.spec.ts b/tests/e2e/tests/cart/cart-block.merchant.classic_theme.spec.ts new file mode 100644 index 00000000000..34adb03e3ac --- /dev/null +++ b/tests/e2e/tests/cart/cart-block.merchant.classic_theme.spec.ts @@ -0,0 +1,26 @@ +/** + * External dependencies + */ +import { test, expect } from '@woocommerce/e2e-playwright-utils'; + +test.describe( 'Merchant → Cart', () => { + test.describe( 'in widget editor', () => { + test( "can't be inserted in a widget area", async ( { + editorUtils, + page, + } ) => { + await page.goto( '/wp-admin/widgets.php' ); + await editorUtils.closeModalByName( 'Welcome to block Widgets' ); + + await editorUtils.openGlobalBlockInserter(); + await editorUtils.page + .getByLabel( 'Search for blocks and patterns' ) + .fill( 'woocommerce/cart' ); + const cartButton = editorUtils.page.getByRole( 'option', { + name: 'Cart', + exact: true, + } ); + await expect( cartButton ).toBeHidden(); + } ); + } ); +} ); diff --git a/tests/e2e/utils/constants.ts b/tests/e2e/utils/constants.ts index fb3e2f50b66..c57d93411dc 100644 --- a/tests/e2e/utils/constants.ts +++ b/tests/e2e/utils/constants.ts @@ -4,7 +4,9 @@ import path from 'path'; export const BLOCK_THEME_SLUG = 'twentytwentythree'; -export const CLASSIC_THEME_SLUG = 'twentytwentyone'; +export const BLOCK_THEME_NAME = 'Twenty Twenty-Three'; +export const CLASSIC_THEME_SLUG = 'storefront'; +export const CLASSIC_THEME_NAME = 'Storefront'; export const BASE_URL = 'http://localhost:8889'; export const STORAGE_STATE_PATH = path.join( process.cwd(), diff --git a/tests/e2e/utils/editor/editor-utils.page.ts b/tests/e2e/utils/editor/editor-utils.page.ts index f7a82a6146c..ed9c343180b 100644 --- a/tests/e2e/utils/editor/editor-utils.page.ts +++ b/tests/e2e/utils/editor/editor-utils.page.ts @@ -65,6 +65,17 @@ export class EditorUtils { ); } + async closeModalByName( name: string ) { + const isModalOpen = await this.page.getByLabel( name ).isVisible(); + + // eslint-disable-next-line playwright/no-conditional-in-test + if ( isModalOpen ) { + await this.page + .getByLabel( name ) + .getByRole( 'button', { name: 'Close' } ) + .click(); + } + } async replaceBlockByBlockName( name: string, nameToInsert: string ) { await this.page.evaluate( ( { name: _name, nameToInsert: _nameToInsert } ) => { diff --git a/tests/e2e/utils/frontend/frontend-utils.page.ts b/tests/e2e/utils/frontend/frontend-utils.page.ts index 9d82f26c3f0..2a15565f326 100644 --- a/tests/e2e/utils/frontend/frontend-utils.page.ts +++ b/tests/e2e/utils/frontend/frontend-utils.page.ts @@ -27,6 +27,7 @@ export class FrontendUtils { } async addToCart( itemName = '' ) { + await this.page.waitForLoadState( 'domcontentloaded' ); if ( itemName !== '' ) { await this.page .getByLabel( `Add “${ itemName }” to your cart` )