Merge pull request #240 from FalkorDB/code-graph-ui-tests

AviAvni · web-flow · commit 4f4a6ec55b69 · 2024-11-24T12:11:04.000+02:00
Code graph UI tests
diff --git a/app/components/Input.tsx b/app/components/Input.tsx
@@ -144,6 +144,7 @@ export default function Input({ value, onValueChange, handelSubmit, graph, icon,
                 <div
                     ref={containerRef}
                     className="z-10 w-full bg-white absolute flex flex-col pointer-events-auto border rounded-md max-h-[50dvh] overflow-y-auto overflow-x-hidden p-2 gap-2"
+                    data-name='search-bar-list'
                     style={{
                         top: (inputRef.current?.clientHeight || 0) + 16
                     }}
diff --git a/e2e/config/testData.ts b/e2e/config/testData.ts
@@ -0,0 +1,15 @@
+export const searchData: { searchInput: string; completedSearchInput?: string; }[] = [
+    { searchInput: "test"},
+    { searchInput: "set"},
+    { searchInput: "low", completedSearchInput: "lower" },
+    { searchInput: "as", completedSearchInput:  "ask"},
+];
+
+const categorizeCharacters = (characters: string[], expectedRes: boolean): { character: string; expectedRes: boolean }[] => {
+  return characters.map(character => ({ character, expectedRes }));
+};
+
+export const specialCharacters: { character: string; expectedRes: boolean }[] = [
+  ...categorizeCharacters(['%', '*', '(', ')', '-', '[', ']', '{', '}', ';', ':', '"', '|', '~'], true),
+  ...categorizeCharacters(['!', '@', '#', '$', '^', '&', '_', '=', '+', "'", ',', '.', '<', '>', '/', '?', '\\', '`'], false)
+];
diff --git a/e2e/logic/POM/codeGraph.ts b/e2e/logic/POM/codeGraph.ts
@@ -1,6 +1,6 @@
 import { Locator, Page } from "playwright";
 import BasePage from "../../infra/ui/basePage";
-import { delay } from "../utils";
+import { waitToBeEnabled } from "../utils";
 
 export default class CodeGraph extends BasePage {
     /* NavBar Locators*/
@@ -33,6 +33,42 @@ export default class CodeGraph extends BasePage {
         return this.page.locator("//main[@data-name='main-chat']/*[last()]/p");
     }
 
+    private get typeUrlInput(): Locator {
+        return this.page.locator("//div[@role='dialog']/form/input");
+    }
+
+    private get createBtnInCreateProjectDialog(): Locator {
+        return this.page.locator("//div[@role='dialog']/form//following::button//p[contains(text(), 'Create')]")
+    }
+
+    private get createProjectWaitDialog(): Locator {
+        return this.page.locator("//div[@role='dialog']//div//h2[contains(text(), 'THANK YOU FOR A NEW REQUEST')]")
+    }
+
+    private get dialogCreatedGraphsList(): (graph: string) => Locator {
+        return (graph: string) => this.page.locator(`//div[@role='presentation']/div//span[2][contains(text(), '${graph}')]`);
+    }
+
+    private get searchBarInput(): Locator {
+        return this.page.locator("//div[@data-name='search-bar']/input");
+    }
+
+    private get searchBarAutoCompleteOptions(): Locator {
+        return this.page.locator("//div[@data-name='search-bar']/div/button");
+    }
+
+    private get searchBarElements(): Locator {
+        return this.page.locator("//div[@data-name='search-bar']/div/button/div/p[1]");
+    }
+
+    private get searchBarOptionBtn(): (buttonNum: string) => Locator {
+        return (buttonNum: string) => this.page.locator(`//div[@data-name='search-bar']//button[${buttonNum}]`);
+    }
+
+    private get searchBarList(): Locator {
+        return this.page.locator("//div[@data-name='search-bar-list']");
+    }
+
     /* Chat Locators */
     private get showPathBtn(): Locator {
         return this.page.locator("//button[contains(@class, 'Tip')]");
@@ -74,7 +110,7 @@ export default class CodeGraph extends BasePage {
         return (inputNum: string) => this.page.locator(`(//main[@data-name='main-chat']//input)[1]/following::div[${inputNum}]//button[1]`);
     }
 
-    private get notificationNoPathFound(): Locator {
+    private get notificationError(): Locator {
         return this.page.locator("//div[@role='region']//ol//li");
     }
     
@@ -115,7 +151,7 @@ export default class CodeGraph extends BasePage {
     }
 
     async sendMessage(message: string) {
-        await this.askquestionInput.isEnabled();
+        await waitToBeEnabled(this.askquestionInput);
         await this.askquestionInput.fill(message);
         await this.askquestionBtn.click();
     }
@@ -160,11 +196,12 @@ export default class CodeGraph extends BasePage {
     }
 
     async isNodeVisibleInLastChatPath(node: string): Promise<boolean> {
+        await this.locateNodeInLastChatPath(node).waitFor({ state: 'visible' }); 
         return await this.locateNodeInLastChatPath(node).isVisible();
     }
 
-    async isNotificationNoPathFound(): Promise<boolean> {
-        return await this.notificationNoPathFound.isVisible();
+    async isNotificationError(): Promise<boolean> {
+        return await this.notificationError.isVisible();
     }
 
     /* CodeGraph functionality */
@@ -173,4 +210,49 @@ export default class CodeGraph extends BasePage {
         await this.selectGraphInComboBox(graph).waitFor({ state : 'visible'})
         await this.selectGraphInComboBox(graph).click();
     }
+
+    async createProject(url : string): Promise<void> {
+        await this.clickCreateNewProjectBtn();
+        await this.typeUrlInput.fill(url);
+        await this.createBtnInCreateProjectDialog.click();
+        await this.createProjectWaitDialog.waitFor({ state : 'hidden'});
+    }
+
+    async isGraphCreated(graph: string): Promise<boolean> {
+        await this.comboBoxbtn.click();
+        return await this.dialogCreatedGraphsList(graph).isVisible();
+    }
+
+    async fillSearchBar(searchValue: string): Promise<void> {
+        await this.searchBarInput.fill(searchValue);
+    }
+
+    async getSearchAutoCompleteCount(): Promise<number> {
+        return await this.searchBarAutoCompleteOptions.count();
+    }
+
+    async getSearchBarElementsText(): Promise<string[]> {
+        return await this.searchBarElements.allTextContents();
+    }
+
+    async selectSearchBarOptionBtn(buttonNum: string): Promise<void> {
+        await this.searchBarOptionBtn(buttonNum).click();
+    }
+
+    async getSearchBarInputValue(): Promise<string> {
+        return await this.searchBarInput.inputValue();
+    }
+    
+
+    async scrollToBottomInSearchBarList(): Promise<void> {
+        await this.searchBarList.evaluate((element) => {
+          element.scrollTop = element.scrollHeight;
+    })};
+
+    async isScrolledToBottomInSearchBarList(): Promise<boolean> {
+        return await this.searchBarList.evaluate((element) => {
+          return element.scrollTop + element.clientHeight >= element.scrollHeight;
+        });
+      }
+    
 }
diff --git a/e2e/logic/api/apiCalls.ts b/e2e/logic/api/apiCalls.ts
@@ -1,11 +1,11 @@
 import { getRequest, postRequest } from "../../infra/api/apiRequests";
 import urls from '../../config/urls.json'
-import { askQuestionResponse, createProjectResponse, fetchLatestRepoInfo, getProjectResponse, showPathResponse } from "./apiResponse";
+import { askQuestionResponse, createProjectResponse, fetchLatestRepoInfo, getNodeNeighborsResponse, getProjectResponse, searchAutoCompleteResponse, showPathResponse } from "./apiResponse";
 
 export class ApiCalls {
 
-    async createProject(projectname: string): Promise<createProjectResponse>{
-        const result = await postRequest(urls.baseUrl + "api/repo?url=" + projectname);
+    async createProject(projectUrl: string): Promise<createProjectResponse>{
+        const result = await postRequest(urls.baseUrl + "api/repo?url=" + projectUrl);
         return await result.json();
     }
 
@@ -29,4 +29,14 @@ export class ApiCalls {
         return await result.json()
     }
 
+    async searchAutoComplete(projectName: string, searchInput: string): Promise<searchAutoCompleteResponse>{
+        const result = await postRequest(urls.baseUrl + "api/repo/" + projectName + "?prefix=" + searchInput + "&type=autoComplete");
+        return await result.json()
+    }
+
+    async getNodeNeighbors(projectName: string, nodeNumber: string): Promise<getNodeNeighborsResponse>{
+        const result = await getRequest(urls.baseUrl + "api/repo/" + projectName + "/" + nodeNumber);
+        return await result.json()
+    }
+
 }
diff --git a/e2e/logic/api/apiResponse.ts b/e2e/logic/api/apiResponse.ts
@@ -73,3 +73,54 @@ export interface askQuestionResponse{
     }
 }
 
+export interface searchAutoCompleteResponse {
+    result: {
+      completions: {
+        alias: string;
+        id: number;
+        labels: string[];
+        properties: {
+          args: any[];
+          name: string;
+          path: string;
+          src_end: number;
+          src_start: number;
+        };
+      }[];
+      status: string;
+    };
+  }
+
+  export interface getNodeNeighborsResponse {
+    result: {
+      neighbors: {
+        edges: {
+          alias: string;
+          dest_node: number;
+          id: number;
+          properties: Record<string, any>;
+          relation: string;
+          src_node: number;
+        }[];
+        nodes: {
+          alias: string;
+          id: number;
+          labels: string[];
+          properties: {
+            args: [string, string][];
+            doc?: string;
+            name: string;
+            path: string;
+            ret_type?: string;
+            src: string;
+            src_end: number;
+            src_start: number;
+          };
+        }[];
+      };
+      status: string;
+    };
+  }
+  
+  
+
diff --git a/e2e/logic/utils.ts b/e2e/logic/utils.ts
@@ -1,2 +1,18 @@
+import { Locator } from "@playwright/test";
 
 export const delay = (ms: number): Promise<void> => new Promise(resolve => setTimeout(resolve, ms));
+
+export const waitToBeEnabled = async (locator: Locator, timeout: number = 5000): Promise<boolean> => {
+    const startTime = Date.now();
+
+    while (Date.now() - startTime < timeout) {
+        if (await locator.isEnabled()) {
+            return true;
+        }
+        await new Promise(resolve => setTimeout(resolve, 100));
+    }
+
+    return false;
+};
+
+
diff --git a/e2e/tests/chat.spec.ts b/e2e/tests/chat.spec.ts
@@ -30,7 +30,7 @@ test.describe("Chat tests", () => {
     await chat.selectGraph(GRAPH_ID);
     const isLoadingArray: boolean[] = [];
 
-    for (let i = 0; i < 10; i++) {
+    for (let i = 0; i < 5; i++) {
       await chat.sendMessage(Node_Question);
       const isLoading: boolean = await chat.getpreviousQuestionLoadingImage();
       isLoadingArray.push(isLoading);
@@ -44,7 +44,7 @@ test.describe("Chat tests", () => {
   test("Verify auto-scroll and manual scroll in chat", async () => {
     const chat = await browser.createNewPage(CodeGraph, urls.baseUrl);
     await chat.selectGraph(GRAPH_ID);
-    for (let i = 0; i < 10; i++) {
+    for (let i = 0; i < 5; i++) {
       await chat.sendMessage(Node_Question);
     }
     await delay(500);
@@ -62,7 +62,6 @@ test.describe("Chat tests", () => {
     await chat.clickOnshowPathBtn();
     await chat.insertInputForShowPath("1", Node_Import_Data);
     await chat.insertInputForShowPath("2", Node_Add_Edge);
-    await delay(500);
     expect(await chat.isNodeVisibleInLastChatPath(Node_Import_Data)).toBe(true);
     expect(await chat.isNodeVisibleInLastChatPath(Node_Add_Edge)).toBe(true);
   });
@@ -74,14 +73,15 @@ test.describe("Chat tests", () => {
     await chat.insertInputForShowPath("1", Node_Add_Edge);
     await chat.insertInputForShowPath("2", Node_Import_Data);
     await delay(500);
-    expect(await chat.isNotificationNoPathFound()).toBe(true);
+    expect(await chat.isNotificationError()).toBe(true);
   });
 
   test("Validate error notification when sending an empty question in chat", async () => {
     const chat = await browser.createNewPage(CodeGraph, urls.baseUrl);
     await chat.selectGraph(GRAPH_ID);
     await chat.clickAskquestionBtn();
-    expect(await chat.isNotificationNoPathFound()).toBe(true);
+    await delay(500);
+    expect(await chat.isNotificationError()).toBe(true);
   });
   
 });
diff --git a/e2e/tests/codeGraph.spec.ts b/e2e/tests/codeGraph.spec.ts
@@ -0,0 +1,65 @@
+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 { delay } from "../logic/utils";
+import { searchData, specialCharacters } from "../config/testData";
+
+test.describe("Code graph tests", () => {
+  let browser: BrowserWrapper;
+
+  test.beforeAll(async () => {
+    browser = new BrowserWrapper();
+  });
+
+  test.afterAll(async () => {
+    await browser.closeBrowser();
+  });
+
+  searchData.slice(0, 2).forEach(({ searchInput }) => {
+    test(`Verify search bar auto-complete behavior for input: ${searchInput} via UI`, async () => {
+      const codeGraph = await browser.createNewPage(CodeGraph, urls.baseUrl);
+      await codeGraph.selectGraph(GRAPH_ID);
+      await codeGraph.fillSearchBar(searchInput);
+      await delay(1000);
+      const textList = await codeGraph.getSearchBarElementsText();
+      textList.forEach((text) => {
+        expect(text.toLowerCase()).toContain(searchInput);
+      });
+    });
+  });
+
+  searchData.slice(2, 4).forEach(({ searchInput, completedSearchInput }) => {
+    test(`Validate search bar updates with selected element: ${searchInput}`, async () => {
+      const codeGraph = await browser.createNewPage(CodeGraph, urls.baseUrl);
+      await codeGraph.selectGraph(GRAPH_ID);
+      await codeGraph.fillSearchBar(searchInput);
+      await delay(1000);
+      await codeGraph.selectSearchBarOptionBtn("1");
+      expect(await codeGraph.getSearchBarInputValue()).toBe(
+        completedSearchInput
+      );
+    });
+  });
+
+  searchData.slice(0, 2).forEach(({ searchInput }) => {
+    test(`Verify auto-scroll scroll in search bar list for: ${searchInput}`, async () => {
+      const codeGraph = await browser.createNewPage(CodeGraph, urls.baseUrl);
+      await codeGraph.selectGraph(GRAPH_ID);
+      await codeGraph.fillSearchBar(searchInput);
+      await codeGraph.scrollToBottomInSearchBarList();
+      expect(await codeGraph.isScrolledToBottomInSearchBarList()).toBe(true);
+    });
+  });
+
+  specialCharacters.forEach(({ character, expectedRes }) => {
+    test(`Verify entering special characters behavior in search bar for: ${character}`, async () => {
+      const codeGraph = await browser.createNewPage(CodeGraph, urls.baseUrl);
+      await codeGraph.selectGraph(GRAPH_ID);
+      await codeGraph.fillSearchBar(character);
+      await delay(1000);
+      expect(await codeGraph.isNotificationError()).toBe(expectedRes);
+    });
+  });
+});
