From 93f664145da278fd961589af53312e41c7845a0c Mon Sep 17 00:00:00 2001
From: adrien guernier <adrien@marmelab.com>
Date: Tue, 26 Mar 2024 20:07:37 +0100
Subject: [PATCH] fix: use env for storybook tests

---
 .storybook/main.ts               |  1 +
 Dockerfile                       |  2 +-
 compose.yaml                     |  2 +-
 src/globals.d.ts                 |  1 +
 src/stories/Basic.stories.ts     |  8 ++++++--
 src/stories/auth/Auth.stories.ts | 30 +++++++++---------------------
 6 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 93c1a7ed..e57d1050 100644
--- a/.storybook/main.ts
+++ b/.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 = {
diff --git a/Dockerfile b/Dockerfile
index f3a25575..3146db89 100644
--- a/Dockerfile
+++ b/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
 
diff --git a/compose.yaml b/compose.yaml
index cb398ddf..06ba0df7 100644
--- a/compose.yaml
+++ b/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:
diff --git a/src/globals.d.ts b/src/globals.d.ts
index a27f33c1..726349b3 100644
--- a/src/globals.d.ts
+++ b/src/globals.d.ts
@@ -1,6 +1,7 @@
 // eslint-disable-next-line no-var
 declare var process: {
   env: {
+    API_URL: string;
     NODE_ENV: string;
   };
 };
diff --git a/src/stories/Basic.stories.ts b/src/stories/Basic.stories.ts
index 850ed4df..0749700b 100644
--- a/src/stories/Basic.stories.ts
+++ b/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,
   },
 };
diff --git a/src/stories/auth/Auth.stories.ts b/src/stories/auth/Auth.stories.ts
index 7053eec9..c6588376 100644
--- a/src/stories/auth/Auth.stories.ts
+++ b/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,7 +27,7 @@ export const Basic: Story = {
     await userEvent.type(password, '123');
   },
   args: {
-    entrypoint: 'https://localhost',
+    entrypoint: process.env.API_URL,
     authProvider,
   },
 };
@@ -35,27 +35,15 @@ export const Basic: Story = {
 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,
   },
 };