chore(ci): run e2e after preview deploy

.github/workflows/ci-test-e2e.yml

@@ -1,11 +1,13 @@
-name: E2E Tests
+name: CI - App Client E2E
 
 on:
-  deployment_status:
+  pull_request:
+  push:
+    branches:
+      - main
 
 jobs:
   run-e2es:
-    if: github.event_name == 'deployment_status' && github.event.deployment_status.state == 'success'
     runs-on: ubuntu-latest
     timeout-minutes: 60
     defaults:
@@ -14,19 +16,28 @@ jobs:
 
     steps:
     - uses: actions/checkout@v4
+    - run: corepack enable
     - uses: actions/setup-node@v4
       with:
-        node-version: 20
+        node-version: 22
         corepack: true
         cache: 'pnpm'
 
     - name: Get Playwright version
       id: playwright-version
-      run: echo "PLAYWRIGHT_VERSION=$(jq -r .dependencies.playwright package.json)" >> "$GITHUB_OUTPUT"
+      run: echo "PLAYWRIGHT_VERSION=$(jq -r .devDependencies.\"@playwright/test\" package.json)" >> "$GITHUB_OUTPUT"
 
     - name: Install dependencies
       run: pnpm i
       working-directory: ./
+
+    - name: Build iso-prod app
+      run: |
+        pnpm -F @enclosed/app-client build
+        pnpm -F @enclosed/app-server build:node
+        mkdir dist-app
+        cp -r dist dist-app/public
+        cp -r ../app-server/dist-node/index.cjs dist-app/index.cjs
 
     - name: Restore Playwright browsers from cache
       uses: actions/cache@v3
@@ -43,7 +54,7 @@ jobs:
     - name: Run e2e tests
       run: pnpm test:e2e
       env:
-        BASE_URL: ${{ github.event.deployment_status.environment_url }}
+        USE_PREVIEW_SERVER: true
 
     - uses: actions/upload-artifact@v4
       if: always()

packages/app-client/e2e-tests/createand-view-note.e2e.test.ts

@@ -1,5 +1,7 @@
 import { expect, test } from '@playwright/test';
 
+const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+
 test('Can create and view a note', async ({ page }) => {
   await page.goto('/');
 
@@ -11,6 +13,8 @@ test('Can create and view a note', async ({ page }) => {
   await page.getByTestId('delete-after-reading').click();
 
   await page.getByTestId('create-note').click();
+  await sleep(1000);
+
   const noteUrl = await page.getByTestId('note-url').inputValue();
 
   expect(noteUrl).toBeDefined();

packages/app-client/playwright.config.ts

@@ -1,8 +1,10 @@
 import process from 'node:process';
 import { defineConfig, devices } from '@playwright/test';
 
-const baseURL = process.env.BASE_URL ?? 'http://localhost:3000/';
+const port = process.env.PORT ?? '3999';
+const baseURL = process.env.BASE_URL ?? `http://localhost:${port}/`;
 const isCI = Boolean(process.env.CI);
+const startPreviewServer = Boolean(process.env.USE_PREVIEW_SERVER);
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -49,4 +51,17 @@ export default defineConfig({
       use: { ...devices['Desktop Safari'] },
     },
   ],
+
+  ...(startPreviewServer
+    ? {
+        webServer: {
+          command: 'cd dist-app && node index.cjs',
+          reuseExistingServer: true,
+          env: {
+            PORT: port,
+          },
+        },
+      }
+    : {}),
+
 });

packages/app-client/src/modules/notes/pages/create-note.page.tsx

@@ -205,12 +205,12 @@ export const CreateNotePage: Component = () => {
             </TextFieldRoot>
 
             <div>
-              <FileUploaderButton variant="secondary" class="mt-2 w-full" multiple onFilesUpload={({ files }) => setUploadedFiles(prevFiles => [...prevFiles, ...files])} data-test-id="create-note">
+              <FileUploaderButton variant="secondary" class="mt-2 w-full" multiple onFilesUpload={({ files }) => setUploadedFiles(prevFiles => [...prevFiles, ...files])}>
                 <div class="i-tabler-upload mr-2 text-lg text-muted-foreground"></div>
                 {t('create.settings.attach-files')}
               </FileUploaderButton>
 
-              <Button class="mt-2 w-full" onClick={createNote} disabled={getIsNoteCreating()}>
+              <Button class="mt-2 w-full" onClick={createNote} disabled={getIsNoteCreating()} data-test-id="create-note">
                 <div class={cn('mr-2 text-lg text-muted-foreground', getIsNoteCreating() ? 'i-tabler-loader-2 animate-spin' : 'i-tabler-plus')}></div>
                 {getIsNoteCreating() ? t('create.settings.creating') : t('create.settings.create')}
               </Button>

packages/app-client/src/modules/notes/pages/view-note.page.tsx

@@ -262,15 +262,15 @@ export const ViewNotePage: Component = () => {
             {getDecryptedNote() && (
               <div class="flex-1 mb-4">
                 <div class="flex items-center gap-2 mb-4 justify-between">
-                  <div class="text-muted-foreground" data-test-id="note-content-display">
+                  <div class="text-muted-foreground">
                     {t('view.note-content')}
                   </div>
                   <CopyButton text={getDecryptedNote()!} variant="secondary" />
                 </div>
 
                 <Card class="w-full rounded-md shadow-sm mb-2">
                   <CardContent class="p-6">
-                    <div class="break-all">{getDecryptedNote()}</div>
+                    <div class="break-all" data-test-id="note-content-display">{getDecryptedNote()}</div>
                   </CardContent>
                 </Card>