CI: run interaction test in CI

.github/workflows/storybook.yml

@@ -52,6 +52,9 @@ jobs:
       -
         name: Run migrations
         run: docker compose exec -T php bin/console -e test doctrine:migrations:migrate --no-interaction
+      -
+        name: Run interactions tests
+        run: docker compose exec -T pwa yarn storybook:test --url http://127.0.0.1:3000
       # -
       #   name: Doctrine Schema Validator
       #   run: docker compose exec -T pwa pnpm run storybook

.storybook/main.ts

@@ -17,7 +17,7 @@ const config: StorybookConfig = {
   },
   env: (config) => ({
     ...config,
-    entrypoint: process.env.API_URL || 'https://localhost',
+    ENTRYPOINT: process.env.ENTRYPOINT ?? 'https://localhost',
   }),
   async webpackFinal(config, { configType }) {
     config.resolve = {

compose.ci.yaml

@@ -3,3 +3,5 @@ services:
     build:
       context: .
       target: ci
+    environment:
+      ENTRYPOINT: http://php

compose.yaml

@@ -55,7 +55,7 @@ services:
       context: .
       target: dev
     environment:
-      API_URL: ${API_URL:-http://php}
+      ENTRYPOINT: ${ENTRYPOINT:-https://localhost}
     volumes:
       - .:/srv/app
     ports:

src/globals.d.ts

@@ -1,7 +1,6 @@
 // eslint-disable-next-line no-var
 declare var process: {
   env: {
-    API_URL: string;
-    NODE_ENV: string;
+    ENTRYPOINT: string;
   };
 };

src/stories/Basic.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { within } from '@storybook/test';
+import { expect, within } from '@storybook/test';
 import Basic from './Basic';
 
 const meta = {
@@ -18,9 +18,9 @@ type Story = StoryObj<typeof meta>;
 export const Admin: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await canvas.findByText('No Greeting yet.');
+    await canvas.findByRole('heading', { name: 'Greetings' });
   },
   args: {
-    entrypoint: process.env.API_URL,
+    entrypoint: process.env.ENTRYPOINT,
   },
 };

src/stories/auth/Admin.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { HydraAdmin, type HydraAdminProps } from '../../hydra';
+import authProvider from './basicAuth';
 
-const Admin = ({ entrypoint, authProvider }: JwtAuthProps) => (
+const Admin = ({ entrypoint }: JwtAuthProps) => (
   <HydraAdmin entrypoint={entrypoint} authProvider={authProvider} requireAuth />
 );
 
 export default Admin;
 
-export interface JwtAuthProps
-  extends Pick<HydraAdminProps, 'entrypoint' | 'authProvider'> {}
+export interface JwtAuthProps extends Pick<HydraAdminProps, 'entrypoint'> {}

src/stories/auth/Auth.stories.ts

@@ -1,8 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/test';
+import { expect, userEvent, within } from '@storybook/test';
 
 import Admin from './Admin';
-import authProvider from './basicAuth';
 
 const meta = {
   title: 'Admin/Auth',
@@ -18,32 +17,35 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     await canvas.findByText('Sign in');
-    const username = await canvas.findByLabelText('Username *');
-    await userEvent.type(username, 'john');
-    const password = await canvas.findByLabelText('Password *');
-    await userEvent.type(password, '123');
+    await step('Enter email and password', async () => {
+      await userEvent.type(canvas.getByLabelText('Username *'), 'john');
+      await userEvent.type(canvas.getByLabelText('Password *'), '123');
+    });
   },
   args: {
-    entrypoint: process.env.API_URL,
-    authProvider,
+    entrypoint: process.env.ENTRYPOINT,
   },
 };
 
 export const Loggedin: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
-    const submit = await canvas.findByText('Sign in');
-    const username = await canvas.findByLabelText('Username *');
-    await userEvent.type(username, 'john');
-    const password = await canvas.findByLabelText('Password *');
-    await userEvent.type(password, '123');
-    await userEvent.click(submit);
+    const signIn = await canvas.findByText('Sign in');
+    await step('Enter email and password', async () => {
+      await userEvent.type(canvas.getByLabelText('Username *'), 'john');
+      await userEvent.type(canvas.getByLabelText('Password *'), '123');
+    });
+
+    await step('Submit form', async () => {
+      await userEvent.click(signIn);
+    });
+
+    await canvas.findByText('John Doe');
   },
   args: {
-    entrypoint: process.env.API_URL,
-    authProvider,
+    entrypoint: process.env.ENTRYPOINT,
   },
 };