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

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
This commit is contained in:
Maikel Perez 2024-08-27 09:37:45 -04:00 committed by GitHub
parent 1e650d06a9
commit e5c6477a4e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 365 additions and 364 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/woocommerce-blocks/tests/e2e/tests/product-collection/collections/collections.block_theme.spec.ts → plugins/woocommerce-blocks/tests/e2e/tests/product-collection/collections.block_theme.spec.ts
View File

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

2
plugins/woocommerce-blocks/tests/e2e/tests/product-collection/inspector-controls/inspector-controls.block_theme.spec.ts → plugins/woocommerce-blocks/tests/e2e/tests/product-collection/inspector-controls.block_theme.spec.ts
View File

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

362
plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts
View File

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

359
plugins/woocommerce-blocks/tests/e2e/tests/product-collection/register-product-collection-tester.block_theme.spec.ts Normal file
View File

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

4
plugins/woocommerce/changelog/test-50444-register-product-collection-tester Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: tweak
Move register product collection tester e2e tests from product collection file to its own file