test(e2e): add screenshots test

e2e/App.tsx

@@ -28,7 +28,10 @@ const pagesToRender = Object.keys(modules)
       ? {
           Component: lazy(
             // oxlint-disable-next-line typescript/no-unsafe-return
-            async () => import(`./tests/${path?.split('/')[2]}/render.tsx`),
+            async () =>
+              import(
+                `./tests/${path?.split('/')[2]}/${path?.split('/')[3]}/render.tsx`
+              ),
           ),
           name: path.replace('.tsx', ''),
         }
@@ -55,9 +58,9 @@ const WelcomePage = () => (
       {pagesToRender.map(path => (
         <li key={path?.name}>
           <ReactRouterLink
-            to={{ pathname: path?.name?.split('/')[2]?.toLowerCase() ?? '' }}
+            to={{ pathname: path?.name?.split('/')[3]?.toLowerCase() ?? '' }}
           >
-            {path?.name?.split('/')[2]?.toLowerCase()}
+            {path?.name?.split('/')[3]?.toLowerCase()}
           </ReactRouterLink>
         </li>
       ))}
@@ -79,7 +82,7 @@ const App = () => (
                 <Route
                   element={<Element />}
                   key={path?.name}
-                  path={path?.name?.split('/')[2]?.toLowerCase()}
+                  path={path?.name?.split('/')[3]?.toLowerCase()}
                 />
               )
             }

e2e/Dockerfile

@@ -0,0 +1,17 @@
+# this dockerfile will be used to generate the same screenshot for our CI.
+FROM mcr.microsoft.com/playwright:v1.58.2-jammy
+
+WORKDIR /build
+
+ARG TURBO_TOKEN=
+
+ENV TURBO_TOKEN ${TURBO_TOKEN}
+ENV CI=true
+
+COPY . .
+
+RUN npm install -g corepack@0.31.0
+RUN corepack enable
+RUN pnpm install --frozen-lockfile
+
+ENTRYPOINT ["pnpm", "run", "test:e2e"]

e2e/playwright.config.ts

@@ -19,21 +19,32 @@ export default defineConfig({
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'chromium',
+      name: 'e2e-chromium',
+      testDir: './tests/e2e',
       use: { ...devices['Desktop Chrome'] },
     },
     {
-      name: 'firefox',
+      name: 'e2e-firefox',
+      testDir: './tests/e2e',
       use: { ...devices['Desktop Firefox'] },
     },
     {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
+      name: 'e2e-webkit',
+      testDir: './tests/e2e',
+      use: {
+        ...devices['Desktop Safari'],
+      },
+    },
+    {
+      name: 'screenshots-chromium',
+      testDir: './tests/screenshots',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
     },
   ],
   reporter: 'line',
   retries: isCI ? 2 : 0,
-  testDir: './tests',
   timeout: isCI ? Number(times['1min']) : undefined,
   use: {
     baseURL,
@@ -45,6 +56,7 @@ export default defineConfig({
     stderr: 'pipe',
     stdout: 'ignore',
     url: baseURL,
+    reuseExistingServer: true,
   },
   workers: isCI ? 1 : undefined,
 })

e2e/tests/componentsWithinModal/render.tsx → e2e/tests/e2e/componentsWithinModal/render.tsx

@@ -7,7 +7,7 @@ import {
 import { Button, Modal, Stack, Text, TextInput } from '@ultraviolet/ui'
 import { useState } from 'react'
 
-import { mockErrors } from '../../mocks/mockErrors'
+import { mockErrors } from '../../../mocks/mockErrors'
 
 const Render = () => {
   const methods = useForm<{ lastName: ''; color: '' }>()