[E2E test coverage]: Disable block product editor (#39493)
* Remove ENABLE_NEW_PRODUCT_EDITOR * add block-product-editor.spec.js * Remove old editor tests # Conflicts: # plugins/woocommerce/tests/e2e-pw/tests/new-product-editor/new-product-editor.spec.js * Add changelog * Improve `isNewProductEditorEnabled` * Refactor enable-block-product-editor * Fix enabling * Fix NEW_EDITOR_ADD_PRODUCT_URL * Add test disable new product editor * Add changelog * Clean code * Fix disabling * Moved methods * Fix comment * Fix url * Add `clickOnTab` function * Add "general-tab" * Add changelog * Add sale price * Rename file * Rename file * rename file again * Fix product creation tests * Fix test * add block-product-editor.spec.js * Improve `isNewProductEditorEnabled` * Refactor enable-block-product-editor # Conflicts: # plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/enable-block-product-editor.spec.js * Fix enabling * Add test disable new product editor * Add changelog * Clean code * Fix disabling * Moved methods * Fix comment * Fix url * Add `clickOnTab` function * Add "general-tab" * Add changelog * Add sale price * Rename file * Rename file * rename file again * Fix product creation tests * Fix test * Remove expect not used
This commit is contained in:
Fernando Marichal
GitHub
parent
af52065798
commit
8f147eafb2
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: add
|
||||
|
||||
[E2E test coverage]: General tab #39411
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: add
|
||||
|
||||
[E2E test coverage]: Disable block product editor #39417
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
const { test, expect } = require( '@playwright/test' );
|
||||
|
||||
const {
|
||||
clickOnTab,
|
||||
isBlockProductEditorEnabled,
|
||||
toggleBlockProductEditor,
|
||||
} = require( '../../../../utils/simple-products' );
|
||||
|
||||
const NEW_EDITOR_ADD_PRODUCT_URL =
|
||||
'wp-admin/admin.php?page=wc-admin&path=%2Fadd-product';
|
||||
|
||||
let isNewProductEditorEnabled = false;
|
||||
|
||||
const isTrackingSupposedToBeEnabled = !! process.env.ENABLE_TRACKING;
|
||||
|
||||
const productData = {
|
||||
name: `Simple product Name ${ new Date().getTime().toString() }`,
|
||||
summary: 'This is a product summary',
|
||||
productPrice: '100',
|
||||
salePrice: '90',
|
||||
};
|
||||
|
||||
test.describe( 'General tab', () => {
|
||||
test.describe.serial( 'Create product', () => {
|
||||
let productId;
|
||||
test.use( { storageState: process.env.ADMINSTATE } );
|
||||
|
||||
test.skip(
|
||||
isTrackingSupposedToBeEnabled,
|
||||
'The block product editor is not being tested'
|
||||
);
|
||||
|
||||
test.beforeEach( async ( { browser } ) => {
|
||||
const context = await browser.newContext();
|
||||
const page = await context.newPage();
|
||||
isNewProductEditorEnabled = await isBlockProductEditorEnabled(
|
||||
page
|
||||
);
|
||||
if ( ! isNewProductEditorEnabled ) {
|
||||
await toggleBlockProductEditor( 'enable', page );
|
||||
}
|
||||
} );
|
||||
|
||||
test.afterEach( async ( { browser } ) => {
|
||||
const context = await browser.newContext();
|
||||
const page = await context.newPage();
|
||||
isNewProductEditorEnabled = await isBlockProductEditorEnabled(
|
||||
page
|
||||
);
|
||||
if ( isNewProductEditorEnabled ) {
|
||||
await toggleBlockProductEditor( 'disable', page );
|
||||
}
|
||||
} );
|
||||
|
||||
test( 'can create a simple product', 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( '.components-summary-control' )
|
||||
.fill( productData.summary );
|
||||
await page
|
||||
.locator(
|
||||
'[id^="wp-block-woocommerce-product-regular-price-field"]'
|
||||
)
|
||||
.first()
|
||||
.fill( productData.productPrice );
|
||||
await page
|
||||
.locator(
|
||||
'[id^="wp-block-woocommerce-product-sale-price-field"]'
|
||||
)
|
||||
.first()
|
||||
.fill( productData.salePrice );
|
||||
|
||||
await page
|
||||
.locator( '.woocommerce-product-header__actions' )
|
||||
.getByRole( 'button', {
|
||||
name: 'Add',
|
||||
} )
|
||||
.click();
|
||||
|
||||
const element = await page.locator(
|
||||
'div.components-snackbar__content'
|
||||
);
|
||||
const textContent = await element.innerText();
|
||||
|
||||
await expect( textContent ).toMatch( /Product added/ );
|
||||
|
||||
const title = await page.locator(
|
||||
'.woocommerce-product-header__title'
|
||||
);
|
||||
|
||||
// Save product ID
|
||||
const productIdRegex = /product%2F(\d+)/;
|
||||
const url = await page.url();
|
||||
const productIdMatch = productIdRegex.exec( url );
|
||||
productId = productIdMatch ? productIdMatch[ 1 ] : null;
|
||||
|
||||
await expect( productId ).toBeDefined();
|
||||
await expect( title ).toHaveText( productData.name );
|
||||
} );
|
||||
test( 'can not create a product with duplicated SKU', async ( {
|
||||
page,
|
||||
} ) => {
|
||||
await page.goto( NEW_EDITOR_ADD_PRODUCT_URL );
|
||||
await clickOnTab( 'General', page );
|
||||
await page
|
||||
.locator( '//input[@placeholder="e.g. 12 oz Coffee Mug"]' )
|
||||
.fill( productData.name );
|
||||
await page
|
||||
.locator( '.components-summary-control' )
|
||||
.fill( productData.summary );
|
||||
await page
|
||||
.locator(
|
||||
'[id^="wp-block-woocommerce-product-regular-price-field"]'
|
||||
)
|
||||
.first()
|
||||
.fill( productData.productPrice );
|
||||
await page
|
||||
.locator( '.woocommerce-product-header__actions' )
|
||||
.getByRole( 'button', {
|
||||
name: 'Add',
|
||||
} )
|
||||
.click();
|
||||
|
||||
const element = await page.locator(
|
||||
'div.components-snackbar__content'
|
||||
);
|
||||
const textContent = await element.innerText();
|
||||
|
||||
await expect( textContent ).toMatch( /Invalid or duplicated SKU./ );
|
||||
} );
|
||||
test( 'can a shopper add the simple product to the cart', async ( {
|
||||
page,
|
||||
} ) => {
|
||||
await page.goto( `/?post_type=product&p=${ productId }`, {
|
||||
waitUntil: 'networkidle',
|
||||
} );
|
||||
await expect( page.locator( '.product_title' ) ).toHaveText(
|
||||
productData.name
|
||||
);
|
||||
const productPriceElements = await page
|
||||
.locator( '.summary .woocommerce-Price-amount' )
|
||||
.all();
|
||||
|
||||
let foundProductPrice = false;
|
||||
let foundSalePrice = false;
|
||||
for ( const element of productPriceElements ) {
|
||||
const textContent = await element.innerText();
|
||||
if ( textContent.includes( productData.productPrice ) ) {
|
||||
foundProductPrice = true;
|
||||
}
|
||||
if ( textContent.includes( productData.salePrice ) ) {
|
||||
foundSalePrice = true;
|
||||
}
|
||||
}
|
||||
await expect( foundProductPrice && foundSalePrice ).toBeTruthy();
|
||||
|
||||
await page.getByRole( 'button', { name: 'Add to cart' } ).click();
|
||||
await page.getByRole( 'link', { name: 'View cart' } ).click();
|
||||
await expect(
|
||||
page.locator( 'td[data-title=Product]' ).first()
|
||||
).toContainText( productData.name );
|
||||
await page
|
||||
.locator( `a.remove[data-product_id='${ productId }']` )
|
||||
.click();
|
||||
await page.waitForLoadState( 'networkidle' );
|
||||
await expect(
|
||||
page.locator( `a.remove[data-product_id='${ productId }']` )
|
||||
).not.toBeVisible();
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
const { test } = require( '@playwright/test' );
|
||||
const {
|
||||
clickAddNewMenuItem,
|
||||
expectBlockProductEditor,
|
||||
expectOldProductEditor,
|
||||
isBlockProductEditorEnabled,
|
||||
toggleBlockProductEditor,
|
||||
} = require( '../../../../utils/simple-products' );
|
||||
|
||||
const ALL_PRODUCTS_URL = 'wp-admin/edit.php?post_type=product';
|
||||
const NEW_EDITOR_ADD_PRODUCT_URL =
|
||||
'wp-admin/admin.php?page=wc-admin&path=%2Fadd-product';
|
||||
const SETTINGS_URL =
|
||||
'wp-admin/admin.php?page=wc-settings&tab=advanced§ion=features';
|
||||
|
||||
let isNewProductEditorEnabled = false;
|
||||
|
||||
const isTrackingSupposedToBeEnabled = !! process.env.ENABLE_TRACKING;
|
||||
|
||||
async function dismissFeedbackModalIfShown( page ) {
|
||||
if ( ! isTrackingSupposedToBeEnabled ) {
|
||||
// no modal should be shown, so don't even look for button
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await page
|
||||
.locator( '.woocommerce-product-mvp-feedback-modal' )
|
||||
.getByRole( 'button', { name: 'Skip' } )
|
||||
.click( { timeout: 5000 } );
|
||||
} catch ( error ) {}
|
||||
}
|
||||
|
||||
test.describe.serial( 'Disable block product editor', () => {
|
||||
test.use( { storageState: process.env.ADMINSTATE } );
|
||||
|
||||
test.beforeEach( async ( { page } ) => {
|
||||
isNewProductEditorEnabled = await isBlockProductEditorEnabled( page );
|
||||
if ( ! isNewProductEditorEnabled ) {
|
||||
await toggleBlockProductEditor( 'enable', page );
|
||||
}
|
||||
} );
|
||||
|
||||
test.afterEach( async ( { browser } ) => {
|
||||
const context = await browser.newContext();
|
||||
const page = await context.newPage();
|
||||
isNewProductEditorEnabled = await isBlockProductEditorEnabled( page );
|
||||
if ( isNewProductEditorEnabled ) {
|
||||
await toggleBlockProductEditor( 'disable', page );
|
||||
}
|
||||
} );
|
||||
|
||||
test.skip(
|
||||
isNewProductEditorEnabled && isTrackingSupposedToBeEnabled,
|
||||
'The block product editor is not being tested'
|
||||
);
|
||||
|
||||
test( 'is hooked up to sidebar "Add New"', async ( { page } ) => {
|
||||
await page.goto( ALL_PRODUCTS_URL );
|
||||
await clickAddNewMenuItem( page );
|
||||
await expectBlockProductEditor( page );
|
||||
} );
|
||||
|
||||
test( 'can be disabled from the header', async ( { page } ) => {
|
||||
await page.goto( NEW_EDITOR_ADD_PRODUCT_URL );
|
||||
|
||||
// turn off block product editor from the header
|
||||
await page
|
||||
.locator( '.components-dropdown-menu' )
|
||||
.getByRole( 'button', { name: 'Options' } )
|
||||
.click();
|
||||
await page
|
||||
.getByRole( 'menuitem', {
|
||||
name: 'Turn off the new product form',
|
||||
} )
|
||||
.click();
|
||||
await dismissFeedbackModalIfShown( page );
|
||||
await expectOldProductEditor( page );
|
||||
} );
|
||||
test( 'can be disabled from settings', async ( { page } ) => {
|
||||
await toggleBlockProductEditor( 'disable', page );
|
||||
await page.goto( ALL_PRODUCTS_URL );
|
||||
await clickAddNewMenuItem( page );
|
||||
await expectOldProductEditor( page );
|
||||
} );
|
||||
} );
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
const { test, expect } = require( '@playwright/test' );
|
||||
const {
|
||||
clickAddNewMenuItem,
|
||||
expectBlockProductEditor,
|
||||
expectOldProductEditor,
|
||||
isBlockProductEditorEnabled,
|
||||
toggleBlockProductEditor,
|
||||
} = require( '../../../../utils/simple-products' );
|
||||
|
|
@ -13,18 +15,6 @@ let isNewProductEditorEnabled = false;
|
|||
|
||||
const isTrackingSupposedToBeEnabled = !! process.env.ENABLE_TRACKING;
|
||||
|
||||
async function expectOldProductEditor( page ) {
|
||||
await expect(
|
||||
page.locator( '#woocommerce-product-data h2' )
|
||||
).toContainText( 'Product data' );
|
||||
}
|
||||
|
||||
async function expectBlockProductEditor( page ) {
|
||||
await expect(
|
||||
page.locator( '.woocommerce-product-header__inner h1' )
|
||||
).toContainText( 'Add new product' );
|
||||
}
|
||||
|
||||
async function disableNewEditorIfEnabled( browser ) {
|
||||
const context = await browser.newContext();
|
||||
const page = await context.newPage();
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
const { expect } = require( '@playwright/test' );
|
||||
|
||||
const SETTINGS_URL =
|
||||
'wp-admin/admin.php?page=wc-settings&tab=advanced§ion=features';
|
||||
|
||||
|
|
@ -54,8 +56,47 @@ async function clickAddNewMenuItem( page ) {
|
|||
.click();
|
||||
}
|
||||
|
||||
/**
|
||||
* This function checks if the old product editor is visible.
|
||||
*
|
||||
* @param {Page} page
|
||||
*/
|
||||
async function expectOldProductEditor( page ) {
|
||||
await expect(
|
||||
page.locator( '#woocommerce-product-data h2' )
|
||||
).toContainText( 'Product data' );
|
||||
}
|
||||
|
||||
/**
|
||||
* This function checks if the block product editor is visible.
|
||||
*
|
||||
* @param {Page} page
|
||||
*/
|
||||
async function expectBlockProductEditor( page ) {
|
||||
await expect(
|
||||
page.locator( '.woocommerce-product-header__inner h1' )
|
||||
).toContainText( 'Add new product' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Click on a block editor tab.
|
||||
*
|
||||
* @param {Page} page
|
||||
* @param {string} tabName
|
||||
*/
|
||||
async function clickOnTab( tabName, page ) {
|
||||
await page
|
||||
// .locator( '.woocommerce-product-tab__general-content' )
|
||||
.locator( '.woocommerce-product-tabs' )
|
||||
.getByRole( 'button', { name: tabName } )
|
||||
.click();
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
expectBlockProductEditor,
|
||||
expectOldProductEditor,
|
||||
clickAddNewMenuItem,
|
||||
clickOnTab,
|
||||
isBlockProductEditorEnabled,
|
||||
toggleBlockProductEditor,
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue