From c9248d253a0366dd8afdb6598bc1d9f1633bba48 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Thu, 2 May 2024 18:08:39 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20(addNewVariableButton.tsx):=20re?=
 =?UTF-8?q?format=20code=20for=20better=20readability=20and=20maintainabil?=
 =?UTF-8?q?ity=20=F0=9F=93=9D=20(addNewVariableButton.tsx):=20fix=20typo?=
 =?UTF-8?q?=20in=20variable=20name=20'unavaliableFields'=20to=20'unavailab?=
 =?UTF-8?q?leFields'=20=F0=9F=93=9D=20(addNewVariableButton.tsx):=20add=20?=
 =?UTF-8?q?id=20attribute=20to=20InputComponent=20for=20better=20accessibi?=
 =?UTF-8?q?lity=20=F0=9F=93=9D=20(headerComponent/index.tsx):=20add=20data?=
 =?UTF-8?q?-testid=20attribute=20to=20user-profile-settings=20button=20for?=
 =?UTF-8?q?=20easier=20testing=20=F0=9F=93=9D=20(inputComponent/index.tsx)?=
 =?UTF-8?q?:=20add=20data-testid=20attribute=20to=20popover=20anchor=20ele?=
 =?UTF-8?q?ment=20for=20easier=20testing=20=E2=9C=A8=20(userSettings.spec.?=
 =?UTF-8?q?ts):=20add=20end-to-end=20tests=20for=20user=20settings=20page,?=
 =?UTF-8?q?=20including=20testing=20profile=20gradient,=20interacting=20wi?=
 =?UTF-8?q?th=20global=20variables,=20and=20checking=20shortcuts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addNewVariableButton.tsx                  |  8 +-
 .../src/components/headerComponent/index.tsx  |  1 +
 .../src/components/inputComponent/index.tsx   |  1 +
 .../tests/end-to-end/userSettings.spec.ts     | 91 +++++++++++++++++++
 4 files changed, 98 insertions(+), 3 deletions(-)
 create mode 100644 src/frontend/tests/end-to-end/userSettings.spec.ts

