From cd44d15673766eb94a9e4a293db5e965edfffd5d Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 3 Oct 2023 21:44:38 +0400 Subject: [PATCH 1/3] Migrate 'iframed block editor settings styles' tests to Playwright --- ...amed-enqueue-block-editor-settings.spec.js | 97 +++++++++++++++++++ 1 file changed, 97 insertions(+) create mode 100644 test/e2e/specs/editor/plugins/iframed-enqueue-block-editor-settings.spec.js diff --git a/test/e2e/specs/editor/plugins/iframed-enqueue-block-editor-settings.spec.js b/test/e2e/specs/editor/plugins/iframed-enqueue-block-editor-settings.spec.js new file mode 100644 index 00000000000000..c5c9980e0020ab --- /dev/null +++ b/test/e2e/specs/editor/plugins/iframed-enqueue-block-editor-settings.spec.js @@ -0,0 +1,97 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'iframed block editor settings styles', () => { + test.beforeAll( async ( { requestUtils } ) => { + await requestUtils.activatePlugin( + 'gutenberg-test-iframed-enqueue-block-editor-settings' + ); + } ); + + test.beforeEach( async ( { admin } ) => { + await admin.createNewPost(); + } ); + + test.afterAll( async ( { requestUtils } ) => { + await requestUtils.deactivatePlugin( + 'gutenberg-test-iframed-enqueue-block-editor-settings' + ); + } ); + + test( 'should load styles added through block editor settings', async ( { + editor, + page, + } ) => { + const defaultBlock = editor.canvas.getByRole( 'button', { + name: 'Add default block', + } ); + + // Expect a red border (added in PHP). + await expect( defaultBlock ).toHaveCSS( + 'border-color', + 'rgb(255, 0, 0)' + ); + + await page.evaluate( () => { + const settings = window.wp.data + .select( 'core/editor' ) + .getEditorSettings(); + window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( { + ...settings, + styles: [ + ...settings.styles, + { + css: 'p { border-width: 2px; }', + __unstableType: 'plugin', + }, + ], + } ); + } ); + + await expect( defaultBlock ).toHaveCSS( 'border-width', '2px' ); + } ); + + test( 'should load theme styles added through block editor settings', async ( { + editor, + page, + } ) => { + const defaultBlock = editor.canvas.getByRole( 'button', { + name: 'Add default block', + } ); + + await page.evaluate( () => { + // Make sure that theme styles are added even if the theme styles + // preference is off. + window.wp.data + .dispatch( 'core/edit-post' ) + .toggleFeature( 'themeStyles' ); + const settings = window.wp.data + .select( 'core/editor' ) + .getEditorSettings(); + window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( { + ...settings, + styles: [ + ...settings.styles, + { + css: 'p { border-width: 2px; }', + __unstableType: 'theme', + }, + ], + } ); + } ); + + // Expect a 1px border because theme styles are disabled. + await expect( defaultBlock ).toHaveCSS( 'border-width', '1px' ); + + await page.evaluate( () => { + // Now enable theme styles. + window.wp.data + .dispatch( 'core/edit-post' ) + .toggleFeature( 'themeStyles' ); + } ); + + await expect( defaultBlock ).toHaveCSS( 'border-width', '2px' ); + } ); +} ); From 448b075ef8b25aea09b0bacb2cf16698a0395562 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 3 Oct 2023 21:45:53 +0400 Subject: [PATCH 2/3] Remove old test file --- ...amed-enqueue-block-editor-settings.test.js | 108 ------------------ 1 file changed, 108 deletions(-) delete mode 100644 packages/e2e-tests/specs/editor/plugins/iframed-enqueue-block-editor-settings.test.js diff --git a/packages/e2e-tests/specs/editor/plugins/iframed-enqueue-block-editor-settings.test.js b/packages/e2e-tests/specs/editor/plugins/iframed-enqueue-block-editor-settings.test.js deleted file mode 100644 index df6eb4bf840328..00000000000000 --- a/packages/e2e-tests/specs/editor/plugins/iframed-enqueue-block-editor-settings.test.js +++ /dev/null @@ -1,108 +0,0 @@ -/** - * WordPress dependencies - */ -import { - activatePlugin, - createNewPost, - deactivatePlugin, - canvas, - activateTheme, -} from '@wordpress/e2e-test-utils'; - -async function getComputedStyle( context, selector, property ) { - return await context.evaluate( - ( sel, prop ) => - window.getComputedStyle( document.querySelector( sel ) )[ prop ], - selector, - property - ); -} - -describe( 'iframed block editor settings styles', () => { - beforeEach( async () => { - // Activate the empty theme (block based theme), which is iframed. - await activateTheme( 'emptytheme' ); - await activatePlugin( - 'gutenberg-test-iframed-enqueue-block-editor-settings' - ); - await createNewPost(); - } ); - - afterEach( async () => { - await deactivatePlugin( - 'gutenberg-test-iframed-enqueue-block-editor-settings' - ); - await activateTheme( 'twentytwentyone' ); - } ); - - it( 'should load styles added through block editor settings', async () => { - await page.waitForSelector( 'iframe[name="editor-canvas"]' ); - // Expect a red border (added in PHP). - expect( await getComputedStyle( canvas(), 'p', 'border-color' ) ).toBe( - 'rgb(255, 0, 0)' - ); - - await page.evaluate( () => { - const settings = window.wp.data - .select( 'core/editor' ) - .getEditorSettings(); - wp.data.dispatch( 'core/editor' ).updateEditorSettings( { - ...settings, - styles: [ - ...settings.styles, - { - css: 'p { border-width: 2px; }', - __unstableType: 'plugin', - }, - ], - } ); - } ); - - // Expect a 2px border (added in JS). - expect( await getComputedStyle( canvas(), 'p', 'border-width' ) ).toBe( - '2px' - ); - } ); - - it( 'should load theme styles added through block editor settings', async () => { - await page.waitForSelector( 'iframe[name="editor-canvas"]' ); - - await page.evaluate( () => { - // Make sure that theme styles are added even if the theme styles - // preference is off. - window.wp.data - .dispatch( 'core/edit-post' ) - .toggleFeature( 'themeStyles' ); - const settings = window.wp.data - .select( 'core/editor' ) - .getEditorSettings(); - wp.data.dispatch( 'core/editor' ).updateEditorSettings( { - ...settings, - styles: [ - ...settings.styles, - { - css: 'p { border-width: 2px; }', - __unstableType: 'theme', - }, - ], - } ); - } ); - - // Expect a 1px border because theme styles are disabled. - expect( await getComputedStyle( canvas(), 'p', 'border-width' ) ).toBe( - '1px' - ); - - await page.evaluate( () => { - // Now enable theme styles. - window.wp.data - .dispatch( 'core/edit-post' ) - .toggleFeature( 'themeStyles' ); - } ); - - // Expect a 2px border because theme styles are enabled. - expect( await getComputedStyle( canvas(), 'p', 'border-width' ) ).toBe( - '2px' - ); - } ); -} ); From ae54f0bb97fd028099a01c874296309692f8fcd1 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 3 Oct 2023 21:51:06 +0400 Subject: [PATCH 3/3] Missing comments --- .../plugins/iframed-enqueue-block-editor-settings.spec.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/test/e2e/specs/editor/plugins/iframed-enqueue-block-editor-settings.spec.js b/test/e2e/specs/editor/plugins/iframed-enqueue-block-editor-settings.spec.js index c5c9980e0020ab..b4f502b2c9d0ba 100644 --- a/test/e2e/specs/editor/plugins/iframed-enqueue-block-editor-settings.spec.js +++ b/test/e2e/specs/editor/plugins/iframed-enqueue-block-editor-settings.spec.js @@ -50,6 +50,7 @@ test.describe( 'iframed block editor settings styles', () => { } ); } ); + // Expect a 2px border (added in JS). await expect( defaultBlock ).toHaveCSS( 'border-width', '2px' ); } ); @@ -92,6 +93,7 @@ test.describe( 'iframed block editor settings styles', () => { .toggleFeature( 'themeStyles' ); } ); + // Expect a 2px border because theme styles are enabled. await expect( defaultBlock ).toHaveCSS( 'border-width', '2px' ); } ); } );