From 0504ff206ebc57af4a119e587601e8796cd11f10 Mon Sep 17 00:00:00 2001
From: Nemo Godebski-Pedersen <nemozak1@gmail.com>
Date: Wed, 26 Mar 2025 17:44:25 +0000
Subject: [PATCH] basic opey integration tests

---
 playwright.config.ts                          |  3 +-
 src/components/ChatMessage.vue                |  2 +-
 src/components/ChatWidget.vue                 |  2 +-
 src/test/integration/opey.integration.test.ts | 30 +++++++++++++++----
 4 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/playwright.config.ts b/playwright.config.ts
index 55dad0b..3e08e81 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -36,7 +36,8 @@ export default defineConfig({
     {
         name: 'chromium',
         use: { 
-            ...devices['Desktop Chrome'],
+                ...devices['Desktop Chrome'],
+                storageState: 'src/test/integration/playwright/.auth/user.json',
             },
         dependencies: ['setup'],
     },
diff --git a/src/components/ChatMessage.vue b/src/components/ChatMessage.vue
index e6b989c..64f8602 100644
--- a/src/components/ChatMessage.vue
+++ b/src/components/ChatMessage.vue
@@ -86,7 +86,7 @@ export default {
                             <el-icon color="#00ff18"><Check /></el-icon>
                         </div>
                     </div>
-                    <div class="name">{{ toolCall.toolCall.name }}</div>
+                    <div class="tool-name">{{ toolCall.toolCall.name }}</div>
                 </div>
 
             </div>
diff --git a/src/components/ChatWidget.vue b/src/components/ChatWidget.vue
index d186af5..cfd31c2 100644
--- a/src/components/ChatWidget.vue
+++ b/src/components/ChatWidget.vue
@@ -129,7 +129,7 @@ export default {
                         <div class="user-input">
                             <textarea v-model="input" type="textarea" placeholder="Type your message..." :disabled="(chat.status !== 'ready') || (!chat.userIsAuthenticated)" @keypress.enter="onSubmit" />
                         </div>
-                        <el-button type="primary" @click="onSubmit" color="#253047" :icon="ElTop" circle></el-button>
+                        <el-button type="primary" name="send" @click="onSubmit" color="#253047" :icon="ElTop" circle></el-button>
                     </div>
                 </el-footer>
             </el-container>
diff --git a/src/test/integration/opey.integration.test.ts b/src/test/integration/opey.integration.test.ts
index 63e9930..3822941 100644
--- a/src/test/integration/opey.integration.test.ts
+++ b/src/test/integration/opey.integration.test.ts
@@ -1,21 +1,39 @@
-import { describe,beforeAll, beforeEach, afterAll, afterEach } from 'vitest';
 import { chromium, Browser, Page, BrowserContext } from 'playwright';
 import {test, expect} from '@playwright/test';
 
+
 test.describe('Opey Integration Tests in API Explorer', () => {
 
-    test.beforeAll(async ({ page }) => {
+    const openAndSendMessage = async (page: Page, message: string) => {
         // Open the chat widget
         await page.goto('/');
-        const chatButton = await page.waitForSelector('.chat-widget-button');
+        const chatButton = await page.waitForSelector('.chat-widget-button')
         await chatButton.click();
+    
+        await page.getByRole('textbox', { name: 'Type your message...' }).click();
+        await page.getByRole('textbox', { name: 'Type your message...' }).fill(message);
+        await page.locator('button[name="send"]').click();
+    }
 
-    })
+    test('Send a basic message', async ({ page }) => {
 
-    test('Opey is running', async ({ page }) => {
-        await page.goto('/');
+        await openAndSendMessage(page, 'Hi there');
 
+        const assistantMessage = await page.locator('.assistant > .message-container > .content')
+        console.log(assistantMessage.textContent())
+        await expect(assistantMessage).not.toBeEmpty();
         
     })
 
+    test.fixme('Send a message that would require a tool call to retrieve_endpoints', async ({page}) => {
+
+        await openAndSendMessage(page, 'What endpoints are avaliable to manage users?');
+        await page.locator('.assistant > .tool-calls-container').locator('tool-call').waitFor({state:"attached"})
+        const toolCallMessages = await page.locator('.assistant > .tool-calls-container').locator('.tool-call').all()
+        console.log(toolCallMessages.length)
+        await expect(toolCallMessages.length).toBeGreaterThan(0);
+        await expect(toolCallMessages[0].locator('.status + .tool-name')).toContainText('retrieve_endpoints');
+
+    })
+
 })
\ No newline at end of file