From 47cb54620794a90a6fb6738eb65575881551af24 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Fri, 16 Dec 2022 15:47:22 +0400
Subject: [PATCH] Migrate Font Size Picker tests to Playwright (#46591)

* Migrate Font Size Picker tests to Playwright

* Remove legacy tests

* Open document settings before each test
---
 .../editor/various/font-size-picker.test.js   | 314 ------------------
 .../editor/various/font-size-picker.spec.js   | 305 +++++++++++++++++
 2 files changed, 305 insertions(+), 314 deletions(-)
 delete mode 100644 packages/e2e-tests/specs/editor/various/font-size-picker.test.js
 create mode 100644 test/e2e/specs/editor/various/font-size-picker.spec.js

diff --git a/packages/e2e-tests/specs/editor/various/font-size-picker.test.js b/packages/e2e-tests/specs/editor/various/font-size-picker.test.js
deleted file mode 100644
index f7351450dabd51..00000000000000
--- a/packages/e2e-tests/specs/editor/various/font-size-picker.test.js
+++ /dev/null
@@ -1,314 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	getEditedPostContent,
-	createNewPost,
-	pressKeyWithModifier,
-	pressKeyTimes,
-	openTypographyToolsPanelMenu,
-} from '@wordpress/e2e-test-utils';
-
-const openFontSizeSelectControl = async () => {
-	const selectControlSelector =
-		"//div[contains(@class, 'components-font-size-picker__controls')]//button[contains(@class, 'components-custom-select-control__button')]";
-	const selectControl = await page.waitForXPath( selectControlSelector );
-	return selectControl.click();
-};
-
-const FONT_SIZE_TOGGLE_GROUP_SELECTOR =
-	"//div[contains(@class, 'components-font-size-picker__controls')]//div[contains(@class, 'components-toggle-group-control')]";
-
-// Click a button by its label - applies when ToggleGroupControl is used.
-const clickFontSizeButtonByLabel = async ( label ) => {
-	const buttonSelector = `${ FONT_SIZE_TOGGLE_GROUP_SELECTOR }//button[@aria-label='${ label }']`;
-	const button = await page.waitForXPath( buttonSelector );
-	return button.click();
-};
-
-// Clicks the button to toggle between custom size input and the control for the presets.
-const toggleCustomInput = async ( showCustomInput ) => {
-	const label = showCustomInput ? 'Set custom size' : 'Use size preset';
-	const toggleButton = await page.waitForXPath(
-		`//button[@aria-label='${ label }']`
-	);
-	return toggleButton.click();
-};
-
-const clickCustomInput = async () => {
-	const customInput = await page.waitForXPath( "//input[@type='number']" );
-	return customInput.click();
-};
-
-describe( 'Font Size Picker', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-	describe( 'Common', () => {
-		it( 'should apply a named font size using the font size input', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type( 'Paragraph to be made "small"' );
-
-			await toggleCustomInput( true );
-			await clickCustomInput();
-			// This should be the "small" font-size of the editor defaults.
-			await page.keyboard.type( '13' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"small\\"} -->
-			<p class=\\"has-small-font-size\\">Paragraph to be made \\"small\\"</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-		it( 'should apply a custom font size using the font size input', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type( 'Paragraph to be made "small"' );
-
-			await toggleCustomInput( true );
-			await clickCustomInput();
-			await page.keyboard.type( '23' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"style\\":{\\"typography\\":{\\"fontSize\\":\\"23px\\"}}} -->
-			<p style=\\"font-size:23px\\">Paragraph to be made \\"small\\"</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-		it( 'should reset a custom font size using input field', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type( 'Paragraph reset - custom size' );
-
-			await toggleCustomInput( true );
-			await clickCustomInput();
-			await page.keyboard.type( '23' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"style\\":{\\"typography\\":{\\"fontSize\\":\\"23px\\"}}} -->
-			<p style=\\"font-size:23px\\">Paragraph reset - custom size</p>
-			<!-- /wp:paragraph -->"
-		` );
-
-			await pressKeyTimes( 'Backspace', 2 );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>Paragraph reset - custom size</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-	} );
-
-	// A different control is rendered based on the available font sizes number.
-	describe( 'More font sizes', () => {
-		beforeEach( async () => {
-			await page.evaluate( () => {
-				// set a deep `path[]` property in object `obj` to `value`, immutably
-				function setDeep( obj, path, value ) {
-					function doSet( o, i ) {
-						if ( i < path.length ) {
-							const key = path[ i ];
-							return { ...o, [ key ]: doSet( o[ key ], i + 1 ) };
-						}
-						return value;
-					}
-					return doSet( obj, 0 );
-				}
-
-				wp.data.dispatch( 'core/block-editor' ).updateSettings(
-					setDeep(
-						wp.data.select( 'core/block-editor' ).getSettings(),
-						[
-							'__experimentalFeatures',
-							'typography',
-							'fontSizes',
-							'default',
-						],
-						[
-							{
-								name: 'Tiny',
-								slug: 'tiny',
-								size: '11px',
-							},
-							{
-								name: 'Small',
-								slug: 'small',
-								size: '13px',
-							},
-							{
-								name: 'Medium',
-								slug: 'medium',
-								size: '20px',
-							},
-							{
-								name: 'Large',
-								slug: 'large',
-								size: '36px',
-							},
-							{
-								name: 'Extra Large',
-								slug: 'x-large',
-								size: '42px',
-							},
-							{
-								name: 'Huge',
-								slug: 'huge',
-								size: '48px',
-							},
-						]
-					)
-				);
-			} );
-		} );
-
-		it( 'should apply a named font size using the font size buttons', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type( 'Paragraph to be made "large"' );
-
-			await openFontSizeSelectControl();
-			await pressKeyTimes( 'ArrowDown', 4 );
-			await page.keyboard.press( 'Enter' );
-
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"large\\"} -->
-			<p class=\\"has-large-font-size\\">Paragraph to be made \\"large\\"</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-		it( 'should reset a named font size using the tools panel menu', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type(
-				'Paragraph with font size reset using tools panel menu'
-			);
-
-			await openFontSizeSelectControl();
-			await pressKeyTimes( 'ArrowDown', 3 );
-			await page.keyboard.press( 'Enter' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"medium\\"} -->
-			<p class=\\"has-medium-font-size\\">Paragraph with font size reset using tools panel menu</p>
-			<!-- /wp:paragraph -->"
-		` );
-
-			// Open Typography ToolsPanel, font size will be first in menu and gain focus.
-			await openTypographyToolsPanelMenu();
-
-			await page.keyboard.press( 'Enter' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>Paragraph with font size reset using tools panel menu</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-
-		it( 'should reset a named font size using input field', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type(
-				'Paragraph with font size reset using input field'
-			);
-
-			await openFontSizeSelectControl();
-			await pressKeyTimes( 'ArrowDown', 2 );
-			await page.keyboard.press( 'Enter' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"small\\"} -->
-			<p class=\\"has-small-font-size\\">Paragraph with font size reset using input field</p>
-			<!-- /wp:paragraph -->"
-		` );
-
-			await toggleCustomInput( true );
-			await clickCustomInput();
-			await pressKeyWithModifier( 'primary', 'A' );
-			await page.keyboard.press( 'Backspace' );
-
-			// Disable reason: Wait for changes to apply.
-			// eslint-disable-next-line no-restricted-syntax
-			await page.waitForTimeout( 1000 );
-
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>Paragraph with font size reset using input field</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-	} );
-	describe( 'Few font sizes', () => {
-		it( 'should apply a named font size using the font size buttons', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type( 'Paragraph to be made "large"' );
-
-			await clickFontSizeButtonByLabel( 'Large' );
-			const buttonSelector = `${ FONT_SIZE_TOGGLE_GROUP_SELECTOR }//button[@aria-checked='true']`;
-			const [ activeButton ] = await page.$x( buttonSelector );
-			const activeLabel = await page.evaluate(
-				( element ) => element?.getAttribute( 'aria-label' ),
-				activeButton
-			);
-			expect( activeLabel ).toEqual( 'Large' );
-
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"large\\"} -->
-			<p class=\\"has-large-font-size\\">Paragraph to be made \\"large\\"</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-
-		it( 'should reset a named font size using the tools panel menu', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type(
-				'Paragraph with font size reset using tools panel menu'
-			);
-
-			await clickFontSizeButtonByLabel( 'Small' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"small\\"} -->
-			<p class=\\"has-small-font-size\\">Paragraph with font size reset using tools panel menu</p>
-			<!-- /wp:paragraph -->"
-		` );
-
-			// Open Typography ToolsPanel, font size will be first in menu and gain focus.
-			await openTypographyToolsPanelMenu();
-
-			await page.keyboard.press( 'Enter' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>Paragraph with font size reset using tools panel menu</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-
-		it( 'should reset a named font size using input field', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type(
-				'Paragraph with font size reset using input field'
-			);
-
-			await clickFontSizeButtonByLabel( 'Small' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"small\\"} -->
-			<p class=\\"has-small-font-size\\">Paragraph with font size reset using input field</p>
-			<!-- /wp:paragraph -->"
-		` );
-
-			await toggleCustomInput( true );
-			await clickCustomInput();
-			await pressKeyWithModifier( 'primary', 'A' );
-			await page.keyboard.press( 'Backspace' );
-
-			// Disable reason: Wait for changes to apply.
-			// eslint-disable-next-line no-restricted-syntax
-			await page.waitForTimeout( 1000 );
-
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>Paragraph with font size reset using input field</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-	} );
-} );
diff --git a/test/e2e/specs/editor/various/font-size-picker.spec.js b/test/e2e/specs/editor/various/font-size-picker.spec.js
new file mode 100644
index 00000000000000..38707c12b261bc
--- /dev/null
+++ b/test/e2e/specs/editor/various/font-size-picker.spec.js
@@ -0,0 +1,305 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Font Size Picker', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.describe( 'Common', () => {
+		test( 'should apply a named font size using the font size input', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type( 'Paragraph to be made "small"' );
+			await page.click(
+				'role=region[name="Editor settings"i] >> role=button[name="Set custom size"i]'
+			);
+			await page.click( 'role=spinbutton[name="Custom"i]' );
+
+			// This should be the "small" font-size of the editor defaults.
+			await page.keyboard.type( '13' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"fontSize":"small"} -->
+<p class="has-small-font-size">Paragraph to be made "small"</p>
+<!-- /wp:paragraph -->` );
+		} );
+
+		test( 'should apply a custom font size using the font size input', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type( 'Paragraph to be made "small"' );
+			await page.click(
+				'role=region[name="Editor settings"i] >> role=button[name="Set custom size"i]'
+			);
+			await page.click( 'role=spinbutton[name="Custom"i]' );
+
+			await page.keyboard.type( '23' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"style":{"typography":{"fontSize":"23px"}}} -->
+<p style="font-size:23px">Paragraph to be made "small"</p>
+<!-- /wp:paragraph -->` );
+		} );
+
+		test( 'should reset a custom font size using input field', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type( 'Paragraph reset - custom size' );
+			await page.click(
+				'role=region[name="Editor settings"i] >> role=button[name="Set custom size"i]'
+			);
+			await page.click( 'role=spinbutton[name="Custom"i]' );
+			await page.keyboard.type( '23' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"style":{"typography":{"fontSize":"23px"}}} -->
+<p style="font-size:23px">Paragraph reset - custom size</p>
+<!-- /wp:paragraph -->` );
+
+			await pageUtils.pressKeyTimes( 'Backspace', 2 );
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph -->
+<p>Paragraph reset - custom size</p>
+<!-- /wp:paragraph -->` );
+		} );
+	} );
+
+	test.describe( 'More font sizes', () => {
+		test.beforeEach( async ( { page } ) => {
+			await page.evaluate( () => {
+				// set a deep `path[]` property in object `obj` to `value`, immutably
+				function setDeep( obj, path, value ) {
+					function doSet( o, i ) {
+						if ( i < path.length ) {
+							const key = path[ i ];
+							return { ...o, [ key ]: doSet( o[ key ], i + 1 ) };
+						}
+						return value;
+					}
+					return doSet( obj, 0 );
+				}
+
+				window.wp.data.dispatch( 'core/block-editor' ).updateSettings(
+					setDeep(
+						window.wp.data
+							.select( 'core/block-editor' )
+							.getSettings(),
+						[
+							'__experimentalFeatures',
+							'typography',
+							'fontSizes',
+							'default',
+						],
+						[
+							{
+								name: 'Tiny',
+								slug: 'tiny',
+								size: '11px',
+							},
+							{
+								name: 'Small',
+								slug: 'small',
+								size: '13px',
+							},
+							{
+								name: 'Medium',
+								slug: 'medium',
+								size: '20px',
+							},
+							{
+								name: 'Large',
+								slug: 'large',
+								size: '36px',
+							},
+							{
+								name: 'Extra Large',
+								slug: 'x-large',
+								size: '42px',
+							},
+							{
+								name: 'Huge',
+								slug: 'huge',
+								size: '48px',
+							},
+						]
+					)
+				);
+			} );
+		} );
+
+		test( 'should apply a named font size using the font size buttons', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type( 'Paragraph to be made "large"' );
+			await page.click(
+				'role=group[name="Font size"i] >> role=button[name="Font size"i]'
+			);
+			await pageUtils.pressKeyTimes( 'ArrowDown', 4 );
+			await page.keyboard.press( 'Enter' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"fontSize":"large"} -->
+<p class="has-large-font-size">Paragraph to be made "large"</p>
+<!-- /wp:paragraph -->` );
+		} );
+
+		test( 'should reset a named font size using the tools panel menu', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type(
+				'Paragraph with font size reset using tools panel menu'
+			);
+			await page.click(
+				'role=group[name="Font size"i] >> role=button[name="Font size"i]'
+			);
+			await pageUtils.pressKeyTimes( 'ArrowDown', 3 );
+			await page.keyboard.press( 'Enter' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"fontSize":"medium"} -->
+<p class="has-medium-font-size">Paragraph with font size reset using tools panel menu</p>
+<!-- /wp:paragraph -->` );
+
+			await page.click( 'role=button[name="Typography options"i]' );
+			await page.click( 'role=menuitem[name="Reset Font size"i]' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph -->
+<p>Paragraph with font size reset using tools panel menu</p>
+<!-- /wp:paragraph -->` );
+		} );
+
+		test( 'should reset a named font size using input field', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type(
+				'Paragraph with font size reset using input field'
+			);
+			await page.click(
+				'role=group[name="Font size"i] >> role=button[name="Font size"i]'
+			);
+			await pageUtils.pressKeyTimes( 'ArrowDown', 2 );
+			await page.keyboard.press( 'Enter' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"fontSize":"small"} -->
+<p class="has-small-font-size">Paragraph with font size reset using input field</p>
+<!-- /wp:paragraph -->` );
+
+			await page.click(
+				'role=region[name="Editor settings"i] >> role=button[name="Set custom size"i]'
+			);
+			await page.click( 'role=spinbutton[name="Custom"i]' );
+			await pageUtils.pressKeyWithModifier( 'primary', 'A' );
+			await page.keyboard.press( 'Backspace' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph -->
+<p>Paragraph with font size reset using input field</p>
+<!-- /wp:paragraph -->` );
+		} );
+	} );
+
+	test.describe( 'Few font sizes', () => {
+		test( 'should apply a named font size using the font size buttons', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type( 'Paragraph to be made "large"' );
+			await page.click(
+				'role=radiogroup[name="Font size"i] >> role=radio[name="Large"i]'
+			);
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"fontSize":"large"} -->
+<p class="has-large-font-size">Paragraph to be made "large"</p>
+<!-- /wp:paragraph -->` );
+		} );
+
+		test( 'should reset a named font size using the tools panel menu', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type(
+				'Paragraph with font size reset using tools panel menu'
+			);
+			await page.click(
+				'role=radiogroup[name="Font size"i] >> role=radio[name="Small"i]'
+			);
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"fontSize":"small"} -->
+<p class="has-small-font-size">Paragraph with font size reset using tools panel menu</p>
+<!-- /wp:paragraph -->` );
+
+			await page.click( 'role=button[name="Typography options"i]' );
+			await page.click( 'role=menuitem[name="Reset Font size"i]' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph -->
+<p>Paragraph with font size reset using tools panel menu</p>
+<!-- /wp:paragraph -->` );
+		} );
+
+		test( 'should reset a named font size using input field', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type(
+				'Paragraph with font size reset using input field'
+			);
+			await page.click(
+				'role=radiogroup[name="Font size"i] >> role=radio[name="Small"i]'
+			);
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"fontSize":"small"} -->
+<p class="has-small-font-size">Paragraph with font size reset using input field</p>
+<!-- /wp:paragraph -->` );
+
+			await page.click(
+				'role=region[name="Editor settings"i] >> role=button[name="Set custom size"i]'
+			);
+			await page.click( 'role=spinbutton[name="Custom"i]' );
+			await pageUtils.pressKeyWithModifier( 'primary', 'A' );
+			await page.keyboard.press( 'Backspace' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph -->
+<p>Paragraph with font size reset using input field</p>
+<!-- /wp:paragraph -->` );
+		} );
+	} );
+} );