From 71d6b555da2db4102923c78e292ed74acc97a916 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 10 Feb 2023 00:11:06 +0400 Subject: [PATCH 1/4] Migrate Heading block tests to Playwright --- .../blocks/__snapshots__/heading.test.js.snap | 51 ------ .../specs/editor/blocks/heading.test.js | 113 ------------ test/e2e/specs/editor/blocks/heading.spec.js | 161 ++++++++++++++++++ 3 files changed, 161 insertions(+), 164 deletions(-) delete mode 100644 packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap delete mode 100644 packages/e2e-tests/specs/editor/blocks/heading.test.js create mode 100644 test/e2e/specs/editor/blocks/heading.spec.js diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap deleted file mode 100644 index 68fd617f7d40c..0000000000000 --- a/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap +++ /dev/null @@ -1,51 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Heading can be created by prefixing existing content with number signs and a space 1`] = ` -" -

4

-" -`; - -exports[`Heading can be created by prefixing number sign and a space 1`] = ` -" -

3

-" -`; - -exports[`Heading should correctly apply named colors 1`] = ` -" -

Heading

-" -`; - -exports[`Heading should create a paragraph block above when pressing enter at the start 1`] = ` -" -

- - - -

a

-" -`; - -exports[`Heading should create a paragraph block below when pressing enter at the end 1`] = ` -" -

a

- - - -

-" -`; - -exports[`Heading should not work with the list input rule 1`] = ` -" -

1. H

-" -`; - -exports[`Heading should work with the format input rules 1`] = ` -" -

code

-" -`; diff --git a/packages/e2e-tests/specs/editor/blocks/heading.test.js b/packages/e2e-tests/specs/editor/blocks/heading.test.js deleted file mode 100644 index fb89bed12accc..0000000000000 --- a/packages/e2e-tests/specs/editor/blocks/heading.test.js +++ /dev/null @@ -1,113 +0,0 @@ -/** - * WordPress dependencies - */ -import { - clickBlockAppender, - createNewPost, - getEditedPostContent, - pressKeyWithModifier, -} from '@wordpress/e2e-test-utils'; - -describe( 'Heading', () => { - const COLOR_ITEM_SELECTOR = - '.block-editor-panel-color-gradient-settings__dropdown'; - const CUSTOM_COLOR_BUTTON_X_SELECTOR = `.components-color-palette__custom-color`; - const COLOR_INPUT_FIELD_SELECTOR = - '.components-color-picker .components-input-control__input'; - - beforeEach( async () => { - await createNewPost(); - } ); - - it( 'can be created by prefixing number sign and a space', async () => { - await clickBlockAppender(); - await page.keyboard.type( '### 3' ); - - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - - it( 'can be created by prefixing existing content with number signs and a space', async () => { - await clickBlockAppender(); - await page.keyboard.type( '4' ); - await page.keyboard.press( 'ArrowLeft' ); - await page.keyboard.type( '#### ' ); - - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - - it( 'should not work with the list input rule', async () => { - await clickBlockAppender(); - await page.keyboard.type( '## 1. H' ); - - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - - it( 'should work with the format input rules', async () => { - await clickBlockAppender(); - await page.keyboard.type( '## `code`' ); - - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - - it( 'should create a paragraph block above when pressing enter at the start', async () => { - await page.keyboard.press( 'Enter' ); - await page.keyboard.type( '## a' ); - await page.keyboard.press( 'ArrowLeft' ); - await page.keyboard.press( 'Enter' ); - - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - - it( 'should create a paragraph block below when pressing enter at the end', async () => { - await page.keyboard.press( 'Enter' ); - await page.keyboard.type( '## a' ); - await page.keyboard.press( 'Enter' ); - - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - - it( 'should correctly apply custom colors', async () => { - await clickBlockAppender(); - await page.keyboard.type( '### Heading' ); - - const textColorButton = await page.waitForSelector( - COLOR_ITEM_SELECTOR - ); - await textColorButton.click(); - - const customTextColorButton = await page.waitForSelector( - CUSTOM_COLOR_BUTTON_X_SELECTOR - ); - - await customTextColorButton.click(); - await page.waitForSelector( COLOR_INPUT_FIELD_SELECTOR ); - await page.click( COLOR_INPUT_FIELD_SELECTOR ); - await pressKeyWithModifier( 'primary', 'A' ); - await page.keyboard.type( '4b7f4d' ); - await page.keyboard.press( 'Enter' ); - expect( await getEditedPostContent() ).toMatchInlineSnapshot( ` - " -

Heading

