From f4cee42401d95306faaa2b50a4733fbb17d8bce0 Mon Sep 17 00:00:00 2001
From: Noah Onyejese <129368606+noahonyejese@users.noreply.github.com>
Date: Wed, 19 Feb 2025 12:42:37 +0100
Subject: [PATCH 01/16] chore: adjusted test scripts

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 7ec678de96..f50e66a855 100644
--- a/package.json
+++ b/package.json
@@ -36,9 +36,9 @@
     "postversion": "git push --follow-tags",
     "release:npm": "yarn build:npm && yarn publish app",
     "e2e:dev": "E2E_BASE_URL=http://localhost:3000 yarn playwright test",
-    "e2e:dev:ssl": "E2E_BASE_URL=https://localhost:3000 yarn playwright test",
+    "e2e:dev:ssl": "E2E_BASE_URL=https://localhost:3000 E2E_ENV=true yarn playwright test",
     "e2e:ui": "E2E_BASE_URL=http://localhost:3000 yarn playwright test --ui",
-    "e2e:ui:ssl": "E2E_BASE_URL=https://localhost:3000 yarn playwright test --ui",
+    "e2e:ui:ssl": "E2E_BASE_URL=https://localhost:3000  E2E_ENV=true yarn playwright test --ui",
     "e2e": "playwright test",
     "cube": "NODE_ENV=development ts-node app/scripts/cube.ts",
     "dev:circular-deps": "madge --warning --extensions js,jsx,ts,tsx -b ./app -c ./app/pages/ --ts-config ./app/tsconfig.json | bun scripts/circular-deps-analysis.ts -",

From 444b980fc8f8c4779e32a2f77750e331ff11c190 Mon Sep 17 00:00:00 2001
From: Noah Onyejese <129368606+noahonyejese@users.noreply.github.com>
Date: Wed, 19 Feb 2025 12:43:04 +0100
Subject: [PATCH 02/16] refactor: Added test ids

