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

[e2e tests] External sites - update /customize-store tests (#51004) 

* Skip - number of introductory patterns not same on Pressable

* Skip - "Want more patterns?" is always present, skipping for now

* Skip -  it activates theme through CLI, don't work for Pressable

* Include /customize-store folder for Pressable execution

* Update month formatting

* Add changefile(s) from automation for the following project(s): woocommerce

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Adrian Moldovan <3854374+adimoldovan@users.noreply.github.com>
This commit is contained in:
Ivan Stojadinov 2024-08-28 13:03:33 +02:00 committed by GitHub
parent 9f79715d06
commit 98aebdfcc7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 166 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/woocommerce/changelog/51004-e2e-external-sites-update-customize-store-tests Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: update
Update /customize-store tests, so they are passing against Pressable env.

1
plugins/woocommerce/tests/e2e-pw/envs/default-pressable/playwright.config.js
View File

@ -15,6 +15,7 @@ config = {
'**/admin-analytics/**/*.spec.js', '**/admin-analytics/**/*.spec.js',
'**/admin-marketing/**/*.spec.js', '**/admin-marketing/**/*.spec.js',
'**/admin-tasks/**/*.spec.js', '**/admin-tasks/**/*.spec.js',
'**/customize-store/**/*.spec.js',
], ],
grepInvert: /@skip-on-default-pressable/, grepInvert: /@skip-on-default-pressable/,
}, },

180
plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/color-picker.spec.js
View File

