From e5c6477a4e112cd85462b3889008681b14e16037 Mon Sep 17 00:00:00 2001 From: Maikel Perez Date: Tue, 27 Aug 2024 09:37:45 -0400 Subject: [PATCH] Blocks E2E: Move register product collection tester e2e tests from product collection file to its own file (#50852) * Move register product collection tester e2e tests from product collection file to its own file * Add changelog file * Remove the unstable allTextContents usage * Remove page.waitForTimeout because it doesn't validate that the button is hidden after exactly 1 second * Remove page.waitForTimeout from 'Should display properly in Product Catalog template' e2e test * Let's use one parent describe per file for good practice * Keeping the structure flat --- .../collections.block_theme.spec.ts | 2 +- .../inspector-controls.block_theme.spec.ts | 2 +- .../product-collection.block_theme.spec.ts | 362 ------------------ ...duct-collection-tester.block_theme.spec.ts | 359 +++++++++++++++++ ...t-50444-register-product-collection-tester | 4 + 5 files changed, 365 insertions(+), 364 deletions(-) rename plugins/woocommerce-blocks/tests/e2e/tests/product-collection/{collections => }/collections.block_theme.spec.ts (98%) rename plugins/woocommerce-blocks/tests/e2e/tests/product-collection/{inspector-controls => }/inspector-controls.block_theme.spec.ts (99%) create mode 100644 plugins/woocommerce-blocks/tests/e2e/tests/product-collection/register-product-collection-tester.block_theme.spec.ts create mode 100644 plugins/woocommerce/changelog/test-50444-register-product-collection-tester diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/collections/collections.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/collections.block_theme.spec.ts similarity index 98% rename from plugins/woocommerce-blocks/tests/e2e/tests/product-collection/collections/collections.block_theme.spec.ts rename to plugins/woocommerce-blocks/tests/e2e/tests/product-collection/collections.block_theme.spec.ts index c077f1c899a..eac6f622591 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/collections/collections.block_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/collections.block_theme.spec.ts @@ -6,7 +6,7 @@ import { test as base, expect } from '@woocommerce/e2e-utils'; /** * Internal dependencies */ -import ProductCollectionPage, { SELECTORS } from '../product-collection.page'; +import ProductCollectionPage, { SELECTORS } from './product-collection.page'; const test = base.extend< { pageObject: ProductCollectionPage } >( { pageObject: async ( { page, admin, editor }, use ) => { diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/inspector-controls/inspector-controls.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/inspector-controls.block_theme.spec.ts similarity index 99% rename from plugins/woocommerce-blocks/tests/e2e/tests/product-collection/inspector-controls/inspector-controls.block_theme.spec.ts rename to plugins/woocommerce-blocks/tests/e2e/tests/product-collection/inspector-controls.block_theme.spec.ts index b1a696e81ad..92b1723c6a3 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/inspector-controls/inspector-controls.block_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/inspector-controls.block_theme.spec.ts @@ -6,7 +6,7 @@ import { test as base, expect } from '@woocommerce/e2e-utils'; /** * Internal dependencies */ -import ProductCollectionPage, { SELECTORS } from '../product-collection.page'; +import ProductCollectionPage, { SELECTORS } from './product-collection.page'; const test = base.extend< { pageObject: ProductCollectionPage } >( { pageObject: async ( { page, admin, editor }, use ) => { diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts index 28a397cb22c..788f27b123a 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts @@ -9,7 +9,6 @@ import { test as base, expect } from '@woocommerce/e2e-utils'; */ import ProductCollectionPage, { BLOCK_LABELS, - Collections, SELECTORS, } from './product-collection.page'; @@ -881,364 +880,3 @@ test.describe( 'Product Collection', () => { } ); } ); } ); - -/** - * These E2E tests are for `registerProductCollection` which we are exposing - * for 3PDs to register new product collections. - */ -test.describe( 'Testing registerProductCollection', () => { - const MY_REGISTERED_COLLECTIONS = { - myCustomCollection: { - name: 'My Custom Collection', - label: 'Block: My Custom Collection', - }, - myCustomCollectionWithPreview: { - name: 'My Custom Collection with Preview', - label: 'Block: My Custom Collection with Preview', - }, - myCustomCollectionWithAdvancedPreview: { - name: 'My Custom Collection with Advanced Preview', - label: 'Block: My Custom Collection with Advanced Preview', - }, - }; - - // Activate plugin which registers custom product collections - test.beforeEach( async ( { requestUtils } ) => { - await requestUtils.activatePlugin( - 'register-product-collection-tester' - ); - } ); - - test( `Registered collections should be available in Collection chooser`, async ( { - pageObject, - editor, - admin, - } ) => { - await admin.createNewPost(); - await editor.insertBlockUsingGlobalInserter( pageObject.BLOCK_NAME ); - await editor.canvas - .getByRole( 'button', { - name: 'Choose collection', - } ) - .click(); - - // Get text of all buttons in the collection chooser - const collectionChooserButtonsTexts = await editor.canvas - .locator( '.wc-blocks-product-collection__collection-button-title' ) - .allTextContents(); - - // Check if all registered collections are available in the collection chooser - expect( - collectionChooserButtonsTexts.includes( - MY_REGISTERED_COLLECTIONS.myCustomCollection.name - ) - ).toBeTruthy(); - expect( - collectionChooserButtonsTexts.includes( - MY_REGISTERED_COLLECTIONS.myCustomCollectionWithPreview.name - ) - ).toBeTruthy(); - expect( - collectionChooserButtonsTexts.includes( - MY_REGISTERED_COLLECTIONS.myCustomCollectionWithAdvancedPreview - .name - ) - ).toBeTruthy(); - } ); - - test.describe( 'My Custom Collection', () => { - test( 'Clicking "My Custom Collection" should insert block and show 5 products', async ( { - pageObject, - } ) => { - await pageObject.createNewPostAndInsertBlock( - 'myCustomCollection' - ); - - await expect( pageObject.products ).toHaveCount( 5 ); - await expect( pageObject.productImages ).toHaveCount( 5 ); - await expect( pageObject.productTitles ).toHaveCount( 5 ); - await expect( pageObject.productPrices ).toHaveCount( 5 ); - await expect( pageObject.addToCartButtons ).toHaveCount( 5 ); - - await pageObject.publishAndGoToFrontend(); - await expect( pageObject.products ).toHaveCount( 5 ); - } ); - - test( 'Should display properly in Product Catalog template', async ( { - pageObject, - editor, - } ) => { - await pageObject.goToProductCatalogAndInsertCollection( - 'myCustomCollection' - ); - - const block = editor.canvas.getByLabel( - MY_REGISTERED_COLLECTIONS.myCustomCollection.label - ); - - const products = block - .getByLabel( BLOCK_LABELS.productImage ) - .locator( 'visible=true' ); - await expect( products ).toHaveCount( 5 ); - } ); - - test( 'hideControls allows to hide filters', async ( { - pageObject, - page, - } ) => { - await pageObject.goToProductCatalogAndInsertCollection( - 'myCustomCollection' - ); - - const sidebarSettings = pageObject.locateSidebarSettings(); - const onsaleControl = sidebarSettings.getByLabel( - SELECTORS.onSaleControlLabel - ); - await expect( onsaleControl ).toBeHidden(); - - await page - .getByRole( 'button', { name: 'Filters options' } ) - .click(); - const keywordControl = page.getByRole( 'menuitemcheckbox', { - name: 'Keyword', - } ); - - await expect( keywordControl ).toBeHidden(); - } ); - } ); - - test.describe( 'My Custom Collection with Preview', () => { - test( 'Clicking "My Custom Collection with Preview" should insert block and show 9 products', async ( { - pageObject, - } ) => { - await pageObject.createNewPostAndInsertBlock( - 'myCustomCollectionWithPreview' - ); - - await expect( pageObject.products ).toHaveCount( 9 ); - await expect( pageObject.productImages ).toHaveCount( 9 ); - await expect( pageObject.productTitles ).toHaveCount( 9 ); - await expect( pageObject.productPrices ).toHaveCount( 9 ); - await expect( pageObject.addToCartButtons ).toHaveCount( 9 ); - - await pageObject.publishAndGoToFrontend(); - await expect( pageObject.products ).toHaveCount( 9 ); - } ); - - test( 'Clicking "My Custom Collection with Preview" should show preview', async ( { - pageObject, - editor, - } ) => { - await pageObject.createNewPostAndInsertBlock( - 'myCustomCollectionWithPreview' - ); - const previewButtonLocator = editor.canvas.getByTestId( - SELECTORS.previewButtonTestID - ); - - // The preview button should be visible - await expect( previewButtonLocator ).toBeVisible(); - } ); - - test( 'Should display properly in Product Catalog template', async ( { - pageObject, - editor, - } ) => { - await pageObject.goToProductCatalogAndInsertCollection( - 'myCustomCollectionWithPreview' - ); - - const block = editor.canvas.getByLabel( - MY_REGISTERED_COLLECTIONS.myCustomCollectionWithPreview.label - ); - - // Check if products are visible - const products = block - .getByLabel( BLOCK_LABELS.productImage ) - .locator( 'visible=true' ); - await expect( products ).toHaveCount( 9 ); - - // Check if the preview button is visible - const previewButtonLocator = block.getByTestId( - SELECTORS.previewButtonTestID - ); - await expect( previewButtonLocator ).toBeVisible(); - } ); - } ); - - test.describe( 'My Custom Collection with Advanced Preview', () => { - test( 'Clicking "My Custom Collection with Advanced Preview" should insert block and show 9 products', async ( { - pageObject, - } ) => { - await pageObject.createNewPostAndInsertBlock( - 'myCustomCollectionWithAdvancedPreview' - ); - - await expect( pageObject.products ).toHaveCount( 9 ); - await expect( pageObject.productImages ).toHaveCount( 9 ); - await expect( pageObject.productTitles ).toHaveCount( 9 ); - await expect( pageObject.productPrices ).toHaveCount( 9 ); - await expect( pageObject.addToCartButtons ).toHaveCount( 9 ); - - await pageObject.publishAndGoToFrontend(); - await expect( pageObject.products ).toHaveCount( 9 ); - } ); - - test( 'Clicking "My Custom Collection with Advanced Preview" should show preview for 1 second', async ( { - pageObject, - editor, - page, - } ) => { - await pageObject.createNewPostAndInsertBlock( - 'myCustomCollectionWithAdvancedPreview' - ); - const previewButtonLocator = editor.canvas.getByTestId( - SELECTORS.previewButtonTestID - ); - - // The preview button should be visible - await expect( previewButtonLocator ).toBeVisible(); - - // Disabling eslint rule because we need to wait for the preview to disappear - // eslint-disable-next-line playwright/no-wait-for-timeout, no-restricted-syntax - await page.waitForTimeout( 1000 ); - - // The preview button should be hidden - await expect( previewButtonLocator ).toBeHidden(); - } ); - - test( 'Should display properly in Product Catalog template', async ( { - pageObject, - editor, - page, - } ) => { - await pageObject.goToProductCatalogAndInsertCollection( - 'myCustomCollectionWithAdvancedPreview' - ); - - const block = editor.canvas.getByLabel( - MY_REGISTERED_COLLECTIONS.myCustomCollectionWithAdvancedPreview - .label - ); - - // Check if the preview button is visible - const previewButtonLocator = block.getByTestId( - SELECTORS.previewButtonTestID - ); - await expect( previewButtonLocator ).toBeVisible(); - - // Check if products are visible - const products = block - .getByLabel( BLOCK_LABELS.productImage ) - .locator( 'visible=true' ); - await expect( products ).toHaveCount( 9 ); - - // Disabling eslint rule because we need to wait for the preview to disappear - // eslint-disable-next-line playwright/no-wait-for-timeout, no-restricted-syntax - await page.waitForTimeout( 1000 ); - - // The preview button should be hidden after 1 second - await expect( previewButtonLocator ).toBeHidden(); - } ); - } ); -} ); - -test.describe( 'Testing "usesReference" argument in "registerProductCollection"', () => { - const MY_REGISTERED_COLLECTIONS = { - myCustomCollectionWithProductContext: { - name: 'My Custom Collection - Product Context', - label: 'Block: My Custom Collection - Product Context', - previewLabelTemplate: [ 'woocommerce/woocommerce//single-product' ], - }, - myCustomCollectionWithCartContext: { - name: 'My Custom Collection - Cart Context', - label: 'Block: My Custom Collection - Cart Context', - previewLabelTemplate: [ 'woocommerce/woocommerce//page-cart' ], - }, - myCustomCollectionWithOrderContext: { - name: 'My Custom Collection - Order Context', - label: 'Block: My Custom Collection - Order Context', - previewLabelTemplate: [ - 'woocommerce/woocommerce//order-confirmation', - ], - }, - myCustomCollectionWithArchiveContext: { - name: 'My Custom Collection - Archive Context', - label: 'Block: My Custom Collection - Archive Context', - previewLabelTemplate: [ - 'woocommerce/woocommerce//taxonomy-product_cat', - ], - }, - myCustomCollectionMultipleContexts: { - name: 'My Custom Collection - Multiple Contexts', - label: 'Block: My Custom Collection - Multiple Contexts', - previewLabelTemplate: [ - 'woocommerce/woocommerce//single-product', - 'woocommerce/woocommerce//order-confirmation', - ], - }, - }; - - // Activate plugin which registers custom product collections - test.beforeEach( async ( { requestUtils } ) => { - await requestUtils.activatePlugin( - 'register-product-collection-tester' - ); - } ); - - Object.entries( MY_REGISTERED_COLLECTIONS ).forEach( - ( [ key, collection ] ) => { - for ( const template of collection.previewLabelTemplate ) { - test( `Collection "${ collection.name }" should show preview label in "${ template }"`, async ( { - pageObject, - editor, - } ) => { - await pageObject.goToEditorTemplate( template ); - await pageObject.insertProductCollection(); - await pageObject.chooseCollectionInTemplate( - key as Collections - ); - - const block = editor.canvas.getByLabel( collection.label ); - const previewButtonLocator = block.getByTestId( - SELECTORS.previewButtonTestID - ); - - await expect( previewButtonLocator ).toBeVisible(); - } ); - } - - test( `Collection "${ collection.name }" should not show preview label in a post`, async ( { - pageObject, - editor, - } ) => { - await pageObject.createNewPostAndInsertBlock( - key as Collections - ); - - const block = editor.canvas.getByLabel( collection.label ); - const previewButtonLocator = block.getByTestId( - SELECTORS.previewButtonTestID - ); - - await expect( previewButtonLocator ).toBeHidden(); - } ); - - test( `Collection "${ collection.name }" should not show preview label in Product Catalog template`, async ( { - pageObject, - editor, - } ) => { - await pageObject.goToProductCatalogAndInsertCollection( - key as Collections - ); - - const block = editor.canvas.getByLabel( collection.label ); - const previewButtonLocator = block.getByTestId( - SELECTORS.previewButtonTestID - ); - - await expect( previewButtonLocator ).toBeHidden(); - } ); - } - ); -} ); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/register-product-collection-tester.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/register-product-collection-tester.block_theme.spec.ts new file mode 100644 index 00000000000..a7ea710f8a4 --- /dev/null +++ b/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/register-product-collection-tester.block_theme.spec.ts @@ -0,0 +1,359 @@ +/** + * External dependencies + */ +import { test as base, expect } from '@woocommerce/e2e-utils'; + +/** + * Internal dependencies + */ +import ProductCollectionPage, { + BLOCK_LABELS, + Collections, + SELECTORS, +} from './product-collection.page'; + +const test = base.extend< { pageObject: ProductCollectionPage } >( { + pageObject: async ( { page, admin, editor }, use ) => { + const pageObject = new ProductCollectionPage( { + page, + admin, + editor, + } ); + await use( pageObject ); + }, +} ); + +/** + * These E2E tests are for `registerProductCollection` which we are exposing + * for 3PDs to register new product collections. + */ +test.describe( 'Product Collection registration', () => { + const MY_REGISTERED_COLLECTIONS = { + myCustomCollection: { + name: 'My Custom Collection', + label: 'Block: My Custom Collection', + }, + myCustomCollectionWithPreview: { + name: 'My Custom Collection with Preview', + label: 'Block: My Custom Collection with Preview', + }, + myCustomCollectionWithAdvancedPreview: { + name: 'My Custom Collection with Advanced Preview', + label: 'Block: My Custom Collection with Advanced Preview', + }, + }; + + // Activate plugin which registers custom product collections + test.beforeEach( async ( { requestUtils } ) => { + await requestUtils.activatePlugin( + 'register-product-collection-tester' + ); + } ); + + test( `Registered collections should be available in Collection chooser`, async ( { + pageObject, + editor, + admin, + } ) => { + await admin.createNewPost(); + await editor.insertBlockUsingGlobalInserter( pageObject.BLOCK_NAME ); + await editor.canvas + .getByRole( 'button', { + name: 'Choose collection', + } ) + .click(); + + const productCollectionBlock = editor.canvas.getByLabel( + 'Block: Product Collection' + ); + + for ( const myCollection of Object.values( + MY_REGISTERED_COLLECTIONS + ) ) { + await expect( + productCollectionBlock.getByRole( 'button', { + name: myCollection.name, + exact: true, + } ) + ).toBeVisible(); + } + } ); + + test.describe( 'My Custom Collection', () => { + test( 'Clicking "My Custom Collection" should insert block and show 5 products', async ( { + pageObject, + } ) => { + await pageObject.createNewPostAndInsertBlock( + 'myCustomCollection' + ); + + await expect( pageObject.products ).toHaveCount( 5 ); + await expect( pageObject.productImages ).toHaveCount( 5 ); + await expect( pageObject.productTitles ).toHaveCount( 5 ); + await expect( pageObject.productPrices ).toHaveCount( 5 ); + await expect( pageObject.addToCartButtons ).toHaveCount( 5 ); + + await pageObject.publishAndGoToFrontend(); + await expect( pageObject.products ).toHaveCount( 5 ); + } ); + + test( 'Should display properly in Product Catalog template', async ( { + pageObject, + editor, + } ) => { + await pageObject.goToProductCatalogAndInsertCollection( + 'myCustomCollection' + ); + + const block = editor.canvas.getByLabel( + MY_REGISTERED_COLLECTIONS.myCustomCollection.label + ); + + const products = block + .getByLabel( BLOCK_LABELS.productImage ) + .locator( 'visible=true' ); + await expect( products ).toHaveCount( 5 ); + } ); + + test( 'hideControls allows to hide filters', async ( { + pageObject, + page, + } ) => { + await pageObject.goToProductCatalogAndInsertCollection( + 'myCustomCollection' + ); + + const sidebarSettings = pageObject.locateSidebarSettings(); + const onsaleControl = sidebarSettings.getByLabel( + SELECTORS.onSaleControlLabel + ); + await expect( onsaleControl ).toBeHidden(); + + await page + .getByRole( 'button', { name: 'Filters options' } ) + .click(); + const keywordControl = page.getByRole( 'menuitemcheckbox', { + name: 'Keyword', + } ); + + await expect( keywordControl ).toBeHidden(); + } ); + } ); + + test.describe( 'My Custom Collection with Preview', () => { + test( 'Clicking "My Custom Collection with Preview" should insert block and show 9 products', async ( { + pageObject, + } ) => { + await pageObject.createNewPostAndInsertBlock( + 'myCustomCollectionWithPreview' + ); + + await expect( pageObject.products ).toHaveCount( 9 ); + await expect( pageObject.productImages ).toHaveCount( 9 ); + await expect( pageObject.productTitles ).toHaveCount( 9 ); + await expect( pageObject.productPrices ).toHaveCount( 9 ); + await expect( pageObject.addToCartButtons ).toHaveCount( 9 ); + + await pageObject.publishAndGoToFrontend(); + await expect( pageObject.products ).toHaveCount( 9 ); + } ); + + test( 'Clicking "My Custom Collection with Preview" should show preview', async ( { + pageObject, + editor, + } ) => { + await pageObject.createNewPostAndInsertBlock( + 'myCustomCollectionWithPreview' + ); + const previewButtonLocator = editor.canvas.getByTestId( + SELECTORS.previewButtonTestID + ); + + // The preview button should be visible + await expect( previewButtonLocator ).toBeVisible(); + } ); + + test( 'Should display properly in Product Catalog template', async ( { + pageObject, + editor, + } ) => { + await pageObject.goToProductCatalogAndInsertCollection( + 'myCustomCollectionWithPreview' + ); + + const block = editor.canvas.getByLabel( + MY_REGISTERED_COLLECTIONS.myCustomCollectionWithPreview.label + ); + + // Check if products are visible + const products = block + .getByLabel( BLOCK_LABELS.productImage ) + .locator( 'visible=true' ); + await expect( products ).toHaveCount( 9 ); + + // Check if the preview button is visible + const previewButtonLocator = block.getByTestId( + SELECTORS.previewButtonTestID + ); + await expect( previewButtonLocator ).toBeVisible(); + } ); + } ); + + test.describe( 'My Custom Collection with Advanced Preview', () => { + test( 'Clicking "My Custom Collection with Advanced Preview" should insert block and show 9 products', async ( { + pageObject, + } ) => { + await pageObject.createNewPostAndInsertBlock( + 'myCustomCollectionWithAdvancedPreview' + ); + + await expect( pageObject.products ).toHaveCount( 9 ); + await expect( pageObject.productImages ).toHaveCount( 9 ); + await expect( pageObject.productTitles ).toHaveCount( 9 ); + await expect( pageObject.productPrices ).toHaveCount( 9 ); + await expect( pageObject.addToCartButtons ).toHaveCount( 9 ); + + await pageObject.publishAndGoToFrontend(); + await expect( pageObject.products ).toHaveCount( 9 ); + } ); + + test( 'Clicking "My Custom Collection with Advanced Preview" should show preview and then replace it by the actual content', async ( { + pageObject, + editor, + } ) => { + await pageObject.createNewPostAndInsertBlock( + 'myCustomCollectionWithAdvancedPreview' + ); + const previewButtonLocator = editor.canvas.getByTestId( + SELECTORS.previewButtonTestID + ); + + // The preview button should be visible + await expect( previewButtonLocator ).toBeVisible(); + + // The preview button should be hidden + await expect( previewButtonLocator ).toBeHidden(); + } ); + + test( 'Should display properly in Product Catalog template', async ( { + pageObject, + editor, + } ) => { + await pageObject.goToProductCatalogAndInsertCollection( + 'myCustomCollectionWithAdvancedPreview' + ); + + const block = editor.canvas.getByLabel( + MY_REGISTERED_COLLECTIONS.myCustomCollectionWithAdvancedPreview + .label + ); + + // Check if the preview button is visible + const previewButtonLocator = block.getByTestId( + SELECTORS.previewButtonTestID + ); + await expect( previewButtonLocator ).toBeVisible(); + + // Check if products are visible + const products = block + .getByLabel( BLOCK_LABELS.productImage ) + .locator( 'visible=true' ); + await expect( products ).toHaveCount( 9 ); + + // The preview button should be hidden after 1 second + await expect( previewButtonLocator ).toBeHidden(); + } ); + } ); + + [ + { + id: 'myCustomCollectionWithProductContext', + name: 'My Custom Collection - Product Context', + label: 'Block: My Custom Collection - Product Context', + previewLabelTemplate: [ 'woocommerce/woocommerce//single-product' ], + }, + { + id: 'myCustomCollectionWithCartContext', + name: 'My Custom Collection - Cart Context', + label: 'Block: My Custom Collection - Cart Context', + previewLabelTemplate: [ 'woocommerce/woocommerce//page-cart' ], + }, + { + id: 'myCustomCollectionWithOrderContext', + name: 'My Custom Collection - Order Context', + label: 'Block: My Custom Collection - Order Context', + previewLabelTemplate: [ + 'woocommerce/woocommerce//order-confirmation', + ], + }, + { + id: 'myCustomCollectionWithArchiveContext', + name: 'My Custom Collection - Archive Context', + label: 'Block: My Custom Collection - Archive Context', + previewLabelTemplate: [ + 'woocommerce/woocommerce//taxonomy-product_cat', + ], + }, + { + id: 'myCustomCollectionMultipleContexts', + name: 'My Custom Collection - Multiple Contexts', + label: 'Block: My Custom Collection - Multiple Contexts', + previewLabelTemplate: [ + 'woocommerce/woocommerce//single-product', + 'woocommerce/woocommerce//order-confirmation', + ], + }, + ].forEach( ( collection ) => { + for ( const template of collection.previewLabelTemplate ) { + test( `Collection "${ collection.name }" should show preview label in "${ template }"`, async ( { + pageObject, + editor, + } ) => { + await pageObject.goToEditorTemplate( template ); + await pageObject.insertProductCollection(); + await pageObject.chooseCollectionInTemplate( + collection.id as Collections + ); + + const block = editor.canvas.getByLabel( collection.label ); + const previewButtonLocator = block.getByTestId( + SELECTORS.previewButtonTestID + ); + + await expect( previewButtonLocator ).toBeVisible(); + } ); + } + + test( `Collection "${ collection.name }" should not show preview label in a post`, async ( { + pageObject, + editor, + } ) => { + await pageObject.createNewPostAndInsertBlock( + collection.id as Collections + ); + + const block = editor.canvas.getByLabel( collection.label ); + const previewButtonLocator = block.getByTestId( + SELECTORS.previewButtonTestID + ); + + await expect( previewButtonLocator ).toBeHidden(); + } ); + + test( `Collection "${ collection.name }" should not show preview label in Product Catalog template`, async ( { + pageObject, + editor, + } ) => { + await pageObject.goToProductCatalogAndInsertCollection( + collection.id as Collections + ); + + const block = editor.canvas.getByLabel( collection.label ); + const previewButtonLocator = block.getByTestId( + SELECTORS.previewButtonTestID + ); + + await expect( previewButtonLocator ).toBeHidden(); + } ); + } ); +} ); diff --git a/plugins/woocommerce/changelog/test-50444-register-product-collection-tester b/plugins/woocommerce/changelog/test-50444-register-product-collection-tester new file mode 100644 index 00000000000..061d77a57ad --- /dev/null +++ b/plugins/woocommerce/changelog/test-50444-register-product-collection-tester @@ -0,0 +1,4 @@ +Significance: minor +Type: tweak + +Move register product collection tester e2e tests from product collection file to its own file