diff --git a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
index e5e8dd488..f33037ebc 100644
--- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
+++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
@@ -22,9 +22,9 @@ export default function AddNewVariableButton({ children }): JSX.Element {
   const [open, setOpen] = useState(false);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const componentFields = useTypesStore((state) => state.ComponentFields);
-  const unavaliableFields =new Set(Object.keys(useGlobalVariablesStore(
-    (state) => state.unavaliableFields
-  )));
+  const unavaliableFields = new Set(
+    Object.keys(useGlobalVariablesStore((state) => state.unavaliableFields))
+  );
 
   const availableFields = Array.from(componentFields).filter(
     (field) => !unavaliableFields.has(field)
@@ -97,6 +97,7 @@ export default function AddNewVariableButton({ children }): JSX.Element {
             password={false}
             options={["Generic", "Credential"]}
             placeholder="Choose a type for the variable..."
+            id={"type-global-variables"}
           ></InputComponent>
           <Label>Value</Label>
           <Textarea
@@ -114,6 +115,7 @@ export default function AddNewVariableButton({ children }): JSX.Element {
             password={false}
             options={availableFields}
             placeholder="Choose a field for the variable..."
+            id={"apply-to-fields"}
           ></InputComponent>
         </div>
       </BaseModal.Content>
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index af219f2ac..bc2537ea2 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -174,6 +174,7 @@ export default function Header(): JSX.Element {
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <button
+                  data-testid="user-profile-settings"
                   className={
                     "h-7 w-7 rounded-full focus-visible:outline-0 " +
                     (userData?.profile_image ??
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index e355293ff..7b178a4d7 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -247,6 +247,7 @@ export default function InputComponent({
             </PopoverContentWithoutPortal>
           </Popover>
           <div
+            data-testid={"popover-anchor-" + id}
             className={cn(
               "pointer-events-auto absolute inset-y-0 h-full w-full cursor-pointer",
               ((selectedOption !== "" || !onChange) && setSelectedOption) ||
diff --git a/src/frontend/tests/end-to-end/userSettings.spec.ts b/src/frontend/tests/end-to-end/userSettings.spec.ts
new file mode 100644
index 000000000..6f90bb19c
--- /dev/null
+++ b/src/frontend/tests/end-to-end/userSettings.spec.ts
@@ -0,0 +1,91 @@
+import { test } from "@playwright/test";
+
+test("should see general profile gradient", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+  await page.getByTestId("user-profile-settings").click();
+  await page.getByText("Settings").click();
+  await page.getByText("General").nth(2).isVisible();
+  await page.getByText("Profile Gradient").isVisible();
+});
+
+test("should interact with global variables", async ({ page }) => {
+  const randomName = Math.random().toString(36).substring(2);
+
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+  await page.getByTestId("user-profile-settings").click();
+  await page.getByText("Settings").click();
+  await page.getByText("Global Variables").click();
+  await page.getByText("Global Variables").nth(2);
+  await page.getByText("Global Variables", { exact: true }).nth(1).isVisible();
+  await page.getByText("Add New").click();
+  await page
+    .getByPlaceholder("Insert a name for the variable...")
+    .fill(randomName);
+  await page.getByTestId("popover-anchor-type-global-variables").click();
+  await page.getByPlaceholder("Search options...").fill("Generic");
+  await page.waitForTimeout(2000);
+  await page.getByText("Generic", { exact: true }).last().isVisible();
+  await page.getByText("Generic", { exact: true }).last().click();
+
+  await page.getByTestId("popover-anchor-type-global-variables").click();
+  await page.waitForTimeout(2000);
+  await page.getByPlaceholder("Search options...").fill("Generic");
+  await page.getByText("Generic", { exact: true }).last().isVisible();
+  await page.getByText("Generic", { exact: true }).last().click();
+
+  await page
+    .getByPlaceholder("Insert a value for the variable...")
+    .fill("testtesttesttesttesttesttesttest");
+  await page.getByTestId("popover-anchor-apply-to-fields").click();
+  await page.waitForTimeout(2000);
+
+  await page.getByPlaceholder("Search options...").fill("System Message");
+
+  await page.getByText("System Message").first().click();
+
+  await page.getByPlaceholder("Search options...").fill("openAI");
+
+  await page.getByText("OpenAI API Base").first().click();
+
+  await page.getByPlaceholder("Search options...").fill("llama");
+
+  await page.getByText("Ollama").first().click();
+
+  await page.keyboard.press("Escape");
+  await page.getByText("Save Variable", { exact: true }).click();
+
+  await page.getByText(randomName).isVisible();
+
+  await page
+    .getByLabel("Press Space to toggle all rows selection (unchecked)")
+    .nth(0)
+    .click();
+  await page.getByTestId("icon-Trash2").click();
+  await page.getByText("No Rows To Show").isVisible();
+});
+
+test("should see shortcuts", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+  await page.getByTestId("user-profile-settings").click();
+  await page.getByText("Settings").click();
+  await page.getByText("General").nth(2).isVisible();
+  await page.getByText("Shortcuts").nth(0).click();
+  await page.getByText("Shortcuts", { exact: true }).nth(1).isVisible();
+  await page
+    .getByText("Advanced Settings Component", { exact: true })
+    .isVisible();
+  await page.getByText("Minimize Component", { exact: true }).isVisible();
+  await page.getByText("Code Component", { exact: true }).isVisible();
+  await page.getByText("Copy Component", { exact: true }).isVisible();
+  await page.getByText("Duplicate Component", { exact: true }).isVisible();
+  await page.getByText("Share Component", { exact: true }).isVisible();
+  await page.getByText("Docs Component", { exact: true }).isVisible();
+  await page.getByText("Save Component", { exact: true }).isVisible();
+  await page.getByText("Delete Component", { exact: true }).isVisible();
+  await page.getByText("Open Playground", { exact: true }).isVisible();
+  await page.getByText("Undo", { exact: true }).isVisible();
+  await page.getByText("Redo", { exact: true }).isVisible();
+});