@ -412,105 +412,105 @@ test.describe( 'Assembler -> Color Pickers', { tag: '@gutenberg' }, () => {
await expect( colorPicker ).toHaveClass( /is-active/ ); await expect( colorPicker ).toHaveClass( /is-active/ );
} ); } );
test( 'Selected color palette should be applied on the frontend', async ( { test(
assemblerPageObject, 'Selected color palette should be applied on the frontend',
page, { tag: '@skip-on-default-pressable' },
baseURL, async ( { assemblerPageObject, page, baseURL } ) => {
} ) => { const assembler = await assemblerPageObject.getAssembler();
const assembler = await assemblerPageObject.getAssembler(); const colorPicker = assembler
const colorPicker = assembler .locator(
.locator( '.woocommerce-customize-store_global-styles-variations_item'
'.woocommerce-customize-store_global-styles-variations_item' )
) .last();
.last();
await colorPicker.click(); await colorPicker.click();
await assembler.locator( '[aria-label="Back"]' ).click(); await assembler.locator( '[aria-label="Back"]' ).click();
const saveButton = assembler.getByText( 'Finish customizing' ); const saveButton = assembler.getByText( 'Finish customizing' );
const waitResponseGlobalStyles = page.waitForResponse( const waitResponseGlobalStyles = page.waitForResponse(
( response ) => ( response ) =>
response.url().includes( 'wp-json/wp/v2/global-styles' ) && response.url().includes( 'wp-json/wp/v2/global-styles' ) &&
response.status() === 200 response.status() === 200
);
const wordPressVersion = await getInstalledWordPressVersion();
await saveButton.click();
await Promise.all( [
waitResponseGlobalStyles,
wordPressVersion < 6.6
? page.waitForResponse(
( response ) =>
response.url().includes(
// When CYS will support all block themes, this URL will change.
'wp-json/wp/v2/templates/twentytwentyfour//home'
) && response.status() === 200
)
: Promise.resolve(),
] );
await page.goto( baseURL );
const paragraphs = await page
.locator(
'p.wp-block.wp-block-paragraph:not([aria-label="Empty block; start writing or type forward slash to choose a block"])'
)
.evaluateAll( ( elements ) =>
elements.map( ( element ) => {
const style = window.getComputedStyle( element );
return {
background: style.backgroundColor,
color: style.color,
};
} )
); );
const buttons = await page const wordPressVersion = await getInstalledWordPressVersion();
.locator( '.wp-block-button > .wp-block-button__link' )
.evaluateAll( ( elements ) =>
elements.map( ( element ) => {
const style = window.getComputedStyle( element );
return {
background: style.backgroundColor,
color: style.color,
};
} )
);
const headers = await page await saveButton.click();
.locator( 'h1, h2, h3, h4, h5, h6' )
.evaluateAll( ( elements ) =>
elements.map( ( element ) => {
const style = window.getComputedStyle( element );
return {
background: style.backgroundColor,
color: style.color,
};
} )
);
for ( const element of buttons ) { await Promise.all( [
await expect( element.background ).toEqual( waitResponseGlobalStyles,
colorPalette.Slate.button.background wordPressVersion < 6.6
); ? page.waitForResponse(
( response ) =>
response.url().includes(
// When CYS will support all block themes, this URL will change.
'wp-json/wp/v2/templates/twentytwentyfour//home'
) && response.status() === 200
)
: Promise.resolve(),
] );
await page.goto( baseURL );
const paragraphs = await page
.locator(
'p.wp-block.wp-block-paragraph:not([aria-label="Empty block; start writing or type forward slash to choose a block"])'
)
.evaluateAll( ( elements ) =>
elements.map( ( element ) => {
const style = window.getComputedStyle( element );
return {
background: style.backgroundColor,
color: style.color,
};
} )
);
const buttons = await page
.locator( '.wp-block-button > .wp-block-button__link' )
.evaluateAll( ( elements ) =>
elements.map( ( element ) => {
const style = window.getComputedStyle( element );
return {
background: style.backgroundColor,
color: style.color,
};
} )
);
const headers = await page
.locator( 'h1, h2, h3, h4, h5, h6' )
.evaluateAll( ( elements ) =>
elements.map( ( element ) => {
const style = window.getComputedStyle( element );
return {
background: style.backgroundColor,
color: style.color,
};
} )
);
for ( const element of buttons ) {
await expect( element.background ).toEqual(
colorPalette.Slate.button.background
);
}
for ( const element of paragraphs ) {
expect(
colorPalette.Slate.paragraph.color.includes( element.color )
).toBe( true );
}
for ( const element of headers ) {
expect(
colorPalette.Slate.header.color.includes( element.color )
).toBe( true );
}
} }
);
for ( const element of paragraphs ) {
expect(
colorPalette.Slate.paragraph.color.includes( element.color )
).toBe( true );
}
for ( const element of headers ) {
expect(
colorPalette.Slate.header.color.includes( element.color )
).toBe( true );
}
} );
test( 'Create "your own" pickers should be visible', async ( { test( 'Create "your own" pickers should be visible', async ( {
assemblerPageObject, assemblerPageObject,

47
plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/full-composability.spec.js
View File

@ -343,32 +343,35 @@ test.describe( 'Assembler -> Full composability', { tag: '@gutenberg' }, () => {
await expect( defaultPattern ).toBeVisible(); await expect( defaultPattern ).toBeVisible();
} ); } );
test( 'Clicking opt-in new patterns should be available', async ( { test(
pageObject, 'Clicking opt-in new patterns should be available',
baseURL, { tag: '@skip-on-default-pressable' },
} ) => { async ( { pageObject, baseURL } ) => {
await prepareAssembler( pageObject, baseURL ); await prepareAssembler( pageObject, baseURL );
const assembler = await pageObject.getAssembler(); const assembler = await pageObject.getAssembler();
await assembler.getByText( 'Usage tracking' ).click(); await assembler.getByText( 'Usage tracking' ).click();
await expect( await expect(
assembler.getByText( 'Access more patterns' ) assembler.getByText( 'Access more patterns' )
).toBeVisible(); ).toBeVisible();
await assembler.getByRole( 'button', { name: 'Opt in' } ).click(); await assembler.getByRole( 'button', { name: 'Opt in' } ).click();
await assembler await assembler
.getByText( 'Access more patterns' ) .getByText( 'Access more patterns' )
.waitFor( { state: 'hidden' } ); .waitFor( { state: 'hidden' } );
const sidebarPattern = assembler.locator( const sidebarPattern = assembler.locator(
'.block-editor-block-patterns-list' '.block-editor-block-patterns-list'
); );
await sidebarPattern.waitFor( { state: 'visible' } ); await sidebarPattern.waitFor( { state: 'visible' } );
await expect( await expect(
assembler.locator( '.block-editor-block-patterns-list__list-item' ) assembler.locator(
).toHaveCount( 10 ); '.block-editor-block-patterns-list__list-item'
} ); )
).toHaveCount( 10 );
}
);
} ); } );

