chore: add tests

.github/workflows/playwright.yml

@@ -0,0 +1,32 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm install -g pnpm && pnpm install
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+      - name: Run Playwright tests
+        env:
+          AUTH_SECRET: ${{ secrets.AUTH_SECRET }}
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+          POSTGRES_URL: ${{ secrets.POSTGRES_URL }}
+          TEST_USER_PASSWORD: ${{ secrets.TEST_USER_PASSWORD }}
+        run: pnpm exec playwright test
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -36,3 +36,7 @@ yarn-error.log*
 .vercel
 .vscode
 .env*.local
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

components/block-messages.tsx

@@ -52,6 +52,7 @@ function PureBlockMessages({
           setMessages={setMessages}
           reload={reload}
           isReadonly={isReadonly}
+          index={index}
         />
       ))}
 

components/message-editor.tsx

@@ -56,6 +56,7 @@ export function MessageEditor({
         className="bg-transparent outline-none overflow-hidden resize-none !text-base rounded-xl w-full"
         value={draftContent}
         onChange={handleInput}
+        data-testid="message-editor"
       />
 
       <div className="flex flex-row gap-2 justify-end">
@@ -104,6 +105,7 @@ export function MessageEditor({
             setMode('view');
             reload();
           }}
+          data-testid="message-editor-send-button"
         >
           {isSubmitting ? 'Sending...' : 'Send'}
         </Button>

components/message.tsx

@@ -28,6 +28,7 @@ const PurePreviewMessage = ({
   setMessages,
   reload,
   isReadonly,
+  index,
 }: {
   chatId: string;
   message: Message;
@@ -40,6 +41,7 @@ const PurePreviewMessage = ({
     chatRequestOptions?: ChatRequestOptions,
   ) => Promise<string | null | undefined>;
   isReadonly: boolean;
+  index: number;
 }) => {
   const [mode, setMode] = useState<'view' | 'edit'>('view');
 
@@ -50,6 +52,7 @@ const PurePreviewMessage = ({
         initial={{ y: 5, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         data-role={message.role}
+        data-testid={`message-${message.role}-${index}`}
       >
         <div
           className={cn(
@@ -70,7 +73,10 @@ const PurePreviewMessage = ({
 
           <div className="flex flex-col gap-2 w-full">
             {message.experimental_attachments && (
-              <div className="flex flex-row justify-end gap-2">
+              <div
+                className="flex flex-row justify-end gap-2"
+                data-testid={`message-attachments-${index}`}
+              >
                 {message.experimental_attachments.map((attachment) => (
                   <PreviewAttachment
                     key={attachment.url}
@@ -87,10 +93,11 @@ const PurePreviewMessage = ({
                     <TooltipTrigger asChild>
                       <Button
                         variant="ghost"
-                        className="px-2 h-fit rounded-full text-muted-foreground opacity-0 group-hover/message:opacity-100"
+                        className="edit px-2 h-fit rounded-full text-muted-foreground opacity-0 group-hover/message:opacity-100"
                         onClick={() => {
                           setMode('edit');
                         }}
+                        data-testid={`edit-${message.role}-${index}`}
                       >
                         <PencilEditIcon />
                       </Button>

components/messages.tsx

@@ -36,7 +36,7 @@ function PureMessages({
   return (
     <div
       ref={messagesContainerRef}
-      className="flex flex-col min-w-0 gap-6 flex-1 overflow-y-scroll pt-4"
+      className="messages flex flex-col min-w-0 gap-6 flex-1 overflow-y-scroll pt-4"
     >
       {/* {messages.length === 0 && <Overview />} */}
 
@@ -54,6 +54,7 @@ function PureMessages({
           setMessages={setMessages}
           reload={reload}
           isReadonly={isReadonly}
+          index={index}
         />
       ))}
 

components/multimodal-input.tsx

@@ -208,10 +208,14 @@ function PureMultimodalInput({
         multiple
         onChange={handleFileChange}
         tabIndex={-1}
+        data-testid="attachments-input"
       />
 
       {(attachments.length > 0 || uploadQueue.length > 0) && (
-        <div className="flex flex-row gap-2 overflow-x-scroll items-end">
+        <div
+          className="flex flex-row gap-2 overflow-x-scroll items-end"
+          data-testid="attachments-preview"
+        >
           {attachments.map((attachment) => (
             <PreviewAttachment key={attachment.url} attachment={attachment} />
           ))}
@@ -252,6 +256,7 @@ function PureMultimodalInput({
             }
           }
         }}
+        data-testid="multimodal-input"
       />
 
       <div className="absolute bottom-0 p-2 w-fit flex flex-row justify-start">
@@ -300,6 +305,7 @@ function PureAttachmentsButton({
       }}
       disabled={isLoading}
       variant="ghost"
+      data-testid="attachments-button"
     >
       <PaperclipIcon size={14} />
     </Button>
@@ -323,6 +329,7 @@ function PureStopButton({
         stop();
         setMessages((messages) => sanitizeUIMessages(messages));
       }}
+      data-testid="stop-button"
     >
       <StopIcon size={14} />
     </Button>
@@ -348,6 +355,7 @@ function PureSendButton({
         submitForm();
       }}
       disabled={input.length === 0 || uploadQueue.length > 0}
+      data-testid="send-button"
     >
       <ArrowUpIcon size={14} />
     </Button>

components/preview-attachment.tsx

@@ -12,7 +12,7 @@ export const PreviewAttachment = ({
   const { name, url, contentType } = attachment;
 
   return (
-    <div className="flex flex-col gap-2">
+    <div className="flex flex-col gap-2" data-testid="input-attachment-preview">
       <div className="w-20 h-16 aspect-video bg-muted rounded-md relative flex flex-col items-center justify-center">
         {contentType ? (
           contentType.startsWith('image') ? (
@@ -32,7 +32,10 @@ export const PreviewAttachment = ({
         )}
 
         {isUploading && (
-          <div className="animate-spin absolute text-zinc-500">
+          <div
+            className="animate-spin absolute text-zinc-500"
+            data-testid="input-attachment-loader"
+          >
             <LoaderIcon />
           </div>
         )}

components/suggested-actions.tsx

@@ -38,7 +38,10 @@ function PureSuggestedActions({ chatId, append }: SuggestedActionsProps) {
   ];
 
   return (
-    <div className="grid sm:grid-cols-2 gap-2 w-full">
+    <div
+      className="grid sm:grid-cols-2 gap-2 w-full"
+      data-testid="suggested-actions"
+    >
       {suggestedActions.map((suggestedAction, index) => (
         <motion.div
           initial={{ opacity: 0, y: 20 }}

package.json

@@ -15,7 +15,8 @@
     "db:push": "drizzle-kit push",
     "db:pull": "drizzle-kit pull",
     "db:check": "drizzle-kit check",
-    "db:up": "drizzle-kit up"
+    "db:up": "drizzle-kit up",
+    "test": "pnpm exec playwright test"
   },
   "dependencies": {
     "@ai-sdk/openai": "1.0.19",
@@ -80,6 +81,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
+    "@playwright/test": "^1.49.1",
     "@tailwindcss/typography": "^0.5.15",
     "@types/d3-scale": "^4.0.8",
     "@types/node": "^22.8.6",

playwright.config.ts

@@ -0,0 +1,97 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+import { config } from 'dotenv';
+
+config({
+  path: '.env.local',
+});
+
+/* Use process.env.PORT by default and fallback to port 3000 */
+const PORT = process.env.PORT || 3000;
+
+/**
+ * Set webServer.url and use.baseURL with the location
+ * of the WebServer respecting the correct set port
+ */
+const baseURL = `http://localhost:${PORT}`;
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL,
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure global timeout for each test */
+  timeout: 30000,
+  expect: {
+    timeout: 30000,
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npm run dev',
+    url: baseURL,
+    timeout: 120 * 1000,
+    reuseExistingServer: !process.env.CI,
+  },
+});