---
 .../color-palettes/color-palette-types.tsx        |  1 +
 .../profile-color-palette-content.tsx             | 12 +++++++-----
 .../color-palettes/profile-color-palette-form.tsx | 15 +++++++++------
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/app/login/components/color-palettes/color-palette-types.tsx b/app/login/components/color-palettes/color-palette-types.tsx
index 124384343c..0ab0634aad 100644
--- a/app/login/components/color-palettes/color-palette-types.tsx
+++ b/app/login/components/color-palettes/color-palette-types.tsx
@@ -241,6 +241,7 @@ const CategoricalColorPaletteCreator = (props: ColorPaletteCreatorProps) => {
       <Button
         variant="text"
         fullWidth
+        data-testId="profile-add-new-color"
         className={classes.addColorButton}
         disabled={CATEGORICAL_MAX_ALLOWED_COLORS <= colorValues.length}
         startIcon={<Icon name="add" />}
diff --git a/app/login/components/color-palettes/profile-color-palette-content.tsx b/app/login/components/color-palettes/profile-color-palette-content.tsx
index 9bbd47874a..40a9cc6544 100644
--- a/app/login/components/color-palettes/profile-color-palette-content.tsx
+++ b/app/login/components/color-palettes/profile-color-palette-content.tsx
@@ -94,6 +94,7 @@ export const ProfileColorPaletteContent = ({
             startIcon={<Icon name="add" />}
             sx={{ width: "fit-content" }}
             onClick={showAddForm}
+            data-testId="add-profile-color-palette"
           >
             <Trans id="login.profile.my-color-palettes.add" />
           </Button>
@@ -164,6 +165,7 @@ const ColorPaletteRow = ({
 
   return (
     <ColorRowFlex
+      data-testId="profile-color-palette-row"
       sx={{
         paddingY: 3,
         paddingRight: 4,
@@ -195,16 +197,16 @@ const ColorPaletteRow = ({
       </Box>
       <ColorRowFlex gap={3}>
         <EditButton onClick={() => onEdit(paletteId)}>
+          <VisuallyHidden>
+            <Trans id="login.profile.my-color-palettes.edit">
+              Edit Color Palette
+            </Trans>
+          </VisuallyHidden>
           <Typography
             aria-hidden
             color="primary"
             sx={{ backgroundColor: "transparent" }}
           >
-            <VisuallyHidden>
-              <Trans id="login.profile.my-color-palettes.edit">
-                Edit Color Palette
-              </Trans>
-            </VisuallyHidden>
             <Icon name="edit" size={24} />
           </Typography>
         </EditButton>
diff --git a/app/login/components/color-palettes/profile-color-palette-form.tsx b/app/login/components/color-palettes/profile-color-palette-form.tsx
index b510bc35c4..426b03c1c0 100644
--- a/app/login/components/color-palettes/profile-color-palette-form.tsx
+++ b/app/login/components/color-palettes/profile-color-palette-form.tsx
@@ -191,6 +191,7 @@ const ProfileColorPaletteForm = ({
         <Box className={classes.saveButtonContainer}>
           <Button
             onClick={saveColorPalette}
+            data-testId="profile-save-color-palette"
             disabled={
               colorValues.length === 0 || titleInput === "" || noChanges
             }
@@ -245,12 +246,14 @@ const ColorPaletteTypeSelector = ({
               flexDirection={"column"}
               gap={2}
             >
-              <Radio
-                label={capitalize(type)}
-                value={type}
-                checked={type === selectedType}
-                onChange={handleChange}
-              />
+              <Box data-testId={`profile-color-palette-${type}`}>
+                <Radio
+                  label={capitalize(type)}
+                  value={type}
+                  checked={type === selectedType}
+                  onChange={handleChange}
+                />
+              </Box>
               <ColorPaletteExample type={type} />
             </Flex>
           );

From 8d5a72bbd206084071215d3937fb7872a512fd9a Mon Sep 17 00:00:00 2001
From: Noah Onyejese <129368606+noahonyejese@users.noreply.github.com>
Date: Wed, 19 Feb 2025 12:43:19 +0100
Subject: [PATCH 03/16] chore: fixed missing translations

---
 app/locales/en/messages.po | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/locales/en/messages.po b/app/locales/en/messages.po
index 0efb20bab1..1c96956003 100644
--- a/app/locales/en/messages.po
+++ b/app/locales/en/messages.po
@@ -1651,7 +1651,7 @@ msgstr "My palette"
 
 #: app/login/components/color-palettes/profile-color-palette-content.tsx
 msgid "login.profile.my-color-palettes.delete"
-msgstr "login.profile.my-color-palettes.delete"
+msgstr "Delete Color Palette"
 
 #: app/login/components/color-palettes/profile-color-palette-content.tsx
 msgid "login.profile.my-color-palettes.description"
@@ -1659,7 +1659,7 @@ msgstr "Save your first custom color palette to easily choose your colors while
 
 #: app/login/components/color-palettes/profile-color-palette-content.tsx
 msgid "login.profile.my-color-palettes.edit"
-msgstr "login.profile.my-color-palettes.edit"
+msgstr "Edit Color Palette"
 
 #: app/login/components/profile-content-tabs.tsx
 #: app/login/components/profile-content-tabs.tsx

From 18e938d5e4124789ce886396dd1795e6d71c0d0d Mon Sep 17 00:00:00 2001
From: Noah Onyejese <129368606+noahonyejese@users.noreply.github.com>
Date: Wed, 19 Feb 2025 12:43:52 +0100
Subject: [PATCH 04/16] feat: implemented custom color palette e2e tests

---
 e2e/custom-color-palette.spec.ts | 183 +++++++++++++++++++++++++++++++
 1 file changed, 183 insertions(+)
 create mode 100644 e2e/custom-color-palette.spec.ts

diff --git a/e2e/custom-color-palette.spec.ts b/e2e/custom-color-palette.spec.ts
new file mode 100644
index 0000000000..cc1d3c34be
--- /dev/null
+++ b/e2e/custom-color-palette.spec.ts
@@ -0,0 +1,183 @@
+import { Page } from "@playwright/test";
+
+import { setup, sleep } from "./common";
+
+const { test, expect, describe } = setup();
+
+const addNewColor = async (page: Page, i: number) => {
+  await page.locator('[data-testId="profile-add-new-color"]').click();
+
+  await page.getByRole("button", { name: "Open Color Picker" }).last().click();
+  await sleep(1_000);
+
+  const saturation = page.locator('[data-testId="color-picker-saturation"]');
+  await saturation.waitFor({ state: "visible", timeout: 5000 });
+
+  const box = await saturation.boundingBox();
+  if (!box) {
+    throw new Error("Could not get saturation element bounding box");
+  }
+
+  const randomX = box.x + Math.random() * box.width;
+  const randomY = box.y + Math.random() * box.height;
+
+  await page.mouse.click(randomX, randomY);
+  await sleep(1_000);
+  await page.keyboard.press("Escape");
+};
+
+test("Custom color palettes on profile page should allow CREATE, UPDATE and DELETING palettes ", async ({
+  page,
+  auth,
+}) => {
+  test.slow();
+
+  await page.goto("/en");
+  await auth();
+  await page.waitForLoadState("networkidle");
+  await page.goto("/en/profile");
+  const url = page.url();
+  expect(url.endsWith("/en/profile")).toBe(true);
+  await page.locator('[data-testId="color-palettes-tab"]').click();
+
+  //Create Categorical Palette
+  await page.locator('[data-testId="add-profile-color-palette"]').click();
+  await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+  await sleep(1_000);
+
+  const categoricalTitleInput = page.locator(
+    'input[name="custom-color-palette-title"]'
+  );
+  await categoricalTitleInput.waitFor({ state: "visible", timeout: 5000 });
+  await categoricalTitleInput.click();
+  await categoricalTitleInput.fill("Categorical Palette");
+  await page.keyboard.press("Enter");
+  await page.waitForTimeout(500);
+
+  for (let i = 0; i < 3; i++) {
+    await addNewColor(page, i);
+  }
+  await page.locator('[data-testId="profile-save-color-palette"]').click();
+  await sleep(1_000);
+
+  const categoricalTitleExists = await page
+    .getByText("Categorical Palette")
+    .isVisible();
+  expect(categoricalTitleExists).toBe(true);
+
+  //Create Sequential Palette
+  await page.locator('[data-testId="add-profile-color-palette"]').click();
+  await page
+    .locator('[data-testId="profile-color-palette-sequential"]')
+    .click();
+  await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+  await sleep(1_000);
+
+  const sequentialTitleInput = page.locator(
+    'input[name="custom-color-palette-title"]'
+  );
+  await sequentialTitleInput.waitFor({ state: "visible", timeout: 5000 });
+  await sequentialTitleInput.click();
+  await sequentialTitleInput.fill("Sequential Palette");
+  await page.keyboard.press("Enter");
+  await page.waitForTimeout(500);
+
+  await page.locator('[data-testId="profile-save-color-palette"]').click();
+  await sleep(1_000);
+
+  const sequentialTitleExists = await page
+    .getByText("Sequential Palette")
+    .isVisible();
+  expect(sequentialTitleExists).toBe(true);
+
+  //Create Diverging Palette (2 colors)
+  await page.locator('[data-testId="add-profile-color-palette"]').click();
+  await page.locator('[data-testId="profile-color-palette-diverging"]').click();
+  await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+  await sleep(1_000);
+
+  const divergingTwoTitleInput = page.locator(
+    'input[name="custom-color-palette-title"]'
+  );
+  await divergingTwoTitleInput.waitFor({ state: "visible", timeout: 5000 });
+  await divergingTwoTitleInput.click();
+  await divergingTwoTitleInput.fill("Diverging Palette (2)");
+  await page.keyboard.press("Enter");
+  await page.waitForTimeout(500);
+
+  await page.getByRole("button", { name: "Remove Color" }).first().click();
+  await sleep(1_000);
+
+  await page.locator('[data-testId="profile-save-color-palette"]').click();
+  await sleep(1_000);
+
+  const divergingTwoTitleExists = await page
+    .getByText("Diverging Palette (2)")
+    .isVisible();
+  expect(divergingTwoTitleExists).toBe(true);
+
+  //Create Diverging Palette (3 colors)
+  await page.locator('[data-testId="add-profile-color-palette"]').click();
+  await page.locator('[data-testId="profile-color-palette-diverging"]').click();
+  await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+  await sleep(1_000);
+
+  const divergingThreeTitleInput = page.locator(
+    'input[name="custom-color-palette-title"]'
+  );
+  await divergingThreeTitleInput.waitFor({ state: "visible", timeout: 5000 });
+  await divergingThreeTitleInput.click();
+  await divergingThreeTitleInput.fill("Diverging Palette (3)");
+  await page.keyboard.press("Enter");
+  await page.waitForTimeout(500);
+
+  await page.locator('[data-testId="profile-save-color-palette"]').click();
+  await sleep(1_000);
+
+  const divergingThreeTitleExists = await page
+    .getByText("Diverging Palette (3)")
+    .isVisible();
+  expect(divergingThreeTitleExists).toBe(true);
+
+  //Update Color palettes
+  //Edit Categorical Palette add more colors
+  await page
+    .getByRole("button", { name: "Edit Color Palette" })
+    .first()
+    .click();
+
+  await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+  await sleep(1_000);
+
+  for (let i = 0; i < 3; i++) {
+    await addNewColor(page, i);
+  }
+  await page.locator('[data-testId="profile-save-color-palette"]').click();
+  await sleep(1_000);
+
+  //Edit Sequential Palette change type
+  await page
+    .getByRole("button", { name: "Edit Color Palette" })
+    .first()
+    .click();
+  await page
+    .locator('[data-testId="profile-color-palette-categorical"]')
+    .click();
+
+  await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+  await sleep(1_000);
+
+  for (let i = 0; i < 3; i++) {
+    await addNewColor(page, i);
+  }
+  await page.locator('[data-testId="profile-save-color-palette"]').click();
+  await sleep(1_000);
+
+  //Delete Color palettes
+  for (let i = 0; i < 4; i++) {
+    await page
+      .getByRole("button", { name: "Delete Color Palette" })
+      .first()
+      .click();
+  }
+});

From f8047bd0715bb53d0a1df322cba04c345d1d3c58 Mon Sep 17 00:00:00 2001
From: Noah Onyejese <129368606+noahonyejese@users.noreply.github.com>
Date: Wed, 19 Feb 2025 12:44:43 +0100
Subject: [PATCH 05/16] refactor: data-testId => data-testid

---
 app/charts/shared/legend-color.tsx            |  2 +-
 app/configurator/components/color-picker.tsx  |  8 ++---
 .../color-palettes/color-palette-types.tsx    |  2 +-
 .../profile-color-palette-content.tsx         |  4 +--
 .../profile-color-palette-form.tsx            |  4 +--
 app/login/components/login-menu.tsx           |  2 +-
 app/login/components/profile-content-tabs.tsx |  2 +-
 e2e/common.ts                                 |  2 +-
 e2e/custom-color-palette.spec.ts              | 34 +++++++++----------
 e2e/custom-color-picker.spec.ts               |  6 ++--
 e2e/filters.spec.ts                           |  2 +-
 11 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/app/charts/shared/legend-color.tsx b/app/charts/shared/legend-color.tsx
index 99a0768b0b..04a403b3fa 100644
--- a/app/charts/shared/legend-color.tsx
+++ b/app/charts/shared/legend-color.tsx
@@ -203,7 +203,7 @@ export const LegendColor = memo(function LegendColor(props: LegendColorProps) {
             component={dimensionsById[chartConfig.fields.segment.componentId]}
           >
             <Typography
-              data-testId="legendTitle"
+              data-testid="legendTitle"
               component="div"
               variant="caption"
               color="primary.main"
diff --git a/app/configurator/components/color-picker.tsx b/app/configurator/components/color-picker.tsx
index 4463d57f63..6c9ee0fc59 100644
--- a/app/configurator/components/color-picker.tsx
+++ b/app/configurator/components/color-picker.tsx
@@ -82,7 +82,7 @@ const CustomColorPicker = ({
         }}
       >
         <Saturation
-          data-testId="color-picker-saturation"
+          data-testid="color-picker-saturation"
           hsva={hsva}
           onChange={(newColor) =>
             setHsva((ps) => ({ ...ps, ...newColor, a: ps.a }))
@@ -103,10 +103,10 @@ const CustomColorPicker = ({
               backgroundColor: hsvaToHex(hsva),
               borderRadius: "50%",
             }}
-            data-testId="color-square"
+            data-testid="color-square"
           />
           <Hue
-            data-testId="color-picker-hue"
+            data-testid="color-picker-hue"
             hue={hsva.h}
             onChange={(newHue) => setHsva((ps) => ({ ...ps, ...newHue }))}
             style={{ width: "100%", height: "8px" }}
@@ -130,7 +130,7 @@ const CustomColorPicker = ({
             onChange={updateColorInput}
           />
           <ChromePicker
-            data-testId="color-picker-chrome"
+            data-testid="color-picker-chrome"
             showAlpha={false}
             showHue={false}
             showColorPreview={false}
diff --git a/app/login/components/color-palettes/color-palette-types.tsx b/app/login/components/color-palettes/color-palette-types.tsx
index 0ab0634aad..ef3d13cfee 100644
--- a/app/login/components/color-palettes/color-palette-types.tsx
+++ b/app/login/components/color-palettes/color-palette-types.tsx
@@ -241,7 +241,7 @@ const CategoricalColorPaletteCreator = (props: ColorPaletteCreatorProps) => {
       <Button
         variant="text"
         fullWidth
-        data-testId="profile-add-new-color"
+        data-testid="profile-add-new-color"
         className={classes.addColorButton}
         disabled={CATEGORICAL_MAX_ALLOWED_COLORS <= colorValues.length}
         startIcon={<Icon name="add" />}
diff --git a/app/login/components/color-palettes/profile-color-palette-content.tsx b/app/login/components/color-palettes/profile-color-palette-content.tsx
index 40a9cc6544..f4ba61109b 100644
--- a/app/login/components/color-palettes/profile-color-palette-content.tsx
+++ b/app/login/components/color-palettes/profile-color-palette-content.tsx
@@ -94,7 +94,7 @@ export const ProfileColorPaletteContent = ({
             startIcon={<Icon name="add" />}
             sx={{ width: "fit-content" }}
             onClick={showAddForm}
-            data-testId="add-profile-color-palette"
+            data-testid="add-profile-color-palette"
           >
             <Trans id="login.profile.my-color-palettes.add" />
           </Button>
@@ -165,7 +165,7 @@ const ColorPaletteRow = ({
 
   return (
     <ColorRowFlex
-      data-testId="profile-color-palette-row"
+      data-testid="profile-color-palette-row"
       sx={{
         paddingY: 3,
         paddingRight: 4,
diff --git a/app/login/components/color-palettes/profile-color-palette-form.tsx b/app/login/components/color-palettes/profile-color-palette-form.tsx
index 426b03c1c0..2221dcacc3 100644
--- a/app/login/components/color-palettes/profile-color-palette-form.tsx
+++ b/app/login/components/color-palettes/profile-color-palette-form.tsx
@@ -191,7 +191,7 @@ const ProfileColorPaletteForm = ({
         <Box className={classes.saveButtonContainer}>
           <Button
             onClick={saveColorPalette}
-            data-testId="profile-save-color-palette"
+            data-testid="profile-save-color-palette"
             disabled={
               colorValues.length === 0 || titleInput === "" || noChanges
             }
@@ -246,7 +246,7 @@ const ColorPaletteTypeSelector = ({
               flexDirection={"column"}
               gap={2}
             >
-              <Box data-testId={`profile-color-palette-${type}`}>
+              <Box data-testid={`profile-color-palette-${type}`}>
                 <Radio
                   label={capitalize(type)}
                   value={type}
diff --git a/app/login/components/login-menu.tsx b/app/login/components/login-menu.tsx
index 571dad0b8a..9bda4cfe20 100644
--- a/app/login/components/login-menu.tsx
+++ b/app/login/components/login-menu.tsx
@@ -96,7 +96,7 @@ export const LoginMenu = () => {
         </>
       ) : (
         <Button
-          data-testId="test-sign-in"
+          data-testid="test-sign-in"
           variant="text"
           color="primary"
           size="small"
diff --git a/app/login/components/profile-content-tabs.tsx b/app/login/components/profile-content-tabs.tsx
index 9b1f66c90d..2454dab3b4 100644
--- a/app/login/components/profile-content-tabs.tsx
+++ b/app/login/components/profile-content-tabs.tsx
@@ -99,7 +99,7 @@ export const ProfileContentTabs = (props: ProfileContentTabsProps) => {
                 value="published"
               />
               <Tab
-                data-testId="color-palettes-tab"
+                data-testid="color-palettes-tab"
                 className={classes.tab}
                 label={t({
                   id: "login.profile.my-color-palettes",
diff --git a/e2e/common.ts b/e2e/common.ts
index 62d44c59a2..9fddf74321 100644
--- a/e2e/common.ts
+++ b/e2e/common.ts
@@ -19,7 +19,7 @@ const setup = (contextOptions?: PlaywrightTestOptions["contextOptions"]) => {
   }>({
     auth: async ({ page }, use) => {
       const auth = async () => {
-        const signInBtn = page.locator('[data-testId="test-sign-in"]');
+        const signInBtn = page.locator('[data-testid="test-sign-in"]');
         await signInBtn.waitFor({ state: "visible", timeout: 5000 });
         await signInBtn.click();
       };
diff --git a/e2e/custom-color-palette.spec.ts b/e2e/custom-color-palette.spec.ts
index cc1d3c34be..26ccaa02a2 100644
--- a/e2e/custom-color-palette.spec.ts
+++ b/e2e/custom-color-palette.spec.ts
@@ -5,12 +5,12 @@ import { setup, sleep } from "./common";
 const { test, expect, describe } = setup();
 
 const addNewColor = async (page: Page, i: number) => {
-  await page.locator('[data-testId="profile-add-new-color"]').click();
+  await page.locator('[data-testid="profile-add-new-color"]').click();
 
   await page.getByRole("button", { name: "Open Color Picker" }).last().click();
   await sleep(1_000);
 
-  const saturation = page.locator('[data-testId="color-picker-saturation"]');
+  const saturation = page.locator('[data-testid="color-picker-saturation"]');
   await saturation.waitFor({ state: "visible", timeout: 5000 });
 
   const box = await saturation.boundingBox();
@@ -38,10 +38,10 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
   await page.goto("/en/profile");
   const url = page.url();
   expect(url.endsWith("/en/profile")).toBe(true);
-  await page.locator('[data-testId="color-palettes-tab"]').click();
+  await page.locator('[data-testid="color-palettes-tab"]').click();
 
   //Create Categorical Palette
-  await page.locator('[data-testId="add-profile-color-palette"]').click();
+  await page.locator('[data-testid="add-profile-color-palette"]').click();
   await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
   await sleep(1_000);
 
@@ -57,7 +57,7 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
   for (let i = 0; i < 3; i++) {
     await addNewColor(page, i);
   }
-  await page.locator('[data-testId="profile-save-color-palette"]').click();
+  await page.locator('[data-testid="profile-save-color-palette"]').click();
   await sleep(1_000);
 
   const categoricalTitleExists = await page
@@ -66,9 +66,9 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
   expect(categoricalTitleExists).toBe(true);
 
   //Create Sequential Palette
-  await page.locator('[data-testId="add-profile-color-palette"]').click();
+  await page.locator('[data-testid="add-profile-color-palette"]').click();
   await page
-    .locator('[data-testId="profile-color-palette-sequential"]')
+    .locator('[data-testid="profile-color-palette-sequential"]')
     .click();
   await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
   await sleep(1_000);
@@ -82,7 +82,7 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
   await page.keyboard.press("Enter");
   await page.waitForTimeout(500);
 
-  await page.locator('[data-testId="profile-save-color-palette"]').click();
+  await page.locator('[data-testid="profile-save-color-palette"]').click();
   await sleep(1_000);
 
   const sequentialTitleExists = await page
@@ -91,8 +91,8 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
   expect(sequentialTitleExists).toBe(true);
 
   //Create Diverging Palette (2 colors)
-  await page.locator('[data-testId="add-profile-color-palette"]').click();
-  await page.locator('[data-testId="profile-color-palette-diverging"]').click();
+  await page.locator('[data-testid="add-profile-color-palette"]').click();
+  await page.locator('[data-testid="profile-color-palette-diverging"]').click();
   await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
   await sleep(1_000);
 
@@ -108,7 +108,7 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
   await page.getByRole("button", { name: "Remove Color" }).first().click();
   await sleep(1_000);
 
-  await page.locator('[data-testId="profile-save-color-palette"]').click();
+  await page.locator('[data-testid="profile-save-color-palette"]').click();
   await sleep(1_000);
 
   const divergingTwoTitleExists = await page
@@ -117,8 +117,8 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
   expect(divergingTwoTitleExists).toBe(true);
 
   //Create Diverging Palette (3 colors)
-  await page.locator('[data-testId="add-profile-color-palette"]').click();
-  await page.locator('[data-testId="profile-color-palette-diverging"]').click();
+  await page.locator('[data-testid="add-profile-color-palette"]').click();
+  await page.locator('[data-testid="profile-color-palette-diverging"]').click();
   await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
   await sleep(1_000);
 
@@ -131,7 +131,7 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
   await page.keyboard.press("Enter");
   await page.waitForTimeout(500);
 
-  await page.locator('[data-testId="profile-save-color-palette"]').click();
+  await page.locator('[data-testid="profile-save-color-palette"]').click();
   await sleep(1_000);
 
   const divergingThreeTitleExists = await page
@@ -152,7 +152,7 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
   for (let i = 0; i < 3; i++) {
     await addNewColor(page, i);
   }
-  await page.locator('[data-testId="profile-save-color-palette"]').click();
+  await page.locator('[data-testid="profile-save-color-palette"]').click();
   await sleep(1_000);
 
   //Edit Sequential Palette change type
@@ -161,7 +161,7 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
     .first()
     .click();
   await page
-    .locator('[data-testId="profile-color-palette-categorical"]')
+    .locator('[data-testid="profile-color-palette-categorical"]')
     .click();
 
   await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
@@ -170,7 +170,7 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
   for (let i = 0; i < 3; i++) {
     await addNewColor(page, i);
   }
-  await page.locator('[data-testId="profile-save-color-palette"]').click();
+  await page.locator('[data-testid="profile-save-color-palette"]').click();
   await sleep(1_000);
 
   //Delete Color palettes
diff --git a/e2e/custom-color-picker.spec.ts b/e2e/custom-color-picker.spec.ts
index 6dd70f67a4..6bb4b14c3b 100644
--- a/e2e/custom-color-picker.spec.ts
+++ b/e2e/custom-color-picker.spec.ts
@@ -23,7 +23,7 @@ test("Custom Color Picker", async ({ page, selectors }) => {
     (el) => window.getComputedStyle(el).backgroundColor
   );
 
-  const saturation = page.locator('[data-testId="color-picker-saturation"]');
+  const saturation = page.locator('[data-testid="color-picker-saturation"]');
   await saturation.waitFor({ state: "visible", timeout: 5000 });
 
   await saturation.click();
@@ -47,7 +47,7 @@ test("Custom Color Picker", async ({ page, selectors }) => {
 
   expect(finalColor).toBe("rgb(255, 0, 0)");
 
-  const hue = page.locator('[data-testId="color-picker-hue"]');
+  const hue = page.locator('[data-testid="color-picker-hue"]');
   await hue.waitFor({ state: "visible", timeout: 5000 });
 
   await hue.click();
@@ -60,7 +60,7 @@ test("Custom Color Picker", async ({ page, selectors }) => {
   expect(selectedHueColor).toBe("rgb(0, 255, 248)");
 
   //FIXME: figure out a way to test the color picker pen tool in this env
-  // const picker = page.locator('[data-testId="color-picker-chrome"]');
+  // const picker = page.locator('[data-testid="color-picker-chrome"]');
   // await picker.waitFor({ state: "visible", timeout: 5000 });
 
   // await picker.click();
diff --git a/e2e/filters.spec.ts b/e2e/filters.spec.ts
index 2536242a00..ceff47d3e9 100644
--- a/e2e/filters.spec.ts
+++ b/e2e/filters.spec.ts
@@ -102,7 +102,7 @@ describe("Filters", () => {
 
     await actions.mui.selectOption("Kanton");
 
-    const legend = page.locator('[data-testId="legendTitle"]');
+    const legend = page.locator('[data-testid="legendTitle"]');
 
     await legend.waitFor({ state: "hidden", timeout: 5000 });
     await expect(legend).toHaveCount(0);

From cca66c32f1aa9cb1ddc6fd228236569c46f1e372 Mon Sep 17 00:00:00 2001
From: Noah Onyejese <129368606+noahonyejese@users.noreply.github.com>
Date: Wed, 19 Feb 2025 12:46:07 +0100
Subject: [PATCH 06/16] chore: added CHANGELOG

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d0450077a3..fc9b1bd22b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ You can also check the
   - Added option for hiding legend titles using a toggle switch
 - Maintenance
   - Added authentication method to e2e tests
+  - Added e2e tests for custom color palettes
   - Added authentication to vercel previews for easier testing
 
 # [5.2.4] - 2025-02-06

From 1418c70f616acd07d4c2514ed41767673bd4daae Mon Sep 17 00:00:00 2001
From: Noah Onyejese <129368606+noahonyejese@users.noreply.github.com>
Date: Thu, 20 Feb 2025 08:31:27 +0100
Subject: [PATCH 07/16] fix: Fixed merge conflict

---
 app/charts/shared/legend-color.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/charts/shared/legend-color.tsx b/app/charts/shared/legend-color.tsx
index 1d429f9151..42e72b68e8 100644
--- a/app/charts/shared/legend-color.tsx
+++ b/app/charts/shared/legend-color.tsx
@@ -201,16 +201,16 @@ export const LegendColor = memo(function LegendColor({
     <div>
       {showTitle && segmentComponent && (
         <OpenMetadataPanelWrapper component={segmentComponent}>
-            <Typography
-              data-testid="legendTitle"
-              component="div"
-              variant="caption"
-              color="primary.main"
-            >
-              {dimensionsById[chartConfig.fields.segment.componentId]?.label}
-            </Typography>
-          </OpenMetadataPanelWrapper>
-        )}
+          <Typography
+            data-testid="legendTitle"
+            component="div"
+            variant="caption"
+            color="primary.main"
+          >
+            {segmentComponent?.label}
+          </Typography>
+        </OpenMetadataPanelWrapper>
+      )}
       <LegendColorContent
         groups={groups}
         limits={limits?.map(({ configLimit, measureLimit }) => ({

From 74f4916e22549f0fbf4e3af7166a2dc4863772ec Mon Sep 17 00:00:00 2001
From: Noah Onyejese <129368606+noahonyejese@users.noreply.github.com>
Date: Thu, 20 Feb 2025 10:43:56 +0100
Subject: [PATCH 08/16] fix: delete correct name

---
 app/login/components/login-menu.tsx |  3 ++-
 e2e/custom-color-palette.spec.ts    | 27 ++++++++++++++++++++++-----
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/app/login/components/login-menu.tsx b/app/login/components/login-menu.tsx
index 9bda4cfe20..0fbc9afcfe 100644
--- a/app/login/components/login-menu.tsx
+++ b/app/login/components/login-menu.tsx
@@ -102,7 +102,8 @@ export const LoginMenu = () => {
           size="small"
           onClick={() =>
             isVercelPreviewHost(window.location.host) ||
-            process.env.E2E_ENV === "true"
+            process.env.E2E_ENV === "true" ||
+            process.env.NODE_ENV === "development"
               ? signIn("credentials")
               : signIn("adfs")
           }
diff --git a/e2e/custom-color-palette.spec.ts b/e2e/custom-color-palette.spec.ts
index 26ccaa02a2..553dcf9cd8 100644
--- a/e2e/custom-color-palette.spec.ts
+++ b/e2e/custom-color-palette.spec.ts
@@ -174,10 +174,27 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
   await sleep(1_000);
 
   //Delete Color palettes
-  for (let i = 0; i < 4; i++) {
-    await page
-      .getByRole("button", { name: "Delete Color Palette" })
-      .first()
-      .click();
+  const paletteNames = [
+    "Categorical Palette",
+    "Sequential Palette",
+    "Diverging Palette (2)",
+    "Diverging Palette (3)",
+  ];
+
+  for (const paletteName of paletteNames) {
+    const allRows = page.locator('[data-testid="profile-color-palette-row"]');
+    const count = await allRows.count();
+
+    for (let i = 0; i < count; i++) {
+      const row = allRows.nth(i);
+      const rowText = await row.textContent();
+
+      if (rowText && rowText.includes(paletteName)) {
+        await row.getByRole("button", { name: "Delete Color Palette" }).click();
+
+        await page.waitForTimeout(300);
+        break;
+      }
+    }
   }
 });

From c224fd856368cc6cae1c939e8bafc4a8dffc2d4f Mon Sep 17 00:00:00 2001
From: Noah Onyejese <129368606+noahonyejese@users.noreply.github.com>
Date: Thu, 20 Feb 2025 13:10:24 +0100
Subject: [PATCH 09/16] fix: tried alternative approach

---
 .../color-palettes/profile-color-palette-content.tsx      | 2 +-
 e2e/custom-color-palette.spec.ts                          | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/login/components/color-palettes/profile-color-palette-content.tsx b/app/login/components/color-palettes/profile-color-palette-content.tsx
index 754be493b0..a5c13a94e4 100644
--- a/app/login/components/color-palettes/profile-color-palette-content.tsx
+++ b/app/login/components/color-palettes/profile-color-palette-content.tsx
@@ -163,7 +163,7 @@ const ColorPaletteRow = ({
       }}
     >
       <Box>
-        <Typography variant="caption">{name}</Typography>
+        <Typography data-testid="custom-color-palette-title" variant="caption">{name}</Typography>
         <Grid
           container
           spacing={0.5}
diff --git a/e2e/custom-color-palette.spec.ts b/e2e/custom-color-palette.spec.ts
index 553dcf9cd8..7a86be37c9 100644
--- a/e2e/custom-color-palette.spec.ts
+++ b/e2e/custom-color-palette.spec.ts
@@ -187,9 +187,13 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
 
     for (let i = 0; i < count; i++) {
       const row = allRows.nth(i);
-      const rowText = await row.textContent();
 
-      if (rowText && rowText.includes(paletteName)) {
+      const titleElement = row.locator(
+        '[data-testid="custom-color-palette-title"]'
+      );
+      const titleText = await titleElement.textContent();
+
+      if (titleText && titleText.trim() === paletteName.trim()) {
         await row.getByRole("button", { name: "Delete Color Palette" }).click();
 
         await page.waitForTimeout(300);

From 02ebcfe6e86c02f5a9cb0e5a094ad6d734831780 Mon Sep 17 00:00:00 2001
From: Noah Onyejese <129368606+noahonyejese@users.noreply.github.com>
Date: Wed, 26 Feb 2025 09:13:52 +0100
Subject: [PATCH 10/16] fix: use Trans id select edit & delete button

---
 e2e/custom-color-palette.spec.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/e2e/custom-color-palette.spec.ts b/e2e/custom-color-palette.spec.ts
index 7a86be37c9..dc58d56586 100644
--- a/e2e/custom-color-palette.spec.ts
+++ b/e2e/custom-color-palette.spec.ts
@@ -142,7 +142,7 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
   //Update Color palettes
   //Edit Categorical Palette add more colors
   await page
-    .getByRole("button", { name: "Edit Color Palette" })
+    .getByRole("button", { name: "login.profile.my-color-palettes.edit" })
     .first()
     .click();
 
@@ -157,7 +157,7 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
 
   //Edit Sequential Palette change type
   await page
-    .getByRole("button", { name: "Edit Color Palette" })
+    .getByRole("button", { name: "login.profile.my-color-palettes.edit" })
     .first()
     .click();
   await page
@@ -194,7 +194,11 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
       const titleText = await titleElement.textContent();
 
       if (titleText && titleText.trim() === paletteName.trim()) {
-        await row.getByRole("button", { name: "Delete Color Palette" }).click();
+        await row
+          .getByRole("button", {
+            name: "login.profile.my-color-palettes.delete",
+          })
+          .click();
 
         await page.waitForTimeout(300);
         break;

From dc33386c86372437a88124a0983246266bf8d624 Mon Sep 17 00:00:00 2001
From: Noah Onyejese <129368606+noahonyejese@users.noreply.github.com>
Date: Wed, 26 Feb 2025 09:19:54 +0100
Subject: [PATCH 11/16] fix: clear palettes before starting test

---
 e2e/custom-color-palette.spec.ts | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/e2e/custom-color-palette.spec.ts b/e2e/custom-color-palette.spec.ts
index dc58d56586..7a6031f0f3 100644
--- a/e2e/custom-color-palette.spec.ts
+++ b/e2e/custom-color-palette.spec.ts
@@ -2,7 +2,30 @@ import { Page } from "@playwright/test";
 
 import { setup, sleep } from "./common";
 
-const { test, expect, describe } = setup();
+const { test, expect } = setup();
+
+const clearColorPalettes = async (page: Page) => {
+  while (true) {
+    const deleteButtonCount = await page
+      .getByRole("button", {
+        name: "login.profile.my-color-palettes.delete",
+      })
+      .count();
+
+    if (deleteButtonCount === 0) {
+      break;
+    }
+
+    await page
+      .getByRole("button", {
+        name: "login.profile.my-color-palettes.delete",
+      })
+      .first()
+      .click();
+
+    await page.waitForTimeout(500);
+  }
+};
 
 const addNewColor = async (page: Page, i: number) => {
   await page.locator('[data-testid="profile-add-new-color"]').click();
@@ -40,6 +63,8 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
   expect(url.endsWith("/en/profile")).toBe(true);
   await page.locator('[data-testid="color-palettes-tab"]').click();
 
+  await clearColorPalettes(page);
+
   //Create Categorical Palette
   await page.locator('[data-testid="add-profile-color-palette"]').click();
   await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));

From 7311c4d7ab156621220df762821849cc7a96b1f8 Mon Sep 17 00:00:00 2001
From: Noah Onyejese <129368606+noahonyejese@users.noreply.github.com>
Date: Wed, 26 Feb 2025 09:26:52 +0100
Subject: [PATCH 12/16] fix: resolved conflict

---
 .../components/color-palettes/profile-color-palette-form.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/login/components/color-palettes/profile-color-palette-form.tsx b/app/login/components/color-palettes/profile-color-palette-form.tsx
index f6ec4f423e..03749111a4 100644
--- a/app/login/components/color-palettes/profile-color-palette-form.tsx
+++ b/app/login/components/color-palettes/profile-color-palette-form.tsx
@@ -309,7 +309,7 @@ const ColorPaletteTypeSelector = ({
             >
               <Box data-testid={`profile-color-palette-${type}`}>
                 <Radio
-                  label={capitalize(type)}
+                  label={colorTypes[type]}
                   value={type}
                   checked={type === selectedType}
                   onChange={handleChange}

From 85b8bc8fd4724d9ad9f7c43975dc6a60dc74c19a Mon Sep 17 00:00:00 2001
From: Noah Onyejese <129368606+noahonyejese@users.noreply.github.com>
Date: Wed, 26 Feb 2025 13:59:14 +0100
Subject: [PATCH 13/16] fix: added timout to tab

---
 e2e/custom-color-palette.spec.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/e2e/custom-color-palette.spec.ts b/e2e/custom-color-palette.spec.ts
index 7a6031f0f3..31ce0de040 100644
--- a/e2e/custom-color-palette.spec.ts
+++ b/e2e/custom-color-palette.spec.ts
@@ -61,7 +61,9 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
   await page.goto("/en/profile");
   const url = page.url();
   expect(url.endsWith("/en/profile")).toBe(true);
-  await page.locator('[data-testid="color-palettes-tab"]').click();
+  const tab = page.locator('[data-testid="color-palettes-tab"]');
+  await tab.waitFor({ state: "visible", timeout: 5000 });
+  await tab.click();
 
   await clearColorPalettes(page);
 

From eb3ab477cc5fdaade20bb1b9dcd0524095357b95 Mon Sep 17 00:00:00 2001
From: Noah Onyejese <129368606+noahonyejese@users.noreply.github.com>
Date: Fri, 28 Feb 2025 09:05:02 +0100
Subject: [PATCH 14/16] fix: await titles visibility

---
 e2e/custom-color-palette.spec.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/e2e/custom-color-palette.spec.ts b/e2e/custom-color-palette.spec.ts
index 31ce0de040..f20fc0d8f7 100644
--- a/e2e/custom-color-palette.spec.ts
+++ b/e2e/custom-color-palette.spec.ts
@@ -87,6 +87,7 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
   await page.locator('[data-testid="profile-save-color-palette"]').click();
   await sleep(1_000);
 
+  await categoricalTitleInput.waitFor({ state: "visible", timeout: 10000 });
   const categoricalTitleExists = await page
     .getByText("Categorical Palette")
     .isVisible();
@@ -112,6 +113,7 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
   await page.locator('[data-testid="profile-save-color-palette"]').click();
   await sleep(1_000);
 
+  await sequentialTitleInput.waitFor({ state: "visible", timeout: 10000 });
   const sequentialTitleExists = await page
     .getByText("Sequential Palette")
     .isVisible();
@@ -138,6 +140,7 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
   await page.locator('[data-testid="profile-save-color-palette"]').click();
   await sleep(1_000);
 
+  await divergingTwoTitleInput.waitFor({ state: "visible", timeout: 10000 });
   const divergingTwoTitleExists = await page
     .getByText("Diverging Palette (2)")
     .isVisible();
@@ -161,6 +164,7 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
   await page.locator('[data-testid="profile-save-color-palette"]').click();
   await sleep(1_000);
 
+  await divergingThreeTitleInput.waitFor({ state: "visible", timeout: 10000 });
   const divergingThreeTitleExists = await page
     .getByText("Diverging Palette (3)")
     .isVisible();

From 65b3dbcfc12255e767c5232ee2d84d91c147380b Mon Sep 17 00:00:00 2001
From: Noah Onyejese <129368606+noahonyejese@users.noreply.github.com>
Date: Fri, 28 Feb 2025 09:30:41 +0100
Subject: [PATCH 15/16] fix: Added more explicit locator & awaiting

---
 .../profile-color-palette-content.tsx           |  5 ++++-
 e2e/custom-color-palette.spec.ts                | 17 ++++-------------
 2 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/app/login/components/color-palettes/profile-color-palette-content.tsx b/app/login/components/color-palettes/profile-color-palette-content.tsx
index a5c13a94e4..b5c8016a06 100644
--- a/app/login/components/color-palettes/profile-color-palette-content.tsx
+++ b/app/login/components/color-palettes/profile-color-palette-content.tsx
@@ -163,7 +163,9 @@ const ColorPaletteRow = ({
       }}
     >
       <Box>
-        <Typography data-testid="custom-color-palette-title" variant="caption">{name}</Typography>
+        <Typography data-testid="custom-color-palette-title" variant="caption">
+          {name}
+        </Typography>
         <Grid
           container
           spacing={0.5}
@@ -200,6 +202,7 @@ const ColorPaletteRow = ({
           </Typography>
         </EditButton>
         <DeleteButton
+          data-testid="profile-delete-color-palette"
           disabled={deleteColorPalette.status === "fetching"}
           onClick={handleDelete}
         >
diff --git a/e2e/custom-color-palette.spec.ts b/e2e/custom-color-palette.spec.ts
index f20fc0d8f7..d7ff57cd54 100644
--- a/e2e/custom-color-palette.spec.ts
+++ b/e2e/custom-color-palette.spec.ts
@@ -7,9 +7,7 @@ const { test, expect } = setup();
 const clearColorPalettes = async (page: Page) => {
   while (true) {
     const deleteButtonCount = await page
-      .getByRole("button", {
-        name: "login.profile.my-color-palettes.delete",
-      })
+      .locator('[data-testid="profile-delete-color-palette"]')
       .count();
 
     if (deleteButtonCount === 0) {
@@ -17,9 +15,7 @@ const clearColorPalettes = async (page: Page) => {
     }
 
     await page
-      .getByRole("button", {
-        name: "login.profile.my-color-palettes.delete",
-      })
+      .locator('[data-testid="profile-delete-color-palette"]')
       .first()
       .click();
 
@@ -65,6 +61,7 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
   await tab.waitFor({ state: "visible", timeout: 5000 });
   await tab.click();
 
+  await page.waitForLoadState("networkidle");
   await clearColorPalettes(page);
 
   //Create Categorical Palette
@@ -87,7 +84,6 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
   await page.locator('[data-testid="profile-save-color-palette"]').click();
   await sleep(1_000);
 
-  await categoricalTitleInput.waitFor({ state: "visible", timeout: 10000 });
   const categoricalTitleExists = await page
     .getByText("Categorical Palette")
     .isVisible();
@@ -113,7 +109,6 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
   await page.locator('[data-testid="profile-save-color-palette"]').click();
   await sleep(1_000);
 
-  await sequentialTitleInput.waitFor({ state: "visible", timeout: 10000 });
   const sequentialTitleExists = await page
     .getByText("Sequential Palette")
     .isVisible();
@@ -140,7 +135,6 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
   await page.locator('[data-testid="profile-save-color-palette"]').click();
   await sleep(1_000);
 
-  await divergingTwoTitleInput.waitFor({ state: "visible", timeout: 10000 });
   const divergingTwoTitleExists = await page
     .getByText("Diverging Palette (2)")
     .isVisible();
@@ -164,7 +158,6 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
   await page.locator('[data-testid="profile-save-color-palette"]').click();
   await sleep(1_000);
 
-  await divergingThreeTitleInput.waitFor({ state: "visible", timeout: 10000 });
   const divergingThreeTitleExists = await page
     .getByText("Diverging Palette (3)")
     .isVisible();
@@ -226,9 +219,7 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
 
       if (titleText && titleText.trim() === paletteName.trim()) {
         await row
-          .getByRole("button", {
-            name: "login.profile.my-color-palettes.delete",
-          })
+          .locator('[data-testid="profile-delete-color-palette"]')
           .click();
 
         await page.waitForTimeout(300);

From 042b177ca8b6fe9e23a0db996a7494d7bf49ebf6 Mon Sep 17 00:00:00 2001
From: Noah Onyejese <129368606+noahonyejese@users.noreply.github.com>
Date: Fri, 28 Feb 2025 13:16:31 +0100
Subject: [PATCH 16/16] fix: await after saving

---
 e2e/custom-color-palette.spec.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/e2e/custom-color-palette.spec.ts b/e2e/custom-color-palette.spec.ts
index d7ff57cd54..4979111b29 100644
--- a/e2e/custom-color-palette.spec.ts
+++ b/e2e/custom-color-palette.spec.ts
@@ -82,6 +82,7 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
     await addNewColor(page, i);
   }
   await page.locator('[data-testid="profile-save-color-palette"]').click();
+  await page.waitForLoadState("networkidle");
   await sleep(1_000);
 
   const categoricalTitleExists = await page
@@ -95,6 +96,7 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
     .locator('[data-testid="profile-color-palette-sequential"]')
     .click();
   await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+  await page.waitForLoadState("networkidle");
   await sleep(1_000);
 
   const sequentialTitleInput = page.locator(
@@ -133,6 +135,7 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
   await sleep(1_000);
 
   await page.locator('[data-testid="profile-save-color-palette"]').click();
+  await page.waitForLoadState("networkidle");
   await sleep(1_000);
 
   const divergingTwoTitleExists = await page
@@ -156,6 +159,7 @@ test("Custom color palettes on profile page should allow CREATE, UPDATE and DELE
   await page.waitForTimeout(500);
 
   await page.locator('[data-testid="profile-save-color-palette"]').click();
+  await page.waitForLoadState("networkidle");
   await sleep(1_000);
 
   const divergingThreeTitleExists = await page