canvas tests (#258, #262)

Author: Naseem77

e2e/logic/POM/codeGraph.ts

@@ -136,7 +136,15 @@ export default class CodeGraph extends BasePage {
     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}]`);
+    }
+
+    private get clearGraphBtn(): Locator {
+        return this.page.locator("//button[p[text()='Clear Graph']]");
+    }
+
     /* NavBar functionality */
     async clickOnFalkorDbLogo(): Promise<Page> {
         await this.page.waitForLoadState('networkidle'); 
@@ -266,7 +274,6 @@ export default class CodeGraph extends BasePage {
         return await this.searchBarInput.inputValue();
     }
 
-
     async scrollToBottomInSearchBarList(): Promise<void> {
         await this.searchBarList.evaluate((element) => {
           element.scrollTop = element.scrollHeight;
@@ -279,7 +286,7 @@ export default class CodeGraph extends BasePage {
     }
 
     /* Canvas functionality */
-    
+
     async getCanvasAnalysis(): Promise<CanvasAnalysisResult> {
         await delay(2000);
         return await analyzeCanvasWithLocator(this.canvasElement);
@@ -307,5 +314,12 @@ export default class CodeGraph extends BasePage {
         const adjustedY = boundingBox.y + Math.round(y);
         await this.page.mouse.click(adjustedX, adjustedY, { button: 'right' });
     }
-    
+
+    async selectCodeGraphCheckbox(checkbox: string): Promise<void> {
+        await this.codeGraphCheckbox(checkbox).click();
+    }
+
+    async clickOnClearGraphBtn(): Promise<void> {
+        await this.clearGraphBtn.click();
+    } 
 }

e2e/tests/codeGraph.spec.ts

@@ -2,7 +2,7 @@ import { test, expect } from "@playwright/test";
 import BrowserWrapper from "../infra/ui/browserWrapper";
 import CodeGraph from "../logic/POM/codeGraph";
 import urls from "../config/urls.json";
-import { GRAPH_ID } from "../config/constants";
+import { GRAPH_ID, Node_Add_Edge, Node_Import_Data } from "../config/constants";
 import { delay } from "../logic/utils";
 import { searchData, specialCharacters } from "../config/testData";
 import { CanvasAnalysisResult } from "../logic/canvasAnalysis";
@@ -126,4 +126,30 @@ test.describe("Code graph tests", () => {
     expect(initialNodeAnalysis.red.length).toBeGreaterThan(updatedNodeAnalysis.red.length);
   });
 
+  colors.forEach((color, index) => {
+    const checkboxIndex = index + 1;
+    test(`Verify that unchecking the ${color} checkbox hides ${color} nodes on the canvas`, async () => {
+      const codeGraph = await browser.createNewPage(CodeGraph, urls.baseUrl);
+      await codeGraph.selectGraph(GRAPH_ID);
+      await codeGraph.selectCodeGraphCheckbox(checkboxIndex.toString());
+      const result = await codeGraph.getCanvasAnalysis();
+      expect(result[color].length).toBe(0);
+    });
+  })
+
+  test(`Verify "Clear graph" button resets canvas view`, async () => {
+    const codeGraph = await browser.createNewPage(CodeGraph, urls.baseUrl);
+    await codeGraph.selectGraph(GRAPH_ID);
+    const initialAnalysis = await codeGraph.getCanvasAnalysis();
+    const initialNodeCount = initialAnalysis.green.length + initialAnalysis.yellow.length + initialAnalysis.red.length;
+    await codeGraph.clickOnshowPathBtn();
+    await codeGraph.insertInputForShowPath("1", Node_Import_Data);
+    await codeGraph.insertInputForShowPath("2", Node_Add_Edge);
+    await codeGraph.clickOnClearGraphBtn();
+    const finalAnalysis = await codeGraph.getCanvasAnalysis();
+    const finalNodeCount = finalAnalysis.green.length + finalAnalysis.yellow.length + finalAnalysis.red.length;
+    expect(initialNodeCount).toBe(finalNodeCount);
+    
+  });
+
 });