Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Move cart widget tests to playwright and ensure classic/block theme configs are executed correctly (https://github.com/woocommerce/woocommerce-blocks/pull/10669)

This commit is contained in:
Thomas Roberts 2023-08-28 11:04:28 +01:00 committed by GitHub
parent c718a056b8
commit 55f65cdf17
12 changed files with 108 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
plugins/woocommerce-blocks/.github/workflows/playwright.yml vendored
View File

@ -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:

2
plugins/woocommerce-blocks/package.json
View File

@ -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",

46
plugins/woocommerce-blocks/tests/e2e-jest/specs/backend/cart.test.js
View File

@ -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 );
} );
} );
} );

17
plugins/woocommerce-blocks/tests/e2e/block-theme.setup.ts
View File

@ -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();
} );

19
plugins/woocommerce-blocks/tests/e2e/classic-theme.setup.ts
View File

@ -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();
} );

32
plugins/woocommerce-blocks/tests/e2e/playwright.classic-theme.config.ts Normal file
View File

@ -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' ],
},
],
} );

10
plugins/woocommerce-blocks/tests/e2e/playwright.config.ts
View File

@ -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' ],
},
],
};

1
plugins/woocommerce-blocks/tests/e2e/playwright.side-effects.config.ts
View File

@ -20,6 +20,7 @@ export default defineConfig( {
projects: [
{
name: 'blockThemeConfiguration',
testDir: '.',
testMatch: /block-theme.setup.ts/,
},
{

26
plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-block.merchant.classic_theme.spec.ts Normal file
View File

@ -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();
} );
} );
} );

4
plugins/woocommerce-blocks/tests/e2e/utils/constants.ts
View File

@ -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(),

11
plugins/woocommerce-blocks/tests/e2e/utils/editor/editor-utils.page.ts
View File

@ -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 } ) => {

1
plugins/woocommerce-blocks/tests/e2e/utils/frontend/frontend-utils.page.ts
View File

@ -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` )