Storybook: Set up local visual regression testing

.gitignore

@@ -32,3 +32,5 @@ phpcs.xml
 phpunit.xml
 phpunit-watcher.yml
 .tool-versions
+test/storybook-playwright/test-results
+test/storybook-playwright/specs/__snapshots__

package.json

@@ -290,11 +290,13 @@
 		"storybook:build": "build-storybook -c ./storybook -o ./storybook/build",
 		"prestorybook:dev": "npm run build:packages",
 		"storybook:dev": "concurrently \"npm run dev:packages\" \"start-storybook -c ./storybook -p 50240\"",
+		"storybook:e2e:dev": "concurrently \"npm run dev:packages\" \"start-storybook -c test/storybook-playwright/storybook -p 50241\"",
 		"test": "npm-run-all lint test:unit",
 		"test:create-block": "bash ./bin/test-create-block.sh",
 		"test:e2e": "wp-scripts test-e2e --config packages/e2e-tests/jest.config.js",
 		"test:e2e:debug": "wp-scripts --inspect-brk test-e2e --config packages/e2e-tests/jest.config.js --puppeteer-devtools",
 		"test:e2e:playwright": "playwright test --config test/e2e/playwright.config.ts",
+		"test:e2e:storybook": "playwright test --config test/storybook-playwright/playwright.config.ts",
 		"test:e2e:watch": "npm run test:e2e -- --watch",
 		"test:performance": "wp-scripts test-e2e --config packages/e2e-tests/jest.performance.config.js",
 		"test:php": "npm-run-all lint:php test:unit:php",

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,
+};

packages/components/src/popover/stories/e2e.stories.tsx

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Popover from '..';
+
+export default {
+	title: 'Components/Popover',
+	component: Popover,
+};
+
+export const Default = () => {
+	const [ isVisible, setIsVisible ] = useState( false );
+
+	return (
+		<button onClick={ () => setIsVisible( ( state ) => ! state ) }>
+			Toggle Popover!
+			{ isVisible && <Popover>Popover is toggled!</Popover> }
+		</button>
+	);
+};

test/storybook-playwright/README.md

@@ -0,0 +1,29 @@
+# Storybook Playwright Tests
+
+This is currently set up for testing visual regressions in the `components` package. The tests do not run on CI, and is meant as a testing tool for local development.
+
+## How to run
+
+First, build and serve the E2E Storybook.
+
+```sh
+storybook:e2e:dev
+```
+
+You are now ready to run the tests. The first run will generate the reference images, and subsequent runs will compare against them.
+
+```sh
+npm run test:e2e:storybook
+```
+
+To update the reference images, pass the `--update-snapshots` flag.
+
+```sh
+npm run test:e2e:storybook -- --update-snapshots
+```
+
+## How to write tests
+
+Any stories matching the ones listed in the [E2E Storybook config](./storybook/main.js) will be included in the special build. These are the fixtures for our tests.
+
+The Playwright test files live in the [`specs`](./specs/) folder.

test/storybook-playwright/playwright.config.ts

@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+	outputDir: 'test-results/output',
+	reporter: [
+		[ 'html', { open: 'on-failure', outputFolder: 'test-results/report' } ],
+	],
+};
+
+export default config;

test/storybook-playwright/specs/font-size-picker.spec.ts

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { test, expect } from '@wordpress/e2e-test-utils-playwright';
+
+/**
+ * Internal dependencies
+ */
+import { gotoStoryId } from '../utils';
+
+const waitUntilButtonHighlightStable = async ( page ) => {
+	const handle = await page.waitForSelector(
+		'[aria-label="Font size"] > div[role=presentation]'
+	);
+
+	await handle?.waitForElementState( 'stable' );
+
+	return handle;
+};
+
+test.describe.parallel( 'FontSizePicker', () => {
+	test.beforeEach( async ( { page } ) => {
+		await gotoStoryId( page, 'components-fontsizepicker--default' );
+	} );
+
+	// 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 );
+
+		expect( button ).toHaveAttribute( 'aria-checked', 'true' );
+		expect( await page.screenshot() ).toMatchSnapshot();
+	} );
+} );

test/storybook-playwright/specs/popover.spec.ts

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { test, expect } from '@wordpress/e2e-test-utils-playwright';
+
+/**
+ * Internal dependencies
+ */
+import { gotoStoryId } from '../utils';
+
+test.describe( 'Popover', () => {
+	// This isn't a meaningful test, just some example code.
+	// We can remove it once we have real tests.
+	test( 'should render', async ( { page } ) => {
+		await gotoStoryId( page, 'components-popover--default', {
+			decorators: { marginChecker: 'show' },
+		} );
+
+		await page.click( 'role=button' );
+		const popover = await page.waitForSelector( '.components-popover' );
+		await popover.waitForElementState( 'stable' );
+
+		expect( await page.screenshot() ).toMatchSnapshot();
+	} );
+} );

test/storybook-playwright/storybook/main.js

@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+const baseConfig = require( '../../../storybook/main' );
+
+const config = {
+	...baseConfig,
+	addons: [ '@storybook/addon-toolbars' ],
+	stories: [
+		'../../../packages/components/src/**/e2e.stories.@(js|tsx|mdx)',
+	],
+};
+
+module.exports = config;

test/storybook-playwright/storybook/preview.js

@@ -0,0 +1 @@
+export * from '../../../storybook/preview';

test/storybook-playwright/storybook/webpack.config.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+const baseConfig = require( '../../../storybook/webpack.config' );
+
+module.exports = baseConfig;

test/storybook-playwright/utils.ts

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import type { Page } from '@playwright/test';
+
+const STORYBOOK_PORT = '50241';
+
+type Decorators = {
+	css?: 'none' | 'basic' | 'wordpress';
+	direction?: 'ltr' | 'rtl';
+	marginChecker?: 'show' | 'hide';
+};
+type Options = { decorators?: Decorators };
+
+const buildDecoratorString = ( decorators: Decorators = {} ) => {
+	const decoratorParamStrings = Object.entries( decorators ).map(
+		( keyValue ) => keyValue.join( ':' )
+	);
+	return decoratorParamStrings.join( ';' );
+};
+
+export const gotoStoryId = (
+	page: Page,
+	storyId: string,
+	{ decorators }: Options = {}
+) => {
+	const params = new URLSearchParams();
+	const decoratorString = buildDecoratorString( decorators );
+
+	if ( decoratorString ) {
+		params.set( 'globals', decoratorString );
+	}
+
+	params.set( 'id', storyId );
+
+	page.goto(
+		`http://localhost:${ STORYBOOK_PORT }/iframe.html?${ params.toString() }`,
+		{ waitUntil: 'load' }
+	);
+};