- " - ` ); - } ); - - it( 'should correctly apply named colors', async () => { - await clickBlockAppender(); - await page.keyboard.type( '## Heading' ); - - const textColorButton = await page.waitForSelector( - COLOR_ITEM_SELECTOR - ); - await textColorButton.click(); - - const colorButtonSelector = `//button[@aria-label='Color: Luminous vivid orange']`; - const [ colorButton ] = await page.$x( colorButtonSelector ); - await colorButton.click(); - await page.waitForXPath( - `${ colorButtonSelector }[@aria-pressed='true']` - ); - await page.click( 'h2[data-type="core/heading"]' ); - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); -} ); diff --git a/test/e2e/specs/editor/blocks/heading.spec.js b/test/e2e/specs/editor/blocks/heading.spec.js new file mode 100644 index 0000000000000..05ffb60ee0939 --- /dev/null +++ b/test/e2e/specs/editor/blocks/heading.spec.js @@ -0,0 +1,161 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'Heading', () => { + test.beforeEach( async ( { admin } ) => { + await admin.createNewPost(); + } ); + + test( 'can be created by prefixing number sign and a space', async ( { + editor, + page, + } ) => { + await page.click( 'role=button[name="Add default block"i]' ); + await page.keyboard.type( '### 3' ); + + await expect.poll( editor.getEditedPostContent ).toBe( + ` +

3

+` + ); + } ); + + test( 'can be created by prefixing existing content with number signs and a space', async ( { + editor, + page, + } ) => { + await page.click( 'role=button[name="Add default block"i]' ); + await page.keyboard.type( '4' ); + await page.keyboard.press( 'ArrowLeft' ); + await page.keyboard.type( '#### ' ); + + await expect.poll( editor.getEditedPostContent ) + .toBe( ` +

4

+` ); + } ); + + test( 'should not work with the list input rule', async ( { + editor, + page, + } ) => { + await page.click( 'role=button[name="Add default block"i]' ); + await page.keyboard.type( '## 1. H' ); + + await expect.poll( editor.getEditedPostContent ).toBe( + ` +

1. H

+` + ); + } ); + + test( 'should work with the format input rules', async ( { + editor, + page, + } ) => { + await page.click( 'role=button[name="Add default block"i]' ); + await page.keyboard.type( '## `code`' ); + + await expect.poll( editor.getEditedPostContent ).toBe( + ` +

code

+` + ); + } ); + + test( 'should create a paragraph block above when pressing enter at the start', async ( { + editor, + page, + } ) => { + await page.keyboard.press( 'Enter' ); + await page.keyboard.type( '## a' ); + await page.keyboard.press( 'ArrowLeft' ); + await page.keyboard.press( 'Enter' ); + + await expect.poll( editor.getEditedPostContent ).toBe( + ` +

+ + + +

a

+` + ); + } ); + + test( 'should create a paragraph block below when pressing enter at the end', async ( { + editor, + page, + } ) => { + await page.keyboard.press( 'Enter' ); + await page.keyboard.type( '## a' ); + await page.keyboard.press( 'Enter' ); + + await expect.poll( editor.getEditedPostContent ).toBe( + ` +

a

+ + + +

+` + ); + } ); + + test( 'should correctly apply custom colors', async ( { + editor, + page, + } ) => { + await page.click( 'role=button[name="Add default block"i]' ); + await page.keyboard.type( '### Heading' ); + + const textColor = page + .getByRole( 'region', { + name: 'Editor settings', + } ) + .getByRole( 'button', { name: 'Text' } ); + + await textColor.click(); + await page + .getByRole( 'button', { name: /Custom color picker./i } ) + .click(); + + await page + .getByRole( 'textbox', { name: 'Hex color' } ) + .fill( '4b7f4d' ); + + await expect.poll( editor.getEditedPostContent ) + .toBe( ` +

Heading

+` ); + } ); + + test( 'should correctly apply named colors', async ( { editor, page } ) => { + await page.click( 'role=button[name="Add default block"i]' ); + await page.keyboard.type( '## Heading' ); + + const textColor = page + .getByRole( 'region', { + name: 'Editor settings', + } ) + .getByRole( 'button', { name: 'Text' } ); + + await textColor.click(); + + await page + .getByRole( 'button', { + name: 'Color: Luminous vivid orange', + } ) + .click(); + + // Close the popover. + await textColor.click(); + + await expect.poll( editor.getEditedPostContent ) + .toBe( ` +

Heading

+` ); + } ); +} ); From 3aa1b8d9180442c6faa8234473384d1dca84bc1e Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 10 Feb 2023 13:07:57 +0400 Subject: [PATCH 2/4] Open document settings before color tests --- test/e2e/specs/editor/blocks/heading.spec.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/test/e2e/specs/editor/blocks/heading.spec.js b/test/e2e/specs/editor/blocks/heading.spec.js index 05ffb60ee0939..0dc750473d4b7 100644 --- a/test/e2e/specs/editor/blocks/heading.spec.js +++ b/test/e2e/specs/editor/blocks/heading.spec.js @@ -110,6 +110,7 @@ test.describe( 'Heading', () => { } ) => { await page.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '### Heading' ); + await editor.openDocumentSettingsSidebar(); const textColor = page .getByRole( 'region', { @@ -135,6 +136,7 @@ test.describe( 'Heading', () => { test( 'should correctly apply named colors', async ( { editor, page } ) => { await page.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '## Heading' ); + await editor.openDocumentSettingsSidebar(); const textColor = page .getByRole( 'region', { From 0840187cd4be7c1aad96ce310b27648191de6b68 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 10 Feb 2023 13:28:32 +0400 Subject: [PATCH 3/4] Use the new recommended method --- test/e2e/specs/editor/blocks/heading.spec.js | 81 +++++++++++--------- 1 file changed, 44 insertions(+), 37 deletions(-) diff --git a/test/e2e/specs/editor/blocks/heading.spec.js b/test/e2e/specs/editor/blocks/heading.spec.js index 0dc750473d4b7..ef08481ef1353 100644 --- a/test/e2e/specs/editor/blocks/heading.spec.js +++ b/test/e2e/specs/editor/blocks/heading.spec.js @@ -15,11 +15,12 @@ test.describe( 'Heading', () => { await page.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '### 3' ); - await expect.poll( editor.getEditedPostContent ).toBe( - ` -

