From 14830075e0f3e17d43f55a76587c163e1c22b35d Mon Sep 17 00:00:00 2001 From: Luigi Date: Thu, 21 Sep 2023 09:06:50 +0200 Subject: [PATCH] add E2E test --- .../add-to-cart-form.block_theme.spec.ts | 107 ++++++++++++++++++ .../related-products.block_theme.spec.ts | 67 +++++++++++ 2 files changed, 174 insertions(+) create mode 100644 tests/e2e/tests/add-to-cart-form/add-to-cart-form.block_theme.spec.ts create mode 100644 tests/e2e/tests/related-products/related-products.block_theme.spec.ts diff --git a/tests/e2e/tests/add-to-cart-form/add-to-cart-form.block_theme.spec.ts b/tests/e2e/tests/add-to-cart-form/add-to-cart-form.block_theme.spec.ts new file mode 100644 index 00000000000..f05e8bab38d --- /dev/null +++ b/tests/e2e/tests/add-to-cart-form/add-to-cart-form.block_theme.spec.ts @@ -0,0 +1,107 @@ +/** + * External dependencies + */ +import { BlockData } from '@woocommerce/e2e-types'; +import { test, expect } from '@woocommerce/e2e-playwright-utils'; +import { EditorUtils } from '@woocommerce/e2e-utils'; + +/** + * Internal dependencies + */ + +const blockData: BlockData = { + name: 'Add to Cart with Options', + slug: 'woocommerce/add-to-cart-form', + mainClass: '.wc-block-add-to-cart-form', + selectors: { + frontend: {}, + editor: {}, + }, +}; + +const configureSingleProductBlock = async ( editorUtils: EditorUtils ) => { + const singleProductBlock = await editorUtils.getBlockByName( + 'woocommerce/single-product' + ); + + await singleProductBlock.locator( 'input[type="radio"]' ).nth( 0 ).click(); + + await singleProductBlock.getByText( 'Done' ).click(); +}; + +test.describe( `${ blockData.name } Block`, () => { + test( 'can be added in the Post Editor only as inner block of the Single Product Block', async ( { + admin, + editor, + page, + editorUtils, + } ) => { + // Add to Cart with Options in the Post Editor is only available as inner block of the Single Product Block. + await admin.createNewPost( { legacyCanvas: true } ); + await editor.insertBlock( { name: 'woocommerce/single-product' } ); + await page.waitForResponse( + ( response ) => + response.url().includes( 'wc/store/v1/products' ) && + response.status() === 200 + ); + + await configureSingleProductBlock( editorUtils ); + + await expect( + await editorUtils.getBlockByName( blockData.slug ) + ).toBeVisible(); + + // When the block is registered as ancestor, the function doesn't throw an error, but the block is not added. + // So we check that only one instance of the block is present. + await editor.insertBlock( { name: blockData.slug } ); + await expect( + await editorUtils.getBlockByName( blockData.slug ) + ).toBeVisible(); + } ); + + test( 'can be added in the Site Editor only as inner block of the Single Product Block - Product Catalog Template', async ( { + admin, + editor, + editorUtils, + } ) => { + // Add to Cart with Options in the Site Editor is only available as inner block of the Single Product Block except for the Single Product Template + await admin.visitSiteEditor( { + postId: `woocommerce/woocommerce//archive-product`, + postType: 'wp_template', + } ); + await editorUtils.enterEditMode(); + + await configureSingleProductBlock( editorUtils ); + + await expect( + await editorUtils.getBlockByName( blockData.slug ) + ).toBeVisible(); + + // When the block is registered as ancestor, the function doesn't throw an error, but the block is not added. + // So we check that only one instance of the block is present. + await editor.insertBlock( { name: blockData.slug } ); + await expect( + await editorUtils.getBlockByName( blockData.slug ) + ).toBeVisible(); + } ); + + test( 'can be added in the Post Editor - Single Product Template', async ( { + admin, + editor, + editorUtils, + } ) => { + await admin.visitSiteEditor( { + postId: `woocommerce/woocommerce//single-product`, + postType: 'wp_template', + } ); + await editorUtils.enterEditMode(); + + await editor.setContent( '' ); + + await editor.insertBlock( { name: blockData.slug } ); + + await expect( + await editorUtils.getBlockByName( blockData.slug ) + ).toBeVisible(); + } ); +} ); diff --git a/tests/e2e/tests/related-products/related-products.block_theme.spec.ts b/tests/e2e/tests/related-products/related-products.block_theme.spec.ts new file mode 100644 index 00000000000..43ee59cf486 --- /dev/null +++ b/tests/e2e/tests/related-products/related-products.block_theme.spec.ts @@ -0,0 +1,67 @@ +/** + * External dependencies + */ +import { BlockData } from '@woocommerce/e2e-types'; +import { test, expect } from '@woocommerce/e2e-playwright-utils'; + +/** + * Internal dependencies + */ + +const blockData: BlockData = { + name: 'Related Products', + slug: 'woocommerce/related-products', + mainClass: '.wc-block-related-products', + selectors: { + frontend: {}, + editor: {}, + }, +}; + +test.describe( `${ blockData.name } Block`, () => { + test( "can't be added in the Post Editor", async ( { admin, editor } ) => { + await admin.createNewPost( { legacyCanvas: true } ); + + editor.insertBlock( { name: blockData.slug } ).catch( ( e ) => { + expect( e.message ).toContain( 'is not registered' ); + } ); + } ); + + 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', + } ); + await editorUtils.enterEditMode(); + + await editor.insertBlock( { name: blockData.slug } ); + + editor.insertBlock( { name: blockData.slug } ).catch( ( e ) => { + expect( e.message ).toContain( 'is not registered' ); + } ); + } ); + + test( 'can be added in the Post Editor - Single Product Template', async ( { + admin, + editor, + editorUtils, + } ) => { + await admin.visitSiteEditor( { + postId: `woocommerce/woocommerce//single-product`, + postType: 'wp_template', + } ); + await editorUtils.enterEditMode(); + + await editor.setContent( '' ); + + await editor.insertBlock( { name: blockData.slug } ); + + await expect( + await editorUtils.getBlockByName( blockData.slug ) + ).toBeVisible(); + } ); +} );