From c1cd70fa60cf041ff72de88062484a5caa92fc09 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 2 Nov 2023 10:25:20 +0400 Subject: [PATCH 1/2] Migrate 'block context' e2e tests to Playwright --- packages/e2e-tests/plugins/block-context.php | 2 +- .../editor/plugins/block-context.spec.js | 78 +++++++++++++++++++ 2 files changed, 79 insertions(+), 1 deletion(-) create mode 100644 test/e2e/specs/editor/plugins/block-context.spec.js diff --git a/packages/e2e-tests/plugins/block-context.php b/packages/e2e-tests/plugins/block-context.php index f640665bb2f0ed..a251e9763e5253 100644 --- a/packages/e2e-tests/plugins/block-context.php +++ b/packages/e2e-tests/plugins/block-context.php @@ -54,7 +54,7 @@ function gutenberg_test_register_context_blocks() { $block->context['postType'], ); - return implode( ',', $ordered_context ); + return '

' . implode( ',', $ordered_context ) . '

'; }, 'editor_script_handles' => array( 'gutenberg-test-block-context' ), ) diff --git a/test/e2e/specs/editor/plugins/block-context.spec.js b/test/e2e/specs/editor/plugins/block-context.spec.js new file mode 100644 index 00000000000000..1fc91debd1145f --- /dev/null +++ b/test/e2e/specs/editor/plugins/block-context.spec.js @@ -0,0 +1,78 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'Block context', () => { + test.beforeAll( async ( { requestUtils } ) => { + await requestUtils.activatePlugin( 'gutenberg-test-block-context' ); + } ); + + test.beforeEach( async ( { admin } ) => { + await admin.createNewPost(); + } ); + + test.afterAll( async ( { requestUtils } ) => { + await requestUtils.deactivatePlugin( 'gutenberg-test-block-context' ); + } ); + + test( 'Block context propagates to inner blocks', async ( { + editor, + page, + } ) => { + await editor.insertBlock( { name: 'gutenberg/test-context-provider' } ); + + const providerBlock = page.getByRole( 'document', { + name: 'Block: Test Context Provider', + } ); + const consumerBlock = page.getByRole( 'document', { + name: 'Block: Test Context Consumer', + } ); + + await expect( consumerBlock ).toBeVisible(); + + // Verify initial contents of consumer. + await expect( consumerBlock ).toHaveText( 'The record ID is: 0' ); + + // Change the attribute value associated with the context. + await providerBlock.getByRole( 'textbox' ).fill( '123' ); + + await expect( consumerBlock ).toHaveText( 'The record ID is: 123' ); + } ); + + test( 'Block context is reflected in the preview', async ( { + editor, + page, + } ) => { + const editorPage = page; + + await editor.insertBlock( { name: 'gutenberg/test-context-provider' } ); + + // Open the preview page. + const previewPage = await editor.openPreviewPage(); + const previewContent = previewPage.locator( '.entry-content p' ); + + await expect( previewContent ).toHaveText( /^0,\d+,post$/ ); + + // Return to editor to change context value to non-default. + await editorPage.bringToFront(); + await editorPage + .getByRole( 'document', { + name: 'Block: Test Context Provider', + } ) + .getByRole( 'textbox' ) + .fill( '123' ); + + await editorPage + .getByRole( 'button', { name: 'Preview', expanded: false } ) + .click(); + await editorPage + .getByRole( 'menuitem', { name: 'Preview in new tab' } ) + .click(); + + // Check non-default context values are populated. + await expect( previewContent ).toHaveText( /^123,\d+,post$/ ); + await editorPage.bringToFront(); + await previewPage.close(); + } ); +} ); From b9439f9f4873751502f325836ebe9e6d7732d013 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 2 Nov 2023 10:59:49 +0400 Subject: [PATCH 2/2] Delete old test file --- .../editor/plugins/block-context.test.js | 84 ------------------- 1 file changed, 84 deletions(-) delete mode 100644 packages/e2e-tests/specs/editor/plugins/block-context.test.js diff --git a/packages/e2e-tests/specs/editor/plugins/block-context.test.js b/packages/e2e-tests/specs/editor/plugins/block-context.test.js deleted file mode 100644 index 55b905c190dc98..00000000000000 --- a/packages/e2e-tests/specs/editor/plugins/block-context.test.js +++ /dev/null @@ -1,84 +0,0 @@ -/** - * WordPress dependencies - */ -import { - activatePlugin, - createNewPost, - deactivatePlugin, - insertBlock, - saveDraft, - openPreviewPage, -} from '@wordpress/e2e-test-utils'; - -describe( 'Block context', () => { - beforeAll( async () => { - await activatePlugin( 'gutenberg-test-block-context' ); - } ); - - beforeEach( async () => { - await createNewPost(); - } ); - - afterAll( async () => { - await deactivatePlugin( 'gutenberg-test-block-context' ); - } ); - - test( 'Block context propagates to inner blocks', async () => { - await insertBlock( 'Test Context Provider' ); - - // Inserting the context provider block should select the first inner - // block of the template. Verify the contents of the consumer. - let innerBlockText = await page.evaluate( - () => document.activeElement.textContent - ); - expect( innerBlockText ).toBe( 'The record ID is: 0' ); - - // Change the attribute value associated with the context. - await page.keyboard.press( 'ArrowUp' ); - await page.keyboard.type( '123' ); - - // Verify propagated context changes. - await page.keyboard.press( 'ArrowDown' ); - innerBlockText = await page.evaluate( - () => document.activeElement.textContent - ); - expect( innerBlockText ).toBe( 'The record ID is: 123' ); - } ); - - test( 'Block context is reflected in the preview', async () => { - await insertBlock( 'Test Context Provider' ); - const editorPage = page; - const previewPage = await openPreviewPage( editorPage ); - await previewPage.waitForSelector( '.entry-content' ); - - // Check default context values are populated. - let content = await previewPage.$eval( - '.entry-content', - ( contentWrapper ) => contentWrapper.textContent.trim() - ); - expect( content ).toMatch( /^0,\d+,post$/ ); - - // Return to editor to change context value to non-default. - await editorPage.bringToFront(); - await editorPage.focus( - '[data-type="gutenberg/test-context-provider"] input' - ); - await editorPage.keyboard.press( 'ArrowRight' ); - await editorPage.keyboard.type( '123' ); - await editorPage.waitForSelector( '.editor-post-save-draft' ); // Not entirely clear why it's asynchronous, but likely React scheduling prioritizing keyboard event and deferring the UI update. - await saveDraft(); - - // Check non-default context values are populated. - await previewPage.bringToFront(); - await previewPage.reload(); - content = await previewPage.$eval( - '.entry-content', - ( contentWrapper ) => contentWrapper.textContent.trim() - ); - expect( content ).toMatch( /^123,\d+,post$/ ); - - // Clean up. - await editorPage.bringToFront(); - await previewPage.close(); - } ); -} );