Move Cart, Checkout and Order Confirmation template customization tests to the parameterized tests file (#43992)

* Move Cart, Checkout and Order Confirmation template customization tests to the parameterized tests file

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Clean up order-confirmation.block_theme.spec.ts file

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Albert Juhé Lluveras 2024-01-24 15:26:07 +01:00 committed by GitHub
parent 0aebb139c2
commit 081f9d303b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 76 additions and 117 deletions

View File

@ -6,7 +6,6 @@ import { test, expect } from '@woocommerce/e2e-playwright-utils';
const permalink = '/cart';
const templatePath = 'woocommerce/woocommerce//page-cart';
const templateType = 'wp_template';
const userText = 'Hello World in the template';
test.describe( 'Test the cart template', async () => {
test( 'Template can be opened in the site editor', async ( {
@ -98,24 +97,4 @@ test.describe( 'Test editing the cart template', async () => {
.first()
).toBeVisible();
} );
test( 'Template can be modified', async ( {
admin,
editorUtils,
page,
} ) => {
await admin.visitSiteEditor( {
postId: templatePath,
postType: templateType,
} );
await editorUtils.enterEditMode();
await editorUtils.closeWelcomeGuideModal();
await editorUtils.editor.insertBlock( {
name: 'core/paragraph',
attributes: { content: userText },
} );
await editorUtils.saveTemplate();
await page.goto( permalink, { waitUntil: 'domcontentloaded' } );
await expect( page.getByText( userText ).first() ).toBeVisible();
} );
} );

View File

@ -6,7 +6,6 @@ import { test, expect } from '@woocommerce/e2e-playwright-utils';
const permalink = '/checkout';
const templatePath = 'woocommerce/woocommerce//page-checkout';
const templateType = 'wp_template';
const userText = 'Hello World in the template';
test.describe( 'Test the checkout template', async () => {
test( 'Template can be opened in the site editor', async ( {
@ -100,29 +99,4 @@ test.describe( 'Test editing the checkout template', async () => {
editor.canvas.locator( 'button:has-text("Place order")' ).first()
).toBeVisible();
} );
test( 'Template can be modified', async ( {
admin,
editorUtils,
frontendUtils,
} ) => {
await admin.visitSiteEditor( {
postId: templatePath,
postType: templateType,
} );
await editorUtils.enterEditMode();
await editorUtils.closeWelcomeGuideModal();
await editorUtils.editor.insertBlock( {
name: 'core/paragraph',
attributes: { content: userText },
} );
await editorUtils.saveTemplate();
await frontendUtils.goToShop();
await frontendUtils.emptyCart();
await frontendUtils.addToCart();
await frontendUtils.goToCheckout();
await expect(
frontendUtils.page.getByText( userText ).first()
).toBeVisible();
} );
} );

View File

@ -1,30 +1,7 @@
/**
* External dependencies
*/
import { test as base, expect } from '@woocommerce/e2e-playwright-utils';
/**
* Internal dependencies
*/
import { CheckoutPage } from '../checkout/checkout.page';
import {
FREE_SHIPPING_NAME,
FREE_SHIPPING_PRICE,
SIMPLE_PHYSICAL_PRODUCT_NAME,
} from '../checkout/constants';
const test = base.extend< { pageObject: CheckoutPage } >( {
pageObject: async ( { page }, use ) => {
const pageObject = new CheckoutPage( {
page,
} );
await use( pageObject );
},
} );
const templatePath = 'woocommerce/woocommerce//order-confirmation';
const templateType = 'wp_template';
const userText = 'Hello World in the template';
import { test, expect } from '@woocommerce/e2e-playwright-utils';
test.describe( 'Test the order confirmation template', async () => {
test( 'Template can be opened in the site editor', async ( {
@ -85,37 +62,4 @@ test.describe( 'Test the order confirmation template', async () => {
} )
).toBeVisible();
} );
test( 'Template can be modified', async ( {
page,
admin,
editorUtils,
frontendUtils,
pageObject,
} ) => {
await admin.visitSiteEditor( {
postId: templatePath,
postType: templateType,
} );
await editorUtils.enterEditMode();
await editorUtils.editor.insertBlock( {
name: 'core/paragraph',
attributes: { content: userText },
} );
await editorUtils.saveTemplate();
await frontendUtils.emptyCart();
await frontendUtils.goToShop();
await frontendUtils.addToCart( SIMPLE_PHYSICAL_PRODUCT_NAME );
await frontendUtils.goToCheckout();
await expect(
await pageObject.selectAndVerifyShippingOption(
FREE_SHIPPING_NAME,
FREE_SHIPPING_PRICE
)
).toBe( true );
await pageObject.fillInCheckoutWithTestData();
await pageObject.placeOrder();
await expect( page.getByText( userText ).first() ).toBeVisible();
} );
} );

View File

@ -2,22 +2,46 @@
* External dependencies
*/
import { test, expect } from '@woocommerce/e2e-playwright-utils';
import type { Page, Response } from '@playwright/test';
import type { FrontendUtils } from '@woocommerce/e2e-utils';
const templateUserCustomizationTests = [
/**
* Internal dependencies
*/
import { SIMPLE_VIRTUAL_PRODUCT_NAME } from '../checkout/constants';
import { CheckoutPage } from '../checkout/checkout.page';
type TemplateCustomizationTest = {
visitPage: ( props: {
frontendUtils: FrontendUtils;
page: Page;
} ) => Promise< void | Response | null >;
templateName: string;
templatePath: string;
templateType: string;
defaultTemplate?: {
templateName: string;
templatePath: string;
};
};
const templateUserCustomizationTests: TemplateCustomizationTest[] = [
{
permalink: '/shop',
visitPage: async ( { frontendUtils } ) =>
await frontendUtils.goToShop(),
templateName: 'Product Catalog',
templatePath: 'woocommerce/woocommerce//archive-product',
templateType: 'wp_template',
},
{
permalink: '/?s=shirt&post_type=product',
visitPage: async ( { page } ) =>
await page.goto( '/?s=shirt&post_type=product' ),
templateName: 'Product Search Results',
templatePath: 'woocommerce/woocommerce//product-search-results',
templateType: 'wp_template',
},
{
permalink: '/color/blue',
visitPage: async ( { page } ) => await page.goto( '/color/blue' ),
templateName: 'Products by Attribute',
templatePath: 'woocommerce/woocommerce//taxonomy-product_attribute',
templateType: 'wp_template',
@ -27,7 +51,8 @@ const templateUserCustomizationTests = [
},
},
{
permalink: '/product-category/clothing',
visitPage: async ( { page } ) =>
await page.goto( '/product-category/clothing' ),
templateName: 'Products by Category',
templatePath: 'woocommerce/woocommerce//taxonomy-product_cat',
templateType: 'wp_template',
@ -37,7 +62,8 @@ const templateUserCustomizationTests = [
},
},
{
permalink: '/product-tag/recommended/',
visitPage: async ( { page } ) =>
await page.goto( '/product-tag/recommended/' ),
templateName: 'Products by Tag',
templatePath: 'woocommerce/woocommerce//taxonomy-product_tag',
templateType: 'wp_template',
@ -47,11 +73,41 @@ const templateUserCustomizationTests = [
},
},
{
permalink: '/product/hoodie',
visitPage: async ( { page } ) => await page.goto( '/product/hoodie' ),
templateName: 'Single Product',
templatePath: 'woocommerce/woocommerce//single-product',
templateType: 'wp_template',
},
{
visitPage: async ( { frontendUtils } ) =>
await frontendUtils.goToCart(),
templateName: 'Page: Cart',
templatePath: 'woocommerce/woocommerce//page-cart',
templateType: 'wp_template',
},
{
visitPage: async ( { frontendUtils } ) => {
await frontendUtils.goToShop();
await frontendUtils.addToCart();
await frontendUtils.goToCheckout();
},
templateName: 'Page: Checkout',
templatePath: 'woocommerce/woocommerce//page-checkout',
templateType: 'wp_template',
},
{
visitPage: async ( { frontendUtils, page } ) => {
const checkoutPage = new CheckoutPage( { page } );
await frontendUtils.goToShop();
await frontendUtils.addToCart( SIMPLE_VIRTUAL_PRODUCT_NAME );
await frontendUtils.goToCheckout();
await checkoutPage.fillInCheckoutWithTestData();
await checkoutPage.placeOrder();
},
templateName: 'Order Confirmation',
templatePath: 'woocommerce/woocommerce//order-confirmation',
templateType: 'wp_template',
},
];
const userText = 'Hello World in the template';
const defaultTemplateUserText = 'Hello World in the default template';
@ -60,6 +116,7 @@ templateUserCustomizationTests.forEach( ( testData ) => {
test.describe( `${ testData.templateName } template`, async () => {
test( 'can be modified and reverted', async ( {
admin,
frontendUtils,
editorUtils,
page,
} ) => {
@ -75,7 +132,7 @@ templateUserCustomizationTests.forEach( ( testData ) => {
attributes: { content: userText },
} );
await editorUtils.saveTemplate();
await page.goto( testData.permalink );
await testData.visitPage( { frontendUtils, page } );
await expect( page.getByText( userText ).first() ).toBeVisible();
// Verify the edition can be reverted.
@ -86,19 +143,20 @@ templateUserCustomizationTests.forEach( ( testData ) => {
await editorUtils.revertTemplateCustomizations(
testData.templateName
);
await page.goto( testData.permalink );
await testData.visitPage( { frontendUtils, page } );
await expect( page.getByText( userText ) ).toHaveCount( 0 );
} );
if ( testData.defaultTemplate ) {
test( `defaults to the ${ testData.defaultTemplate.templateName } template`, async ( {
admin,
frontendUtils,
editorUtils,
page,
} ) => {
// Edit default template and verify changes are visible.
await admin.visitSiteEditor( {
postId: testData.defaultTemplate.templatePath,
postId: testData.defaultTemplate?.templatePath || '',
postType: testData.templateType,
} );
await editorUtils.enterEditMode();
@ -110,7 +168,7 @@ templateUserCustomizationTests.forEach( ( testData ) => {
},
} );
await editorUtils.saveTemplate();
await page.goto( testData.permalink );
await testData.visitPage( { frontendUtils, page } );
await expect(
page.getByText( defaultTemplateUserText ).first()
).toBeVisible();
@ -121,9 +179,9 @@ templateUserCustomizationTests.forEach( ( testData ) => {
`path=/${ testData.templateType }/all`
);
await editorUtils.revertTemplateCustomizations(
testData.defaultTemplate.templateName
testData.defaultTemplate?.templateName || ''
);
await page.goto( testData.permalink );
await testData.visitPage( { frontendUtils, page } );
await expect(
page.getByText( defaultTemplateUserText )
).toHaveCount( 0 );

View File

@ -0,0 +1,4 @@
Significance: patch
Type: update
Comment: Move Cart, Checkout and Order Confirmation template customization tests to the parameterized tests file