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

Open templates from list instead of loading the URL in block templates e2e tests (#44774) 

* Open templates from list instead of loading the URL in block templates e2e tests

* Typo

* Clean up

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

* Make sure correct template is loaded

* Create a TemplateType type to avoid having to define it in several places

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Albert Juhé Lluveras 2024-02-20 10:35:27 +01:00 committed by GitHub
parent 7f01490fd7
commit 484398cfe1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 99 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
plugins/woocommerce-blocks/tests/e2e/tests/templates/constants.ts
View File

@ -9,6 +9,7 @@ import type { FrontendUtils } from '@woocommerce/e2e-utils';
*/
import { SIMPLE_VIRTUAL_PRODUCT_NAME } from '../checkout/constants';
import { CheckoutPage } from '../checkout/checkout.page';
import type { TemplateType } from '../../utils/types';
type TemplateCustomizationTest = {
visitPage: ( props: {
@ -17,12 +18,12 @@ type TemplateCustomizationTest = {
} ) => Promise< void | Response | null >;
templateName: string;
templatePath: string;
templateType: 'wp_template' | 'wp_template_part';
templateType: TemplateType;
fallbackTemplate?: {
templateName: string;
templatePath: string;
};
canBeOverridenByThemes: boolean;
canBeOverriddenByThemes: boolean;
};
export const CUSTOMIZABLE_WC_TEMPLATES: TemplateCustomizationTest[] = [
@ -32,7 +33,7 @@ export const CUSTOMIZABLE_WC_TEMPLATES: TemplateCustomizationTest[] = [
templateName: 'Product Catalog',
templatePath: 'archive-product',
templateType: 'wp_template',
canBeOverridenByThemes: true,
canBeOverriddenByThemes: true,
},
{
visitPage: async ( { page } ) =>
@ -40,7 +41,7 @@ export const CUSTOMIZABLE_WC_TEMPLATES: TemplateCustomizationTest[] = [
templateName: 'Product Search Results',
templatePath: 'product-search-results',
templateType: 'wp_template',
canBeOverridenByThemes: true,
canBeOverriddenByThemes: true,
},
{
visitPage: async ( { page } ) => await page.goto( '/color/blue' ),
@ -51,7 +52,7 @@ export const CUSTOMIZABLE_WC_TEMPLATES: TemplateCustomizationTest[] = [
templateName: 'Product Catalog',
templatePath: 'archive-product',
},
canBeOverridenByThemes: true,
canBeOverriddenByThemes: true,
},
{
visitPage: async ( { page } ) =>
@ -63,7 +64,7 @@ export const CUSTOMIZABLE_WC_TEMPLATES: TemplateCustomizationTest[] = [
templateName: 'Product Catalog',
templatePath: 'archive-product',
},
canBeOverridenByThemes: true,
canBeOverriddenByThemes: true,
},
{
visitPage: async ( { page } ) =>
@ -75,14 +76,14 @@ export const CUSTOMIZABLE_WC_TEMPLATES: TemplateCustomizationTest[] = [
templateName: 'Product Catalog',
templatePath: 'archive-product',
},
canBeOverridenByThemes: true,
canBeOverriddenByThemes: true,
},
{
visitPage: async ( { page } ) => await page.goto( '/product/hoodie' ),
templateName: 'Single Product',
templatePath: 'single-product',
templateType: 'wp_template',
canBeOverridenByThemes: true,
canBeOverriddenByThemes: true,
},
{
visitPage: async ( { frontendUtils } ) => {
@ -97,7 +98,7 @@ export const CUSTOMIZABLE_WC_TEMPLATES: TemplateCustomizationTest[] = [
templateName: 'Mini-Cart',
templatePath: 'mini-cart',
templateType: 'wp_template_part',
canBeOverridenByThemes: true,
canBeOverriddenByThemes: true,
},
{
visitPage: async ( { frontendUtils } ) =>
@ -105,7 +106,7 @@ export const CUSTOMIZABLE_WC_TEMPLATES: TemplateCustomizationTest[] = [
templateName: 'Page: Cart',
templatePath: 'page-cart',
templateType: 'wp_template',
canBeOverridenByThemes: true,
canBeOverriddenByThemes: true,
},
{
visitPage: async ( { frontendUtils } ) => {
@ -117,7 +118,7 @@ export const CUSTOMIZABLE_WC_TEMPLATES: TemplateCustomizationTest[] = [
templateName: 'Page: Checkout',
templatePath: 'page-checkout',
templateType: 'wp_template',
canBeOverridenByThemes: true,
canBeOverriddenByThemes: true,
},
{
visitPage: async ( { frontendUtils } ) => {
@ -133,7 +134,7 @@ export const CUSTOMIZABLE_WC_TEMPLATES: TemplateCustomizationTest[] = [
// automatically override the checkout header. That's because the
// Page: Checkout template still points to the default `checkout-header`
// from WooCommerce.
canBeOverridenByThemes: false,
canBeOverriddenByThemes: false,
},
{
visitPage: async ( { frontendUtils, page } ) => {
@ -147,7 +148,7 @@ export const CUSTOMIZABLE_WC_TEMPLATES: TemplateCustomizationTest[] = [
templateName: 'Order Confirmation',
templatePath: 'order-confirmation',
templateType: 'wp_template',
canBeOverridenByThemes: true,
canBeOverriddenByThemes: true,
},
];

18
plugins/woocommerce-blocks/tests/e2e/tests/templates/single-product-template.block_theme_with_templates.spec.ts
View File

@ -2,13 +2,17 @@
* External dependencies
*/
import { test, expect } from '@woocommerce/e2e-playwright-utils';
import { BLOCK_THEME_WITH_TEMPLATES_SLUG } from '@woocommerce/e2e-utils';
/**
* Internal dependencies
*/
import type { TemplateType } from '../../utils/types';
const testData = {
permalink: '/product/belt',
templateName: 'Single Product Belt',
templatePath: 'single-product-belt',
templateType: 'wp_template',
templateType: 'wp_template' as TemplateType,
};
const userText = 'Hello World in the Belt template';
@ -25,12 +29,10 @@ test.describe( 'Single Product Template', async () => {
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.visitTemplateEditor(
testData.templateName,
testData.templateType
);
await editorUtils.editor.insertBlock( {
name: 'core/paragraph',
attributes: { content: userText },

18
plugins/woocommerce-blocks/tests/e2e/tests/templates/template-customization.block_theme.side_effects.spec.ts
View File

@ -11,10 +11,10 @@ import {
/**
* Internal dependencies
*/
import { CUSTOMIZABLE_WC_TEMPLATES, WC_TEMPLATES_SLUG } from './constants';
import { CUSTOMIZABLE_WC_TEMPLATES } from './constants';
CUSTOMIZABLE_WC_TEMPLATES.forEach( ( testData ) => {
if ( ! testData.canBeOverridenByThemes ) {
if ( ! testData.canBeOverriddenByThemes ) {
return;
}
const userText = `Hello World in the ${ testData.templateName } template`;
@ -32,12 +32,10 @@ CUSTOMIZABLE_WC_TEMPLATES.forEach( ( testData ) => {
page,
} ) => {
// Edit the WooCommerce default template
await admin.visitSiteEditor( {
postId: `${ WC_TEMPLATES_SLUG }//${ testData.templatePath }`,
postType: testData.templateType,
} );
await editorUtils.enterEditMode();
await editorUtils.closeWelcomeGuideModal();
await editorUtils.visitTemplateEditor(
testData.templateName,
testData.templateType
);
await editorUtils.editor.insertBlock( {
name: 'core/paragraph',
attributes: { content: woocommerceTemplateUserText },
@ -48,7 +46,9 @@ CUSTOMIZABLE_WC_TEMPLATES.forEach( ( testData ) => {
`npm run wp-env run tests-cli -- wp theme activate ${ BLOCK_THEME_WITH_TEMPLATES_SLUG }`
);
// Edit the theme template.
// Edit the theme template. The theme template is not
// directly available from the UI, because the customized
// one takes priority, so we go directly to its URL.
await admin.visitSiteEditor( {
postId: `${ BLOCK_THEME_WITH_TEMPLATES_SLUG }//${ testData.templatePath }`,
postType: testData.templateType,

24
plugins/woocommerce-blocks/tests/e2e/tests/templates/template-customization.block_theme.spec.ts
View File

@ -6,7 +6,7 @@ import { test, expect } from '@woocommerce/e2e-playwright-utils';
/**
* Internal dependencies
*/
import { CUSTOMIZABLE_WC_TEMPLATES, WC_TEMPLATES_SLUG } from './constants';
import { CUSTOMIZABLE_WC_TEMPLATES } from './constants';
CUSTOMIZABLE_WC_TEMPLATES.forEach( ( testData ) => {
const userText = `Hello World in the ${ testData.templateName } template`;
@ -26,12 +26,10 @@ CUSTOMIZABLE_WC_TEMPLATES.forEach( ( testData ) => {
page,
} ) => {
// Verify the template can be edited.
await admin.visitSiteEditor( {
postId: `${ WC_TEMPLATES_SLUG }//${ testData.templatePath }`,
postType: testData.templateType,
} );
await editorUtils.enterEditMode();
await editorUtils.closeWelcomeGuideModal();
await editorUtils.visitTemplateEditor(
testData.templateName,
testData.templateType
);
await editorUtils.editor.insertBlock( {
name: 'core/paragraph',
attributes: { content: userText },
@ -68,14 +66,10 @@ CUSTOMIZABLE_WC_TEMPLATES.forEach( ( testData ) => {
page,
} ) => {
// Edit fallback template and verify changes are visible.
await admin.visitSiteEditor( {
postId: `${ WC_TEMPLATES_SLUG }//${
testData.fallbackTemplate?.templatePath || ''
}`,
postType: testData.templateType,
} );
await editorUtils.enterEditMode();
await editorUtils.closeWelcomeGuideModal();
await editorUtils.visitTemplateEditor(
testData.fallbackTemplate?.templateName || '',
testData.templateType
);
await editorUtils.editor.insertBlock( {
name: 'core/paragraph',
attributes: {

25
plugins/woocommerce-blocks/tests/e2e/tests/templates/template-customization.block_theme_with_templates.spec.ts
View File

@ -2,7 +2,6 @@
* External dependencies
*/
import { test, expect } from '@woocommerce/e2e-playwright-utils';
import { BLOCK_THEME_WITH_TEMPLATES_SLUG } from '@woocommerce/e2e-utils';
/**
* Internal dependencies
@ -10,7 +9,7 @@ import { BLOCK_THEME_WITH_TEMPLATES_SLUG } from '@woocommerce/e2e-utils';
import { CUSTOMIZABLE_WC_TEMPLATES } from './constants';
CUSTOMIZABLE_WC_TEMPLATES.forEach( ( testData ) => {
if ( ! testData.canBeOverridenByThemes ) {
if ( ! testData.canBeOverriddenByThemes ) {
return;
}
const userText = `Hello World in the ${ testData.templateName } template`;
@ -30,12 +29,10 @@ CUSTOMIZABLE_WC_TEMPLATES.forEach( ( testData ) => {
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.visitTemplateEditor(
testData.templateName,
testData.templateType
);
await editorUtils.editor.insertBlock( {
name: 'core/paragraph',
attributes: { content: userText },
@ -81,14 +78,10 @@ CUSTOMIZABLE_WC_TEMPLATES.forEach( ( testData ) => {
page,
} ) => {
// Edit default template and verify changes are not visible, as the theme template has priority.
await admin.visitSiteEditor( {
postId: `${ BLOCK_THEME_WITH_TEMPLATES_SLUG }//${
testData.fallbackTemplate?.templatePath || ''
}`,
postType: testData.templateType,
} );
await editorUtils.enterEditMode();
await editorUtils.closeWelcomeGuideModal();
await editorUtils.visitTemplateEditor(
testData.fallbackTemplate?.templateName || '',
testData.templateType
);
await editorUtils.editor.insertBlock( {
name: 'core/paragraph',
attributes: {

43
plugins/woocommerce-blocks/tests/e2e/utils/editor/editor-utils.page.ts
View File

@ -5,6 +5,11 @@ import { Page } from '@playwright/test';
import { Editor } from '@wordpress/e2e-test-utils-playwright';
import { BlockRepresentation } from '@wordpress/e2e-test-utils-playwright/build-types/editor/insert-block';
/**
* Internal dependencies
*/
import type { TemplateType } from '../../utils/types';
export class EditorUtils {
editor: Editor;
page: Page;
@ -372,6 +377,44 @@ export class EditorUtils {
.waitFor();
}
async visitTemplateEditor(
templateName: string,
templateType: TemplateType
) {
if ( templateType === 'wp_template_part' ) {
await this.page.goto(
`/wp-admin/site-editor.php?path=/${ templateType }/all`
);
const templateLink = this.page.getByRole( 'link', {
name: templateName,
exact: true,
} );
await templateLink.click();
} else {
await this.page.goto(
`/wp-admin/site-editor.php?path=/${ templateType }`
);
const templateButton = this.page.getByRole( 'button', {
name: templateName,
exact: true,
} );
await templateButton.click();
}
await this.enterEditMode();
await this.closeWelcomeGuideModal();
await this.waitForSiteEditorFinishLoading();
// Verify we are editing the correct template and it has the correct title.
const templateTypeName =
templateType === 'wp_template' ? 'template' : 'template part';
await this.page
.getByRole( 'heading', {
name: `Editing ${ templateTypeName }: ${ templateName }`,
} )
.waitFor();
}
async revertTemplateCreation( templateName: string ) {
const templateRow = this.page.getByRole( 'row' ).filter( {
has: this.page.getByRole( 'heading', {

1
plugins/woocommerce-blocks/tests/e2e/utils/types.ts Normal file
View File

@ -0,0 +1 @@
export type TemplateType = 'wp_template' | 'wp_template_part';

4
plugins/woocommerce/changelog/44774-update-e2e-tests-open-template-from-list Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: update
Comment: Open templates from list instead of loading the URL in block templates e2e tests