From 2c52b6ab7e7dbdc699d93174d93701a33c00e535 Mon Sep 17 00:00:00 2001 From: Fernando Marichal Date: Fri, 5 Apr 2024 11:35:17 -0300 Subject: [PATCH] Add e2e tests for linked products (#46024) * Add e2e tests for linked products * Add changelog --- .../add-46020_e2e_tests_for_linked_products | 4 + ...d-product-tab-product-block-editor.spec.js | 165 ++++++++++++++++++ 2 files changed, 169 insertions(+) create mode 100644 plugins/woocommerce/changelog/add-46020_e2e_tests_for_linked_products create mode 100644 plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/linked-product-tab-product-block-editor.spec.js diff --git a/plugins/woocommerce/changelog/add-46020_e2e_tests_for_linked_products b/plugins/woocommerce/changelog/add-46020_e2e_tests_for_linked_products new file mode 100644 index 00000000000..795ea06c8c5 --- /dev/null +++ b/plugins/woocommerce/changelog/add-46020_e2e_tests_for_linked_products @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Add e2e tests for linked products #46024 diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/linked-product-tab-product-block-editor.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/linked-product-tab-product-block-editor.spec.js new file mode 100644 index 00000000000..53b2208e677 --- /dev/null +++ b/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/linked-product-tab-product-block-editor.spec.js @@ -0,0 +1,165 @@ +const { test } = require( '../../../../fixtures/block-editor-fixtures' ); +const { expect } = require( '@playwright/test' ); + +const { clickOnTab } = require( '../../../../utils/simple-products' ); +const { api } = require( '../../../../utils' ); + +const NEW_EDITOR_ADD_PRODUCT_URL = + 'wp-admin/admin.php?page=wc-admin&path=%2Fadd-product'; + +const isTrackingSupposedToBeEnabled = !! process.env.ENABLE_TRACKING; + +const productData = { + name: `Linked product Name ${ new Date().getTime().toString() }`, + summary: 'This is a product summary', +}; + +const linkedProductsData = [], + productIds = []; +let productId = 0; + +test.describe( 'General tab', () => { + test.describe( 'Linked product', () => { + test.beforeAll( async () => { + for ( let i = 1; i <= 5; i++ ) { + const product = { + name: `Product name ${ i } ${ new Date() + .getTime() + .toString() }`, + productPrice: `${ i }00`, + type: 'simple', + }; + linkedProductsData.push( product ); + const id = await api.create.product( product ); + productIds.push( id ); + } + } ); + + test.afterAll( async () => { + for ( const aProductId of productIds ) { + await api.deletePost.product( aProductId ); + } + await api.deletePost.product( productId ); + } ); + test.skip( + isTrackingSupposedToBeEnabled, + 'The block product editor is not being tested' + ); + + test( 'can create a product with linked products', async ( { + page, + } ) => { + await page.goto( NEW_EDITOR_ADD_PRODUCT_URL ); + await clickOnTab( 'General', page ); + await page + .getByPlaceholder( 'e.g. 12 oz Coffee Mug' ) + .fill( productData.name ); + await page + .locator( + '[data-template-block-id="basic-details"] .components-summary-control' + ) + .last() + .fill( productData.summary ); + + await clickOnTab( 'Linked products', page ); + + await page + .getByRole( 'heading', { + name: 'Cross-sells', + } ) + .isVisible(); + + await page + .locator( + '.wp-block-woocommerce-product-linked-list-field__form-group-content' + ) + .first() + .getByPlaceholder( 'Search for products' ) + .fill( linkedProductsData[ 0 ].name ); + + await page.getByText( linkedProductsData[ 0 ].name ).click(); + + await page.getByText( 'Choose products for me' ).first().click(); + + await page.waitForResponse( + ( response ) => + response + .url() + .includes( + '/wp-json/wc/v3/products?search=&orderby=title&order=asc&per_page=' + ) && response.status() === 200 + ); + + await page.waitForFunction( + ( [ selector, expectedCount ] ) => + document.querySelectorAll( selector ).length === + expectedCount, + [ '.woocommerce-product-list div[role="row"]', 5 ] + ); + + const upsellsRows = page.locator( + 'div.woocommerce-product-list div[role="table"] div[role="rowgroup"] div[role="row"]' + ); + + const upsellsRowsCount = await upsellsRows.count(); + + await expect( upsellsRowsCount ).toBe( 5 ); + + await page + .locator( + '.wp-block-woocommerce-product-linked-list-field__form-group-content' + ) + .last() + .getByPlaceholder( 'Search for products' ) + .fill( linkedProductsData[ 1 ].name ); + + await page + .getByText( linkedProductsData[ 1 ].name ) + .first() + .click(); + + await page + .locator( '.woocommerce-product-header__actions' ) + .getByRole( 'button', { + name: 'Publish', + } ) + .click(); + + await page + .locator( '.woocommerce-product-publish-panel__header' ) + .getByRole( 'button', { + name: 'Publish', + } ) + .click(); + + await expect( + page.getByLabel( 'Dismiss this notice' ) + ).toContainText( 'Product published' ); + + const title = page.locator( '.woocommerce-product-header__title' ); + + // Save product ID + const productIdRegex = /product%2F(\d+)/; + const url = page.url(); + const productIdMatch = productIdRegex.exec( url ); + productId = productIdMatch ? productIdMatch[ 1 ] : null; + + await expect( productId ).toBeDefined(); + await expect( title ).toHaveText( productData.name ); + + await page.goto( `/?post_type=product&p=${ productId }` ); + + await expect( + page.getByRole( 'heading', { name: productData.name } ) + ).toBeVisible(); + + const productsList = page.locator( + 'section.upsells.products ul > li' + ); + + const productsCount = await productsList.count(); + + await expect( productsCount ).toBe( 5 ); + } ); + } ); +} );