CYS - E2E tests: add homepage picker E2E tests (#46127)
* Update checks for sale price * Update checks for product images * Update checks for linked products * Update default theme for e2e environment to twentytwentythree * Fix basic spec * Fix locator product block editor test * Make cart.spec.js theme agnostic * Updated mini-cart.spec.js * Updated cart-checkout-block-calculate-tax.spec.js * Updated cart-block.spec.js * Fix cart-block.spec.js * Update account-email-receiving.spec.js * CYS - E2E tests: fix flaky assembler-hub test * Use a value for pr_number * Update condition for the Slack alert job * Remove pr_number argument * Add changefile(s) from automation for the following project(s): woocommerce * Update conditions for the publish reports jobs * Rename jobs * Send GITHUB_SHA to report * Check for skipped status * Include Slack notification step in the reporting job * Rename jobs * Test update to trigger api tests * Revert test change for api tests * fix flakiness * Test change to trigger all tests * Test slack alert condition * add waitUntil * Force a test failure * Revert all test changes * improve logic * fix build error * try now * Update product-inventory-block-editor.spec.js * fix unit test * fix flakiness * Update checkout-block.spec.js * Update checkout-block.spec.js * Add utils/order * Remove the check for more items than the coupon max amount as it fails with block themes * Update create-simple-product-block-editor.spec.js * Update cart-checkout-calculate-tax.spec.js * Update checkout-block.spec.js * Update create-simple-product-block-editor.spec.js * Update wordpress-post.spec.js * Update my-account-addresses.spec.js * Update my-account-create-account.spec.js * Update my-account-downloads.spec.js * Update my-account-pay-order.spec.js * Update my-account.spec.js * Update order-email-receiving.spec.js * Update product-grouped.spec.js * Update product-simple.spec.js * Update product-tags-attributes.spec.js * Update product-variable.spec.js * Update shop-search-browse-sort.spec.js * Update checkout.spec.js * Update checkout-login.spec.js * Update checkout-create-account.spec.js * Update wordpress-post.spec.js * Update cart-checkout-calculate-tax.spec.js * Update wordpress-post.spec.js * Update mini-cart.spec.js * Remove logging of order id * Remove the log-out action as it invalidates the customer state and breaks other tests * Use disableWelcomeModal * CYS - E2E tests: add homepage picker E2E tests * update snapshots * add snapshots * use screenshot tests+ * use snapshot * try now * update snapshot * remove wp-container snapshot * remove only * add comment * add snapshot * enable color picker tests * revert to twentytwentythree * restore changes related to the color picker * use default theme --------- Co-authored-by: Adrian Moldovan <adim.moldovan@gmail.com> Co-authored-by: Adrian Moldovan <3854374+adimoldovan@users.noreply.github.com> Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Luigi Teschio
GitHub
parent
9007b780c4
commit
8507e06173
|
|
@ -95,7 +95,13 @@ export const SidebarNavigationScreenHomepage = () => {
|
|||
}, [ homeTemplates ] );
|
||||
|
||||
useEffect( () => {
|
||||
if ( selectedPattern || ! blocks.length || ! homePatterns.length ) {
|
||||
if (
|
||||
selectedPattern ||
|
||||
! blocks.length ||
|
||||
! homePatterns.length ||
|
||||
isLoading ||
|
||||
isEditorLoading
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -117,7 +123,7 @@ export const SidebarNavigationScreenHomepage = () => {
|
|||
|
||||
setSelectedPattern( currentSelectedPattern );
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want to re-run this effect when currentSelectedPattern changes
|
||||
}, [ blocks, homePatterns ] );
|
||||
}, [ blocks, homePatterns, isLoading, isEditorLoading ] );
|
||||
|
||||
const { context } = useContext( CustomizeStoreContext );
|
||||
const aiOnline = context.flowType === FlowType.AIOnline;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: dev
|
||||
Comment: CYS - E2E tests: add homepage picker E2E tests
|
||||
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
const { test: base, expect, request } = require( '@playwright/test' );
|
||||
const { AssemblerPage } = require( './assembler.page' );
|
||||
const { activateTheme, DEFAULT_THEME } = require( '../../../utils/themes' );
|
||||
const { setOption } = require( '../../../utils/options' );
|
||||
|
||||
const test = base.extend( {
|
||||
pageObject: async ( { page }, use ) => {
|
||||
const pageObject = new AssemblerPage( { page } );
|
||||
await use( pageObject );
|
||||
},
|
||||
} );
|
||||
|
||||
test.describe( 'Assembler -> Homepage', () => {
|
||||
test.use( { storageState: process.env.ADMINSTATE } );
|
||||
|
||||
test.beforeAll( async ( { baseURL } ) => {
|
||||
try {
|
||||
// In some environments the tour blocks clicking other elements.
|
||||
await setOption(
|
||||
request,
|
||||
baseURL,
|
||||
'woocommerce_customize_store_onboarding_tour_hidden',
|
||||
'yes'
|
||||
);
|
||||
} catch ( error ) {
|
||||
console.log( 'Store completed option not updated' );
|
||||
}
|
||||
} );
|
||||
|
||||
test.afterAll( async ( { baseURL } ) => {
|
||||
try {
|
||||
// In some environments the tour blocks clicking other elements.
|
||||
await setOption(
|
||||
request,
|
||||
baseURL,
|
||||
'woocommerce_customize_store_onboarding_tour_hidden',
|
||||
'no'
|
||||
);
|
||||
await setOption(
|
||||
request,
|
||||
baseURL,
|
||||
'woocommerce_admin_customize_store_completed',
|
||||
'no'
|
||||
);
|
||||
|
||||
await activateTheme( DEFAULT_THEME );
|
||||
} catch ( error ) {
|
||||
console.log( 'Store completed option not updated' );
|
||||
}
|
||||
} );
|
||||
|
||||
test.beforeEach( async ( { baseURL, pageObject } ) => {
|
||||
await pageObject.setupSite( baseURL );
|
||||
await pageObject.waitForLoadingScreenFinish();
|
||||
const assembler = await pageObject.getAssembler();
|
||||
await assembler.getByText( 'Design your homepage' ).click();
|
||||
await assembler
|
||||
.locator( '.components-placeholder__preview' )
|
||||
.waitFor( { state: 'hidden' } );
|
||||
} );
|
||||
|
||||
test( 'Available homepage should be displayed', async ( {
|
||||
pageObject,
|
||||
} ) => {
|
||||
const assembler = await pageObject.getAssembler();
|
||||
|
||||
const homepages = assembler.locator(
|
||||
'.block-editor-block-patterns-list__list-item'
|
||||
);
|
||||
|
||||
await expect( homepages ).toHaveCount( 3 );
|
||||
} );
|
||||
|
||||
test( 'The selected homepage should be focused when is clicked', async ( {
|
||||
pageObject,
|
||||
} ) => {
|
||||
const assembler = await pageObject.getAssembler();
|
||||
const homepage = assembler
|
||||
.locator( '.block-editor-block-patterns-list__item' )
|
||||
.nth( 2 );
|
||||
|
||||
await homepage.click();
|
||||
await expect( homepage ).toHaveClass( /is-selected/ );
|
||||
} );
|
||||
|
||||
test( 'The selected homepage should be visible on the site preview', async ( {
|
||||
pageObject,
|
||||
} ) => {
|
||||
const assembler = await pageObject.getAssembler();
|
||||
const editor = await pageObject.getEditor();
|
||||
|
||||
const homepages = await assembler
|
||||
.locator(
|
||||
'.block-editor-block-patterns-list__item:not(.is-selected)'
|
||||
)
|
||||
.all();
|
||||
|
||||
const selectedHomepage = await assembler
|
||||
.locator( '.block-editor-block-patterns-list__item.is-selected' )
|
||||
.all();
|
||||
|
||||
// This is necessary to ensure that the trigger works correctly for all the templates in the list because if the pattern is already selected, the trigger doesn't run.
|
||||
const allHomepages = [ ...homepages, ...selectedHomepage ];
|
||||
|
||||
for ( const homepage of allHomepages ) {
|
||||
await homepage.click();
|
||||
const homepageElements = await homepage
|
||||
.locator( '.block-editor-block-list__layout > *' )
|
||||
.all();
|
||||
|
||||
const homepageElementsIds = await Promise.all(
|
||||
homepageElements.map( ( element ) =>
|
||||
element.getAttribute( 'id' )
|
||||
)
|
||||
);
|
||||
|
||||
for ( const elementId of homepageElementsIds ) {
|
||||
const element = editor.locator( `#${ elementId }` );
|
||||
await expect( element ).toBeVisible();
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
test( 'The Done button should be visible after clicking save', async ( {
|
||||
pageObject,
|
||||
page,
|
||||
} ) => {
|
||||
const assembler = await pageObject.getAssembler();
|
||||
const homepage = assembler
|
||||
.locator( '.block-editor-block-patterns-list__item' )
|
||||
.nth( 2 );
|
||||
|
||||
await homepage.click();
|
||||
|
||||
const saveButton = assembler.getByText( 'Save' );
|
||||
const waitResponse = page.waitForResponse(
|
||||
( response ) =>
|
||||
response
|
||||
.url()
|
||||
.includes(
|
||||
'wp-json/wp/v2/templates/twentytwentyfour//home'
|
||||
) && response.status() === 200
|
||||
);
|
||||
|
||||
await saveButton.click();
|
||||
|
||||
await waitResponse;
|
||||
|
||||
await expect( assembler.getByText( 'Done' ) ).toBeEnabled();
|
||||
} );
|
||||
|
||||
test( 'Selected homepage should be applied on the frontend', async ( {
|
||||
pageObject,
|
||||
page,
|
||||
baseURL,
|
||||
}, testInfo ) => {
|
||||
testInfo.snapshotSuffix = '';
|
||||
const assembler = await pageObject.getAssembler();
|
||||
const homepage = assembler
|
||||
.locator( '.block-editor-block-patterns-list__item' )
|
||||
.nth( 2 );
|
||||
|
||||
await homepage.click();
|
||||
|
||||
const saveButton = assembler.getByText( 'Save' );
|
||||
|
||||
const waitResponse = page.waitForResponse(
|
||||
( response ) =>
|
||||
response
|
||||
.url()
|
||||
.includes(
|
||||
'wp-json/wp/v2/templates/twentytwentyfour//home'
|
||||
) && response.status() === 200
|
||||
);
|
||||
|
||||
await saveButton.click();
|
||||
|
||||
await waitResponse;
|
||||
|
||||
await page.goto( baseURL );
|
||||
// Get all the content between the header and the footer.
|
||||
const homepageHTML = await page
|
||||
.locator(
|
||||
'//header/following-sibling::*[following-sibling::footer]'
|
||||
)
|
||||
.all();
|
||||
|
||||
let index = 0;
|
||||
for ( const element of homepageHTML ) {
|
||||
await expect(
|
||||
await element.getAttribute( 'class' )
|
||||
).toMatchSnapshot( {
|
||||
name: `selected-homepage-blocks-class-frontend-${ index }`,
|
||||
} );
|
||||
index++;
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
|
@ -0,0 +1 @@
|
|||
wp-block-media-text alignfull has-media-on-the-right is-stacked-on-mobile
|
||||
|
|
@ -0,0 +1 @@
|
|||
wp-block-group alignwide is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-6 wp-block-group-is-layout-flex
|
||||
|
|
@ -0,0 +1 @@
|
|||
wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex
|
||||
|
|
@ -0,0 +1 @@
|
|||
wp-block-group alignwide has-global-padding is-layout-constrained wp-container-core-group-is-layout-7 wp-block-group-is-layout-constrained
|
||||
Loading…
Reference in New Issue