Additional e2e tests for up down arrow navigation

ui-tests/__test__/flows/navigate-prompts/navigate-back-to-current-prompt-with-code-attachment.ts

@@ -0,0 +1,40 @@
+import { Page } from 'playwright/test';
+import { getSelector, waitForAnimationEnd } from '../../helpers';
+import testIds from '../../../../src/helper/test-ids';
+import { closeTab } from '../close-tab';
+import { openNewTab } from '../open-new-tab';
+
+export const navigateBackToCurrentPromptWithCodeAttachment = async (page: Page, skipScreenshots?: boolean): Promise<void> => {
+  await closeTab(page, false, true);
+  await openNewTab(page, false, true);
+
+  await page.locator(`${getSelector(testIds.prompt.input)}`).fill('This is the first user prompt');
+  await page.locator(`${getSelector(testIds.prompt.send)}`).click();
+  await waitForAnimationEnd(page);
+
+  await page.evaluate(() => {
+    const selectedTabId = window.mynahUI.getSelectedTabId();
+    if (selectedTabId != null) {
+      window.mynahUI.addToUserPrompt(
+        selectedTabId,
+        'This is an unsent code attachment',
+        'code',
+      );
+    }
+  });
+  await waitForAnimationEnd(page);
+
+  const promptInput = await page.locator(`${getSelector(testIds.prompt.input)}`);
+  await promptInput.press('ArrowUp');
+  await waitForAnimationEnd(page);
+
+  await promptInput.press('ArrowDown');
+  await waitForAnimationEnd(page);
+  // we add .trim() because webpack test was failing otherwise, as it adds a \n at the end, like 'This is an unsent code attachment\n'
+  const codeAttachmentContent = (await page.locator(`${getSelector(testIds.prompt.attachment)}`).innerText()).trim();
+  expect(codeAttachmentContent).toBe('This is an unsent code attachment');
+
+  if (skipScreenshots !== true) {
+    expect(await page.screenshot()).toMatchImageSnapshot();
+  }
+};

ui-tests/__test__/flows/navigate-prompts/navigate-back-to-current-prompt.ts

@@ -0,0 +1,32 @@
+import { Page } from 'playwright/test';
+import { getSelector, waitForAnimationEnd } from '../../helpers';
+import testIds from '../../../../src/helper/test-ids';
+import { closeTab } from '../close-tab';
+import { openNewTab } from '../open-new-tab';
+
+export const navigateBackToCurrentPrompt = async (page: Page, skipScreenshots?: boolean): Promise<void> => {
+  await closeTab(page, false, true);
+  await openNewTab(page, false, true);
+
+  await page.locator(`${getSelector(testIds.prompt.input)}`).fill('This is the first user prompt');
+
+  await page.locator(`${getSelector(testIds.prompt.send)}`).click();
+  await waitForAnimationEnd(page);
+
+  // Write prompt without sending it
+  await page.locator(`${getSelector(testIds.prompt.input)}`).fill('This is the second unsent user prompt');
+  await waitForAnimationEnd(page);
+
+  const promptInput = await page.locator(`${getSelector(testIds.prompt.input)}`);
+  await promptInput.press('ArrowUp');
+  await waitForAnimationEnd(page);
+
+  await promptInput.press('ArrowDown');
+  await waitForAnimationEnd(page);
+
+  expect(await promptInput.inputValue()).toBe('This is the second unsent user prompt');
+
+  if (skipScreenshots !== true) {
+    expect(await page.screenshot()).toMatchImageSnapshot();
+  }
+};

ui-tests/__test__/flows/navigate-prompts/navigatePromptsDown.ts → ui-tests/__test__/flows/navigate-prompts/navigate-prompts-down.ts

@@ -16,14 +16,13 @@ export const navigatePromptsDown = async (page: Page, skipScreenshots?: boolean)
   await page.locator(`${getSelector(testIds.prompt.send)}`).click();
   await waitForAnimationEnd(page);
 
-  let promptInput = await page.locator(`${getSelector(testIds.prompt.input)}`);
+  const promptInput = await page.locator(`${getSelector(testIds.prompt.input)}`);
   await promptInput.press('ArrowUp');
   await waitForAnimationEnd(page);
 
   await promptInput.press('ArrowUp');
   await waitForAnimationEnd(page);
 
-  promptInput = await page.locator(`${getSelector(testIds.prompt.input)}`);
   await promptInput.press('ArrowDown');
   await waitForAnimationEnd(page);
 

ui-tests/__test__/flows/navigate-prompts/navigatePromptsToEmpty.ts → ui-tests/__test__/flows/navigate-prompts/navigate-prompts-to-empty.ts