3

-` - ); + await expect.poll( editor.getBlocks ).toMatchObject( [ + { + name: 'core/heading', + attributes: { content: '3', level: 3 }, + }, + ] ); } ); test( 'can be created by prefixing existing content with number signs and a space', async ( { @@ -31,10 +32,12 @@ test.describe( 'Heading', () => { await page.keyboard.press( 'ArrowLeft' ); await page.keyboard.type( '#### ' ); - await expect.poll( editor.getEditedPostContent ) - .toBe( ` -

4

-` ); + await expect.poll( editor.getBlocks ).toMatchObject( [ + { + name: 'core/heading', + attributes: { content: '4', level: 4 }, + }, + ] ); } ); test( 'should not work with the list input rule', async ( { @@ -44,11 +47,12 @@ test.describe( 'Heading', () => { await page.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '## 1. H' ); - await expect.poll( editor.getEditedPostContent ).toBe( - ` -

1. H

-` - ); + await expect.poll( editor.getBlocks ).toMatchObject( [ + { + name: 'core/heading', + attributes: { content: '1. H', level: 2 }, + }, + ] ); } ); test( 'should work with the format input rules', async ( { @@ -58,11 +62,12 @@ test.describe( 'Heading', () => { await page.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '## `code`' ); - await expect.poll( editor.getEditedPostContent ).toBe( - ` -

code

-` - ); + await expect.poll( editor.getBlocks ).toMatchObject( [ + { + name: 'core/heading', + attributes: { content: 'code', level: 2 }, + }, + ] ); } ); test( 'should create a paragraph block above when pressing enter at the start', async ( { @@ -74,15 +79,16 @@ test.describe( 'Heading', () => { await page.keyboard.press( 'ArrowLeft' ); await page.keyboard.press( 'Enter' ); - await expect.poll( editor.getEditedPostContent ).toBe( - ` -

- - - -

a

-` - ); + await expect.poll( editor.getBlocks ).toMatchObject( [ + { + name: 'core/paragraph', + attributes: { content: '' }, + }, + { + name: 'core/heading', + attributes: { content: 'a', level: 2 }, + }, + ] ); } ); test( 'should create a paragraph block below when pressing enter at the end', async ( { @@ -93,15 +99,16 @@ test.describe( 'Heading', () => { await page.keyboard.type( '## a' ); await page.keyboard.press( 'Enter' ); - await expect.poll( editor.getEditedPostContent ).toBe( - ` -

a

- - - -

-` - ); + await expect.poll( editor.getBlocks ).toMatchObject( [ + { + name: 'core/heading', + attributes: { content: 'a', level: 2 }, + }, + { + name: 'core/paragraph', + attributes: { content: '' }, + }, + ] ); } ); test( 'should correctly apply custom colors', async ( { From 24e57cb7fbb70dbca906535a8754c3c07e165987 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 10 Feb 2023 14:21:11 +0400 Subject: [PATCH 4/4] Update remaining assertions --- test/e2e/specs/editor/blocks/heading.spec.js | 28 ++++++++++++++------ 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/test/e2e/specs/editor/blocks/heading.spec.js b/test/e2e/specs/editor/blocks/heading.spec.js index ef08481ef1353..56154f3e668e0 100644 --- a/test/e2e/specs/editor/blocks/heading.spec.js +++ b/test/e2e/specs/editor/blocks/heading.spec.js @@ -134,10 +134,16 @@ test.describe( 'Heading', () => { .getByRole( 'textbox', { name: 'Hex color' } ) .fill( '4b7f4d' ); - await expect.poll( editor.getEditedPostContent ) - .toBe( ` -

Heading

-` ); + await expect.poll( editor.getBlocks ).toMatchObject( [ + { + name: 'core/heading', + attributes: { + content: 'Heading', + level: 3, + style: { color: { text: '#4b7f4d' } }, + }, + }, + ] ); } ); test( 'should correctly apply named colors', async ( { editor, page } ) => { @@ -162,9 +168,15 @@ test.describe( 'Heading', () => { // Close the popover. await textColor.click(); - await expect.poll( editor.getEditedPostContent ) - .toBe( ` -

Heading

-` ); + await expect.poll( editor.getBlocks ).toMatchObject( [ + { + name: 'core/heading', + attributes: { + content: 'Heading', + level: 2, + textColor: 'luminous-vivid-orange', + }, + }, + ] ); } ); } );