tests: add e2e tests package (#525)

* tests: add e2e tests package

* docs(tests): update README.md with additional information

* docs(tests): Update README.md

Author: balzdur

.prettierignore

@@ -14,4 +14,8 @@ packages-licenses.json
 /packages/marble-api/src/generated
 
 # ui-design-system
-/packages/ui-design-system/storybook-static/
+/packages/ui-design-system/storybook-static/
+
+# tests
+/packages/tests/playwright-report
+/packages/tests/test-results

packages/app-builder/src/components/Auth/SignInWithEmailAndPassword.tsx

@@ -25,6 +25,7 @@ import { FormProvider, useForm, useFormContext } from 'react-hook-form';
 import toast from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 import { ClientOnly } from 'remix-utils/client-only';
+import { useHydrated } from 'remix-utils/use-hydrated';
 import { Button, Input } from 'ui-design-system';
 import * as z from 'zod';
 
@@ -76,6 +77,7 @@ function SignInWithEmailAndPasswordForm({
 }) {
   const { t } = useTranslation(['auth', 'common']);
   const { control } = useFormContext<EmailAndPasswordFormValues>();
+  const hydrated = useHydrated();
   return (
     <form noValidate className="flex w-full flex-col gap-4" {...props}>
       <FormField
@@ -85,7 +87,12 @@ function SignInWithEmailAndPasswordForm({
           <FormItem className="flex flex-col items-start gap-2">
             <FormLabel>{t('auth:sign_in.email')}</FormLabel>
             <FormControl>
-              <Input className="w-full" type="email" {...field} />
+              <Input
+                disabled={!hydrated}
+                className="w-full"
+                type="email"
+                {...field}
+              />
             </FormControl>
             <FormError />
           </FormItem>
@@ -102,6 +109,7 @@ function SignInWithEmailAndPasswordForm({
                 className="w-full"
                 type="password"
                 autoComplete="current-password"
+                disabled={!hydrated}
                 {...field}
               />
             </FormControl>
@@ -114,7 +122,7 @@ function SignInWithEmailAndPasswordForm({
         name="credentials"
         render={() => <FormError />}
       />
-      <Button type="submit">
+      <Button type="submit" disabled={!hydrated}>
         {loading ? <Spinner className="size-4" /> : t('auth:sign_in')}
       </Button>
     </form>

packages/app-builder/src/routes/_builder+/lists+/$listId.tsx

@@ -87,6 +87,7 @@ export default function Lists() {
                     tabIndex={-1}
                   >
                     <Icon icon="delete" className="size-6 shrink-0" />
+                    <span className="sr-only">{t('common:delete')}</span>
                   </button>
                 </DeleteListValue>
               ) : null}

packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/decision.tsx

@@ -24,7 +24,7 @@ import { type ActionFunctionArgs, json } from '@remix-run/node';
 import { Form, useActionData } from '@remix-run/react';
 import { type Namespace, type TFunction } from 'i18next';
 import { type ScenarioValidationErrorCodeDto } from 'marble-api';
-import React from 'react';
+import * as React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import * as R from 'remeda';
 import { Button, Collapsible } from 'ui-design-system';

packages/app-builder/src/routes/ressources+/lists+/create.tsx

@@ -17,6 +17,7 @@ import { useFetcher } from '@remix-run/react';
 import { type Namespace } from 'i18next';
 import { Form, FormProvider, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { useHydrated } from 'remix-utils/use-hydrated';
 import { Button, Input, Modal } from 'ui-design-system';
 import { Icon } from 'ui-icons';
 import { z } from 'zod';
@@ -86,6 +87,7 @@ export async function action({ request }: ActionFunctionArgs) {
 export function CreateList() {
   const { t } = useTranslation(handle.i18n);
   const fetcher = useFetcher<typeof action>();
+  const hydrated = useHydrated();
 
   const formMethods = useForm<z.infer<typeof createListFormSchema>>({
     progressive: true,
@@ -100,7 +102,7 @@ export function CreateList() {
   return (
     <Modal.Root>
       <Modal.Trigger asChild>
-        <Button>
+        <Button disabled={!hydrated}>
           <Icon icon="plus" className="size-6" />
           {t('lists:create_list.title')}
         </Button>

packages/app-builder/src/routes/ressources+/lists+/delete.tsx

@@ -5,6 +5,7 @@ import { type ActionFunctionArgs, redirect } from '@remix-run/node';
 import { useFetcher } from '@remix-run/react';
 import { type Namespace } from 'i18next';
 import { useTranslation } from 'react-i18next';
+import { useHydrated } from 'remix-utils/use-hydrated';
 import { Button, HiddenInputs, Modal } from 'ui-design-system';
 import { Icon } from 'ui-icons';
 import { z } from 'zod';
@@ -36,11 +37,12 @@ export async function action({ request }: ActionFunctionArgs) {
 export function DeleteList({ listId }: { listId: string }) {
   const { t } = useTranslation(handle.i18n);
   const fetcher = useFetcher<typeof action>();
+  const hydrated = useHydrated();
 
   return (
     <Modal.Root>
       <Modal.Trigger asChild>
-        <Button color="red" className="w-fit">
+        <Button color="red" className="w-fit" disabled={!hydrated}>
           <Icon icon="delete" className="size-6" />
           <p>{t('lists:delete_list.button')}</p>
         </Button>

packages/app-builder/src/routes/ressources+/lists+/edit.tsx

@@ -15,6 +15,7 @@ import { type Namespace } from 'i18next';
 import { useEffect, useState } from 'react';
 import { Form, FormProvider, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { useHydrated } from 'remix-utils/use-hydrated';
 import { Button, HiddenInputs, Input, Modal } from 'ui-design-system';
 import { Icon } from 'ui-icons';
 import { z } from 'zod';
@@ -87,11 +88,12 @@ export function EditList({
       setIsOpen(false);
     }
   }, [fetcher.data?.success, fetcher.state]);
+  const hydrated = useHydrated();
 
   return (
     <Modal.Root open={isOpen} onOpenChange={setIsOpen}>
       <Modal.Trigger asChild>
-        <Button variant="secondary">
+        <Button variant="secondary" disabled={!hydrated}>
           <Icon icon="edit" className="size-6" />
           <p>{t('lists:edit_list.button')}</p>
         </Button>

packages/app-builder/src/routes/ressources+/scenarios+/create.tsx

@@ -21,6 +21,7 @@ import { useFetcher } from '@remix-run/react';
 import { type Namespace } from 'i18next';
 import * as React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { useHydrated } from 'remix-utils/use-hydrated';
 import { Button, ModalV2 } from 'ui-design-system';
 import { z } from 'zod';
 
@@ -78,9 +79,10 @@ export async function action({ request }: ActionFunctionArgs) {
 }
 
 export function CreateScenario({ children }: { children: React.ReactElement }) {
+  const hydrated = useHydrated();
   return (
     <ModalV2.Root>
-      <ModalV2.Trigger render={children} />
+      <ModalV2.Trigger render={children} disabled={!hydrated} />
       <ModalV2.Content>
         <CreateScenarioContent />
       </ModalV2.Content>

packages/app-builder/src/routes/ressources+/scenarios+/update.tsx

@@ -18,7 +18,8 @@ import { useFetcher, useNavigation } from '@remix-run/react';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { redirectBack } from 'remix-utils/redirect-back';
-import { Button, Modal } from 'ui-design-system';
+import { useHydrated } from 'remix-utils/use-hydrated';
+import { Button, ModalV2 } from 'ui-design-system';
 import { z } from 'zod';
 
 const updateScenarioFormSchema = z.object({
@@ -75,10 +76,11 @@ export function UpdateScenario({
   children,
   defaultValue,
 }: {
-  children: React.ReactNode;
+  children: React.ReactElement;
   defaultValue: UpdateScenarioForm;
 }) {
   const [open, setOpen] = React.useState(false);
+  const hydrated = useHydrated();
 
   const navigation = useNavigation();
   React.useEffect(() => {
@@ -88,12 +90,12 @@ export function UpdateScenario({
   }, [navigation.state]);
 
   return (
-    <Modal.Root open={open} onOpenChange={setOpen}>
-      <Modal.Trigger asChild>{children}</Modal.Trigger>
-      <Modal.Content>
+    <ModalV2.Root open={open} setOpen={setOpen}>
+      <ModalV2.Trigger render={children} disabled={!hydrated} />
+      <ModalV2.Content>
         <UpdateScenarioContent defaultValue={defaultValue} />
-      </Modal.Content>
-    </Modal.Root>
+      </ModalV2.Content>
+    </ModalV2.Root>
   );
 }
 
@@ -124,7 +126,7 @@ function UpdateScenarioContent({
         action={getRoute('/ressources/scenarios/update')}
         {...getFormProps(form)}
       >
-        <Modal.Title>{t('scenarios:update_scenario.title')}</Modal.Title>
+        <ModalV2.Title>{t('scenarios:update_scenario.title')}</ModalV2.Title>
         <div className="flex flex-col gap-6 p-6">
           <input
             {...getInputProps(fields.scenarioId, { type: 'hidden' })}
@@ -155,11 +157,11 @@ function UpdateScenarioContent({
             <FormErrorOrDescription />
           </FormField>
           <div className="flex flex-1 flex-row gap-2">
-            <Modal.Close asChild>
-              <Button className="flex-1" variant="secondary">
-                {t('common:cancel')}
-              </Button>
-            </Modal.Close>
+            <ModalV2.Close
+              render={<Button className="flex-1" variant="secondary" />}
+            >
+              {t('common:cancel')}
+            </ModalV2.Close>
             <Button className="flex-1" variant="primary" type="submit">
               {t('common:save')}
             </Button>

packages/tests/.eslintrc.cjs

@@ -0,0 +1,9 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ['@marble/eslint-config/default'],
+  rules: {
+    // Not applicable for Playwright
+    'testing-library/prefer-screen-queries': 'off',
+  },
+};

packages/tests/.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

packages/tests/README.md

@@ -0,0 +1,33 @@
+# Tests
+
+The `marble-front/tests` package is designed to provide a comprehensive set of end-to-end tests for the Marble front-end application. By running these tests, developers can ensure that the front-end application is functioning correctly and that any changes or updates to the codebase do not introduce regressions or bugs.
+
+> **Note:** The tests in this package are written using the [Playwright](https://playwright.dev/) testing framework.
+
+## Getting Started
+
+To get started with running the tests in this package, follow these steps:
+
+1. Install Playwright (if you have not already done so):
+
+   ```bash
+   pnpm --filter tests exec playwright install
+   ```
+
+2. Create the test organisation (if it does not already exist):
+   1. Open the backoffice application
+   2. Create a new organisation with the name `e2e`. Do not forget to check "init with demo data"
+   3. Create a new admin user on this org with the email `[email protected]`
+3. Start a local test environment:
+   1. start the Firebase emulator suite (look at the backend README.md for more information)
+   2. start the backend normally
+   3. start the front-end application normally
+4. Run the tests using :
+   1. the command `pnpm --filter tests test`, for cmd line "fast" run
+   2. the command `pnpm --filter tests test:ui`, to open the browser and see the tests running
+
+> **Note:** The tests in this package are designed to be run against a local test environment. Steps 2 and 3 are manual steps that will be automated in the future.
+
+## Contributing
+
+If you would like to contribute to the tests in this package, we recommend using the VS Code extension for Playwright to help you write and debug tests.

packages/tests/e2e/001-user-signin-flow.test.ts

@@ -0,0 +1,66 @@
+import { getRoute } from '@app-builder/utils/routes';
+import { expect, test } from 'tests/fixtures';
+import { SignInPage } from 'tests/page-object-models/auth-pages';
+
+const user = {
+  email: '[email protected]',
+  password: 'password',
+};
+// Since we do use the same user email for all tests, we need to run them serially.
+test.describe.configure({ mode: 'serial' });
+
+test.afterEach(async ({ firebase }) => {
+  await firebase.deleteUser(user.email);
+});
+
+test('Users can sign in with Google', async ({ page, firebase }) => {
+  const signInPage = new SignInPage(page);
+  await signInPage.goto();
+  const firebasePopup = firebase.popup(page);
+  await signInPage.signInWithGoogle();
+  await firebasePopup.signUpWithSSO(user.email);
+
+  // Ensure signed in user is redirected to the scenarios page
+  await page.waitForURL(getRoute('/scenarios/'));
+  await page.getByRole('button').first().click();
+  await expect(page.getByText(user.email)).toBeVisible();
+});
+
+test('Users can sign in with Microsoft', async ({ page, firebase }) => {
+  const signInPage = new SignInPage(page);
+  await signInPage.goto();
+  const firebasePopup = firebase.popup(page);
+  await signInPage.signInWithMicrosoft();
+  await firebasePopup.signUpWithSSO(user.email);
+
+  // Ensure signed in user is redirected to the scenarios page
+  await page.waitForURL(getRoute('/scenarios/'));
+  await page.getByRole('button').first().click();
+  await expect(page.getByText(user.email)).toBeVisible();
+});
+
+test('Users can sign up with email and password', async ({
+  page,
+  firebase,
+}) => {
+  const signInPage = new SignInPage(page);
+  await signInPage.goto();
+  await page.getByRole('link', { name: 'Sign up' }).click();
+  await page.waitForURL(getRoute('/sign-up'));
+
+  await page.getByLabel('Email').fill(user.email);
+  await page.getByLabel('Password').fill(user.password);
+  await page.getByRole('button', { name: 'Sign up' }).click();
+
+  await page.waitForURL(getRoute('/email-verification'));
+  await firebase.verifyUser(user.email);
+  await page.getByRole('link', { name: 'Sign in' }).click();
+  await page.waitForURL(getRoute('/sign-in'));
+
+  await signInPage.signInWithEmail(user);
+
+  // Ensure signed in user is redirected to the scenarios page
+  await page.waitForURL(getRoute('/scenarios/'));
+  await page.getByRole('button').first().click();
+  await expect(page.getByText(user.email)).toBeVisible();
+});