From 0383efb3f7eabe5eabc63e2c67dcdcc504ec6ee4 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 20 Sep 2022 03:51:45 +0900
Subject: [PATCH] Migrate example FontSizePicker test to new setup

---
 .../font-size-picker/stories/e2e.stories.js   | 47 +++++++++++++++++++
 .../specs/font-size-picker.test.ts            | 35 ++------------
 2 files changed, 51 insertions(+), 31 deletions(-)
 create mode 100644 packages/components/src/font-size-picker/stories/e2e.stories.js

diff --git a/packages/components/src/font-size-picker/stories/e2e.stories.js b/packages/components/src/font-size-picker/stories/e2e.stories.js
new file mode 100644
index 00000000000000..c3943bbe12c33a
--- /dev/null
+++ b/packages/components/src/font-size-picker/stories/e2e.stories.js
@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FontSizePicker from '..';
+
+export default {
+	title: 'Components/FontSizePicker',
+	component: FontSizePicker,
+};
+
+const FontSizePickerWithState = ( { initialValue, ...props } ) => {
+	const [ fontSize, setFontSize ] = useState( initialValue );
+	return (
+		<FontSizePicker
+			{ ...props }
+			value={ fontSize }
+			onChange={ setFontSize }
+		/>
+	);
+};
+
+export const Default = FontSizePickerWithState.bind( {} );
+Default.args = {
+	fontSizes: [
+		{
+			name: 'Small',
+			slug: 'small',
+			size: 12,
+		},
+		{
+			name: 'Normal',
+			slug: 'normal',
+			size: 16,
+		},
+		{
+			name: 'Big',
+			slug: 'big',
+			size: 26,
+		},
+	],
+	initialValue: 16,
+};
diff --git a/test/storybook-playwright/specs/font-size-picker.test.ts b/test/storybook-playwright/specs/font-size-picker.test.ts
index 8bf3192d8985e5..6aa11e89262c93 100644
--- a/test/storybook-playwright/specs/font-size-picker.test.ts
+++ b/test/storybook-playwright/specs/font-size-picker.test.ts
@@ -23,7 +23,10 @@ test.describe.parallel( 'FontSizePicker', () => {
 		await gotoStoryId( page, 'components-fontsizepicker--default' );
 	} );
 
-	test( 'Renders with "Normal" size by default', async ( { page } ) => {
+	// This isn't a meaningful test, just some example code to demonstrate a way to
+	// wait until a certain element has finished animating.
+	// We can remove it once we have real tests.
+	test( 'with value', async ( { page } ) => {
 		const button = await page.locator( 'button[aria-label="Normal"]' );
 
 		await waitUntilButtonHighlightStable( page );
@@ -31,34 +34,4 @@ test.describe.parallel( 'FontSizePicker', () => {
 		expect( button ).toHaveAttribute( 'aria-checked', 'true' );
 		expect( await page.screenshot() ).toMatchSnapshot();
 	} );
-
-	test( 'Can change size to "Small"', async ( { page } ) => {
-		const button = await page.locator( 'button[aria-label="Small"]' );
-
-		await button.click();
-		await waitUntilButtonHighlightStable( page );
-
-		expect( button ).toHaveAttribute( 'aria-checked', 'true' );
-		expect( await page.screenshot() ).toMatchSnapshot();
-	} );
-
-	test( 'Can change size to "Big"', async ( { page } ) => {
-		const button = await page.locator( 'button[aria-label="Big"]' );
-
-		await button.click();
-		await waitUntilButtonHighlightStable( page );
-
-		expect( button ).toHaveAttribute( 'aria-checked', 'true' );
-		expect( await page.screenshot() ).toMatchSnapshot();
-	} );
-
-	test( 'Can change size back to "Normal"', async ( { page } ) => {
-		const button = await page.locator( 'button[aria-label="Normal"]' );
-
-		await button.click();
-		await waitUntilButtonHighlightStable( page );
-
-		expect( button ).toHaveAttribute( 'aria-checked', 'true' );
-		expect( await page.screenshot() ).toMatchSnapshot();
-	} );
 } );