test: added basic e2e tests (#46)

* test: added basic e2e tests

* tests: all e2e tests now passing

* ci: run e2e tests in ci

* chore: comment out testing hooks in pre-commit config

* tests: improved e2e tests

* ci: run gptme-server for e2e tests

* ci: use ANTHROPIC_API_KEY secret when running e2e tests

* ci: use latest master of gptme-server for now

* tests: fixes to e2e test

Author: ErikBjare

.github/workflows/ci.yml

@@ -4,7 +4,7 @@ on:
   push:
     branches: [ master ]
   pull_request:
-    branches: [ master ]
+    branches: [ master, 'dev/*' ]
 
 jobs:
   build:
@@ -36,3 +36,29 @@ jobs:
 
     - name: Build
       run: npm run build
+
+    - name: Start gptme-server in background
+      env:
+        ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
+      run: |
+        # pipx install gptme[server]
+        pipx install "gptme[server] @ git+https://github.com/gptme/gptme.git"
+        gptme-server --cors-origin="http://localhost:5701" &  # run in background
+        sleep 3  # sleep so we get initial logs
+
+    - name: Install Playwright browsers
+      run: npx playwright install --with-deps chromium
+
+    - name: Check that server is up
+      run: curl --retry 2 --retry-delay 5 --retry-connrefused -sSfL http://localhost:5700/api
+
+    - name: Run e2e tests
+      run: npm run test:e2e
+
+    - name: Upload test results
+      if: always()
+      uses: actions/upload-artifact@v4
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.pre-commit-config.yaml

@@ -5,24 +5,28 @@ repos:
   - id: check-yaml
   - id: end-of-file-fixer
   - id: trailing-whitespace
+
 - repo: local
   hooks:
   - id: lint
     name: lint
     stages: [commit]
     types: [javascript, jsx, ts, tsx]
-    entry: npm run lint
-    language: system
-    pass_filenames: false
-    always_run: true
-  - id: format
-    name: format
-    stages: [commit]
-    types: [javascript, jsx, ts, tsx]
-    entry: npm run format
+    entry: npm run lint:fix
     language: system
     pass_filenames: false
     always_run: true
+
+  # handled by lint:fix
+  #- id: format
+  #  name: format
+  #  stages: [commit]
+  #  types: [javascript, jsx, ts, tsx]
+  #  entry: npm run format
+  #  language: system
+  #  pass_filenames: false
+  #  always_run: true
+
   - id: typecheck
     name: typecheck
     stages: [commit]
@@ -31,11 +35,22 @@ repos:
     language: system
     pass_filenames: false
     always_run: true
+
+  # Uncomment the following lines to enable testing hooks
+  # Don't commit them uncommented since they take too long to run every time
+
   #- id: test
   #  name: test
-  #  stages: [commit]
   #  types: [javascript, jsx, ts, tsx]
   #  entry: npm test
   #  language: system
   #  pass_filenames: false
   #  always_run: true
+
+  #- id: test-e2e
+  #  name: test-e2e
+  #  types: [javascript, jsx, ts, tsx]
+  #  entry: npm run test:e2e
+  #  language: system
+  #  pass_filenames: false
+  #  always_run: true

e2e/conversation.spec.ts

@@ -0,0 +1,143 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Connecting', () => {
+  test('should connect and list conversations', async ({ page }) => {
+    // Go to the app
+    await page.goto('/');
+
+    // Should show demo conversations initially
+    await expect(page.getByText('Introduction to gptme')).toBeVisible();
+
+    // Should show connection status
+    const connectionButton = page.getByRole('button', { name: /Connect/i });
+    await expect(connectionButton).toBeVisible();
+
+    // Click the demo conversation
+    await page.getByText('Introduction to gptme').click();
+
+    // Should show the conversation content
+    await expect(page.getByText(/Hello! I'm gptme, your AI programming assistant/)).toBeVisible();
+    await page.goto('/');
+
+    // Should show demo conversations immediately
+    await expect(page.getByText('Introduction to gptme')).toBeVisible();
+
+    // Wait for successful connection
+    await expect(page.getByRole('button', { name: /Connect/i })).toHaveClass(/text-green-600/, {
+      timeout: 10000,
+    });
+
+    // Wait for success toast to confirm API connection
+    await expect(page.getByText('Connected to gptme server')).toBeVisible();
+
+    // Wait for conversations to load
+    // Should show both demo conversations and connected conversations
+    await expect(page.getByText('Introduction to gptme')).toBeVisible();
+
+    // Wait for loading state to finish
+    await expect(page.getByText('Loading conversations...')).toBeHidden();
+
+    // Get the conversation list
+    const conversationList = page.getByTestId('conversation-list');
+
+    // Get all conversation titles
+    const conversationTitles = await conversationList
+      .locator('[data-testid="conversation-title"]')
+      .allTextContents();
+
+    // Should have both demo and API conversations
+    const demoConversations = conversationTitles.filter((title) => title.includes('Introduction'));
+    const apiConversations = conversationTitles.filter((title) => /^\d+$/.test(title));
+
+    expect(demoConversations.length).toBeGreaterThan(0);
+
+    if (apiConversations.length > 0) {
+      // Check for historical timestamps if we have API conversations
+      const timestamps = await conversationList
+        .getByRole('button')
+        .locator('time')
+        .allTextContents();
+      expect(timestamps.length).toBeGreaterThan(1);
+
+      // There should be some timestamps that aren't "just now"
+      const nonJustNowTimestamps = timestamps.filter((t) => t !== 'just now');
+      expect(nonJustNowTimestamps.length).toBeGreaterThan(0);
+    } else {
+      // This happens when e2e tests are run in CI with a fresh gptme-server
+      console.log('No API conversations found, skipping timestamp check');
+    }
+  });
+
+  test('should handle connection errors gracefully', async ({ page }) => {
+    // Start with server unavailable
+    await page.goto('/');
+
+    // Should still show demo conversations
+    await expect(page.getByText('Introduction to gptme')).toBeVisible();
+
+    // Click connect button and try to connect to non-existent server
+    const connectionButton = page.getByRole('button', { name: /Connect/i });
+    await connectionButton.click();
+
+    // Fill in invalid server URL and try to connect
+    await page.getByLabel('Server URL').fill('http://localhost:1');
+    await page.getByRole('button', { name: /^(Connect|Reconnect)$/ }).click();
+
+    // Wait for error toast to appear
+    await expect(page.getByText('Could not connect to gptme instance')).toBeVisible({
+      timeout: 10000,
+    });
+
+    // Close the connection dialog by clicking outside
+    await page.keyboard.press('Escape');
+
+    // Verify connection button is in disconnected state
+    await expect(connectionButton).toBeVisible();
+    await expect(connectionButton).not.toHaveClass(/text-green-600/);
+
+    // Should show demo conversations
+    await expect(page.getByText('Introduction to gptme')).toBeVisible();
+
+    // Should not show any API conversations
+    const conversationList = page.getByTestId('conversation-list');
+    const conversationTitles = await conversationList
+      .locator('[data-testid="conversation-title"]')
+      .allTextContents();
+
+    const apiConversations = conversationTitles.filter((title) => /^\d+$/.test(title));
+    expect(apiConversations.length).toBe(0);
+  });
+});
+
+test.describe('Conversation Flow', () => {
+  test('should be able to create a new conversation and send a message', async ({ page }) => {
+    await page.goto('/');
+
+    // Click the "New Conversation" button to start a new conversation
+    await page.locator('[data-testid="new-conversation-button"]').click();
+
+    // Wait for the new conversation page to load
+    await expect(page).toHaveURL(/\?conversation=\d+$/);
+
+    const message = 'Hello. We are testing, just say exactly "Hello world" without anything else.';
+
+    // Type a message
+    await page.getByRole('textbox').fill(message);
+    await page.keyboard.press('Enter');
+
+    // Should show the message in the conversation
+    // Look specifically for the user's message in a user message container
+    await expect(
+      page.locator('.role-user', {
+        hasText: message,
+      })
+    ).toBeVisible();
+
+    // Should show the AI's response
+    await expect(
+      page.locator('.role-assistant', {
+        hasText: 'Hello world',
+      })
+    ).toBeVisible();
+  });
+});

eslint.config.js

@@ -6,7 +6,7 @@ import tseslint from 'typescript-eslint';
 import prettier from 'eslint-plugin-prettier';
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ['dist', 'playwright.config.ts'] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
     files: ['**/*.{ts,tsx}'],

jest.config.ts

@@ -14,5 +14,6 @@ export default {
       },
     ],
   },
+  testPathIgnorePatterns: ['/node_modules/', '/e2e/'],
   extensionsToTreatAsEsm: ['.ts', '.tsx'],
 };