From 28e4a81035b8bb64fd8b56b56e8908043b4580fe Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Tue, 8 Oct 2024 12:25:39 +0200 Subject: [PATCH 1/8] removed outdated e2 tests and added a new one --- test/e2e/specs/site-editor/zoom-out.spec.js | 61 ++++----------------- 1 file changed, 11 insertions(+), 50 deletions(-) diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js index 53b777a2545a34..8fd6908f839c31 100644 --- a/test/e2e/specs/site-editor/zoom-out.spec.js +++ b/test/e2e/specs/site-editor/zoom-out.spec.js @@ -3,65 +3,26 @@ */ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); -// The test is flaky and fails almost consistently. -// See: https://github.com/WordPress/gutenberg/issues/61806. -// eslint-disable-next-line playwright/no-skipped-test -test.describe.skip( 'Zoom Out', () => { +test.describe( 'Zoom Out', () => { test.beforeAll( async ( { requestUtils } ) => { - await requestUtils.activateTheme( 'emptytheme' ); - } ); - - test.beforeEach( async ( { admin, editor, page } ) => { - await admin.visitAdminPage( 'admin.php', 'page=gutenberg-experiments' ); - - const zoomedOutCheckbox = page.getByLabel( - 'Enable zoomed out view when selecting a pattern category in the main inserter.' - ); - - await zoomedOutCheckbox.setChecked( true ); - await expect( zoomedOutCheckbox ).toBeChecked(); - await page.getByRole( 'button', { name: 'Save Changes' } ).click(); - - await admin.visitSiteEditor(); - await editor.canvas.locator( 'body' ).click(); - } ); - - test.afterEach( async ( { admin, page } ) => { - await admin.visitAdminPage( 'admin.php', 'page=gutenberg-experiments' ); - const zoomedOutCheckbox = page.getByLabel( - 'Enable zoomed out view when selecting a pattern category in the main inserter.' - ); - await zoomedOutCheckbox.setChecked( false ); - await expect( zoomedOutCheckbox ).not.toBeChecked(); - await page.getByRole( 'button', { name: 'Save Changes' } ).click(); + await requestUtils.activateTheme( 'twentytwentyfour' ); } ); test.afterAll( async ( { requestUtils } ) => { await requestUtils.activateTheme( 'twentytwentyone' ); } ); - test( 'Clicking on inserter while on zoom-out should open the patterns tab on the inserter', async ( { - page, - } ) => { - // Trigger zoom out on Global Styles because there the inserter is not open. - await page.getByRole( 'button', { name: 'Styles' } ).click(); - await page.getByRole( 'button', { name: 'Browse styles' } ).click(); - - // select the 1st pattern - await page - .frameLocator( 'iframe[name="editor-canvas"]' ) - .locator( 'header' ) - .click(); - - await expect( page.getByLabel( 'Add pattern' ) ).toHaveCount( 3 ); - await page.getByLabel( 'Add pattern' ).first().click(); - await expect( page.getByLabel( 'Add pattern' ) ).toHaveCount( 2 ); + test.beforeEach( async ( { admin, editor } ) => { + await admin.visitSiteEditor(); + await editor.canvas.locator( 'body' ).click(); + } ); + test( 'Entering zoomed out mode zooms the canvas', async ( { page } ) => { + await page.getByLabel( 'Zoom Out' ).click(); await expect( page - .locator( '#tabs-2-allPatterns-view div' ) - .filter( { hasText: 'All' } ) - .nth( 1 ) - ).toBeVisible(); + .frameLocator( 'iframe[name="editor-canvas"]' ) + .locator( 'html' ) + ).toHaveCSS( 'transform', 'matrix(0.75, 0, 0, 0.75, 0, 0)' ); } ); } ); From e1554d56d794b9559be2eef513969f1c6ff1f8d4 Mon Sep 17 00:00:00 2001 From: Maggie Date: Tue, 8 Oct 2024 18:28:56 +0200 Subject: [PATCH 2/8] Update test/e2e/specs/site-editor/zoom-out.spec.js Co-authored-by: Daniel Richards --- test/e2e/specs/site-editor/zoom-out.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js index 8fd6908f839c31..09ca849ad911cb 100644 --- a/test/e2e/specs/site-editor/zoom-out.spec.js +++ b/test/e2e/specs/site-editor/zoom-out.spec.js @@ -21,7 +21,7 @@ test.describe( 'Zoom Out', () => { await page.getByLabel( 'Zoom Out' ).click(); await expect( page - .frameLocator( 'iframe[name="editor-canvas"]' ) + .canvas .locator( 'html' ) ).toHaveCSS( 'transform', 'matrix(0.75, 0, 0, 0.75, 0, 0)' ); } ); From 6eb61772b10c187423926f8ede0bdd66d7886553 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Tue, 8 Oct 2024 18:39:21 +0200 Subject: [PATCH 3/8] fixed canvas selector --- test/e2e/specs/site-editor/zoom-out.spec.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js index 09ca849ad911cb..94ef82dca73b76 100644 --- a/test/e2e/specs/site-editor/zoom-out.spec.js +++ b/test/e2e/specs/site-editor/zoom-out.spec.js @@ -17,12 +17,16 @@ test.describe( 'Zoom Out', () => { await editor.canvas.locator( 'body' ).click(); } ); - test( 'Entering zoomed out mode zooms the canvas', async ( { page } ) => { + test( 'Entering zoomed out mode zooms the canvas', async ( { + page, + editor, + } ) => { await page.getByLabel( 'Zoom Out' ).click(); - await expect( - page - .canvas - .locator( 'html' ) - ).toHaveCSS( 'transform', 'matrix(0.75, 0, 0, 0.75, 0, 0)' ); + const frame = editor.canvas.locator( 'html' ); + await expect( frame ).toHaveCSS( + 'transform', + 'matrix(0.75, 0, 0, 0.75, 0, 0)' + ); + await page.pause(); } ); } ); From dceff24d5b78d002e99bdeb8d08335504e8fc4bd Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Tue, 8 Oct 2024 18:52:25 +0200 Subject: [PATCH 4/8] check the size of the iframe after scaling --- test/e2e/specs/site-editor/zoom-out.spec.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js index 94ef82dca73b76..904e2762eb9746 100644 --- a/test/e2e/specs/site-editor/zoom-out.spec.js +++ b/test/e2e/specs/site-editor/zoom-out.spec.js @@ -22,11 +22,18 @@ test.describe( 'Zoom Out', () => { editor, } ) => { await page.getByLabel( 'Zoom Out' ).click(); - const frame = editor.canvas.locator( 'html' ); - await expect( frame ).toHaveCSS( + const iframe = page.locator( 'iframe[name="editor-canvas"]' ); + const html = editor.canvas.locator( 'html' ); + + //Check that the html is scaled + await expect( html ).toHaveCSS( 'transform', 'matrix(0.75, 0, 0, 0.75, 0, 0)' ); - await page.pause(); + const iframeRect = await iframe.boundingBox(); + const htmlRect = await html.boundingBox(); + + //Check that the iframe is larger than the html + expect( iframeRect.width ).toBeGreaterThan( htmlRect.width ); } ); } ); From d00a5f894cd614b55b54fb7d7142ae62cd22ba50 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Tue, 8 Oct 2024 19:06:13 +0200 Subject: [PATCH 5/8] check if the canvas is separated --- test/e2e/specs/site-editor/zoom-out.spec.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js index 904e2762eb9746..33ef3c5bcc8c98 100644 --- a/test/e2e/specs/site-editor/zoom-out.spec.js +++ b/test/e2e/specs/site-editor/zoom-out.spec.js @@ -35,5 +35,22 @@ test.describe( 'Zoom Out', () => { //Check that the iframe is larger than the html expect( iframeRect.width ).toBeGreaterThan( htmlRect.width ); + + //Check that the zoomed out content has a frame around it + expect( htmlRect.x ).toBeGreaterThan( iframeRect.x ); + + //We use border to separate the content from the frame so we need + //to check that that is present too, since boundingBox() + //includes the border to calculate the position + const borderWidths = await html.evaluate( ( el ) => { + const styles = window.getComputedStyle( el ); + return { + top: parseFloat( styles.borderTopWidth ), + right: parseFloat( styles.borderRightWidth ), + bottom: parseFloat( styles.borderBottomWidth ), + left: parseFloat( styles.borderLeftWidth ), + }; + } ); + expect( htmlRect.y + borderWidths.top ).toBeGreaterThan( iframeRect.y ); } ); } ); From be1e548f5ebf343dd620c7b8403c424a4d2ea10c Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Thu, 10 Oct 2024 18:19:23 +0200 Subject: [PATCH 6/8] reformat comments --- test/e2e/specs/site-editor/zoom-out.spec.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js index 33ef3c5bcc8c98..9b665f340f5ea4 100644 --- a/test/e2e/specs/site-editor/zoom-out.spec.js +++ b/test/e2e/specs/site-editor/zoom-out.spec.js @@ -25,7 +25,7 @@ test.describe( 'Zoom Out', () => { const iframe = page.locator( 'iframe[name="editor-canvas"]' ); const html = editor.canvas.locator( 'html' ); - //Check that the html is scaled + // Check that the html is scaled. await expect( html ).toHaveCSS( 'transform', 'matrix(0.75, 0, 0, 0.75, 0, 0)' @@ -33,15 +33,15 @@ test.describe( 'Zoom Out', () => { const iframeRect = await iframe.boundingBox(); const htmlRect = await html.boundingBox(); - //Check that the iframe is larger than the html + // Check that the iframe is larger than the html. expect( iframeRect.width ).toBeGreaterThan( htmlRect.width ); - //Check that the zoomed out content has a frame around it + // Check that the zoomed out content has a frame around it. expect( htmlRect.x ).toBeGreaterThan( iframeRect.x ); - //We use border to separate the content from the frame so we need - //to check that that is present too, since boundingBox() - //includes the border to calculate the position + // We use border to separate the content from the frame so we need + // to check that that is present too, since boundingBox() + // includes the border to calculate the position. const borderWidths = await html.evaluate( ( el ) => { const styles = window.getComputedStyle( el ); return { From 79aacfb18ad0bb8d7dde61b4efe9a2dfb6d1df1e Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Thu, 10 Oct 2024 18:23:45 +0200 Subject: [PATCH 7/8] updated test after rebasing trunk with latest changes --- test/e2e/specs/site-editor/zoom-out.spec.js | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js index 9b665f340f5ea4..51da02e08e4fc6 100644 --- a/test/e2e/specs/site-editor/zoom-out.spec.js +++ b/test/e2e/specs/site-editor/zoom-out.spec.js @@ -28,7 +28,7 @@ test.describe( 'Zoom Out', () => { // Check that the html is scaled. await expect( html ).toHaveCSS( 'transform', - 'matrix(0.75, 0, 0, 0.75, 0, 0)' + 'matrix(0.67, 0, 0, 0.67, 0, 0)' ); const iframeRect = await iframe.boundingBox(); const htmlRect = await html.boundingBox(); @@ -38,19 +38,5 @@ test.describe( 'Zoom Out', () => { // Check that the zoomed out content has a frame around it. expect( htmlRect.x ).toBeGreaterThan( iframeRect.x ); - - // We use border to separate the content from the frame so we need - // to check that that is present too, since boundingBox() - // includes the border to calculate the position. - const borderWidths = await html.evaluate( ( el ) => { - const styles = window.getComputedStyle( el ); - return { - top: parseFloat( styles.borderTopWidth ), - right: parseFloat( styles.borderRightWidth ), - bottom: parseFloat( styles.borderBottomWidth ), - left: parseFloat( styles.borderLeftWidth ), - }; - } ); - expect( htmlRect.y + borderWidths.top ).toBeGreaterThan( iframeRect.y ); } ); } ); From 39e5f419a38f7da032949580efc52d62f534e67a Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Thu, 10 Oct 2024 18:30:49 +0200 Subject: [PATCH 8/8] recalculate the position using padding instead of border --- test/e2e/specs/site-editor/zoom-out.spec.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js index 51da02e08e4fc6..6ede9014d2a303 100644 --- a/test/e2e/specs/site-editor/zoom-out.spec.js +++ b/test/e2e/specs/site-editor/zoom-out.spec.js @@ -37,6 +37,11 @@ test.describe( 'Zoom Out', () => { expect( iframeRect.width ).toBeGreaterThan( htmlRect.width ); // Check that the zoomed out content has a frame around it. + const paddingTop = await html.evaluate( ( element ) => { + const paddingValue = window.getComputedStyle( element ).paddingTop; + return parseFloat( paddingValue ); + } ); + expect( htmlRect.y + paddingTop ).toBeGreaterThan( iframeRect.y ); expect( htmlRect.x ).toBeGreaterThan( iframeRect.x ); } ); } );