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

CYS: E2E Tests for device and zoom toolbar (#50436) 

* Add e2e tests

* Changelog

* Toolbar updates
This commit is contained in:
Tom Cafferkey 2024-08-07 15:25:07 +01:00 committed by GitHub
parent 03f9b06d17
commit 94f6ec5ccc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 43 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
plugins/woocommerce-admin/client/customize-store/assembler-hub/components/device-toolbar.tsx
View File

@ -72,14 +72,14 @@ export function DeviceToolbar( { isEditorLoading = false } ) {
className="woocommerce-customize-store__device-toolbar"
orientation="horizontal"
role="toolbar"
aria-label={ __( 'Resize', 'woocommerce' ) }
aria-label={ __( 'Resize Options', 'woocommerce' ) }
>
<button
disabled={ isEditorLoading }
className={ clsx( BUTTON_CLASS_NAMES, {
'is-selected': deviceType === 'Desktop',
} ) }
aria-label="Desktop"
aria-label="Desktop View"
onClick={ () => {
switchDeviceType( 'Desktop' );
} }
@ -95,7 +95,7 @@ export function DeviceToolbar( { isEditorLoading = false } ) {
className={ clsx( BUTTON_CLASS_NAMES, {
'is-selected': deviceType === 'Tablet',
} ) }
aria-label="Tablet"
aria-label="Tablet View"
onClick={ () => {
switchDeviceType( 'Tablet' );
} }
@ -111,7 +111,7 @@ export function DeviceToolbar( { isEditorLoading = false } ) {
className={ clsx( BUTTON_CLASS_NAMES, {
'is-selected': deviceType === 'Mobile',
} ) }
aria-label="Mobile"
aria-label="Mobile View"
onClick={ () => {
switchDeviceType( 'Mobile' );
} }
@ -125,7 +125,7 @@ export function DeviceToolbar( { isEditorLoading = false } ) {
<button
disabled={ isEditorLoading }
className={ clsx( BUTTON_CLASS_NAMES ) }
aria-label="Zoom out"
aria-label={ isZoomedOut ? 'Zoom In View' : 'Zoom Out View' }
onClick={ () => {
setDeviceType( 'Desktop' );
toggleZoomOut();

4
plugins/woocommerce/changelog/add-cys-zoom-e2e-tests Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: add
E2E test coverage for CYS device toolbar

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

@ -315,6 +315,40 @@ test.describe( 'Assembler -> Full composability', { tag: '@gutenberg' }, () => {
await expect( defaultPattern ).toBeVisible();
} );
test( 'Clicking buttons in resize and zoom toolbar changes the frame size', async ( {
pageObject,
baseURL,
} ) => {
await prepareAssembler( pageObject, baseURL );
const assembler = await pageObject.getAssembler();
const editor = await pageObject.getEditor();
const toolbar = assembler.locator( '[aria-label="Resize Options"]' );
const resizeContainer = assembler.locator(
'.components-resizable-box__container'
);
const tabletBtn = assembler.locator( '[aria-label="Tablet View"]' );
const mobileBtn = assembler.locator( '[aria-label="Mobile View"]' );
await mobileBtn.click();
const mobileWidth = await resizeContainer.evaluate( ( element ) =>
window.getComputedStyle( element ).getPropertyValue( 'width' )
);
await tabletBtn.click();
const tabletWidth = await resizeContainer.evaluate( ( element ) =>
window.getComputedStyle( element ).getPropertyValue( 'width' )
);
await assembler.locator( '[aria-label="Zoom Out View"]' ).click();
await expect( editor.locator( '.is-zoomed-out' ) ).toBeVisible();
await expect( parseFloat( tabletWidth ) ).toBeGreaterThan(
parseFloat( mobileWidth )
);
await expect( toolbar ).toBeVisible();
} );
test( 'Clicking opt-in new patterns should be available', async ( {
pageObject,
baseURL,