tests (#265, #287, #288, #289)

Author: Naseem77

app/components/chat.tsx

@@ -498,7 +498,7 @@ export function Chat({ repo, path, setPath, graph, chartRef, selectedPathId, isP
                             </button>
                             <form className="grow flex items-center border rounded-md px-2" onSubmit={sendQuery}>
                                 <DropdownMenuTrigger asChild>
-                                    <button className="bg-gray-200 p-2 rounded-md hover:bg-gray-300">
+                                    <button data-name="questionOptionsMenu" className="bg-gray-200 p-2 rounded-md hover:bg-gray-300">
                                         <ArrowDown color="white" />
                                     </button>
                                 </DropdownMenuTrigger>

e2e/logic/POM/codeGraph.ts

@@ -21,6 +21,18 @@ export default class CodeGraph extends BasePage {
         return this.page.locator("//div[@role='dialog']")
     }
 
+    private get tipBtn(): Locator {
+        return this.page.locator("//button[@title='Tip']")
+    }
+
+    private get genericMenu(): Locator {
+        return this.page.locator("//div[contains(@role, 'menu')]")
+    }
+
+    private get tipMenuCloseBtn(): Locator {
+        return this.page.locator("//div[@role='menu']//button[@title='Close']")
+    }
+
     /* CodeGraph Locators*/
     private get comboBoxbtn(): Locator {
         return this.page.locator("//button[@role='combobox']")
@@ -115,6 +127,22 @@ export default class CodeGraph extends BasePage {
         return this.page.locator("//div[@role='region']//ol//li");
     }
 
+    private get notificationErrorCloseBtn(): Locator {
+        return this.page.locator("//div[@role='region']//ol//li/button");
+    }
+
+    private get questionOptionsMenu(): Locator {
+        return this.page.locator("//button[@data-name='questionOptionsMenu']");
+    }
+
+    private get selectQuestionInMenu(): (questionNumber: string) => Locator {
+        return (questionNumber: string) => this.page.locator(`//div[contains(@role, 'menu')]/button[${questionNumber}]`);
+    }
+
+    private get lastQuestionInChat(): Locator {
+        return this.page.locator("//main[@data-name='main-chat']/*[last()-1]/p");
+    }
+
     /* Canvas Locators*/
 
     private get canvasElement(): Locator {
@@ -172,6 +200,18 @@ export default class CodeGraph extends BasePage {
         return await this.createNewProjectDialog.isVisible();
     }
 
+    async clickonTipBtn(): Promise<void> {
+        await this.tipBtn.click();
+    }
+
+    async isTipMenuVisible(): Promise<boolean> {
+        return await this.genericMenu.isVisible();
+    }
+
+    async clickonTipMenuCloseBtn(): Promise<void> {
+        await this.tipMenuCloseBtn.click();
+    }
+
     /* Chat functionality */
     async clickOnshowPathBtn(): Promise<void> {
         await this.showPathBtn.click();
@@ -232,9 +272,27 @@ export default class CodeGraph extends BasePage {
     }
 
     async isNotificationError(): Promise<boolean> {
+        await delay(500);
         return await this.notificationError.isVisible();
     }
 
+    async clickOnNotificationErrorCloseBtn(): Promise<void> {
+        await this.notificationErrorCloseBtn.click();
+    }
+
+    async clickOnQuestionOptionsMenu(): Promise<void> {
+        await this.questionOptionsMenu.click();
+    }
+
+    async selectAndGetQuestionInOptionsMenu(questionNumber: string): Promise<string> {
+        await this.selectQuestionInMenu(questionNumber).click();
+        return await this.selectQuestionInMenu(questionNumber).innerHTML();
+    }
+
+    async getLastQuestionInChat(): Promise<string> {
+        return await this.lastQuestionInChat.innerText();
+    }
+
     /* CodeGraph functionality */
     async selectGraph(graph: string): Promise<void> {
         await this.comboBoxbtn.click();
@@ -322,4 +380,18 @@ export default class CodeGraph extends BasePage {
     async clickOnClearGraphBtn(): Promise<void> {
         await this.clearGraphBtn.click();
     } 
+
+    async changeNodePosition(x: number, y: number): Promise<void> {
+        const box = (await this.canvasElement.boundingBox())!;
+        const targetX = x + 100;
+        const targetY = y + 50;
+        const absStartX = box.x + x;
+        const absStartY = box.y + y;
+        const absEndX = box.x + targetX;
+        const absEndY = box.y + targetY;
+        await this.page.mouse.move(absStartX, absStartY);
+        await this.page.mouse.down();
+        await this.page.mouse.move(absEndX, absEndY);
+        await this.page.mouse.up();
+    }
 }

e2e/tests/chat.spec.ts

@@ -76,12 +76,24 @@ test.describe("Chat tests", () => {
     expect(await chat.isNotificationError()).toBe(true);
   });
 
-  test("Validate error notification when sending an empty question in chat", async () => {
+  test("Validate error notification and its closure when sending an empty question in chat", async () => {
     const chat = await browser.createNewPage(CodeGraph, urls.baseUrl);
     await chat.selectGraph(GRAPH_ID);
     await chat.clickAskquestionBtn();
-    await delay(500);
     expect(await chat.isNotificationError()).toBe(true);
+    await chat.clickOnNotificationErrorCloseBtn();
+    expect(await chat.isNotificationError()).toBe(false);
   });
+
+  for (let index = 0; index < 5; index++) {
+    const questionNumber = index + 1;
+    test(`Validate displaying question ${index} in chat after selection from options menu`, async () => {
+      const chat = await browser.createNewPage(CodeGraph, urls.baseUrl);
+      await chat.selectGraph(GRAPH_ID);
+      await chat.clickOnQuestionOptionsMenu();
+      const selectedQuestion = await chat.selectAndGetQuestionInOptionsMenu(questionNumber.toString());  
+      expect(selectedQuestion).toEqual(await chat.getLastQuestionInChat())
+    });
+  }
 
 });

e2e/tests/codeGraph.spec.ts

@@ -149,7 +149,29 @@ test.describe("Code graph tests", () => {
     const finalAnalysis = await codeGraph.getCanvasAnalysis();
     const finalNodeCount = finalAnalysis.green.length + finalAnalysis.yellow.length + finalAnalysis.red.length;
     expect(initialNodeCount).toBe(finalNodeCount);
-    
   });
 
+  for (let index = 0; index < 3; index++) {
+    const checkboxIndex = index + 1;
+    test(`Verify selecting different graphs displays nodes in canvas - Iteration ${index + 1}`, async () => {
+      const codeGraph = await browser.createNewPage(CodeGraph, urls.baseUrl);
+      await codeGraph.selectGraph(checkboxIndex.toString());
+      const result = await codeGraph.getCanvasAnalysis();
+      const nodesLength = result.green.length + result.yellow.length + result.red.length;
+      expect(nodesLength).toBeGreaterThan(1);
+    });
+  }
+  
+  colors.forEach((color) => {
+    test(`Validate canvas node dragging for color: ${color}`, async () => {
+      const codeGraph = await browser.createNewPage(CodeGraph, urls.baseUrl);
+      await codeGraph.selectGraph(GRAPH_ID);
+      const initialAnalysis = await codeGraph.getCanvasAnalysis();
+      await codeGraph.changeNodePosition(initialAnalysis[color][0].x, initialAnalysis[color][0].y);
+      const finalAnalysis = await codeGraph.getCanvasAnalysis();
+      expect(finalAnalysis[color][0].x).not.toBe(initialAnalysis.green[0].x);
+      expect(finalAnalysis[color][0].y).not.toBe(initialAnalysis.green[0].y);
+    });
+  })
+
 });

e2e/tests/navBar.spec.ts

@@ -38,4 +38,12 @@ test.describe(' Navbar tests', () => {
     await navBar.clickCreateNewProjectBtn();
     expect(await navBar.isCreateNewProjectDialog()).toBe(true)
   })
+
+  test("Validate Tip popup visibility and closure functionality", async () => {
+    const navBar = await browser.createNewPage(CodeGraph, urls.baseUrl);
+    await navBar.clickonTipBtn();
+    expect(await navBar.isTipMenuVisible()).toBe(true);
+    await navBar.clickonTipMenuCloseBtn();
+    expect(await navBar.isTipMenuVisible()).toBe(false);
+  });
 });