test: add playwright test for ask interaction (#94)

packages/chat-component/src/main.ts

@@ -340,7 +340,7 @@ export class ChatComponent extends LitElement {
   }
   // Render text entries in bubbles
   renderTextEntry(textEntry: ChatMessageText) {
-    const entries = [html`<p>${unsafeHTML(textEntry.value)}</p>`];
+    const entries = [html`<p class="chat__txt--entry">${unsafeHTML(textEntry.value)}</p>`];
 
     // render steps
     if (textEntry.followingSteps && textEntry.followingSteps.length > 0) {

tests/e2e/hars/default-ask-response.har

@@ -0,0 +1,75 @@
+{
+  "log": {
+    "version": "1.2",
+    "creator": {
+      "name": "Playwright",
+      "version": "1.39.0"
+    },
+    "browser": {
+      "name": "chromium",
+      "version": "119.0.6045.9"
+    },
+    "entries": [
+      {
+        "startedDateTime": "2023-10-27T08:26:30.487Z",
+        "time": 260.506,
+        "request": {
+          "method": "POST",
+          "url": "http://localhost:5173/ask",
+          "httpVersion": "HTTP/2.0",
+          "cookies": [],
+          "headers": [
+            { "name": ":authority", "value": "http://localhost:5173" },
+            { "name": ":method", "value": "POST" },
+            { "name": ":path", "value": "/ask" },
+            { "name": ":scheme", "value": "https" },
+            { "name": "accept", "value": "*/*" },
+            { "name": "accept-encoding", "value": "gzip, deflate, br" },
+            { "name": "accept-language", "value": "en-US" },
+            { "name": "content-length", "value": "416" },
+            { "name": "content-type", "value": "application/json" },
+            { "name": "origin", "value": "http://localhost:5173" },
+            { "name": "sec-fetch-dest", "value": "empty" },
+            { "name": "sec-fetch-mode", "value": "cors" },
+            { "name": "sec-fetch-site", "value": "cross-site" },
+            {
+              "name": "user-agent",
+              "value": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.6045.9 Safari/537.36"
+            }
+          ],
+          "queryString": [],
+          "headersSize": -1,
+          "bodySize": -1,
+          "postData": {
+            "mimeType": "application/json",
+            "text": "{\"messages\":[{\"content\":\"How to search and book rentals?\",\"role\":\"user\"}],\"context\":{\"retrieval_mode\":\"hybrid\",\"semantic_ranker\":true,\"semantic_captions\":false,\"suggest_followup_questions\":true,\"retrievalMode\":\"hybrid\",\"retrieveCount\":3,\"useSemanticRanker\":true,\"useSemanticCaptions\":false,\"excludeCategory\":\"\",\"promptTemplate\":\"\",\"promptTemplatePrefix\":\"\",\"promptTemplateSuffix\":\"\",\"approach\":\"rrr\"},\"stream\":false}",
+            "params": []
+          }
+        },
+        "response": {
+          "status": 200,
+          "statusText": "",
+          "httpVersion": "HTTP/2.0",
+          "cookies": [],
+          "headers": [
+            { "name": "access-control-allow-origin", "value": "http://localhost:5173" },
+            { "name": "content-length", "value": "277" },
+            { "name": "content-type", "value": "application/json; charset=utf-8" },
+            { "name": "date", "value": "Fri, 27 Oct 2023 08:26:31 GMT" },
+            { "name": "vary", "value": "Origin" }
+          ],
+          "content": {
+            "size": -1,
+            "mimeType": "application/json; charset=utf-8",
+            "text": "{\"choices\":[{\"index\":0,\"message\":{\"content\":\"I don't know the answer to that question.\",\"role\":\"assistant\",\"context\":{\"data_points\":[],\"thoughts\":\"[chain/start] [<b>1:chain:AgentExecutor</b>] Entering chain<br><br>[chain/end] Finished chain<br>\"}}}],\"object\":\"chat.completion\"}"
+          },
+          "headersSize": -1,
+          "bodySize": -1,
+          "redirectURL": ""
+        },
+        "cache": {},
+        "timings": { "send": -1, "wait": -1, "receive": 260.506 }
+      }
+    ]
+  }
+}

tests/e2e/webapp.spec.ts

@@ -29,6 +29,7 @@ test.describe('default', () => {
     await page.routeFromHAR('./tests/e2e/hars/default-chat-response-stream.har', {
       url: '/chat',
       update: false,
+      updateContent: 'embed',
     });
 
     const showThoughtProcess = page.getByTestId('chat-show-thought-process');
@@ -58,6 +59,64 @@ test.describe('default', () => {
     });
   });
 
+  test('ask interaction', async ({ page }) => {
+    await page.goto('/');
+    const chatLink = page.getByRole('link', { name: 'Chat' });
+    const askLink = page.getByRole('link', { name: 'Ask a question' });
+
+    await expect(chatLink).toHaveAttribute('aria-current', 'page');
+    await expect(askLink).not.toHaveAttribute('aria-current');
+    await askLink.click();
+    await expect(chatLink).not.toHaveAttribute('aria-current');
+    await expect(askLink).toHaveAttribute('aria-current', 'page');
+
+    const defaultQuestions = page.getByTestId('default-question');
+
+    // expect there to be at least 3 default question buttons on page load
+    await test.step('Get default questions', async () => {
+      await expect(defaultQuestions).toHaveCount(3);
+    });
+
+    const chatInput = page.getByTestId('question-input');
+    const firstQuestionButton = defaultQuestions.nth(0);
+    const firstQuestionText = ((await firstQuestionButton.textContent()) ?? '').replace('Ask now', '').trim();
+
+    // should not have any text at the start
+    await test.step('Use default question', async () => {
+      await expect(chatInput).toHaveValue('');
+
+      await firstQuestionButton.click();
+      await expect(chatInput).toHaveValue(firstQuestionText);
+    });
+
+    // Set to replay the response for a local route (will not be used for the official)
+    await page.routeFromHAR('./tests/e2e/hars/default-ask-response.har', {
+      url: '/ask',
+      update: false,
+      updateContent: 'embed',
+    });
+
+    const showThoughtProcess = page.getByTestId('chat-show-thought-process');
+    await test.step('Get answer', async () => {
+      await expect(showThoughtProcess).not.toBeVisible();
+
+      await page.getByTestId('submit-question-button').click();
+
+      // wait for the thought process button to be enabled.
+      await expect(showThoughtProcess).toBeEnabled({ timeout: 30_000 });
+
+      // expect some response
+      await expect(page.locator('.chat__txt--entry')).not.toHaveText('');
+      await expect(defaultQuestions).toHaveCount(0);
+    });
+
+    await test.step('Reset chat', async () => {
+      await page.getByTestId('chat-reset-button').click();
+      await expect(page.locator('.chat__txt--entry')).not.toBeVisible();
+      await expect(defaultQuestions).toHaveCount(3);
+    });
+  });
+
   test('waiting for response', async ({ page }) => {
     await page.goto('/');
     await page.getByTestId('default-question').nth(0).click();