From bdeaee8fdaa3c134063c8ef7db9cd3a622161a02 Mon Sep 17 00:00:00 2001 From: adrien guernier Date: Wed, 27 Mar 2024 17:17:17 +0100 Subject: [PATCH] CI: run interaction test in CI --- .github/workflows/storybook.yml | 3 +++ .storybook/main.ts | 2 +- compose.ci.yaml | 2 ++ compose.yaml | 2 +- src/globals.d.ts | 3 +-- src/stories/Basic.stories.ts | 6 ++--- src/stories/auth/Admin.tsx | 6 ++--- src/stories/auth/Auth.stories.ts | 38 +++++++++++++++++--------------- 8 files changed, 34 insertions(+), 28 deletions(-) diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml index aed47811..1a9b8e29 100644 --- a/.github/workflows/storybook.yml +++ b/.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 diff --git a/.storybook/main.ts b/.storybook/main.ts index e57d1050..95f3678e 100644 --- a/.storybook/main.ts +++ b/.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 = { diff --git a/compose.ci.yaml b/compose.ci.yaml index d67c42e4..9adcfe0b 100644 --- a/compose.ci.yaml +++ b/compose.ci.yaml @@ -3,3 +3,5 @@ services: build: context: . target: ci + environment: + ENTRYPOINT: http://php diff --git a/compose.yaml b/compose.yaml index 06ba0df7..eced3dfe 100644 --- a/compose.yaml +++ b/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: diff --git a/src/globals.d.ts b/src/globals.d.ts index 726349b3..e206b528 100644 --- a/src/globals.d.ts +++ b/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; }; }; diff --git a/src/stories/Basic.stories.ts b/src/stories/Basic.stories.ts index 0749700b..750f8d6f 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 { expect, within } from '@storybook/test'; import Basic from './Basic'; const meta = { @@ -18,9 +18,9 @@ type Story = StoryObj; 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, }, }; diff --git a/src/stories/auth/Admin.tsx b/src/stories/auth/Admin.tsx index cde72484..fadf3dda 100644 --- a/src/stories/auth/Admin.tsx +++ b/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) => ( ); export default Admin; -export interface JwtAuthProps - extends Pick {} +export interface JwtAuthProps extends Pick {} diff --git a/src/stories/auth/Auth.stories.ts b/src/stories/auth/Auth.stories.ts index c6588376..54f84ce2 100644 --- a/src/stories/auth/Auth.stories.ts +++ b/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; 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, }, };