tests (#307, #306, #305, #263, #266)

- Update codeGraph Locators
- Update code graph workers
- Update projectInfo api call

Author: Naseem77

app/components/code-graph.tsx

@@ -432,8 +432,8 @@ export function CodeGraph({
                                         </button>
                                     }
                                 </div>
-                                <div className="w-full absolute bottom-0 left-0 flex justify-between items-center p-4 z-10 pointer-events-none">
-                                    <div className="flex gap-4 text-gray-500">
+                                <div data-name="canvas-info-panel" className="w-full absolute bottom-0 left-0 flex justify-between items-center p-4 z-10 pointer-events-none">
+                                    <div data-name="metrics-panel" className="flex gap-4 text-gray-500">
                                         <p>{nodesCount} Nodes</p>
                                         <p>{edgesCount} Edges</p>
                                     </div>

app/components/dataPanel.tsx

@@ -36,7 +36,7 @@ export default function DataPanel({ obj, setObj, url }: Props) {
     const object = Object.entries(obj).filter(([k]) => !excludedProperties.includes(k))
 
     return (
-        <div className="z-20 absolute -top-10 left-20 bg-[#343434] text-white shadow-lg rounded-lg flex flex-col max-h-[88%] max-w-[56%] overflow-hidden" >
+        <div data-name="node-details-panel" className="z-20 absolute -top-10 left-20 bg-[#343434] text-white shadow-lg rounded-lg flex flex-col max-h-[88%] max-w-[56%] overflow-hidden" >
             <header className="bg-[#191919] flex items-center gap-8 justify-between p-8">
                 <p title={label} className="truncate font-bold">{label.toUpperCase()}</p>
                 <button onClick={() => setObj(undefined)}>

e2e/config/constants.ts

@@ -1,4 +1,4 @@
-export const GRAPH_ID = "1";
+export const GRAPH_ID = "GraphRAG-SDK";
 export const PROJECT_NAME = "GraphRAG-SDK";
 export const CHAT_OPTTIONS_COUNT = 1;
 export const Node_Question = "how many nodes do we have?";

e2e/logic/POM/codeGraph.ts

@@ -39,11 +39,11 @@ export default class CodeGraph extends BasePage {
     }
 
     private get selectGraphInComboBox(): (graph: string) => Locator {
-        return (graph: string) => this.page.locator(`//div[@role='presentation']//div[@role='option'][${graph}]`);
+        return (graph: string) => this.page.locator(`//div[@role='presentation']//div//span[contains(text(), '${graph}')]`);
     }
 
     private get lastElementInChat(): Locator {
-        return this.page.locator("//main[@data-name='main-chat']/*[last()]/p");
+        return this.page.locator("//main[@data-name='main-chat']/*[last()]/span");
     }
 
     private get typeUrlInput(): Locator {
@@ -161,10 +161,6 @@ export default class CodeGraph extends BasePage {
         return this.page.locator("//button[@title='Center']");
     }
 
-    private get removeNodeViaElementMenu(): Locator {
-        return this.page.locator("//button[@title='Remove']");
-    }
-
     private get codeGraphCheckbox(): (checkbox: string) => Locator {
         return (checkbox: string) => this.page.locator(`(//button[@role='checkbox'])[${checkbox}]`);
     }
@@ -173,6 +169,21 @@ export default class CodeGraph extends BasePage {
         return this.page.locator("//button[p[text()='Clear Graph']]");
     }
 
+    private get elementMenuButton(): (buttonID: string) => Locator {
+        return (buttonID: string) => this.page.locator(`//button[@title='${buttonID}']`);
+    }
+    
+    private get nodedetailsPanelHeader(): Locator {
+        return this.page.locator("//div[@data-name='node-details-panel']/header/p");
+    }
+    
+    private get nodedetailsPanelcloseBtn(): Locator {
+        return this.page.locator("//div[@data-name='node-details-panel']/header/button");
+    }
+    private get canvasMetricsPanel(): (itemId: string) => Locator {
+        return (itemId: string) => this.page.locator(`//div[@data-name='metrics-panel']/p[${itemId}]`);
+    }
+
     /* NavBar functionality */
     async clickOnFalkorDbLogo(): Promise<Page> {
         await this.page.waitForLoadState('networkidle'); 
@@ -232,8 +243,9 @@ export default class CodeGraph extends BasePage {
         await this.lightbulbBtn.click();
     }
 
-    async getTextInLastChatElement(): Promise<string | null>{
-        return await this.lastElementInChat.textContent();
+    async getTextInLastChatElement(): Promise<string>{
+        await delay(2500);
+        return (await this.lastElementInChat.textContent())!;
     }
 
     async getLastChatElementButtonCount(): Promise<number | null>{
@@ -318,6 +330,7 @@ export default class CodeGraph extends BasePage {
     }
 
     async getSearchAutoCompleteCount(): Promise<number> {
+        await this.searchBarAutoCompleteOptions.first().waitFor({ state: 'visible' });
         return await this.searchBarAutoCompleteOptions.count();
     }
 
@@ -364,7 +377,7 @@ export default class CodeGraph extends BasePage {
     }
 
     async clickOnRemoveNodeViaElementMenu(): Promise<void> {
-        await this.removeNodeViaElementMenu.click();
+        await this.elementMenuButton("Remove").click();
     }
 
     async rightClickOnNode(x : number, y: number): Promise<void> {
@@ -395,4 +408,17 @@ export default class CodeGraph extends BasePage {
         await this.page.mouse.move(absEndX, absEndY);
         await this.page.mouse.up();
     }
+
+    async getNodeDetailsHeader(): Promise<string> {
+        await this.elementMenuButton("View Node").click();
+        const text = await this.nodedetailsPanelHeader.innerHTML();
+        await this.nodedetailsPanelcloseBtn.click();
+        return text;
+    }
+
+    async getMetricsPanelInfo(): Promise<{nodes: string, edges: string}> {
+        const nodes = await this.canvasMetricsPanel("1").innerHTML();
+        const edges = await this.canvasMetricsPanel("2").innerHTML();
+        return { nodes, edges }
+    }
 }

e2e/logic/api/apiCalls.ts

@@ -14,8 +14,8 @@ export class ApiCalls {
         return await result.json();
     }
 
-    async fetchLatestRepoInfo(projectName: string): Promise<fetchLatestRepoInfo>{
-        const result = await postRequest(urls.baseUrl + "api/repo/" + projectName);
+    async projectInfo(projectName: string): Promise<fetchLatestRepoInfo>{
+        const result = await getRequest(urls.baseUrl + "api/repo/" + projectName + "/info");
         return await result.json();
     }
 

e2e/tests/chat.spec.ts

@@ -95,5 +95,31 @@ test.describe("Chat tests", () => {
       expect(selectedQuestion).toEqual(await chat.getLastQuestionInChat())
     });
   }
+
+  test(`Validate consistent UI responses for repeated questions in chat`, async () => {
+    const chat = await browser.createNewPage(CodeGraph, urls.baseUrl);
+    await chat.selectGraph(GRAPH_ID);
+    const responses: string[] = [];
+    for (let i = 0; i < 3; i++) {
+      await chat.sendMessage(Node_Question);
+      const result = await chat.getTextInLastChatElement();
+      const number = result.match(/\d+/g)?.[0]!;
+      responses.push(number);
+    }
+    const identicalResponses = responses.every((value) => value === responses[0]);
+    expect(identicalResponses).toBe(true);
+  });
+
+  test(`Validate UI response matches API response for a given question in chat`, async () => {
+    const chat = await browser.createNewPage(CodeGraph, urls.baseUrl);
+    await chat.selectGraph(GRAPH_ID);
 
+    await chat.sendMessage(Node_Question);
+    const uiResponse = await chat.getTextInLastChatElement();
+    const number = uiResponse.match(/\d+/g)?.[0]!;
+    
+    const api = new ApiCalls();
+    const apiResponse = await api.askQuestion(PROJECT_NAME, Node_Question);
+    expect(number).toEqual(apiResponse.result.response.match(/\d+/g)?.[0]);
+  });
 });