33
plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js
View File

@ -314,22 +314,23 @@ test.describe( 'Homepage tracking banner', () => {
).toBeVisible(); ).toBeVisible();
} ); } );
test( 'Should not show the "Want more patterns?" banner when tracking is allowed', async ( { test(
baseURL, 'Should not show the "Want more patterns?" banner when tracking is allowed',
pageObject, { tag: '@skip-on-default-pressable' },
} ) => { async ( { baseURL, pageObject } ) => {
await setOption( await setOption(
request, request,
baseURL, baseURL,
'woocommerce_allow_tracking', 'woocommerce_allow_tracking',
'yes' 'yes'
); );
await prepareAssembler( pageObject, baseURL ); await prepareAssembler( pageObject, baseURL );
const assembler = await pageObject.getAssembler(); const assembler = await pageObject.getAssembler();
await expect( await expect(
assembler.getByText( 'Want more patterns?' ) assembler.getByText( 'Want more patterns?' )
).toBeHidden(); ).toBeHidden();
} ); }
);
} ); } );

3
plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/logo-picker/logo-picker.spec.js
View File

@ -235,9 +235,10 @@ test.describe( 'Assembler -> Logo Picker', { tag: '@gutenberg' }, () => {
// alternative way to verify new site icon on the site // alternative way to verify new site icon on the site
// verifying site icon shown in the new tab is impossible in headless mode // verifying site icon shown in the new tab is impossible in headless mode
const date = new Date(); const date = new Date();
const month = ( date.getMonth() + 1 ).toString().padStart( 2, '0' );
await expect( await expect(
page.goto( page.goto(
`/wp-content/uploads/${ date.getFullYear() }/${ date.getMonth() }/image-03-100x100.png` `/wp-content/uploads/${ date.getFullYear() }/${ month }/image-03-100x100.png`
) )
).toBeTruthy(); ).toBeTruthy();
} ); } );

50
plugins/woocommerce/tests/e2e-pw/tests/customize-store/intro.spec.js
View File

@ -115,34 +115,38 @@ test.describe(
).toBeVisible(); ).toBeVisible();
} ); } );
test( 'it shows the "non default block theme" banner when the theme is a block theme different than TT4', async ( { test(
page, 'it shows the "non default block theme" banner when the theme is a block theme different than TT4',
} ) => { { tag: '@skip-on-default-pressable' },
await activateTheme( 'twentytwentythree' ); async ( { page } ) => {
await activateTheme( 'twentytwentythree' );
await page.goto( CUSTOMIZE_STORE_URL ); await page.goto( CUSTOMIZE_STORE_URL );
await expect( page.locator( 'h1' ) ).toHaveText( await expect( page.locator( 'h1' ) ).toHaveText(
'Customize your theme' 'Customize your theme'
); );
await expect( await expect(
page.getByRole( 'button', { name: 'Go to the Editor' } ) page.getByRole( 'button', { name: 'Go to the Editor' } )
).toBeVisible(); ).toBeVisible();
} ); }
);
test( 'clicking on "Go to the Customizer" with a classic theme should go to the customizer', async ( { test(
page, 'clicking on "Go to the Customizer" with a classic theme should go to the customizer',
} ) => { { tag: '@skip-on-default-pressable' },
await activateTheme( 'twentytwenty' ); async ( { page } ) => {
await activateTheme( 'twentytwenty' );
await page.goto( CUSTOMIZE_STORE_URL ); await page.goto( CUSTOMIZE_STORE_URL );
await page await page
.getByRole( 'button', { name: 'Go to the Customizer' } ) .getByRole( 'button', { name: 'Go to the Customizer' } )
.click(); .click();
await page.waitForNavigation(); await page.waitForNavigation();
await expect( page.url() ).toContain( 'customize.php' ); await expect( page.url() ).toContain( 'customize.php' );
} ); }
);
} }
); );