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

Use canvas param instead of manually entering edit mode

This commit is contained in:
Bart Kalisz 2024-04-15 11:42:51 +02:00
parent 25bc03f893
commit 5e6cc17154
23 changed files with 68 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/woocommerce-blocks/tests/e2e/tests/add-to-cart-form/add-to-cart-form.block_theme.spec.ts
View File

@ -62,8 +62,8 @@ test.describe( `${ blockData.name } Block`, () => {
await admin.visitSiteEditor( {
postId: `woocommerce/woocommerce//archive-product`,
postType: 'wp_template',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
await editor.insertBlock( { name: 'woocommerce/single-product' } );
@ -89,8 +89,8 @@ test.describe( `${ blockData.name } Block`, () => {
await admin.visitSiteEditor( {
postId: `woocommerce/woocommerce//single-product`,
postType: 'wp_template',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
await editor.setContent( '' );

4
plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-block.merchant.block_theme.spec.ts
View File

@ -25,12 +25,12 @@ test.describe( 'Merchant → Cart', () => {
const blockSelectorInEditor = blockData.selectors.editor.block as string;
test.describe( 'in page editor', () => {
test.beforeEach( async ( { editorUtils, admin } ) => {
test.beforeEach( async ( { admin } ) => {
await admin.visitSiteEditor( {
postId: 'woocommerce/woocommerce//page-cart',
postType: 'wp_template',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
} );
test( 'renders without crashing and can only be inserted once', async ( {

9
plugins/woocommerce-blocks/tests/e2e/tests/checkout/checkout-block.merchant.block_theme.spec.ts
View File

@ -42,12 +42,13 @@ test.describe( 'Merchant → Checkout', () => {
// `as string` is safe here because we know the variable is a string, it is defined above.
const blockSelectorInEditor = blockData.selectors.editor.block as string;
test.beforeEach( async ( { editorUtils, admin, editor } ) => {
test.beforeEach( async ( { admin, editor } ) => {
await admin.visitSiteEditor( {
postId: 'woocommerce/woocommerce//page-checkout',
postType: 'wp_template',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
await editor.openDocumentSettingsSidebar();
} );
@ -147,8 +148,8 @@ test.describe( 'Merchant → Checkout', () => {
await admin.visitSiteEditor( {
postId: 'woocommerce/woocommerce//page-checkout',
postType: 'wp_template',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
await editor.openDocumentSettingsSidebar();
await editor.selectBlocks(
blockSelectorInEditor +
@ -190,8 +191,8 @@ test.describe( 'Merchant → Checkout', () => {
await admin.visitSiteEditor( {
postId: 'woocommerce/woocommerce//page-checkout',
postType: 'wp_template',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
await editor.openDocumentSettingsSidebar();
await editor.selectBlocks(
blockSelectorInEditor +

50
plugins/woocommerce-blocks/tests/e2e/tests/checkout/checkout-block.shopper.block_theme.side_effects.spec.ts
View File

@ -237,33 +237,31 @@ test.describe( 'Shopper → Shipping and Billing Addresses', () => {
// `as string` is safe here because we know the variable is a string, it is defined above.
const blockSelectorInEditor = blockData.selectors.editor.block as string;
test.beforeEach(
async ( { editor, frontendUtils, admin, editorUtils, page } ) => {
await admin.visitSiteEditor( {
postId: 'woocommerce/woocommerce//page-checkout',
postType: 'wp_template',
} );
await editorUtils.enterEditMode();
await editor.openDocumentSettingsSidebar();
await editor.selectBlocks(
blockSelectorInEditor +
' [data-type="woocommerce/checkout-shipping-address-block"]'
);
test.beforeEach( async ( { editor, admin, editorUtils, page } ) => {
await admin.visitSiteEditor( {
postId: 'woocommerce/woocommerce//page-checkout',
postType: 'wp_template',
canvas: 'edit',
} );
await editor.openDocumentSettingsSidebar();
await editor.selectBlocks(
blockSelectorInEditor +
' [data-type="woocommerce/checkout-shipping-address-block"]'
);
const checkbox = page.getByRole( 'checkbox', {
name: 'Company',
exact: true,
} );
await checkbox.check();
await expect( checkbox ).toBeChecked();
await expect(
editor.canvas.locator(
'div.wc-block-components-address-form__company'
)
).toBeVisible();
await editorUtils.saveSiteEditorEntities();
}
);
const checkbox = page.getByRole( 'checkbox', {
name: 'Company',
exact: true,
} );
await checkbox.check();
await expect( checkbox ).toBeChecked();
await expect(
editor.canvas.locator(
'div.wc-block-components-address-form__company'
)
).toBeVisible();
await editorUtils.saveSiteEditorEntities();
} );
test( 'User can add postcodes for different countries', async ( {
frontendUtils,

2
plugins/woocommerce-blocks/tests/e2e/tests/checkout/order-confirmation.block_theme.side_effects.spec.ts
View File

@ -44,8 +44,8 @@ test.describe( 'Shopper → Order Confirmation (logged in user)', () => {
await admin.visitSiteEditor( {
postId: 'woocommerce/woocommerce//order-confirmation',
postType: 'wp_template',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
await editorUtils.transformIntoBlocks();
} );

5
plugins/woocommerce-blocks/tests/e2e/tests/classic-template/classic-template.block_theme.side_effects.spec.ts
View File

@ -62,8 +62,8 @@ for ( const { templateTitle, slug } of Object.values( templates ) ) {
await admin.visitSiteEditor( {
postId: `woocommerce/woocommerce//${ slug }`,
postType: 'wp_template',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
const block = await editorUtils.getBlockByName( blockData.name );
await expect( block ).toBeVisible();
@ -75,14 +75,13 @@ for ( const { templateTitle, slug } of Object.values( templates ) ) {
test.skip( `is rendered on ${ templateTitle } template - frontend side`, async ( {
admin,
editor,
editorUtils,
page,
} ) => {
await admin.visitSiteEditor( {
postId: `woocommerce/woocommerce//${ slug }`,
postType: 'wp_template',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
await editor.insertBlock( {
name: 'core/paragraph',
attributes: { content: 'Hello World' },

4
plugins/woocommerce-blocks/tests/e2e/tests/local-pickup/local-pickup.merchant.block_theme.side_effects.spec.ts
View File

@ -37,8 +37,8 @@ test.describe( 'Merchant → Local Pickup Settings', () => {
await admin.visitSiteEditor( {
postId: 'woocommerce/woocommerce//page-checkout',
postType: 'wp_template',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
const block = await editorUtils.getBlockByName(
'woocommerce/checkout-shipping-method-block'
@ -73,8 +73,8 @@ test.describe( 'Merchant → Local Pickup Settings', () => {
await admin.visitSiteEditor( {
postId: 'woocommerce/woocommerce//page-checkout',
postType: 'wp_template',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
await expect(
editor.canvas.getByText( 'Edited from settings page' )

4
plugins/woocommerce-blocks/tests/e2e/tests/mini-cart/mini-cart-block.merchant.block_theme.side_effects.spec.ts
View File

@ -24,8 +24,8 @@ test.describe( 'Merchant → Mini Cart', () => {
await admin.visitSiteEditor( {
postId: `woocommerce/woocommerce//single-product`,
postType: 'wp_template',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
await editor.setContent( '' );
@ -40,8 +40,8 @@ test.describe( 'Merchant → Mini Cart', () => {
await admin.visitSiteEditor( {
postId: `woocommerce/woocommerce//single-product`,
postType: 'wp_template',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
await editorUtils.openGlobalBlockInserter();
await editorUtils.page

4
plugins/woocommerce-blocks/tests/e2e/tests/on-sale-badge/on-sale-badge-single-product-template.block_theme.side_effects.spec.ts
View File

@ -72,12 +72,12 @@ const getBoundingClientRect = async ( {
};
test.describe( `${ blockData.name }`, () => {
test.describe( `On the Single Product Template`, () => {
test.beforeEach( async ( { admin, editorUtils, editor } ) => {
test.beforeEach( async ( { admin, editor } ) => {
await admin.visitSiteEditor( {
postId: `woocommerce/woocommerce//${ blockData.slug }`,
postType: 'wp_template',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
await editor.setContent( '' );
} );

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

@ -953,8 +953,8 @@ test.describe( 'Product Collection', () => {
await admin.visitSiteEditor( {
postId: `woocommerce/woocommerce//taxonomy-product_cat`,
postType: 'wp_template',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
await editorUtils.insertBlockUsingGlobalInserter(
pageObject.BLOCK_NAME
);
@ -982,8 +982,8 @@ test.describe( 'Product Collection', () => {
await admin.visitSiteEditor( {
postId: `woocommerce/woocommerce//taxonomy-product_tag`,
postType: 'wp_template',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
await editorUtils.insertBlockUsingGlobalInserter(
pageObject.BLOCK_NAME
);

3
plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.page.ts
View File

@ -182,9 +182,8 @@ class ProductCollectionPage {
await this.admin.visitSiteEditor( {
postId: template,
postType: 'wp_template',
canvas: 'edit',
} );
await this.editorUtils.waitForSiteEditorFinishLoading();
await this.editorUtils.enterEditMode();
await this.editorUtils.replaceBlockByBlockName(
'core/query',
this.BLOCK_SLUG

4
plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image-next-previous/product-gallery-large-image-next-previous.block_theme.side_effects.spec.ts
View File

@ -87,12 +87,12 @@ const test = base.extend< { pageObject: ProductGalleryPage } >( {
} );
test.describe( `${ blockData.name }`, () => {
test.beforeEach( async ( { admin, editorUtils } ) => {
test.beforeEach( async ( { admin } ) => {
await admin.visitSiteEditor( {
postId: `woocommerce/woocommerce//${ blockData.slug }`,
postType: 'wp_template',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
} );
// eslint-disable-next-line playwright/no-skipped-test

9
plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image-next-previous/utils.ts
View File

@ -1,19 +1,14 @@
/**
* External dependencies
*/
import { EditorUtils } from '@woocommerce/e2e-utils';
import { Admin, Editor } from '@wordpress/e2e-test-utils-playwright';
export const addBlock = async (
admin: Admin,
editor: Editor,
editorUtils: EditorUtils
) => {
export const addBlock = async ( admin: Admin, editor: Editor ) => {
await admin.visitSiteEditor( {
postId: `woocommerce/woocommerce//single-product`,
postType: 'wp_template',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
await editor.insertBlock( {
name: 'woocommerce/product-gallery',

4
plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image/product-gallery-large-image.block_theme.side_effects.spec.ts
View File

@ -31,12 +31,12 @@ const test = base.extend< { pageObject: ProductGalleryPage } >( {
} );
test.describe( `${ blockData.name }`, () => {
test.beforeEach( async ( { admin, editorUtils, editor } ) => {
test.beforeEach( async ( { admin, editor } ) => {
await admin.visitSiteEditor( {
postId: `woocommerce/woocommerce//${ blockData.slug }`,
postType: 'wp_template',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
await editor.openDocumentSettingsSidebar();
} );

4
plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-pager/product-gallery-pager.block_theme.side_effects.spec.ts
View File

@ -44,12 +44,12 @@ const test = base.extend< { pageObject: ProductGalleryPage } >( {
} );
test.describe( `${ blockData.name }`, () => {
test.beforeEach( async ( { admin, editorUtils, editor } ) => {
test.beforeEach( async ( { admin, editor } ) => {
await admin.visitSiteEditor( {
postId: `woocommerce/woocommerce//${ blockData.slug }`,
postType: 'wp_template',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
await editor.openDocumentSettingsSidebar();
} );

4
plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-thumbnails/product-gallery-thumbnails.block_theme.side_effects.spec.ts
View File

@ -48,12 +48,12 @@ const test = base.extend< { pageObject: ProductGalleryPage } >( {
},
} );
test.describe( `${ blockData.name }`, () => {
test.beforeEach( async ( { admin, editorUtils } ) => {
test.beforeEach( async ( { admin } ) => {
await admin.visitSiteEditor( {
postId: `woocommerce/woocommerce//${ blockData.slug }`,
postType: 'wp_template',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
} );
test( 'Renders Product Gallery Thumbnails block on the editor and frontend side', async ( {

11
plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-thumbnails/utils.ts
View File

@ -1,24 +1,17 @@
/**
* External dependencies
*/
import { EditorUtils } from '@woocommerce/e2e-utils';
import { Admin, Editor } from '@wordpress/e2e-test-utils-playwright';
// Define a utility function to add the "woocommerce/product-gallery" block to the editor
export const addBlock = async (
admin: Admin,
editor: Editor,
editorUtils: EditorUtils
) => {
export const addBlock = async ( admin: Admin, editor: Editor ) => {
// Visit the site editor for the specific product page
await admin.visitSiteEditor( {
postId: `woocommerce/woocommerce//single-product`,
postType: 'wp_template',
canvas: 'edit',
} );
// Enter the edit mode
await editorUtils.enterEditMode();
// Insert the "woocommerce/product-gallery" block
await editor.insertBlock( {
name: 'woocommerce/product-gallery',

6
plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.side_effects.spec.ts
View File

@ -83,12 +83,12 @@ const getThumbnailImageIdByNth = async (
};
test.describe( `${ blockData.name }`, () => {
test.beforeEach( async ( { admin, editorUtils } ) => {
test.beforeEach( async ( { admin } ) => {
await admin.visitSiteEditor( {
postId: `woocommerce/woocommerce//${ blockData.slug }`,
postType: 'wp_template',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
} );
test.describe( 'with thumbnails', () => {
@ -532,8 +532,8 @@ test.describe( `${ blockData.name }`, () => {
await admin.visitSiteEditor( {
postId: `woocommerce/woocommerce//product-gallery`,
postType: 'wp_template_part',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
await editorUtils.openGlobalBlockInserter();
await page.getByRole( 'tab', { name: 'Blocks' } ).click();
const productGalleryBlockOption = page

5
plugins/woocommerce-blocks/tests/e2e/tests/related-products/related-products.block_theme.spec.ts
View File

@ -32,13 +32,12 @@ test.describe( `${ blockData.name } Block`, () => {
test( "can't be added in the Post Editor - Product Catalog Template", async ( {
admin,
editor,
editorUtils,
} ) => {
await admin.visitSiteEditor( {
postId: `woocommerce/woocommerce//archive-product`,
postType: 'wp_template',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
try {
await editor.insertBlock( { name: blockData.slug } );
@ -55,8 +54,8 @@ test.describe( `${ blockData.name } Block`, () => {
await admin.visitSiteEditor( {
postId: `woocommerce/woocommerce//single-product`,
postType: 'wp_template',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
await editor.setContent( '' );

7
plugins/woocommerce-blocks/tests/e2e/tests/templates/cart-template.block_theme.spec.ts
View File

@ -11,13 +11,12 @@ test.describe( 'Test the cart template', async () => {
test( 'Template can be opened in the site editor', async ( {
admin,
page,
editorUtils,
} ) => {
await admin.visitSiteEditor( {
postId: templatePath,
postType: templateType,
canvas: 'edit',
} );
await editorUtils.enterEditMode();
await expect(
page
.frameLocator( 'iframe[title="Editor canvas"i]' )
@ -37,7 +36,6 @@ test.describe( 'Test the cart template', async () => {
.getByRole( 'button', { name: 'Cart', exact: true } )
.click();
await editorUtils.enterEditMode();
await expect(
editor.canvas.locator( 'h1:has-text("Cart")' ).first()
).toBeVisible();
@ -66,14 +64,13 @@ test.describe( 'Test the cart template', async () => {
test.describe( 'Test editing the cart template', async () => {
test( 'Merchant can transform shortcode block into blocks', async ( {
admin,
editorUtils,
editor,
} ) => {
await admin.visitSiteEditor( {
postId: templatePath,
postType: templateType,
canvas: 'edit',
} );
await editorUtils.enterEditMode();
await editor.setContent(
'<!-- wp:woocommerce/classic-shortcode {"shortcode":"cart"} /-->'
);

6
plugins/woocommerce-blocks/tests/e2e/tests/templates/checkout-template.block_theme.spec.ts
View File

@ -11,13 +11,12 @@ test.describe( 'Test the checkout template', async () => {
test( 'Template can be opened in the site editor', async ( {
admin,
page,
editorUtils,
} ) => {
await admin.visitSiteEditor( {
postId: templatePath,
postType: templateType,
canvas: 'edit',
} );
await editorUtils.enterEditMode();
await expect(
page
.frameLocator( 'iframe[title="Editor canvas"i]' )
@ -75,14 +74,13 @@ test.describe( 'Test the checkout template', async () => {
test.describe( 'Test editing the checkout template', async () => {
test( 'Merchant can transform shortcode block into blocks', async ( {
admin,
editorUtils,
editor,
} ) => {
await admin.visitSiteEditor( {
postId: templatePath,
postType: templateType,
canvas: 'edit',
} );
await editorUtils.enterEditMode();
await editor.setContent(
'<!-- wp:woocommerce/classic-shortcode {"shortcode":"checkout"} /-->'
);

2
plugins/woocommerce-blocks/tests/e2e/tests/templates/order-confirmation.block_theme.spec.ts
View File

@ -12,8 +12,8 @@ test.describe( 'Test the order confirmation template', async () => {
await admin.visitSiteEditor( {
postId: 'woocommerce/woocommerce//order-confirmation',
postType: 'wp_template',
canvas: 'edit',
} );
await editorUtils.enterEditMode();
await editorUtils.transformIntoBlocks();
await expect(
page

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

@ -48,9 +48,8 @@ for ( const testData of testToRun ) {
await admin.visitSiteEditor( {
postId: `${ BLOCK_THEME_WITH_TEMPLATES_SLUG }//${ testData.templatePath }`,
postType: testData.templateType,
canvas: 'edit',
} );
await editorUtils.enterEditMode();
await editorUtils.waitForSiteEditorFinishLoading();
await editorUtils.editor.insertBlock( {
name: 'core/paragraph',
attributes: { content: userText },