chore(tests): add e2e tests for messaging suite (#387)

* feat(NewConversationMenu): add id to the new conversation menu button
refactor(EndpointItem): remove onSelect prop and setTokenDialogOpen state variable
test(messages.spec.js): add e2e test for messaging suite to check if textbox is focused after receiving message

* test(Input): add test id to input field for e2e testing
test(messages.spec.js): add endpoint variable and refactor test to check if textbox is focused after receiving message

* test(messages.spec.js): refactor test to use a variable for message content

Refactored the test to use a variable for message content instead of a hardcoded string.

client/src/components/Input/NewConversationMenu/EndpointItem.jsx

@@ -15,7 +15,7 @@ const alternateName = {
   google: 'PaLM'
 };
 
-export default function ModelItem({ endpoint, value, onSelect }) {
+export default function ModelItem({ endpoint, value }) {
   const [setTokenDialogOpen, setSetTokenDialogOpen] = useState(false);
   const endpointsConfig = useRecoilValue(store.endpointsConfig);
 
@@ -33,6 +33,7 @@ export default function ModelItem({ endpoint, value, onSelect }) {
     <>
       <DropdownMenuRadioItem
         value={value}
+        id={endpoint}
         className="group dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800"
       >
         {icon}

client/src/components/Input/NewConversationMenu/index.jsx

@@ -126,6 +126,7 @@ export default function NewConversationMenu() {
       <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
         <DropdownMenuTrigger asChild>
           <Button
+            id="new-conversation-menu"
             variant="outline"
             className={`group relative mb-[-12px] ml-0 mt-[-8px] items-center rounded-md border-0 p-1 outline-none focus:ring-0 focus:ring-offset-0 dark:data-[state=open]:bg-opacity-50 md:left-1 md:ml-[-12px] md:pl-1`}
           >

client/src/components/Input/index.jsx

@@ -142,6 +142,8 @@ export default function TextChat({ isSearchView = false }) {
               >
                 <NewConversationMenu />
                 <TextareaAutosize
+                // set test id for e2e testing
+                  data-testid="text-input"
                   tabIndex="0"
                   autoFocus
                   ref={inputRef}

e2e/specs/messages.spec.js

@@ -0,0 +1,45 @@
+import { expect, test } from '@playwright/test';
+
+const endpoints = ['google', 'openAI', 'azureOpenAI', 'bingAI', 'chatGPTBrowser', 'gptPlugins'];
+
+test.describe('Messaging suite', () => {
+  let myBrowser;
+
+  test.beforeEach(async ({ browser }) => {
+    myBrowser = await browser.newContext({
+      storageState: 'e2e/auth.json'
+    });
+  });
+
+  test('textbox should be focused after receiving message', async () => {
+    test.setTimeout(120000);
+    const page = await myBrowser.newPage();
+    const message = 'hi';
+    const endpoint = endpoints[0];
+
+    await page.goto('http://localhost:3080/chat/new');
+    await page.locator('#new-conversation-menu').click();
+    await page.locator(`#${endpoint}`).click();
+    await page.locator('form').getByRole('textbox').click();
+    await page.locator('form').getByRole('textbox').fill(message);
+
+    const responsePromise = [
+      page.waitForResponse(async (response) => {
+        return response.url().includes(`/api/ask/${endpoint}`) && response.status() === 200;
+      }),
+      page.locator('form').getByRole('textbox').press('Enter')
+    ];
+
+    const [response] = await Promise.all(responsePromise);
+    const responseBody = await response.body();
+    const messageSuccess = responseBody.includes(`"final":true`);
+    expect(messageSuccess).toBe(true);
+
+    // Check if textbox is focused
+    await page.waitForTimeout(250);
+    const isTextboxFocused = await page.evaluate(() => {
+      return document.activeElement === document.querySelector('[data-testid="text-input"]');
+    });
+    expect(isTextboxFocused).toBeTruthy();
+  });
+});