From 479eea1bda5bbe37d634ad0c985c41eac74ec0be Mon Sep 17 00:00:00 2001
From: afolasope <folasopeadebanjo@gmail.com>
Date: Tue, 10 Sep 2024 01:50:35 +0100
Subject: [PATCH 1/3] create project tests

---
 apps/frontend/playwright.config.ts           |   1 +
 apps/frontend/src/layout/partials/Navbar.tsx |   8 +-
 apps/frontend/tests/projects/project.spec.ts | 145 +++++++++++++++++++
 3 files changed, 153 insertions(+), 1 deletion(-)
 create mode 100644 apps/frontend/tests/projects/project.spec.ts

diff --git a/apps/frontend/playwright.config.ts b/apps/frontend/playwright.config.ts
index a72372ca..840943b7 100644
--- a/apps/frontend/playwright.config.ts
+++ b/apps/frontend/playwright.config.ts
@@ -13,6 +13,7 @@ import { ONBOARDED_USER_FILE } from "./tests/utils/constants";
  */
 export default defineConfig({
     testDir: "./tests",
+    timeout: 80000,
     /* Run tests in files in parallel */
     fullyParallel: true,
     /* Fail the build on CI if you accidentally left test.only in the source code. */
diff --git a/apps/frontend/src/layout/partials/Navbar.tsx b/apps/frontend/src/layout/partials/Navbar.tsx
index 20ee6bea..b597e86c 100644
--- a/apps/frontend/src/layout/partials/Navbar.tsx
+++ b/apps/frontend/src/layout/partials/Navbar.tsx
@@ -88,7 +88,10 @@ export const Navbar = () => {
                     <div className="mb-6 space-y-2">
                         <p className="text-xs text-intg-text-4">Project</p>
                         <DropdownMenu>
-                            <DropdownMenuTrigger className="w-[177px] select-none outline-none">
+                            <DropdownMenuTrigger
+                                className="w-[177px] select-none outline-none"
+                                data-testid="project-dropdown"
+                            >
                                 <NavItem
                                     text={project?.name as string}
                                     leftIcon={<AcronymBox text={project?.name as string} />}
@@ -107,10 +110,12 @@ export const Navbar = () => {
                                     {projects.map((item) => {
                                         return (
                                             <DropdownMenuItem
+                                                data-testid={"project-btn"}
                                                 key={item?.id}
                                                 onClick={() => {
                                                     switchProject(item as Project);
                                                 }}
+                                                className={cn(item?.slug === project?.slug ? "active" : "")}
                                             >
                                                 <NavItem
                                                     leftIcon={<AcronymBox text={item?.name ?? ""} />}
@@ -147,6 +152,7 @@ export const Navbar = () => {
 
                                     <DropdownMenuItem>
                                         <Button
+                                            data-testid="create-new-project"
                                             icon={<CirclePlusIcon />}
                                             variant="custom"
                                             text="New Project"
diff --git a/apps/frontend/tests/projects/project.spec.ts b/apps/frontend/tests/projects/project.spec.ts
new file mode 100644
index 00000000..a1deae79
--- /dev/null
+++ b/apps/frontend/tests/projects/project.spec.ts
@@ -0,0 +1,145 @@
+import { faker } from "@faker-js/faker";
+import { expect, test } from "@playwright/test";
+import fs from "fs";
+import { ROUTES, userDetailsFile } from "../utils/constants";
+
+test.describe("Create workspace", () => {
+    let projectSlug;
+    let workspaceSlug;
+    test.beforeAll(async () => {
+        const details = JSON.parse(fs.readFileSync(userDetailsFile, "utf-8"));
+        workspaceSlug = details.workspaceSlug;
+        projectSlug = details.projectSlug;
+    });
+
+    test("should allow user to create a new Project", async ({ page }) => {
+        await page.goto(ROUTES.SURVEY.LIST(workspaceSlug, projectSlug));
+        await page.waitForURL(ROUTES.PATTERNS.SURVEY_LIST_URL);
+
+        const oldUrl = page.url();
+
+        const newProject = faker.company.name();
+
+        // await expect(page.getByRole("button", { name: /Create new survey/i }).last()).toBeVisible();
+        await page.getByText(/invite team/i).waitFor();
+
+        await page.getByTestId("project-dropdown").waitFor();
+        await page.getByTestId("project-dropdown").click();
+        await page.getByTestId("create-new-project").click();
+        await page.getByText(/Create new project/i).waitFor();
+
+        await page.getByPlaceholder(/Project name/i).fill(newProject);
+
+        await page.getByRole("button", { name: /Create project/i }).click();
+
+        // await expect(page.getByRole("button", { name: /Create new survey/i }).last()).toBeVisible();
+        await expect(page.locator("div").filter({ hasText: "Success!Project created" }).nth(3)).toBeVisible();
+        await page.waitForURL((url) => ROUTES.PATTERNS.SURVEY_LIST_URL.test(url.pathname));
+
+        await page.getByTestId("project-dropdown").click();
+
+        const url = new URL(page.url());
+        const newUrl = url.pathname;
+
+        const extractProjectNameFromUrl = (url) => {
+            const match = url.match(/projects\/([\w-]+)\//);
+            return match ? match[1] : null;
+        };
+
+        const oldProjectName = extractProjectNameFromUrl(oldUrl);
+        const newProjectName = extractProjectNameFromUrl(newUrl);
+
+        expect(newProjectName).not.toEqual(oldProjectName);
+        // expect(newProjectName).toContain(newProject.replace(/\s+/g, "-").toLowerCase());
+
+        projectSlug = url.pathname.split("/")[3];
+
+        const details = { workspaceSlug, projectSlug };
+
+        fs.writeFileSync(userDetailsFile, JSON.stringify(details), "utf-8");
+    });
+
+    test("should allow user to switch to another Project", async ({ page }) => {
+        await page.goto(ROUTES.SURVEY.LIST(workspaceSlug, projectSlug));
+        await page.waitForURL(ROUTES.PATTERNS.SURVEY_LIST_URL);
+
+        const oldUrl = page.url();
+
+        // Open the dropdown and wait for it to be visible
+        await page.getByTestId("project-dropdown").waitFor();
+        await page.getByTestId("project-dropdown").click();
+
+        const projectButtons = await page.locator('[data-testid="project-btn"]').elementHandles();
+
+        if (projectButtons.length === 0) {
+            throw new Error("No projects found in the dropdown.");
+        }
+
+        let activeIndex = -1;
+
+        // find the one with the 'active' class
+        for (let i = 0; i < projectButtons.length; i++) {
+            const isActive = await projectButtons[i].evaluate((el) => {
+                return (el as HTMLElement).classList.contains("active");
+            });
+            if (isActive) {
+                activeIndex = i;
+                break;
+            }
+        }
+
+        console.log("Active button index:", activeIndex);
+
+        if (projectButtons.length === 1) {
+            // Only one project, click it if it's not active
+            if (activeIndex === -1) {
+                activeIndex = 0;
+                await projectButtons[activeIndex].click();
+            }
+            console.log("has only one project");
+        } else if (activeIndex !== -1 && activeIndex < projectButtons.length - 1) {
+            console.log(activeIndex, "has clicked the next index");
+            console.log(activeIndex + 1);
+            activeIndex = activeIndex + 1;
+            // Click the next button if there's more than one project and we're not at the last project
+            await projectButtons[activeIndex].click();
+        } else if (activeIndex !== -1 && activeIndex === projectButtons.length - 1) {
+            // If it's the last button, click the first one
+            console.log(activeIndex, "I am last so i clicked first");
+            activeIndex = 0;
+
+            await projectButtons[activeIndex].click();
+        } else if (activeIndex === -1) {
+            console.log(activeIndex, "no project found");
+            activeIndex = 0;
+            // If no active button is found, click the first one as a fallback
+            await projectButtons[activeIndex].click();
+        }
+
+        console.log("new active index", activeIndex);
+
+        // Capture the new URL and verify project change
+        const url = new URL(page.url());
+        const newUrl = url.pathname;
+
+        // Extract project names from the old and new URLs
+        const extractProjectNameFromUrl = (url) => {
+            const match = url.match(/projects\/([\w-]+)\//);
+            return match ? match[1] : null;
+        };
+
+        const oldProjectName = extractProjectNameFromUrl(oldUrl);
+        const newProjectName = extractProjectNameFromUrl(newUrl);
+        console.log({ oldProjectName }, { newProjectName });
+
+        // Assert that the project name in the new URL is different
+        expect(newProjectName).not.toEqual(oldProjectName);
+
+        // Save the new project slug for later tests
+        projectSlug = url.pathname.split("/")[3];
+
+        const details = { workspaceSlug, projectSlug };
+
+        fs.writeFileSync(userDetailsFile, JSON.stringify(details), "utf-8");
+    });
+});

From 933683d80a28b7a7a6dd59a7f18f84d2ca206352 Mon Sep 17 00:00:00 2001
From: afolasope <folasopeadebanjo@gmail.com>
Date: Thu, 19 Sep 2024 15:58:04 +0100
Subject: [PATCH 2/3] update project tests

---
 .../workspace/components/settings/Project.tsx |  4 ++
 apps/frontend/tests/projects/project.spec.ts  | 69 ++++++++++++++-----
 apps/frontend/tests/utils/constants.ts        |  5 ++
 apps/frontend/tests/utils/helper.ts           | 47 -------------
 4 files changed, 60 insertions(+), 65 deletions(-)

diff --git a/apps/frontend/src/modules/workspace/components/settings/Project.tsx b/apps/frontend/src/modules/workspace/components/settings/Project.tsx
index cebf3ca2..03e163db 100644
--- a/apps/frontend/src/modules/workspace/components/settings/Project.tsx
+++ b/apps/frontend/src/modules/workspace/components/settings/Project.tsx
@@ -50,6 +50,7 @@ export const Project = () => {
                 <form onSubmit={handleSubmit(onSubmit)}>
                     <div className="space-y-6">
                         <TextInput
+                            data-testid="project-name"
                             label={"Project Name"}
                             className="font-semibold"
                             defaultValue={project?.name}
@@ -71,11 +72,13 @@ export const Project = () => {
                 <div className="flex w-full items-end gap-2">
                     <div className="flex-1">
                         <TextInput
+                            data-testid="project-key"
                             label="Project Key"
                             value={project?.apiToken}
                             disabled={true}
                             rightIcon={
                                 <Button
+                                    data-testid="refresh-project-key"
                                     variant="custom"
                                     size="sm"
                                     disabled={loading}
@@ -87,6 +90,7 @@ export const Project = () => {
                     </div>
                     <Button
                         text="Copy"
+                        data-testid="copy-project-key"
                         size="md"
                         icon={<CopyIcon size={16} />}
                         textAlign="center"
diff --git a/apps/frontend/tests/projects/project.spec.ts b/apps/frontend/tests/projects/project.spec.ts
index a1deae79..7f47648f 100644
--- a/apps/frontend/tests/projects/project.spec.ts
+++ b/apps/frontend/tests/projects/project.spec.ts
@@ -2,6 +2,7 @@ import { faker } from "@faker-js/faker";
 import { expect, test } from "@playwright/test";
 import fs from "fs";
 import { ROUTES, userDetailsFile } from "../utils/constants";
+import { waitForResponse } from "./../utils/helper";
 
 test.describe("Create workspace", () => {
     let projectSlug;
@@ -19,8 +20,6 @@ test.describe("Create workspace", () => {
         const oldUrl = page.url();
 
         const newProject = faker.company.name();
-
-        // await expect(page.getByRole("button", { name: /Create new survey/i }).last()).toBeVisible();
         await page.getByText(/invite team/i).waitFor();
 
         await page.getByTestId("project-dropdown").waitFor();
@@ -31,8 +30,6 @@ test.describe("Create workspace", () => {
         await page.getByPlaceholder(/Project name/i).fill(newProject);
 
         await page.getByRole("button", { name: /Create project/i }).click();
-
-        // await expect(page.getByRole("button", { name: /Create new survey/i }).last()).toBeVisible();
         await expect(page.locator("div").filter({ hasText: "Success!Project created" }).nth(3)).toBeVisible();
         await page.waitForURL((url) => ROUTES.PATTERNS.SURVEY_LIST_URL.test(url.pathname));
 
@@ -50,7 +47,6 @@ test.describe("Create workspace", () => {
         const newProjectName = extractProjectNameFromUrl(newUrl);
 
         expect(newProjectName).not.toEqual(oldProjectName);
-        // expect(newProjectName).toContain(newProject.replace(/\s+/g, "-").toLowerCase());
 
         projectSlug = url.pathname.split("/")[3];
 
@@ -77,7 +73,6 @@ test.describe("Create workspace", () => {
 
         let activeIndex = -1;
 
-        // find the one with the 'active' class
         for (let i = 0; i < projectButtons.length; i++) {
             const isActive = await projectButtons[i].evaluate((el) => {
                 return (el as HTMLElement).classList.contains("active");
@@ -91,7 +86,6 @@ test.describe("Create workspace", () => {
         console.log("Active button index:", activeIndex);
 
         if (projectButtons.length === 1) {
-            // Only one project, click it if it's not active
             if (activeIndex === -1) {
                 activeIndex = 0;
                 await projectButtons[activeIndex].click();
@@ -101,28 +95,19 @@ test.describe("Create workspace", () => {
             console.log(activeIndex, "has clicked the next index");
             console.log(activeIndex + 1);
             activeIndex = activeIndex + 1;
-            // Click the next button if there's more than one project and we're not at the last project
             await projectButtons[activeIndex].click();
         } else if (activeIndex !== -1 && activeIndex === projectButtons.length - 1) {
-            // If it's the last button, click the first one
-            console.log(activeIndex, "I am last so i clicked first");
             activeIndex = 0;
 
             await projectButtons[activeIndex].click();
         } else if (activeIndex === -1) {
-            console.log(activeIndex, "no project found");
             activeIndex = 0;
-            // If no active button is found, click the first one as a fallback
             await projectButtons[activeIndex].click();
         }
 
-        console.log("new active index", activeIndex);
-
-        // Capture the new URL and verify project change
         const url = new URL(page.url());
         const newUrl = url.pathname;
 
-        // Extract project names from the old and new URLs
         const extractProjectNameFromUrl = (url) => {
             const match = url.match(/projects\/([\w-]+)\//);
             return match ? match[1] : null;
@@ -132,14 +117,62 @@ test.describe("Create workspace", () => {
         const newProjectName = extractProjectNameFromUrl(newUrl);
         console.log({ oldProjectName }, { newProjectName });
 
-        // Assert that the project name in the new URL is different
         expect(newProjectName).not.toEqual(oldProjectName);
 
-        // Save the new project slug for later tests
         projectSlug = url.pathname.split("/")[3];
 
         const details = { workspaceSlug, projectSlug };
 
         fs.writeFileSync(userDetailsFile, JSON.stringify(details), "utf-8");
     });
+
+    test("should allow user to update Project", async ({ page }) => {
+        await page.goto(ROUTES.PROJECT.SETTINGS(workspaceSlug, projectSlug));
+        await page.getByText(/Manage your Integraflow Project/i).waitFor();
+        const prevName = await page.getByTestId("project-name").inputValue();
+
+        await page.getByTestId("project-name").fill(faker.company.buzzAdjective());
+        await waitForResponse(page, "projectUpdate", async () => {
+            await page.getByRole("button", { name: "Update" }).click();
+        });
+
+        await page.reload();
+        await page.getByTestId("project-name").waitFor();
+
+        const newName = await page.getByTestId("project-name").inputValue();
+        expect(prevName).not.toBe(newName);
+    });
+    test("should allow user to refresh Project key", async ({ page }) => {
+        await page.goto(ROUTES.PROJECT.SETTINGS(workspaceSlug, projectSlug));
+        await page.getByText(/Manage your Integraflow Project/i).waitFor();
+
+        const previousKey = await page.getByTestId("project-key").inputValue();
+
+        await waitForResponse(page, "projectTokenReset", async () => {
+            await page.getByTestId("refresh-project-key").click();
+        });
+
+        await page.reload();
+        await page.getByTestId("project-key").waitFor();
+
+        const newKey = await page.getByTestId("project-key").inputValue();
+        expect(previousKey).not.toBe(newKey);
+    });
+
+    test("should allow user to copy Project key", async ({ page, context, browserName }) => {
+        if (browserName === "firefox" || browserName === "webkit") {
+            test.skip();
+        }
+
+        await page.goto(ROUTES.PROJECT.SETTINGS(workspaceSlug, projectSlug));
+        await context.grantPermissions(["clipboard-read", "clipboard-write"]);
+        await page.getByText(/Manage your Integraflow Project/i).waitFor();
+
+        const projectKey = await page.getByTestId("project-key").inputValue();
+        await page.getByTestId("copy-project-key").click();
+        const handle = await page.evaluateHandle(() => navigator.clipboard.readText());
+        const clipboardContent = await handle.jsonValue();
+
+        expect(clipboardContent).toBe(projectKey);
+    });
 });
diff --git a/apps/frontend/tests/utils/constants.ts b/apps/frontend/tests/utils/constants.ts
index 8fca71e7..44ecc340 100644
--- a/apps/frontend/tests/utils/constants.ts
+++ b/apps/frontend/tests/utils/constants.ts
@@ -10,6 +10,11 @@ export const ROUTES = {
             `/${workspaceSlug}/projects/${projectSlug}/get-started`,
     },
 
+    PROJECT: {
+        SETTINGS: (workspaceSlug: string, projectSlug: string) =>
+            `/${workspaceSlug}/projects/${projectSlug}/settings/project`,
+    },
+
     SURVEY: {
         LIST: (workspaceSlug: string, projectSlug: string) => `/${workspaceSlug}/projects/${projectSlug}/surveys`,
         SINGLE: (workspaceSlug: string, projectSlug: string, surveySlug: string) =>
diff --git a/apps/frontend/tests/utils/helper.ts b/apps/frontend/tests/utils/helper.ts
index d529f783..d6a89379 100644
--- a/apps/frontend/tests/utils/helper.ts
+++ b/apps/frontend/tests/utils/helper.ts
@@ -5,7 +5,6 @@ export const waitForResponse = async (page, operationName, actionCallback) => {
             if (request) {
                 const postData = request.postData();
                 if (postData && postData.includes(operationName)) {
-                    console.log("POSTDATAAAAAAAAAAAAAAAAAAAAAAAAA", postData);
                     return response.url().includes("/graphql") && response.status() === 200;
                 }
             }
@@ -16,60 +15,14 @@ export const waitForResponse = async (page, operationName, actionCallback) => {
 
     const request = response.request();
     const postData = request?.postData();
-    console.log(postData);
 
     if (postData) {
         try {
             const parsedData = JSON.parse(postData);
-            console.log("Parsed postData:", parsedData); // Log the parsed postData
             return parsedData;
         } catch (error) {
-            console.error("Error parsing postData:", error);
             return null;
         }
     }
     return null;
 };
-// export const waitForResponse = async (page, operationName, actionCallback) => {
-//     const [response] = await Promise.all([
-//         page.waitForResponse((response) => {
-//             const request = response.request();
-//             console.log("Received a response, checking request..."); // Log when a response is received
-
-//             if (request) {
-//                 const postData = request.postData();
-//                 console.log("Request postData:", postData); // Log the postData even if it's not the expected one
-
-//                 if (postData && postData.includes(operationName)) {
-//                     console.log(`Found matching operation: ${operationName}`); // Log if the operation name matches
-//                     return response.url().includes("/graphql") && response.status() === 200;
-//                 }
-//             }
-//             return false;
-//         }),
-//         actionCallback(), // Trigger the action that causes the response
-//     ]);
-
-//     if (!response) {
-//         console.error("Response not found!"); // Log when no response is matched
-//         return null;
-//     }
-
-//     console.log({ response }); // Log the response object
-
-// const request = response.request();
-// const postData = request?.postData();
-
-// if (postData) {
-//     try {
-//         const parsedData = JSON.parse(postData);
-//         console.log("Parsed postData:", parsedData); // Log the parsed postData
-//         return parsedData;
-//     } catch (error) {
-//         console.error("Error parsing postData:", error);
-//         return null;
-//     }
-// }
-
-//     return null;
-// };

From 1e10aa4ee59fa97d17d722e779a4725f5cde0d3a Mon Sep 17 00:00:00 2001
From: afolasope <folasopeadebanjo@gmail.com>
Date: Thu, 19 Sep 2024 19:16:02 +0100
Subject: [PATCH 3/3] update project tests

---
 apps/frontend/tests/projects/project.spec.ts | 12 +++++-------
 apps/frontend/tests/survey/question.spec.ts  |  5 -----
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/apps/frontend/tests/projects/project.spec.ts b/apps/frontend/tests/projects/project.spec.ts
index 7f47648f..92d22aa1 100644
--- a/apps/frontend/tests/projects/project.spec.ts
+++ b/apps/frontend/tests/projects/project.spec.ts
@@ -83,17 +83,12 @@ test.describe("Create workspace", () => {
             }
         }
 
-        console.log("Active button index:", activeIndex);
-
         if (projectButtons.length === 1) {
             if (activeIndex === -1) {
                 activeIndex = 0;
                 await projectButtons[activeIndex].click();
             }
-            console.log("has only one project");
         } else if (activeIndex !== -1 && activeIndex < projectButtons.length - 1) {
-            console.log(activeIndex, "has clicked the next index");
-            console.log(activeIndex + 1);
             activeIndex = activeIndex + 1;
             await projectButtons[activeIndex].click();
         } else if (activeIndex !== -1 && activeIndex === projectButtons.length - 1) {
@@ -115,9 +110,12 @@ test.describe("Create workspace", () => {
 
         const oldProjectName = extractProjectNameFromUrl(oldUrl);
         const newProjectName = extractProjectNameFromUrl(newUrl);
-        console.log({ oldProjectName }, { newProjectName });
 
-        expect(newProjectName).not.toEqual(oldProjectName);
+        if (projectButtons.length === 1) {
+            expect(newProjectName).toEqual(oldProjectName);
+        } else {
+            expect(newProjectName).not.toEqual(oldProjectName);
+        }
 
         projectSlug = url.pathname.split("/")[3];
 
diff --git a/apps/frontend/tests/survey/question.spec.ts b/apps/frontend/tests/survey/question.spec.ts
index 955a983f..3c307f76 100644
--- a/apps/frontend/tests/survey/question.spec.ts
+++ b/apps/frontend/tests/survey/question.spec.ts
@@ -103,23 +103,18 @@ test.describe("Create questions", () => {
         // // Log the inner HTML of the text editor for each question
         await page.getByTestId("question-trigger").nth(0).click();
         await page.waitForSelector(".ql-editor", { state: "attached" });
-        console.log("Question 1 HTML:", await page.locator(".ql-editor").evaluate((el) => el.innerHTML));
 
         await page.getByTestId("question-trigger").nth(1).click();
         await page.waitForSelector(".ql-editor", { state: "attached" });
-        console.log("Question 2 HTML:", await page.locator(".ql-editor").evaluate((el) => el.innerHTML));
 
         await page.getByTestId("question-trigger").nth(2).click();
         await page.waitForSelector(".ql-editor", { state: "attached" });
-        console.log("Question 3 HTML:", await page.locator(".ql-editor").evaluate((el) => el.innerHTML));
 
         await page.getByTestId("question-trigger").nth(3).click();
         await page.waitForSelector(".ql-editor", { state: "attached" });
-        console.log("Question 4 HTML:", await page.locator(".ql-editor").evaluate((el) => el.innerHTML));
 
         await page.getByTestId("question-trigger").nth(0).click();
         await page.waitForSelector(".ql-editor", { state: "attached" });
-        console.log("Question 4 HTML:", await page.locator(".ql-editor").evaluate((el) => el.innerHTML));
     });
 
     test("should allow user to delete a question", async ({ page }) => {