Add tests for chatbot scroll controls & duplicate file upload validation for attachments (#891)

* added tests for scroll controls

* test Restructure

* change in menuItem locator

* added sidePanelAssertions

* replaced test inside lightspeed.test.ts

* removed multiple imports

* chages in reusableFn

* renamed the reusableFn

---------

Co-authored-by: HusneShabbir <husneshabbir447@gmail.com>

Author: HusneShabbir

workspaces/lightspeed/packages/app/e2e-tests/fixtures/responses.ts

@@ -88,6 +88,36 @@ export const contents = [
   },
 ];
 
+const repeatedSentence =
+  'OpenShift deployment is a way to manage applications on the OpenShift platform.';
+const openshiftLongParagraph = `${repeatedSentence} `.repeat(30);
+
+export const demoChatContent = [
+  {
+    lc: 1,
+    type: 'constructor',
+    id: ['langchain_core', 'messages', 'HumanMessage'],
+    content: 'let me know about openshift deplyment in detail',
+    response_metadata: {
+      created_at: createdAt,
+    },
+    additional_kwargs: {},
+  },
+  {
+    lc: 1,
+    type: 'constructor',
+    id: ['langchain_core', 'messages', 'AIMessage'],
+    content: openshiftLongParagraph,
+    response_metadata: {
+      created_at: createdAt,
+      model: models[1].id,
+      tool_calls: [],
+      invalid_tool_calls: [],
+      additional_kwargs: {},
+    },
+  },
+];
+
 export const botResponse = `This is a placeholder message`;
 
 export const generateQueryResponse = (conversationId: string) => {

workspaces/lightspeed/packages/app/e2e-tests/lightspeed.test.ts

@@ -21,14 +21,15 @@ import {
   defaultConversation,
   conversations,
   contents,
+  demoChatContent,
   generateQueryResponse,
   botResponse,
   moreConversations,
 } from './fixtures/responses';
 import { openLightspeed, sendMessage } from './utils/testHelper';
 import {
   uploadFile,
-  validateSuccessfulUpload,
+  uploadAndAssertDuplicate,
   validateFailedUpload,
   supportedFileTypes,
 } from './utils/fileUpload';
@@ -37,6 +38,7 @@ import {
   closeChatDrawer,
   openChatDrawer,
   assertDrawerState,
+  verifySidePanelConversation,
 } from './utils/sidebar';
 
 const botQuery = 'Please respond';
@@ -137,7 +139,7 @@ test.describe('File Attachment Validation', () => {
       await uploadFile(page, path);
 
       if (supportedFileTypes.includes(fileExtension)) {
-        await validateSuccessfulUpload(page, name);
+        await uploadAndAssertDuplicate(page, path, name);
       } else {
         await validateFailedUpload(page);
       }
@@ -175,15 +177,41 @@ test.describe('Conversation', () => {
 
   test('Conversation is created and shown in side panel', async ({ page }) => {
     await sendMessage('test', page);
+    await verifySidePanelConversation(page);
+  });
 
-    const sidePanel = page.locator('.pf-v6-c-drawer__panel');
-    await expect(sidePanel).toBeVisible();
+  test('Verify scroll controls in Conversation', async ({ page }) => {
+    await page.route(`${modelBaseUrl}/conversations/user*`, async route => {
+      const json = { chat_history: demoChatContent };
+      await route.fulfill({ json });
+    });
+
+    await openLightspeed(page);
+
+    const message = demoChatContent[0].content;
+    await sendMessage(message, page);
+
+    const loadingIndicator = page.locator('div.pf-chatbot__message-loading');
+    await loadingIndicator.waitFor({ state: 'visible' });
+    await verifySidePanelConversation(page);
+
+    const jumpTopButton = page.getByRole('button', { name: 'Jump top' });
+    const jumpBottomButton = page.getByRole('button', { name: 'Jump bottom' });
+
+    await expect(jumpTopButton).toBeVisible();
+    await jumpTopButton.click();
+    await page.waitForTimeout(500);
+    await expect(
+      page.locator('span').filter({ hasText: message }),
+    ).toBeVisible();
 
-    const newButton = sidePanel.getByRole('button', { name: 'new chat' });
-    await expect(newButton).toBeEnabled();
+    await expect(jumpBottomButton).toBeVisible();
+    await jumpBottomButton.click();
 
-    const conversation = sidePanel.locator('li.pf-chatbot__menu-item--active');
-    await expect(conversation).toBeVisible();
+    const responseMessage = page
+      .locator('div.pf-chatbot__message-response')
+      .last();
+    await expect(responseMessage).toHaveText(/OpenShift deployment/);
   });
 
   test('Filter and switch conversations', async ({ page }) => {

workspaces/lightspeed/packages/app/e2e-tests/utils/fileUpload.ts

@@ -36,6 +36,19 @@ export async function uploadFile(page: Page, filePath: string) {
   await fileChooser.setFiles(filePath);
 }
 
+export async function uploadAndAssertDuplicate(
+  page: Page,
+  filePath: string,
+  fileName: string,
+) {
+  await validateSuccessfulUpload(page, fileName);
+  await uploadFile(page, filePath);
+  await expect(
+    page.getByRole('heading', { name: 'File upload failed' }),
+  ).toBeVisible();
+  await expect(page.getByText('File already exists.')).toBeVisible();
+}
+
 export async function validateSuccessfulUpload(page: Page, fileName: string) {
   const trimmerFilename = fileName.split('.')[0];
 
@@ -65,9 +78,6 @@ export async function validateSuccessfulUpload(page: Page, fileName: string) {
     .getByRole('contentinfo')
     .getByRole('button', { name: 'Close' })
     .click();
-  await page
-    .getByRole('button', { name: `Close ${trimmerFilename}` })
-    .click({ force: true });
 }
 
 export async function validateFailedUpload(page: Page) {

workspaces/lightspeed/packages/app/e2e-tests/utils/sidebar.ts

@@ -49,3 +49,14 @@ export async function assertDrawerState(page: Page, state: 'open' | 'closed') {
     await expectations[state](locator);
   }
 }
+
+export async function verifySidePanelConversation(page: Page) {
+  const sidePanel = page.locator('.pf-v6-c-drawer__panel');
+  await expect(sidePanel).toBeVisible();
+
+  const newButton = sidePanel.getByRole('button', { name: 'new chat' });
+  await expect(newButton).toBeEnabled();
+
+  const conversation = sidePanel.locator('li.pf-chatbot__menu-item--active');
+  await expect(conversation).toBeVisible();
+}