implemented the backslash abstraction, required implementing functions to handle mynah overlays

Author: laura-codess

packages/amazonq/test/e2e_new/amazonq/backslash.test.ts

@@ -0,0 +1,69 @@
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import './utils/setup'
+import { By, WebviewView } from 'vscode-extension-tester'
+import { closeAllTabs, dismissOverlayIfPresent } from './framework/cleanupHelper'
+import { testContext } from './utils/testContext'
+import { writeToChat } from './framework/chatHelper'
+import { waitForElement } from './framework/generalHelper'
+
+describe('Amazon Q Chat Backslash Functionality', function () {
+    // this timeout is the general timeout for the entire test suite
+    this.timeout(150000)
+    let webviewView: WebviewView
+
+    before(async function () {
+        webviewView = testContext.webviewView!
+    })
+
+    after(async () => {
+        await closeAllTabs(webviewView)
+    })
+
+    afterEach(async () => {
+        // before closing the tabs, make sure that any overlays have been dismissed
+        await dismissOverlayIfPresent(webviewView)
+    })
+
+    it('Backslash Test', async () => {
+        // type "/" but don't send in order to trigger the overlay menu
+        await writeToChat('/', webviewView, false)
+        await new Promise((resolve) => setTimeout(resolve, 2000))
+
+        /* NOTE: do NOT look for the container first because the overlay will disappear on a click,
+        instead, we should just look for the clickable overlay menu items directly and click them
+        one by one for the test. */
+        const menuItems = await waitForElement(
+            webviewView,
+            By.css('.mynah-detailed-list-item.mynah-ui-clickable-item.target-command'),
+            true,
+            10000
+        )
+        console.log(`Found ${menuItems.length} backslash command items`)
+
+        // get text of each menu item before clicking any of them
+        const menuTexts = []
+        for (let i = 0; i < menuItems.length; i++) {
+            try {
+                const text = await menuItems[i].getText()
+                menuTexts.push(text)
+                console.log(`Command ${i + 1}: ${text}`)
+            } catch (e) {
+                console.log(`Could not get text for command ${i + 1}`)
+            }
+        }
+
+        if (menuItems.length > 0) {
+            console.log(`Clicking on command: ${menuTexts[0] || 'unknown'}`)
+            await menuItems[0].click()
+
+            // wait for the command to process
+            await new Promise((resolve) => setTimeout(resolve, 3000))
+            console.log('Command clicked successfully')
+        } else {
+            console.log('No backslash commands found to click')
+        }
+    })
+})

packages/amazonq/test/e2e_new/amazonq/framework/chatHelper.ts

@@ -12,11 +12,13 @@ Finds the chat input element using the .mynah-chat-prompt-input CSS selector,
 sends the provided prompt test, clicks the send button, and waits for a chat
 response. Returns true if successful, throws an error if the response times out */
 
-export async function writeToChat(prompt: string, webview: WebviewView): Promise<boolean> {
+export async function writeToChat(prompt: string, webview: WebviewView, send = true): Promise<boolean> {
     const chatInput = await waitForElement(webview, By.css('.mynah-chat-prompt-input'))
     await chatInput.sendKeys(prompt)
-    const sendButton = await waitForElement(webview, By.css('.mynah-chat-prompt-button'))
-    await sendButton.click()
+    if (send === true) {
+        const sendButton = await waitForElement(webview, By.css('.mynah-chat-prompt-button'))
+        await sendButton.click()
+    }
     return true
 }
 

packages/amazonq/test/e2e_new/amazonq/framework/cleanupHelper.ts

@@ -32,3 +32,33 @@ export async function closeAllTabs(webview: WebviewView) {
         console.log('Error closing tabs:', error)
     }
 }
+
+/* Dismiss overlays if they are present.
+
+Logic:
+If there are any mynah overlays that still exist, that will interfere with being able to click
+any other buttons such as closing chatTabs. Therefore, if you are testing some kind of overlay
+it is recommended to call this function in the "AfterEach" block to make sure the overlay doesn't
+interfere with any other parts of the test suite */
+
+export async function dismissOverlayIfPresent(webview: WebviewView): Promise<boolean> {
+    try {
+        const overlays = await webview.findWebElements(By.css('.mynah-overlay.mynah-overlay-open'))
+        if (overlays.length > 0) {
+            console.log('Overlay detected, attempting to dismiss...')
+            // Use JavaScript executor to click on the body element (outside the overlay)
+            // This is more reliable than trying to find a specific element to click
+            const driver = webview.getDriver()
+            await driver.executeScript('document.body.click()')
+
+            // Wait briefly and check if overlay is gone
+            await new Promise((resolve) => setTimeout(resolve, 1000))
+            const overlaysAfter = await webview.findWebElements(By.css('.mynah-overlay.mynah-overlay-open'))
+            return overlaysAfter.length === 0
+        }
+        return true // No overlay to dismiss
+    } catch (e) {
+        console.log('Error while trying to dismiss overlay:', e)
+        return false
+    }
+}

packages/amazonq/test/e2e_new/amazonq/utils/testContext.ts

@@ -9,5 +9,5 @@ export interface TestContext {
     webviewView?: WebviewView
 }
 
-// arr to store shared context
+// array to store shared context
 export const testContext: TestContext = {}