Alter for custom-written tests

.gitignore

@@ -33,4 +33,4 @@ phpunit.xml
 phpunit-watcher.yml
 .tool-versions
 test/storybook-playwright/test-results
-test/storybook-playwright/index.spec.ts-snapshots
+test/storybook-playwright/specs/__snapshots__

package.json

@@ -290,6 +290,7 @@
 		"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",

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

storybook/main.js

@@ -28,7 +28,6 @@ module.exports = {
 	features: {
 		babelModeV7: true,
 		emotionAlias: false,
-		buildStoriesJson: true,
 	},
 	// Workaround:
 	// https://github.com/storybookjs/storybook/issues/12270

test/storybook-playwright/README.md

@@ -4,20 +4,10 @@ This is currently set up for testing visual regressions in the `components` pack
 
 ## How to run
 
-First, prepare a static build of the Storybook. This is required to generate the `stories.json` file, which contains metadata for every story.
+First, build and serve the E2E Storybook.
 
 ```sh
-npm run storybook:build
-```
-
-Then serve the Storybook locally, using either the static build prepared in the previous step, or the dev server if you want to iterate in watch mode.
-
-```sh
-# Using the static build
-npx http-server storybook/build -p 50240
-
-# Using the dev server
-npm run storybook:dev
+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.
@@ -30,4 +20,10 @@ 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/specs/popover.test.ts

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { test, expect } from '@wordpress/e2e-test-utils-playwright';
+
+/**
+ * Internal dependencies
+ */
+import { gotoStoryId } from '../utils';
+
+test.describe( 'Popover', () => {
+	test( 'should render', async ( { page } ) => {
+		await gotoStoryId( page, 'components-popover--default' );
+
+		await page.click( 'role=button' );
+
+		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: [],
+	stories: [
+		'../../../packages/components/src/**/e2e.stories.@(js|tsx|mdx)',
+	],
+};
+
+module.exports = config;

test/storybook-playwright/utils.ts

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import type { Page } from '@playwright/test';
+
+const STORYBOOK_PORT = '50241';
+
+export const gotoStoryId = ( page: Page, storyId: string ) =>
+	page.goto(
+		`http://localhost:${ STORYBOOK_PORT }/iframe.html?id=${ storyId }`,
+		{ waitUntil: 'load' }
+	);