From f870b3492a0b41a28c2c139b15857f2735a7af99 Mon Sep 17 00:00:00 2001 From: Luigi Date: Wed, 24 May 2023 10:17:12 +0200 Subject: [PATCH 1/2] migrate classic block to Playwright --- tests/e2e-pw/bin/test-env-setup.sh | 1 + tests/e2e-pw/playwright-utils/test.ts | 10 +- tests/e2e-pw/playwright.config.ts | 8 +- ...-template.block_theme.side_effects.spec.ts | 122 +++ tests/e2e-pw/tests/classic-template/utils.ts | 9 + tests/e2e-pw/types/block-data.ts | 2 +- tests/e2e-pw/utils/api/TemplateApiUtils.ts | 21 + tests/e2e-pw/utils/editor/EditorUtils.ts | 18 + tests/e2e-pw/utils/editor/index.ts | 1 + tests/e2e-pw/utils/index.ts | 1 + .../backend/site-editing-templates.test.js | 701 ------------------ 11 files changed, 190 insertions(+), 704 deletions(-) create mode 100644 tests/e2e-pw/tests/classic-template/classic-template.block_theme.side_effects.spec.ts create mode 100644 tests/e2e-pw/tests/classic-template/utils.ts create mode 100644 tests/e2e-pw/utils/editor/EditorUtils.ts create mode 100644 tests/e2e-pw/utils/editor/index.ts delete mode 100644 tests/e2e/specs/backend/site-editing-templates.test.js diff --git a/tests/e2e-pw/bin/test-env-setup.sh b/tests/e2e-pw/bin/test-env-setup.sh index 0682a509bd3..adce48ec50a 100755 --- a/tests/e2e-pw/bin/test-env-setup.sh +++ b/tests/e2e-pw/bin/test-env-setup.sh @@ -11,6 +11,7 @@ script_dir="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)" ################################################################################################### wp-env run tests-cli "wp site empty --yes" +wp-env run tests-cli "wp plugin active woocommerce-blocks" ################################################################################################### # If no attributes exist, otherwiese create them diff --git a/tests/e2e-pw/playwright-utils/test.ts b/tests/e2e-pw/playwright-utils/test.ts index f3dc7ef94b7..693915ea97c 100644 --- a/tests/e2e-pw/playwright-utils/test.ts +++ b/tests/e2e-pw/playwright-utils/test.ts @@ -10,7 +10,11 @@ import { RequestUtils, } from '@wordpress/e2e-test-utils-playwright'; -import { TemplateApiUtils, STORAGE_STATE_PATH } from '@woocommerce/e2e-utils'; +import { + TemplateApiUtils, + STORAGE_STATE_PATH, + EditorUtils, +} from '@woocommerce/e2e-utils'; /** * Set of console logging types observed to protect against unexpected yet @@ -100,6 +104,7 @@ const test = base.extend< editor: Editor; pageUtils: PageUtils; templateApiUtils: TemplateApiUtils; + editorUtils: EditorUtils; snapshotConfig: void; }, { @@ -129,6 +134,9 @@ const test = base.extend< }, templateApiUtils: async ( {}, use ) => await use( new TemplateApiUtils( request ) ), + editorUtils: async ( { editor }, use ) => { + await use( new EditorUtils( editor ) ); + }, requestUtils: [ async ( {}, use, workerInfo ) => { const requestUtils = await RequestUtils.setup( { diff --git a/tests/e2e-pw/playwright.config.ts b/tests/e2e-pw/playwright.config.ts index 5124db0ea68..cddf0be0d77 100644 --- a/tests/e2e-pw/playwright.config.ts +++ b/tests/e2e-pw/playwright.config.ts @@ -50,10 +50,16 @@ const config: ExtendedPlaywrightTestConfig = { testMatch: /.*.block_theme.spec.ts/, dependencies: [ 'blockThemeConfiguration' ], }, + { + name: 'blockThemeWithGlobalSideEffects', + testMatch: /.*.block_theme.side_effects.spec.ts/, + dependencies: [ 'blockTheme' ], + fullyParallel: false, + }, { name: 'classicThemeConfiguration', testMatch: /block-theme.setup.ts/, - dependencies: [ 'blockTheme' ], + dependencies: [ 'blockThemeWithGlobalSideEffects' ], }, { name: 'classicTheme', diff --git a/tests/e2e-pw/tests/classic-template/classic-template.block_theme.side_effects.spec.ts b/tests/e2e-pw/tests/classic-template/classic-template.block_theme.side_effects.spec.ts new file mode 100644 index 00000000000..ed21b7b22f5 --- /dev/null +++ b/tests/e2e-pw/tests/classic-template/classic-template.block_theme.side_effects.spec.ts @@ -0,0 +1,122 @@ +/** + * External dependencies + */ +import { BlockData } from '@woocommerce/e2e-types'; +import { test, expect } from '@woocommerce/e2e-playwright-utils'; +import { cli } from '@woocommerce/e2e-utils'; + +/** + * Internal dependencies + */ + +const blockData: BlockData = { + name: 'woocommerce/legacy-template', + mainClass: '.wc-block-price-filter', + selectors: { + frontend: {}, + editor: {}, + }, +}; + +const templates = { + 'single-product': { + templateTitle: 'Single Product', + slug: 'single-product', + frontendPage: '/product/single/', + }, + 'taxonomy-product_attribute': { + templateTitle: 'Product Attribute', + slug: 'taxonomy-product_attribute', + frontendPage: '/product-attribute/color/', + }, + + 'taxonomy-product_cat': { + templateTitle: 'Product Category', + slug: 'taxonomy-product_cat', + frontendPage: '/product-category/music/', + }, + 'taxonomy-product_tag': { + templateTitle: 'Product Tag', + slug: 'taxonomy-product_tag', + frontendPage: '/product-tag/hoodie/', + }, + 'product-archive': { + templateTitle: 'Product Catalog', + slug: 'product-archive', + frontendPage: '/shop/', + }, + 'product-search-results': { + templateTitle: 'Product Search Results', + slug: 'product-search-results', + frontendPage: '/?s=single&post_type=product', + }, +}; + +test.describe.configure( { mode: 'serial' } ); +test.describe( `${ blockData.name } Block `, () => { + test.beforeAll( async () => { + await cli( + 'npm run wp-env run tests-cli "wp option update wc_blocks_use_blockified_product_grid_block_as_template false"' + ); + } ); + + for ( const { templateTitle, slug, frontendPage } of Object.values( + templates + ) ) { + test( `is rendered on ${ templateTitle } template`, async ( { + admin, + editorUtils, + editor, + page, + } ) => { + await admin.visitSiteEditor( { + postId: `woocommerce/woocommerce//${ slug }`, + postType: 'wp_template', + } ); + + const block = editorUtils.getBlockByName( blockData.name ); + await editor.insertBlock( { + name: 'core/paragraph', + attributes: { content: 'Hello World' }, + } ); + + await editor.saveSiteEditorEntities(); + + await page.goto( frontendPage ); + expect( block ).not.toBeNull(); + } ); + + test( `is rendered on ${ templateTitle } template - frontend side`, async ( { + admin, + editor, + page, + } ) => { + if ( slug === 'taxonomy-product_tag' ) { + test.skip(); + } + + await admin.visitSiteEditor( { + postId: `woocommerce/woocommerce//${ slug }`, + postType: 'wp_template', + } ); + + await editor.insertBlock( { + name: 'core/paragraph', + attributes: { content: 'Hello World' }, + } ); + + await editor.saveSiteEditorEntities(); + + await page.goto( frontendPage ); + + const helloWorldText = await page.getByText( 'Hello World' ); + + expect( helloWorldText ).not.toBeNull(); + } ); + } + test.afterAll( async () => { + await cli( + 'npm run wp-env run tests-cli "wp option delete wc_blocks_use_blockified_product_grid_block_as_template"' + ); + } ); +} ); diff --git a/tests/e2e-pw/tests/classic-template/utils.ts b/tests/e2e-pw/tests/classic-template/utils.ts new file mode 100644 index 00000000000..a4fa9102821 --- /dev/null +++ b/tests/e2e-pw/tests/classic-template/utils.ts @@ -0,0 +1,9 @@ +export const WOOCOMMERCE_ID = 'woocommerce/woocommerce'; + +export const getDefaultTemplateProps = ( templateTitle: string ) => { + return { + templateTitle, + addedBy: WOOCOMMERCE_ID, + hasActions: false, + }; +}; diff --git a/tests/e2e-pw/types/block-data.ts b/tests/e2e-pw/types/block-data.ts index 6437a0f68b8..fa1af0d034f 100644 --- a/tests/e2e-pw/types/block-data.ts +++ b/tests/e2e-pw/types/block-data.ts @@ -1,4 +1,4 @@ -export type BlockData< T = undefined > = { +export type BlockData< T = unknown > = { name: string; mainClass: string; selectors: Record< 'editor' | 'frontend', Record< string, unknown > >; diff --git a/tests/e2e-pw/utils/api/TemplateApiUtils.ts b/tests/e2e-pw/utils/api/TemplateApiUtils.ts index 6b8170e40db..f4e1ec01a93 100644 --- a/tests/e2e-pw/utils/api/TemplateApiUtils.ts +++ b/tests/e2e-pw/utils/api/TemplateApiUtils.ts @@ -50,4 +50,25 @@ export class TemplateApiUtils { } ); } + + async getTemplates() { + const storageState = JSON.parse( + await fs.readFile( STORAGE_STATE_PATH, 'utf-8' ) + ); + + const requestUtils = await this.request.newContext( { + baseURL: BASE_URL, + storageState: storageState && { + cookies: storageState.cookies, + origins: [], + }, + } ); + const response = await requestUtils.get( `/wp-json/wp/v2/templates`, { + headers: { + 'X-WP-Nonce': storageState.nonce, + }, + } ); + + return await response.json(); + } } diff --git a/tests/e2e-pw/utils/editor/EditorUtils.ts b/tests/e2e-pw/utils/editor/EditorUtils.ts new file mode 100644 index 00000000000..eb61e6f940a --- /dev/null +++ b/tests/e2e-pw/utils/editor/EditorUtils.ts @@ -0,0 +1,18 @@ +/** + * External dependencies + */ +import { Editor } from '@wordpress/e2e-test-utils-playwright'; +/** + * Internal dependencies + */ + +export class EditorUtils { + editor: Editor; + constructor( editor: Editor ) { + this.editor = editor; + } + + async getBlockByName( name: string ) { + return this.editor.canvas.locator( `[data-type="${ name }}"]` ); + } +} diff --git a/tests/e2e-pw/utils/editor/index.ts b/tests/e2e-pw/utils/editor/index.ts new file mode 100644 index 00000000000..9016ba8813c --- /dev/null +++ b/tests/e2e-pw/utils/editor/index.ts @@ -0,0 +1 @@ +export * from './EditorUtils'; diff --git a/tests/e2e-pw/utils/index.ts b/tests/e2e-pw/utils/index.ts index becfa58d01c..6b13546eeea 100644 --- a/tests/e2e-pw/utils/index.ts +++ b/tests/e2e-pw/utils/index.ts @@ -3,3 +3,4 @@ export * from './constants'; export * from './use-block-theme'; export * from './cli'; export * from './api'; +export * from './editor'; diff --git a/tests/e2e/specs/backend/site-editing-templates.test.js b/tests/e2e/specs/backend/site-editing-templates.test.js deleted file mode 100644 index 7abef3e64b9..00000000000 --- a/tests/e2e/specs/backend/site-editing-templates.test.js +++ /dev/null @@ -1,701 +0,0 @@ -/* eslint-disable jest/no-conditional-expect */ -/** - * External dependencies - */ -import { URL } from 'url'; -import { - canvas, - deleteAllTemplates, - getCurrentSiteEditorContent, - insertBlock, -} from '@wordpress/e2e-test-utils'; -import { - getNormalPagePermalink, - visitPostOfType, -} from '@woocommerce/blocks-test-utils'; - -/** - * Internal dependencies - */ -import { - BASE_URL, - DEFAULT_TIMEOUT, - filterCurrentBlocks, - getAllTemplates, - goToTemplateEditor, - goToTemplatesList, - saveTemplate, - useTheme, -} from '../../utils'; - -async function visitTemplateAndAddCustomParagraph( - templateSlug, - customText = CUSTOMIZED_STRING -) { - await goToTemplateEditor( { - postId: `woocommerce/woocommerce//${ templateSlug }`, - } ); - - await insertBlock( 'Paragraph' ); - await page.keyboard.type( customText ); - await saveTemplate(); -} - -function blockSelector( id ) { - return `[data-type="${ id }"]`; -} - -function defaultTemplateProps( templateTitle ) { - return { - templateTitle, - addedBy: WOOCOMMERCE_ID, - hasActions: false, - }; -} - -function classicBlockSelector( title ) { - return `${ blockSelector( - 'woocommerce/legacy-template' - ) }[data-title="${ title }"]`; -} - -const BLOCK_DATA = { - 'archive-product': { - attributes: { - placeholder: 'archive-product', - template: 'archive-product', - title: 'WooCommerce Product Grid Block', - }, - name: 'woocommerce/legacy-template', - }, - 'single-product': { - attributes: { - placeholder: 'single-product', - template: 'single-product', - title: 'WooCommerce Single Product Block', - }, - name: 'woocommerce/legacy-template', - }, - 'taxonomy-product_cat': { - attributes: { - placeholder: 'archive-product', - template: 'taxonomy-product_cat', - title: 'WooCommerce Product Taxonomy Block', - }, - name: 'woocommerce/legacy-template', - }, - 'taxonomy-product_tag': { - attributes: { - placeholder: 'archive-product', - template: 'taxonomy-product_tag', - title: 'WooCommerce Product Tag Block', - }, - name: 'woocommerce/legacy-template', - }, - 'taxonomy-product_attribute': { - attributes: { - placeholder: 'archive-product', - template: 'taxonomy-product_attribute', - title: 'WooCommerce Product Attribute Block', - }, - name: 'woocommerce/legacy-template', - }, - 'product-search-results': { - attributes: { - title: 'WooCommerce Product Search Results Block', - template: 'product-search-results', - placeholder: 'archive-product', - }, - name: 'woocommerce/legacy-template', - }, -}; - -const SELECTORS = { - blocks: { - paragraph: blockSelector( 'core/paragraph' ), - productArchive: classicBlockSelector( - 'WooCommerce Product Grid Block' - ), - singleProduct: classicBlockSelector( - 'WooCommerce Single Product Block' - ), - }, - templates: { - templateActions: - '[aria-label="Templates list - Content"] [aria-label="Actions"]', - }, -}; - -const CUSTOMIZED_STRING = 'My awesome customization'; -const WOOCOMMERCE_ID = 'woocommerce/woocommerce'; -const WOOCOMMERCE_PARSED_ID = 'woocommerce/woocommerceCustomized'; - -describe( 'Store Editing Templates', () => { - useTheme( 'emptytheme' ); - - describe( 'Single Product block template', () => { - beforeAll( async () => { - await deleteAllTemplates( 'wp_template' ); - await deleteAllTemplates( 'wp_template_part' ); - } ); - - it( 'default template from WooCommerce Blocks is available on an FSE theme', async () => { - const EXPECTED_TEMPLATE = defaultTemplateProps( 'Single Product' ); - - await goToTemplatesList(); - - const templates = await getAllTemplates(); - - try { - expect( templates ).toContainEqual( EXPECTED_TEMPLATE ); - } catch ( ok ) { - // Depending on the speed of the execution and whether Chrome is headless or not - // the id might be parsed or not - - expect( templates ).toContainEqual( { - ...EXPECTED_TEMPLATE, - addedBy: WOOCOMMERCE_PARSED_ID, - } ); - } - } ); - - it( 'should contain the "WooCommerce Single Product Block" classic template', async () => { - await goToTemplateEditor( { - postId: 'woocommerce/woocommerce//single-product', - } ); - - const [ classicBlock ] = await filterCurrentBlocks( - ( block ) => block.name === BLOCK_DATA[ 'single-product' ].name - ); - - // Comparing only the `template` property currently - // because the other properties seem to be slightly unreliable. - // Investigation pending. - expect( classicBlock.attributes.template ).toBe( - BLOCK_DATA[ 'single-product' ].attributes.template - ); - expect( await getCurrentSiteEditorContent() ).toMatchSnapshot(); - } ); - - it( 'should show the action menu if the template has been customized by the user', async () => { - const EXPECTED_TEMPLATE = { - ...defaultTemplateProps( 'Single Product' ), - hasActions: true, - }; - - await visitTemplateAndAddCustomParagraph( 'single-product' ); - - await goToTemplatesList( { waitFor: 'actions' } ); - - const templates = await getAllTemplates(); - - try { - expect( templates ).toContainEqual( EXPECTED_TEMPLATE ); - } catch ( ok ) { - // Depending on the speed of the execution and whether Chrome is headless or not - // the id might be parsed or not - - expect( templates ).toContainEqual( { - ...EXPECTED_TEMPLATE, - addedBy: WOOCOMMERCE_PARSED_ID, - } ); - } - } ); - - it( 'should preserve and correctly show the user customization on the back-end', async () => { - await goToTemplateEditor( { - postId: 'woocommerce/woocommerce//single-product', - } ); - - await expect( canvas() ).toMatchElement( - SELECTORS.blocks.paragraph, - { - text: CUSTOMIZED_STRING, - timeout: DEFAULT_TIMEOUT, - } - ); - } ); - - it( 'should show the user customization on the front-end', async () => { - const exampleProductName = 'Woo Single #1'; - - await visitPostOfType( exampleProductName, 'product' ); - const permalink = await getNormalPagePermalink(); - - await page.goto( permalink ); - - await expect( page ).toMatchElement( 'p', { - text: CUSTOMIZED_STRING, - timeout: DEFAULT_TIMEOUT, - } ); - } ); - } ); - - describe( 'Product Catalog block template', () => { - beforeAll( async () => { - await deleteAllTemplates( 'wp_template' ); - await deleteAllTemplates( 'wp_template_part' ); - } ); - - it( 'default template from WooCommerce Blocks is available on an FSE theme', async () => { - const EXPECTED_TEMPLATE = defaultTemplateProps( 'Product Catalog' ); - - await goToTemplatesList(); - - const templates = await getAllTemplates(); - - try { - expect( templates ).toContainEqual( EXPECTED_TEMPLATE ); - } catch ( ok ) { - // Depending on the speed of the execution and whether Chrome is headless or not - // the id might be parsed or not - - expect( templates ).toContainEqual( { - ...EXPECTED_TEMPLATE, - addedBy: WOOCOMMERCE_PARSED_ID, - } ); - } - } ); - - it( 'should contain the "WooCommerce Product Grid Block" classic template', async () => { - await goToTemplateEditor( { - postId: 'woocommerce/woocommerce//archive-product', - } ); - - const [ classicBlock ] = await filterCurrentBlocks( - ( block ) => block.name === BLOCK_DATA[ 'archive-product' ].name - ); - - expect( classicBlock.attributes.template ).toBe( - BLOCK_DATA[ 'archive-product' ].attributes.template - ); - expect( await getCurrentSiteEditorContent() ).toMatchSnapshot(); - } ); - - it( 'should show the action menu if the template has been customized by the user', async () => { - const EXPECTED_TEMPLATE = { - ...defaultTemplateProps( 'Product Catalog' ), - hasActions: true, - }; - - await visitTemplateAndAddCustomParagraph( 'archive-product' ); - - await goToTemplatesList( { waitFor: 'actions' } ); - - const templates = await getAllTemplates(); - - try { - expect( templates ).toContainEqual( EXPECTED_TEMPLATE ); - } catch ( ok ) { - // Depending on the speed of the execution and whether Chrome is headless or not - // the id might be parsed or not - - expect( templates ).toContainEqual( { - ...EXPECTED_TEMPLATE, - addedBy: WOOCOMMERCE_PARSED_ID, - } ); - } - } ); - - it( 'should preserve and correctly show the user customization on the back-end', async () => { - await goToTemplateEditor( { - postId: 'woocommerce/woocommerce//archive-product', - } ); - - await expect( canvas() ).toMatchElement( - SELECTORS.blocks.paragraph, - { - text: CUSTOMIZED_STRING, - timeout: DEFAULT_TIMEOUT, - } - ); - } ); - - it( 'should show the user customization on the front-end', async () => { - await page.goto( new URL( BASE_URL + '/shop' ) ); - - await expect( page ).toMatchElement( 'p', { - text: CUSTOMIZED_STRING, - timeout: DEFAULT_TIMEOUT, - } ); - } ); - } ); - - describe( 'Product by Category block template', () => { - beforeAll( async () => { - await deleteAllTemplates( 'wp_template' ); - await deleteAllTemplates( 'wp_template_part' ); - } ); - - it( 'default template from WooCommerce Blocks is available on an FSE theme', async () => { - const EXPECTED_TEMPLATE = defaultTemplateProps( - 'Products by Category' - ); - - await goToTemplatesList(); - - const templates = await getAllTemplates(); - - try { - expect( templates ).toContainEqual( EXPECTED_TEMPLATE ); - } catch ( ok ) { - // Depending on the speed of the execution and whether Chrome is headless or not - // the id might be parsed or not - - expect( templates ).toContainEqual( { - ...EXPECTED_TEMPLATE, - addedBy: WOOCOMMERCE_PARSED_ID, - } ); - } - } ); - - it( 'should contain the "WooCommerce Product Taxonomy Block" classic template', async () => { - await goToTemplateEditor( { - postId: 'woocommerce/woocommerce//taxonomy-product_cat', - } ); - - const [ classicBlock ] = await filterCurrentBlocks( - ( block ) => - block.name === BLOCK_DATA[ 'taxonomy-product_cat' ].name - ); - - expect( classicBlock.attributes.template ).toBe( - BLOCK_DATA[ 'taxonomy-product_cat' ].attributes.template - ); - expect( await getCurrentSiteEditorContent() ).toMatchSnapshot(); - } ); - - it( 'should show the action menu if the template has been customized by the user', async () => { - const EXPECTED_TEMPLATE = { - ...defaultTemplateProps( 'Products by Category' ), - hasActions: true, - }; - - await visitTemplateAndAddCustomParagraph( 'taxonomy-product_cat' ); - - await goToTemplatesList( { waitFor: 'actions' } ); - - const templates = await getAllTemplates(); - - try { - expect( templates ).toContainEqual( EXPECTED_TEMPLATE ); - } catch ( ok ) { - // Depending on the speed of the execution and whether Chrome is headless or not - // the id might be parsed or not - - expect( templates ).toContainEqual( { - ...EXPECTED_TEMPLATE, - addedBy: WOOCOMMERCE_PARSED_ID, - } ); - } - } ); - - it( 'should preserve and correctly show the user customization on the back-end', async () => { - await goToTemplateEditor( { - postId: 'woocommerce/woocommerce//taxonomy-product_cat', - } ); - - await expect( canvas() ).toMatchElement( - SELECTORS.blocks.paragraph, - { - text: CUSTOMIZED_STRING, - timeout: DEFAULT_TIMEOUT, - } - ); - } ); - - it( 'should show the user customization on the front-end', async () => { - await page.goto( - new URL( '/product-category/uncategorized', BASE_URL ) - ); - - await expect( page ).toMatchElement( 'p', { - text: CUSTOMIZED_STRING, - timeout: DEFAULT_TIMEOUT, - } ); - } ); - } ); - - describe( 'Products by Tag block template', () => { - beforeAll( async () => { - await deleteAllTemplates( 'wp_template' ); - await deleteAllTemplates( 'wp_template_part' ); - } ); - - it( 'default template from WooCommerce Blocks is available on an FSE theme', async () => { - const EXPECTED_TEMPLATE = defaultTemplateProps( 'Products by Tag' ); - - await goToTemplatesList(); - - const templates = await getAllTemplates(); - - try { - expect( templates ).toContainEqual( EXPECTED_TEMPLATE ); - } catch ( ok ) { - // Depending on the speed of the execution and whether Chrome is headless or not - // the id might be parsed or not - - expect( templates ).toContainEqual( { - ...EXPECTED_TEMPLATE, - addedBy: WOOCOMMERCE_PARSED_ID, - } ); - } - } ); - - it( 'should contain the "WooCommerce Product Taxonomy Block" classic template', async () => { - await goToTemplateEditor( { - postId: 'woocommerce/woocommerce//taxonomy-product_tag', - } ); - - const [ classicBlock ] = await filterCurrentBlocks( - ( block ) => - block.name === BLOCK_DATA[ 'taxonomy-product_tag' ].name - ); - - expect( classicBlock.attributes.template ).toBe( - BLOCK_DATA[ 'taxonomy-product_tag' ].attributes.template - ); - expect( await getCurrentSiteEditorContent() ).toMatchSnapshot(); - } ); - - it( 'should show the action menu if the template has been customized by the user', async () => { - const EXPECTED_TEMPLATE = { - ...defaultTemplateProps( 'Products by Tag' ), - hasActions: true, - }; - - await visitTemplateAndAddCustomParagraph( 'taxonomy-product_tag' ); - - await goToTemplatesList( { waitFor: 'actions' } ); - - const templates = await getAllTemplates(); - - try { - expect( templates ).toContainEqual( EXPECTED_TEMPLATE ); - } catch ( ok ) { - // Depending on the speed of the execution and whether Chrome is headless or not - // the id might be parsed or not - - expect( templates ).toContainEqual( { - ...EXPECTED_TEMPLATE, - addedBy: WOOCOMMERCE_PARSED_ID, - } ); - } - } ); - - it( 'should preserve and correctly show the user customization on the back-end', async () => { - await goToTemplateEditor( { - postId: 'woocommerce/woocommerce//taxonomy-product_tag', - } ); - - await expect( canvas() ).toMatchElement( - SELECTORS.blocks.paragraph, - { - text: CUSTOMIZED_STRING, - timeout: DEFAULT_TIMEOUT, - } - ); - } ); - - it( 'should show the user customization on the front-end', async () => { - await page.goto( new URL( '/product-tag/newest', BASE_URL ) ); - - await expect( page ).toMatchElement( 'p', { - text: CUSTOMIZED_STRING, - timeout: DEFAULT_TIMEOUT, - } ); - } ); - } ); - - describe( 'Products by Attribute template', () => { - beforeAll( async () => { - await deleteAllTemplates( 'wp_template' ); - await deleteAllTemplates( 'wp_template_part' ); - } ); - - it( 'default template from WooCommerce Blocks is available on an FSE theme', async () => { - const EXPECTED_TEMPLATE = defaultTemplateProps( - 'Products by Attribute' - ); - - await goToTemplatesList(); - - const templates = await getAllTemplates(); - - try { - expect( templates ).toContainEqual( EXPECTED_TEMPLATE ); - } catch ( ok ) { - // Depending on the speed of the execution and whether Chrome is headless or not - // the id might be parsed or not - - expect( templates ).toContainEqual( { - ...EXPECTED_TEMPLATE, - addedBy: WOOCOMMERCE_PARSED_ID, - } ); - } - } ); - - it( 'should contain the "WooCommerce Product Taxonomy Block" classic template', async () => { - await goToTemplateEditor( { - postId: 'woocommerce/woocommerce//taxonomy-product_attribute', - } ); - - const [ classicBlock ] = await filterCurrentBlocks( - ( block ) => - block.name === - BLOCK_DATA[ 'taxonomy-product_attribute' ].name - ); - - expect( classicBlock.attributes.template ).toBe( - BLOCK_DATA[ 'taxonomy-product_attribute' ].attributes.template - ); - expect( await getCurrentSiteEditorContent() ).toMatchSnapshot(); - } ); - - it( 'should show the action menu if the template has been customized by the user', async () => { - const EXPECTED_TEMPLATE = { - ...defaultTemplateProps( 'Products by Attribute' ), - hasActions: true, - }; - - await visitTemplateAndAddCustomParagraph( - 'taxonomy-product_attribute' - ); - - await goToTemplatesList( { waitFor: 'actions' } ); - - const templates = await getAllTemplates(); - - try { - expect( templates ).toContainEqual( EXPECTED_TEMPLATE ); - } catch ( ok ) { - // Depending on the speed of the execution and whether Chrome is headless or not - // the id might be parsed or not - - expect( templates ).toContainEqual( { - ...EXPECTED_TEMPLATE, - addedBy: WOOCOMMERCE_PARSED_ID, - } ); - } - } ); - - it( 'should preserve and correctly show the user customization on the back-end', async () => { - await goToTemplateEditor( { - postId: 'woocommerce/woocommerce//taxonomy-product_attribute', - } ); - - await expect( canvas() ).toMatchElement( - SELECTORS.blocks.paragraph, - { - text: CUSTOMIZED_STRING, - timeout: DEFAULT_TIMEOUT, - } - ); - } ); - - it( 'should show the user customization on the front-end', async () => { - await page.goto( new URL( '/shade/red', BASE_URL ) ); - - await expect( page ).toMatchElement( 'p', { - text: CUSTOMIZED_STRING, - timeout: DEFAULT_TIMEOUT, - } ); - } ); - } ); - - describe( 'Product Search Results block template', () => { - beforeAll( async () => { - await deleteAllTemplates( 'wp_template' ); - await deleteAllTemplates( 'wp_template_part' ); - } ); - - it( 'default template from WooCommerce Blocks is available on an FSE theme', async () => { - const EXPECTED_TEMPLATE = defaultTemplateProps( - 'Product Search Results' - ); - - await goToTemplatesList(); - - const templates = await getAllTemplates(); - - try { - expect( templates ).toContainEqual( EXPECTED_TEMPLATE ); - } catch ( ok ) { - // Depending on the speed of the execution and whether Chrome is headless or not - // the id might be parsed or not - - expect( templates ).toContainEqual( { - ...EXPECTED_TEMPLATE, - addedBy: WOOCOMMERCE_PARSED_ID, - } ); - } - } ); - - it( 'should contain the "WooCommerce Product Grid Block" classic template', async () => { - await goToTemplateEditor( { - postId: 'woocommerce/woocommerce//product-search-results', - } ); - - const [ classicBlock ] = await filterCurrentBlocks( - ( block ) => block.name === BLOCK_DATA[ 'archive-product' ].name - ); - - expect( classicBlock.attributes.template ).toBe( - BLOCK_DATA[ 'product-search-results' ].attributes.template - ); - expect( await getCurrentSiteEditorContent() ).toMatchSnapshot(); - } ); - - it( 'should show the action menu if the template has been customized by the user', async () => { - const EXPECTED_TEMPLATE = { - ...defaultTemplateProps( 'Product Search Results' ), - hasActions: true, - }; - - await visitTemplateAndAddCustomParagraph( - 'product-search-results' - ); - - await goToTemplatesList( { waitFor: 'actions' } ); - - const templates = await getAllTemplates(); - - try { - expect( templates ).toContainEqual( EXPECTED_TEMPLATE ); - } catch ( ok ) { - // Depending on the speed of the execution and whether Chrome is headless or not - // the id might be parsed or not - - expect( templates ).toContainEqual( { - ...EXPECTED_TEMPLATE, - addedBy: WOOCOMMERCE_PARSED_ID, - } ); - } - } ); - - it( 'should preserve and correctly show the user customization on the back-end', async () => { - await goToTemplateEditor( { - postId: 'woocommerce/woocommerce//product-search-results', - } ); - - await expect( canvas() ).toMatchElement( - SELECTORS.blocks.paragraph, - { - text: CUSTOMIZED_STRING, - timeout: DEFAULT_TIMEOUT, - } - ); - } ); - - it( 'should show the user customization on the front-end', async () => { - await page.goto( - new URL( '?s=shirt&post_type=product', BASE_URL ) - ); - - await expect( page ).toMatchElement( 'p', { - text: CUSTOMIZED_STRING, - timeout: DEFAULT_TIMEOUT, - } ); - } ); - } ); -} ); From 5214514ef0e99b2ea51dce2002636e80c4e22387 Mon Sep 17 00:00:00 2001 From: Luigi Date: Wed, 24 May 2023 10:27:59 +0200 Subject: [PATCH 2/2] fix can be inserted more than once tests --- tests/e2e/specs/backend/add-to-cart-form.test.js | 1 - tests/e2e/specs/backend/breadcrumbs.test.js | 1 - tests/e2e/specs/backend/catalog-sorting.test.js | 1 - tests/e2e/specs/backend/product-results-count.test.js | 1 - tests/e2e/specs/backend/single-product-details.test.js | 1 - 5 files changed, 5 deletions(-) diff --git a/tests/e2e/specs/backend/add-to-cart-form.test.js b/tests/e2e/specs/backend/add-to-cart-form.test.js index 2745d566e63..4f4e2b7d0dd 100644 --- a/tests/e2e/specs/backend/add-to-cart-form.test.js +++ b/tests/e2e/specs/backend/add-to-cart-form.test.js @@ -54,7 +54,6 @@ describe( `${ block.name } Block`, () => { } ); it( 'can be inserted more than once', async () => { - await insertBlockDontWaitForInsertClose( block.name ); await insertBlockDontWaitForInsertClose( block.name ); const filteredBlocks = await filterCurrentBlocks( ( b ) => b.name === block.slug diff --git a/tests/e2e/specs/backend/breadcrumbs.test.js b/tests/e2e/specs/backend/breadcrumbs.test.js index da92441fb03..86ab32e9036 100644 --- a/tests/e2e/specs/backend/breadcrumbs.test.js +++ b/tests/e2e/specs/backend/breadcrumbs.test.js @@ -50,7 +50,6 @@ describe( `${ block.name } Block`, () => { } ); it( 'can be inserted more than once', async () => { - await insertBlockDontWaitForInsertClose( block.name ); await insertBlockDontWaitForInsertClose( block.name ); const filteredBlocks = await filterCurrentBlocks( ( b ) => b.name === block.slug diff --git a/tests/e2e/specs/backend/catalog-sorting.test.js b/tests/e2e/specs/backend/catalog-sorting.test.js index 24ad1d2e731..440427d5316 100644 --- a/tests/e2e/specs/backend/catalog-sorting.test.js +++ b/tests/e2e/specs/backend/catalog-sorting.test.js @@ -53,7 +53,6 @@ describe( `${ block.name } Block`, () => { } ); it( 'can be inserted more than once', async () => { - await insertBlockDontWaitForInsertClose( block.name ); await insertBlockDontWaitForInsertClose( block.name ); const catalogStoringBlock = await filterCurrentBlocks( ( b ) => b.name === block.slug diff --git a/tests/e2e/specs/backend/product-results-count.test.js b/tests/e2e/specs/backend/product-results-count.test.js index 08e60f339a8..21b51598833 100644 --- a/tests/e2e/specs/backend/product-results-count.test.js +++ b/tests/e2e/specs/backend/product-results-count.test.js @@ -50,7 +50,6 @@ describe( `${ block.name } Block`, () => { } ); it( 'can be inserted more than once', async () => { - await insertBlock( block.name ); await insertBlock( block.name ); const filteredBlocks = await filterCurrentBlocks( ( b ) => b.name === block.slug diff --git a/tests/e2e/specs/backend/single-product-details.test.js b/tests/e2e/specs/backend/single-product-details.test.js index 9a8e63aa65b..d9c04f55a87 100644 --- a/tests/e2e/specs/backend/single-product-details.test.js +++ b/tests/e2e/specs/backend/single-product-details.test.js @@ -50,7 +50,6 @@ describe( `${ block.name } Block`, () => { } ); it( 'can be inserted more than once', async () => { - await insertBlockDontWaitForInsertClose( block.name ); await insertBlockDontWaitForInsertClose( block.name ); const filteredBlocks = await filterCurrentBlocks( ( b ) => b.name === block.slug