diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/templates/single-product-template.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/templates/single-product-template.block_theme.spec.ts index 5fa0725beb0..f101e96cd44 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/templates/single-product-template.block_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/templates/single-product-template.block_theme.spec.ts @@ -3,16 +3,69 @@ */ import { test, expect } from '@woocommerce/e2e-playwright-utils'; -// Sunglasses are defined as requering password in /bin/scripts/products.sh. -const productWithPasswordPermalink = '/product/sunglasses/'; - test.describe( 'Single Product template', async () => { test( 'shows password form in products protected with password', async ( { page, } ) => { - await page.goto( productWithPasswordPermalink ); + // Sunglasses are defined as requiring password in /bin/scripts/products.sh. + await page.goto( '/product/sunglasses/' ); await expect( page.getByText( 'This content is password protected.' ).first() ).toBeVisible(); } ); + + test( 'loads the Single Product template for a specific product', async ( { + admin, + editorUtils, + page, + } ) => { + const testData = { + productName: 'Belt', + permalink: '/product/belt', + templateName: 'Product: Belt', + templatePath: 'single-product-belt', + templateType: 'wp_template', + }; + const userText = 'Hello World in the Belt template'; + + // Create the specific product template. + await admin.visitAdminPage( + 'site-editor.php', + `path=/${ testData.templateType }` + ); + await page.getByLabel( 'Add New Template' ).click(); + await page + .getByRole( 'button', { name: 'Single item: Product' } ) + .click(); + await page + .getByPlaceholder( 'Search products' ) + .fill( testData.productName ); + await page + .getByRole( 'option', { name: testData.productName } ) + .click(); + await editorUtils.closeWelcomeGuideModal(); + await page.getByLabel( 'Fallback content' ).click(); + + // Edit the template. + await editorUtils.editor.insertBlock( { + name: 'core/paragraph', + attributes: { content: userText }, + } ); + await editorUtils.saveTemplate(); + + // Verify edits are visible. + await page.goto( testData.permalink ); + await expect( page.getByText( userText ).first() ).toBeVisible(); + + // Revert edition. + await admin.visitAdminPage( + 'site-editor.php', + `path=/${ testData.templateType }/all` + ); + await editorUtils.revertTemplateCreation( testData.templateName ); + await page.goto( testData.permalink ); + + // Verify the edits are no longer visible. + await expect( page.getByText( userText ) ).toHaveCount( 0 ); + } ); } ); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/templates/single-product-template.block_theme_with_templates.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/templates/single-product-template.block_theme_with_templates.spec.ts new file mode 100644 index 00000000000..76e250aa938 --- /dev/null +++ b/plugins/woocommerce-blocks/tests/e2e/tests/templates/single-product-template.block_theme_with_templates.spec.ts @@ -0,0 +1,56 @@ +/** + * External dependencies + */ +import { test, expect } from '@woocommerce/e2e-playwright-utils'; +import { BLOCK_THEME_WITH_TEMPLATES_SLUG } from '@woocommerce/e2e-utils'; + +const testData = { + permalink: '/product/belt', + templateName: 'Product: Belt', + templatePath: 'single-product-belt', + templateType: 'wp_template', +}; + +const userText = 'Hello World in the Belt template'; +const themeTemplateText = 'Single Product Belt template loaded from theme'; + +test.describe( 'Single Product Template', async () => { + test( 'loads the theme template for a specific product using the product slug and it can be customized', async ( { + admin, + editorUtils, + page, + } ) => { + // Edit the theme template. + await admin.visitSiteEditor( { + postId: `${ BLOCK_THEME_WITH_TEMPLATES_SLUG }//${ testData.templatePath }`, + postType: testData.templateType, + } ); + await editorUtils.enterEditMode(); + await editorUtils.closeWelcomeGuideModal(); + await editorUtils.editor.insertBlock( { + name: 'core/paragraph', + attributes: { content: userText }, + } ); + await editorUtils.saveTemplate(); + await page.goto( testData.permalink ); + + // Verify edits are visible in the frontend. + await expect( + page.getByText( themeTemplateText ).first() + ).toBeVisible(); + await expect( page.getByText( userText ).first() ).toBeVisible(); + + // Revert edition and verify the template from the theme is used. + await admin.visitAdminPage( + 'site-editor.php', + `path=/${ testData.templateType }/all` + ); + await editorUtils.revertTemplateCustomizations( testData.templateName ); + await page.goto( testData.permalink ); + + await expect( + page.getByText( themeTemplateText ).first() + ).toBeVisible(); + await expect( page.getByText( userText ) ).toHaveCount( 0 ); + } ); +} ); diff --git a/plugins/woocommerce-blocks/tests/e2e/utils/editor/editor-utils.page.ts b/plugins/woocommerce-blocks/tests/e2e/utils/editor/editor-utils.page.ts index 75e1eaffa1f..53557c821a7 100644 --- a/plugins/woocommerce-blocks/tests/e2e/utils/editor/editor-utils.page.ts +++ b/plugins/woocommerce-blocks/tests/e2e/utils/editor/editor-utils.page.ts @@ -372,6 +372,27 @@ export class EditorUtils { .waitFor(); } + async revertTemplateCreation( templateName: string ) { + const templateRow = this.page.getByRole( 'row', { + name: templateName, + } ); + templateRow.getByRole( 'button', { name: 'Actions' } ).click(); + await this.page + .getByRole( 'menuitem', { + name: 'Delete', + } ) + .click(); + await this.page + .getByRole( 'button', { + name: 'Delete', + } ) + .click(); + await this.page + .getByRole( 'button', { name: 'Dismiss this notice' } ) + .getByText( `"${ templateName }" deleted.` ) + .waitFor(); + } + async revertTemplateCustomizations( templateName: string ) { const templateRow = this.page.getByRole( 'row', { name: templateName, diff --git a/plugins/woocommerce-blocks/tests/mocks/theme-with-woo-templates/block-templates/single-product-belt.html b/plugins/woocommerce-blocks/tests/mocks/theme-with-woo-templates/block-templates/single-product-belt.html new file mode 100644 index 00000000000..bbc0b8137f8 --- /dev/null +++ b/plugins/woocommerce-blocks/tests/mocks/theme-with-woo-templates/block-templates/single-product-belt.html @@ -0,0 +1,10 @@ + + +
Single Product Belt template loaded from theme
+ + +