fix: use env for storybook tests

.storybook/main.ts

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

Dockerfile

@@ -24,7 +24,7 @@ ENV HOSTNAME localhost
 # Development image
 FROM base as dev
 
-CMD ["sh", "-c", "yarn install; yarn storybook"]
+CMD ["sh", "-c", "yarn install; yarn playwright install --with-deps; yarn storybook"]
 
 FROM base as ci
 

compose.yaml

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

src/globals.d.ts

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

src/stories/Basic.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-
+import { within } from '@storybook/test';
 import Basic from './Basic';
 
 const meta = {
@@ -16,7 +16,11 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Admin: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText('No Greeting yet.');
+  },
   args: {
-    entrypoint: 'https://localhost',
+    entrypoint: process.env.API_URL,
   },
 };

src/stories/auth/Auth.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { userEvent, waitFor, within } from '@storybook/test';
+import { userEvent, within } from '@storybook/test';
 
 import Admin from './Admin';
 import authProvider from './basicAuth';
@@ -27,35 +27,23 @@ export const Basic: Story = {
     await userEvent.type(password, '123');
   },
   args: {
-    entrypoint: 'https://localhost',
+    entrypoint: process.env.API_URL,
     authProvider,
   },
 };
 
 export const Loggedin: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const user = await canvas.findByText('John Doe');
-    if (user) {
-      await userEvent.click(user);
-      waitFor(async () => {
-        const logout = await canvas.findByRole('menuitem', {
-          hidden: true,
-          name: 'Logout',
-        });
-        await userEvent.click(logout);
-      });
-    } else {
-      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 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);
   },
   args: {
-    entrypoint: 'https://localhost',
+    entrypoint: process.env.API_URL,
     authProvider,
   },
 };