e2e: add feedback tests (#313)

pingcap · Sep 29, 2024 · 51d1c21 · 51d1c21
1 parent 9316517
commit 51d1c21
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 13 deletions.
diff --git a/e2e/tests/chat.spec.ts b/e2e/tests/chat.spec.ts
@@ -1,7 +1,8 @@
 import { expect, test } from '@playwright/test';
 import { getChatRequestPromise, QUESTION, testNewChat } from '../utils/chat';
+import { loginViaApi } from '../utils/login';
 
-test.describe('Chat', () => {
+test.describe.serial('Chat', () => {
   test('From Home Page', async ({ page, baseURL }) => {
     await test.step('Visit home page', async () => {
       await page.goto('/');
@@ -19,7 +20,7 @@ test.describe('Chat', () => {
       return await chatRequestPromise;
     });
 
-    await testNewChat(page, chatRequest, true);
+    await testNewChat(page, chatRequest, true, true);
   });
 
   test('From Keyboard Shortcut', async ({ page, baseURL }) => {
@@ -37,6 +38,13 @@ test.describe('Chat', () => {
       return await chatRequestPromise;
     });
 
-    await testNewChat(page, chatRequest, true);
+    await testNewChat(page, chatRequest, true, false);
+  });
+
+  test('Admin Feedback Page', async ({ page }) => {
+    await loginViaApi(page);
+    await page.goto('/feedbacks');
+    expect(await page.getByText('Good Good Good').count()).toBeGreaterThan(0);
+    expect(await page.getByText('Bad Bad Bad').count()).toBeGreaterThan(0);
   });
 });
diff --git a/e2e/utils/chat.ts b/e2e/utils/chat.ts
@@ -3,10 +3,10 @@ import { expect, type Page, type Request, test } from '@playwright/test';
 export const QUESTION = 'What is the content of sample.pdf?';
 
 export function getChatRequestPromise (page: Page, baseURL: string) {
- return page.waitForRequest(request => request.url() === `${baseURL}/api/v1/chats` && request.method() === 'POST');
+  return page.waitForRequest(request => request.url() === `${baseURL}/api/v1/chats` && request.method() === 'POST');
 }
 
-export async function testNewChat (page: Page, chatRequest: Request, validatePageUrlAndTitle: boolean) {
+export async function testNewChat (page: Page, chatRequest: Request, validatePageUrlAndTitle: boolean, feedbackLike?: boolean) {
   await test.step('Wait page changes', async () => {
     if (validatePageUrlAndTitle) {
       await page.waitForURL(/\/c\/.+/);
@@ -20,7 +20,7 @@ export async function testNewChat (page: Page, chatRequest: Request, validatePag
     expect(chatResponse.ok()).toBe(true);
 
     // Feedback button indicates chat ends.
-    await page.locator('button', { has: page.locator('svg.lucide-thumbs-up') }).waitFor({ state: 'visible' });
+    await page.getByRole('button', { name: 'Like This Answer', exact: true }).waitFor({ state: 'visible' });
 
     return await chatResponse.text();
   });
@@ -33,4 +33,19 @@ export async function testNewChat (page: Page, chatRequest: Request, validatePag
     expect(message.finished_at).toBeTruthy();
     expect(message.content.trim().length).toBeGreaterThan(0);
   });
+
+  if (typeof feedbackLike === 'boolean') {
+    await test.step('Feedback', async () => {
+      const feedbackButton = page.getByRole('button', { name: feedbackLike ? 'Like This Answer' : 'Dislike This Answer', exact: true });
+      await feedbackButton.click();
+      const dialog = page.getByRole('dialog', { name: 'Feedback' });
+
+      await dialog.waitFor({ state: 'visible' });
+      const comments = page.getByPlaceholder('Comments...');
+      await comments.pressSequentially(feedbackLike ? 'Good Good Good' : 'Bad Bad Bad');
+      await page.getByText('Add feedback', { exact: true }).click();
+
+      await dialog.waitFor({ state: 'hidden' });
+    });
+  }
 }
diff --git a/frontend/app/src/components/chat/message-operations.tsx b/frontend/app/src/components/chat/message-operations.tsx
@@ -1,4 +1,4 @@
-import { useChatMessageField, useChatMessageStreamState, useCurrentChatController } from '@/components/chat/chat-hooks';
+import { useChatMessageStreamState } from '@/components/chat/chat-hooks';
 import { ChatMessageController } from '@/components/chat/chat-message-controller';
 import { MessageFeedback } from '@/components/chat/message-feedback';
 import { useMessageFeedback } from '@/components/chat/use-message-feedback';
@@ -12,10 +12,8 @@ import { CopyCheckIcon, CopyIcon, ThumbsDownIcon, ThumbsUpIcon } from 'lucide-re
 import { useState } from 'react';
 
 export function MessageOperations ({ message }: { message: ChatMessageController }) {
-  const controller = useCurrentChatController();
-  const traceUrl = useChatMessageField(message, 'trace_url');
   const streamState = useChatMessageStreamState(message);
-  const { feedbackData, feedback: callFeedback, disabled } = useMessageFeedback(message.id, !!traceUrl);
+  const { feedbackData, feedback: callFeedback, disabled } = useMessageFeedback(message.id);
   const [copied, setCopied] = useState(false);
   const [clicked, setClicked] = useState<'like' | 'dislike'>('like');
   const container = usePortalContainer();
@@ -52,7 +50,7 @@ export function MessageOperations ({ message }: { message: ChatMessageController
               <Tooltip>
                 <DialogTrigger asChild>
                   <TooltipTrigger asChild>
-                    <Button size="icon" variant="ghost" className="ml-auto rounded-full w-7 h-7" disabled={disabled} onClick={() => { setClicked('like'); }}>
+                    <Button size="icon" variant="ghost" className="ml-auto rounded-full w-7 h-7" disabled={disabled} onClick={() => { setClicked('like'); }} aria-label="Like This Answer">
                       <ThumbsUpIcon className="w-4 h-4" />
                     </Button>
                   </TooltipTrigger>
@@ -66,7 +64,7 @@ export function MessageOperations ({ message }: { message: ChatMessageController
               <Tooltip>
                 <DialogTrigger asChild>
                   <TooltipTrigger asChild>
-                    <Button size="icon" variant="ghost" className="rounded-full w-7 h-7" disabled={disabled} onClick={() => { setClicked('dislike'); }}>
+                    <Button size="icon" variant="ghost" className="rounded-full w-7 h-7" disabled={disabled} onClick={() => { setClicked('dislike'); }} aria-label="Dislike This Answer">
                       <ThumbsDownIcon className="w-4 h-4" />
                     </Button>
                   </TooltipTrigger>

diff --git a/frontend/app/src/components/chat/use-message-feedback.ts b/frontend/app/src/components/chat/use-message-feedback.ts
@@ -15,7 +15,7 @@ export interface UseMessageFeedbackReturns {
   // deleteFeedback (): Promise<void>;
 }
 
-export function useMessageFeedback (messageId: number | undefined, enabled: boolean): UseMessageFeedbackReturns {
+export function useMessageFeedback (messageId: number | undefined, enabled: boolean = true): UseMessageFeedbackReturns {
   const [feedback, setFeedback] = useState<FeedbackParams>();
   const isLoading = false;
   const isValidating = false;