@@ -12,11 +12,10 @@ export const navigatePromptsToEmpty = async (page: Page, skipScreenshots?: boole
   await page.locator(`${getSelector(testIds.prompt.send)}`).click();
   await waitForAnimationEnd(page);
 
-  let promptInput = await page.locator(`${getSelector(testIds.prompt.input)}`);
+  const promptInput = await page.locator(`${getSelector(testIds.prompt.input)}`);
   await promptInput.press('ArrowUp');
   await waitForAnimationEnd(page);
 
-  promptInput = await page.locator(`${getSelector(testIds.prompt.input)}`);
   await promptInput.press('ArrowDown');
   await waitForAnimationEnd(page);
 

ui-tests/__test__/flows/navigate-prompts/stay-on-current-prompt.ts

@@ -0,0 +1,27 @@
+import { Page } from 'playwright/test';
+import { getSelector, waitForAnimationEnd } from '../../helpers';
+import testIds from '../../../../src/helper/test-ids';
+import { closeTab } from '../close-tab';
+import { openNewTab } from '../open-new-tab';
+
+export const stayOnCurrentPrompt = async (page: Page, skipScreenshots?: boolean): Promise<void> => {
+  await closeTab(page, false, true);
+  await openNewTab(page, false, true);
+
+  // Write prompt without sending it
+  await page.locator(`${getSelector(testIds.prompt.input)}`).fill('This is the first unsent user prompt');
+  await waitForAnimationEnd(page);
+
+  const promptInput = await page.locator(`${getSelector(testIds.prompt.input)}`);
+  await promptInput.press('ArrowUp');
+  await waitForAnimationEnd(page);
+
+  await promptInput.press('ArrowDown');
+  await waitForAnimationEnd(page);
+
+  expect(await promptInput.inputValue()).toBe('This is the first unsent user prompt');
+
+  if (skipScreenshots !== true) {
+    expect(await page.screenshot()).toMatchImageSnapshot();
+  }
+};

ui-tests/__test__/main.spec.ts

@@ -20,9 +20,9 @@ import { renderInformationCard } from './flows/render-information-card';
 import { renderTabbedCard } from './flows/render-tabbed-card';
 import { welcomeMode } from './flows/welcome-mode';
 import { renderButtons } from './flows/render-buttons';
-import { navigatePromptsDown } from './flows/navigate-prompts/navigatePromptsDown';
-import { navigatePromptsUp } from './flows/navigate-prompts/navigatePromptsUp';
-import { navigatePromptsToEmpty } from './flows/navigate-prompts/navigatePromptsToEmpty';
+import { navigatePromptsDown } from './flows/navigate-prompts/navigate-prompts-down';
+import { navigatePromptsUp } from './flows/navigate-prompts/navigate-prompts-up';
+import { navigatePromptsToEmpty } from './flows/navigate-prompts/navigate-prompts-to-empty';
 import { hoverOverLink } from './flows/link-hover-preview';
 import { showFileTree } from './flows/file-tree/show-file-tree';
 import { collapseExpandFileTree } from './flows/file-tree/collapse-file-tree';
@@ -32,8 +32,15 @@ import { renderFileDetails } from './flows/file-tree/render-file-details';
 import { renderFormElements } from './flows/form/render-form-elements';
 import { disableForm } from './flows/form/disable-form';
 import { removeForm } from './flows/form/remove-form';
+import { stayOnCurrentPrompt } from './flows/navigate-prompts/stay-on-current-prompt';
+import { navigateBackToCurrentPrompt } from './flows/navigate-prompts/navigate-back-to-current-prompt';
+import { navigateBackToCurrentPromptWithCodeAttachment } from './flows/navigate-prompts/navigate-back-to-current-prompt-with-code-attachment';
 
 describe('Open MynahUI', () => {
+  beforeEach(async () => {
+    await page.setViewportSize(DEFAULT_VIEWPORT);
+  });
+
   beforeAll(async () => {
     const browserName = browser.browserType().name();
     const toMatchImageSnapshot = configureToMatchImageSnapshot({
@@ -220,5 +227,17 @@ describe('Open MynahUI', () => {
     it('should navigate down to current empty prompt', async () => {
       await navigatePromptsToEmpty(page);
     });
+
+    it('should stay on current prompt', async () => {
+      await stayOnCurrentPrompt(page);
+    });
+
+    it('should navigate back to current prompt', async () => {
+      await navigateBackToCurrentPrompt(page);
+    });
+
+    it('should navigate back to current prompt with code attachment', async () => {
+      await navigateBackToCurrentPromptWithCodeAttachment(page);
+    });
   });
 });