From 2eafa7d7a8f6c03ffa844aafc6207f051f158ee4 Mon Sep 17 00:00:00 2001
From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com>
Date: Wed, 8 Oct 2025 17:00:24 -0500
Subject: [PATCH 1/7] delete unecessary test

---
 e2e/decoder.spec.ts | 34 ----------------------------------
 1 file changed, 34 deletions(-)

diff --git a/e2e/decoder.spec.ts b/e2e/decoder.spec.ts
index dc6e7231..623a7130 100644
--- a/e2e/decoder.spec.ts
+++ b/e2e/decoder.spec.ts
@@ -105,32 +105,6 @@ test.describe("Can generate JWT examples", () => {
     await page.goto(E2E_BASE_URL);
   });
 
-  test("Can open and close JWT Decoder example widget", async ({ page }) => {
-    const lang = await getLang(page);
-    expectToBeNonNull(lang);
-
-    const pickersUiDictionary = getPickersUiDictionary(lang);
-
-    const decoderWidget = page.getByTestId(dataTestidDictionary.decoder.id);
-
-    const exampleButton = decoderWidget.getByRole("button", {
-      name: pickersUiDictionary.exampleAlgPicker.label,
-    });
-
-    await exampleButton.click();
-
-    await expect(exampleButton).not.toBeVisible();
-
-    const closeButton = page.getByRole("button", {
-      name: pickersUiDictionary.exampleAlgPicker.closeButton.label,
-    });
-
-    await closeButton.click();
-
-    await expect(exampleButton).toBeVisible();
-    await expect(closeButton).not.toBeVisible();
-  });
-
   test.describe("Can generate a JWT decoder example", () => {
     test.beforeEach(async ({ page }) => {
       const lang = await getLang(page);
@@ -140,14 +114,6 @@ test.describe("Can generate JWT examples", () => {
 
       const decoderWidget = page.getByTestId(dataTestidDictionary.decoder.id);
 
-      const exampleButton = decoderWidget.getByRole("button", {
-        name: pickersUiDictionary.exampleAlgPicker.label,
-      });
-
-      await exampleButton.click();
-
-      await expect(exampleButton).not.toBeVisible();
-
       const pickerIndicator = decoderWidget.getByText(
         pickersUiDictionary.exampleAlgPicker.defaultValue,
       );

From 47ddaabe703973d6486cd04543be1f7c0eb862cb Mon Sep 17 00:00:00 2001
From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com>
Date: Wed, 8 Oct 2025 17:01:16 -0500
Subject: [PATCH 2/7] add aria-label to card toolbar button

---
 .../card-toolbar-button/card-toolbar-button.component.tsx        | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/features/common/components/card-toolbar-button/card-toolbar-button.component.tsx b/src/features/common/components/card-toolbar-button/card-toolbar-button.component.tsx
index c6de263b..5742102d 100644
--- a/src/features/common/components/card-toolbar-button/card-toolbar-button.component.tsx
+++ b/src/features/common/components/card-toolbar-button/card-toolbar-button.component.tsx
@@ -36,6 +36,7 @@ export const CardToolbarButtonComponent: React.FC<
           MonoFont.className
         )}
         data-style="compact"
+        aria-label={tooltipText}
       >
         {children}
       </button>

From 4a359983243536aaee3e667ae25f2ce7541f831f Mon Sep 17 00:00:00 2001
From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com>
Date: Wed, 8 Oct 2025 17:01:32 -0500
Subject: [PATCH 3/7] fix jsx syntax on icons components

---
 src/app/apple-icon.tsx                        | 40 +++++++++----------
 src/app/icon.tsx                              | 40 +++++++++----------
 .../assets/arrow-head-icon.component.tsx      |  6 +--
 .../common/assets/download-icon.component.tsx | 12 +++---
 .../ribbon/assets/dark-icon.component.tsx     |  4 +-
 .../ribbon/assets/light-icon.component.tsx    |  6 +--
 .../ribbon/assets/system-icon.component.tsx   | 12 +++---
 7 files changed, 60 insertions(+), 60 deletions(-)

diff --git a/src/app/apple-icon.tsx b/src/app/apple-icon.tsx
index f594f156..85294345 100644
--- a/src/app/apple-icon.tsx
+++ b/src/app/apple-icon.tsx
@@ -86,62 +86,62 @@ export default function Icon({ id }: { id: string }) {
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M149.242 69.9406V0H110.241V69.9406L129.742 96.7209L149.242 69.9406Z"
             fill="white"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M110.241 190.06V260H149.242V190.06L129.742 163.279L110.241 190.06Z"
             fill="white"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M149.242 190.068L190.322 246.749L222.042 223.609L180.702 167.188L149.242 156.788V190.068Z"
             fill="#48E7CA"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M110.241 69.9413L69.1611 13.2607L37.4408 36.401L78.7811 92.8215L110.241 103.222V69.9413Z"
             fill="#48E7CA"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M78.7807 92.8243L12.2201 71.2441L0 108.424L66.5606 130.005L98.2809 119.865L78.7807 92.8243Z"
             fill="#3F59E4"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M161.201 140.141L180.701 167.181L247.261 188.762L259.481 151.581L192.921 130.001L161.201 140.141Z"
             fill="#3F59E4"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M192.921 130.005L259.481 108.424L247.261 71.2441L180.701 92.8243L161.201 119.865L192.921 130.005Z"
             fill="#FF44DD"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M66.5606 130.001L0 151.581L12.2201 188.762L78.7807 167.181L98.2809 140.141L66.5606 130.001Z"
             fill="#FF44DD"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M78.7811 167.188L37.4408 223.609L69.1611 246.749L110.241 190.068V156.788L78.7811 167.188Z"
             fill="#FF4F40"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M180.702 92.8215L222.042 36.401L190.322 13.2607L149.242 69.9413V103.222L180.702 92.8215Z"
             fill="#FF4F40"
           />
diff --git a/src/app/icon.tsx b/src/app/icon.tsx
index 61cc18cc..1b981273 100644
--- a/src/app/icon.tsx
+++ b/src/app/icon.tsx
@@ -66,62 +66,62 @@ export default function Icon({ id }: { id: string }) {
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M149.242 69.9406V0H110.241V69.9406L129.742 96.7209L149.242 69.9406Z"
             fill="white"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M110.241 190.06V260H149.242V190.06L129.742 163.279L110.241 190.06Z"
             fill="white"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M149.242 190.068L190.322 246.749L222.042 223.609L180.702 167.188L149.242 156.788V190.068Z"
             fill="#48E7CA"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M110.241 69.9413L69.1611 13.2607L37.4408 36.401L78.7811 92.8215L110.241 103.222V69.9413Z"
             fill="#48E7CA"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M78.7807 92.8243L12.2201 71.2441L0 108.424L66.5606 130.005L98.2809 119.865L78.7807 92.8243Z"
             fill="#3F59E4"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M161.201 140.141L180.701 167.181L247.261 188.762L259.481 151.581L192.921 130.001L161.201 140.141Z"
             fill="#3F59E4"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M192.921 130.005L259.481 108.424L247.261 71.2441L180.701 92.8243L161.201 119.865L192.921 130.005Z"
             fill="#FF44DD"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M66.5606 130.001L0 151.581L12.2201 188.762L78.7807 167.181L98.2809 140.141L66.5606 130.001Z"
             fill="#FF44DD"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M78.7811 167.188L37.4408 223.609L69.1611 246.749L110.241 190.068V156.788L78.7811 167.188Z"
             fill="#FF4F40"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M180.702 92.8215L222.042 36.401L190.322 13.2607L149.242 69.9413V103.222L180.702 92.8215Z"
             fill="#FF4F40"
           />
diff --git a/src/features/common/assets/arrow-head-icon.component.tsx b/src/features/common/assets/arrow-head-icon.component.tsx
index a0a25859..0910b453 100644
--- a/src/features/common/assets/arrow-head-icon.component.tsx
+++ b/src/features/common/assets/arrow-head-icon.component.tsx
@@ -12,9 +12,9 @@ export const ArrowHeadIconComponent: React.FC = () => {
       <path
         d="M6 4L10 8L6 12"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       ></path>
     </svg>
   );
diff --git a/src/features/common/assets/download-icon.component.tsx b/src/features/common/assets/download-icon.component.tsx
index c7eb7ec2..f401a279 100644
--- a/src/features/common/assets/download-icon.component.tsx
+++ b/src/features/common/assets/download-icon.component.tsx
@@ -12,16 +12,16 @@ export const DownloadIconComponent: React.FC = () => {
       <path
         d="M8 10V2M8 10L11 7M8 10L5 7"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       ></path>
       <path
         d="M1 11V12C1 13.6569 2.34315 15 4 15H12C13.6569 15 15 13.6569 15 12V11"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       ></path>
     </svg>
   );
diff --git a/src/features/common/components/bars/ribbon/assets/dark-icon.component.tsx b/src/features/common/components/bars/ribbon/assets/dark-icon.component.tsx
index 7607d241..3961a806 100644
--- a/src/features/common/components/bars/ribbon/assets/dark-icon.component.tsx
+++ b/src/features/common/components/bars/ribbon/assets/dark-icon.component.tsx
@@ -12,8 +12,8 @@ export const DarkIconComponent: React.FC = () => {
       <path
         d="M14.2252 10.0845C14.54 9.95039 14.8559 10.244 14.7134 10.555C14.3379 11.3742 13.8066 12.1157 13.1463 12.7369C12.2739 13.5575 11.2056 14.1406 10.0435 14.4303C8.88133 14.7201 7.6643 14.7068 6.50878 14.3918C5.35325 14.0767 4.29789 13.4705 3.44363 12.631C2.58937 11.7915 1.9648 10.7469 1.62965 9.59707C1.2945 8.44722 1.25998 7.23061 1.52941 6.06361C1.79883 4.89661 2.36318 3.81825 3.16847 2.9317C3.76901 2.27056 4.48855 1.73258 5.28668 1.34413C5.59577 1.1937 5.88975 1.51373 5.74469 1.82539V1.82539C3.32126 7.032 8.59731 12.4835 13.8804 10.2315L14.2252 10.0845Z"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
       ></path>
     </svg>
   );
diff --git a/src/features/common/components/bars/ribbon/assets/light-icon.component.tsx b/src/features/common/components/bars/ribbon/assets/light-icon.component.tsx
index d1f78402..05f3eebe 100644
--- a/src/features/common/components/bars/ribbon/assets/light-icon.component.tsx
+++ b/src/features/common/components/bars/ribbon/assets/light-icon.component.tsx
@@ -16,11 +16,11 @@ export const LightIconComponent: React.FC = () => {
         height="6"
         rx="3"
         stroke="currentColor"
-        stroke-width="1.5"
+        strokeWidth="1.5"
       ></rect>
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M8 0.25C7.58579 0.25 7.25 0.585786 7.25 1L7.25391 1.07715C7.29248 1.45517 7.6118 1.75 8 1.75C8.41421 1.75 8.75 1.41421 8.75 1C8.75 0.585786 8.41421 0.25 8 0.25ZM8 14.25C7.58579 14.25 7.25 14.5858 7.25 15L7.25391 15.0771C7.29248 15.4552 7.6118 15.75 8 15.75C8.41421 15.75 8.75 15.4142 8.75 15C8.75 14.5858 8.41421 14.25 8 14.25ZM15.0771 7.25391C15.4552 7.29248 15.75 7.6118 15.75 8C15.75 8.3882 15.4552 8.70752 15.0771 8.74609L15 8.75C14.5858 8.75 14.25 8.41421 14.25 8C14.25 7.58579 14.5858 7.25 15 7.25L15.0771 7.25391ZM1.75 8C1.75 7.6118 1.45517 7.29248 1.07715 7.25391L1 7.25C0.585786 7.25 0.25 7.58579 0.25 8C0.25 8.41421 0.585786 8.75 1 8.75L1.07715 8.74609C1.45517 8.70752 1.75 8.3882 1.75 8Z"
         fill="currentColor"
       ></path>
diff --git a/src/features/common/components/bars/ribbon/assets/system-icon.component.tsx b/src/features/common/components/bars/ribbon/assets/system-icon.component.tsx
index dbc0ed77..17d5c982 100644
--- a/src/features/common/components/bars/ribbon/assets/system-icon.component.tsx
+++ b/src/features/common/components/bars/ribbon/assets/system-icon.component.tsx
@@ -12,7 +12,7 @@ export const SystemIconComponent: React.FC = () => {
       <path
         d="M1 4V12C1 13.6569 2.34315 15 4 15H12C13.6569 15 15 13.6569 15 12V4C15 2.34315 13.6569 1 12 1H4C2.34315 1 1 2.34315 1 4Z"
         stroke="currentColor"
-        stroke-width="1.5"
+        strokeWidth="1.5"
       ></path>
       <rect
         x="4"
@@ -20,8 +20,8 @@ export const SystemIconComponent: React.FC = () => {
         width="8"
         height="5"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
       ></rect>
       <rect
         x="11.25"
@@ -34,9 +34,9 @@ export const SystemIconComponent: React.FC = () => {
       <path
         d="M4 12H10"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       ></path>
     </svg>
   );

From 17221cf1a3153a80be7911895a2c45249201bb1b Mon Sep 17 00:00:00 2001
From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com>
Date: Tue, 21 Oct 2025 08:34:35 -0500
Subject: [PATCH 4/7] add data test id to encoding format switch

---
 .../encoding-format-toggle-switch.tsx                       | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/features/decoder/components/encoding-format-toggle-swith/encoding-format-toggle-switch.tsx b/src/features/decoder/components/encoding-format-toggle-swith/encoding-format-toggle-switch.tsx
index bd034ce4..e9a56160 100644
--- a/src/features/decoder/components/encoding-format-toggle-swith/encoding-format-toggle-switch.tsx
+++ b/src/features/decoder/components/encoding-format-toggle-swith/encoding-format-toggle-switch.tsx
@@ -6,6 +6,7 @@ import { getPickersUiDictionary } from "@/features/localization/services/ui-lang
 import { Switch } from "react-aria-components";
 import clsx from "clsx";
 import { useEncoderStore } from "@/features/encoder/services/encoder.store";
+import { dataTestidDictionary } from "@/libs/testing/data-testid.dictionary";
 
 interface EncodingFormatToggleSwitchComponentProps {
   languageCode: string;
@@ -45,7 +46,10 @@ export const EncodingFormatToggleSwitchComponent: React.FC<
         <div className={styles.label}>
           <span className={styles.fullLabel}>Base64URL Encoded?</span>
         </div>
-        <label className={styles.switch__container}>
+        <label
+          className={styles.switch__container}
+          data-testid={dataTestidDictionary.encoder.switch}
+        >
           <input
             type="checkbox"
             role="switch"

From 7b73a1542d36defdfee37e8152790c3c26f504c9 Mon Sep 17 00:00:00 2001
From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com>
Date: Tue, 21 Oct 2025 08:35:05 -0500
Subject: [PATCH 5/7] add switch id to data test dictionary

---
 src/libs/testing/data-testid.dictionary.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/libs/testing/data-testid.dictionary.ts b/src/libs/testing/data-testid.dictionary.ts
index 5285be6f..74057789 100644
--- a/src/libs/testing/data-testid.dictionary.ts
+++ b/src/libs/testing/data-testid.dictionary.ts
@@ -74,6 +74,7 @@ export const dataTestidDictionary = {
   },
   encoder: {
     id: "encoder",
+    switch: 'encoder_switch',
     headerEditor: {
       id: "encoder__headerEditor",
       statusBar: {

From 9b2d905e04eda688e112eb44fb71ea0023d71b1e Mon Sep 17 00:00:00 2001
From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com>
Date: Tue, 21 Oct 2025 08:35:30 -0500
Subject: [PATCH 6/7] fix decoder e2e tests

---
 e2e/decoder.spec.ts | 126 +++++++++++++++++++++++---------------------
 1 file changed, 67 insertions(+), 59 deletions(-)

diff --git a/e2e/decoder.spec.ts b/e2e/decoder.spec.ts
index 623a7130..c9b367bf 100644
--- a/e2e/decoder.spec.ts
+++ b/e2e/decoder.spec.ts
@@ -27,6 +27,7 @@ import {
 import { MessageStatusValue, MessageTypeValue } from "./e2e.values";
 import { JwtDictionaryModel, JwtSignedWithDigitalModel } from "./e2e.models";
 import jwts from "./jwt.json" with { type: "json" };
+import { EncodingValues } from "@/features/common/values/encoding.values";
 
 const TestJwts = (jwts as JwtDictionaryModel).byAlgorithm;
 
@@ -39,7 +40,7 @@ test.describe("Can interact with JWT Decoder JWT editor", () => {
     const jwtEditorInput = getDecoderJwtEditorInput(page);
 
     await expect(jwtEditorInput).toHaveValue(
-      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30",
+      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30"
     );
   });
 
@@ -53,8 +54,13 @@ test.describe("Can interact with JWT Decoder JWT editor", () => {
     await expect(jwtEditorInput).toHaveValue(inputValue);
   });
 
-  test("can copy value in JWT editor", async ({ page, context, browserName }) => {
-    const permissions = browserName === 'firefox' ? [] : ["clipboard-read", "clipboard-write"]
+  test("can copy value in JWT editor", async ({
+    page,
+    context,
+    browserName,
+  }) => {
+    const permissions =
+      browserName === "firefox" ? [] : ["clipboard-read", "clipboard-write"];
     const inputValue = (TestJwts.RS512 as JwtSignedWithDigitalModel).withPemKey
       .jwt;
     await context.grantPermissions(permissions);
@@ -76,7 +82,7 @@ test.describe("Can interact with JWT Decoder JWT editor", () => {
     await copyButton.click();
 
     const clipboardContent = await page.evaluate(() =>
-      navigator.clipboard.readText(),
+      navigator.clipboard.readText()
     );
 
     expect(clipboardContent).toBe(inputValue);
@@ -111,11 +117,8 @@ test.describe("Can generate JWT examples", () => {
       expectToBeNonNull(lang);
 
       const pickersUiDictionary = getPickersUiDictionary(lang);
-
-      const decoderWidget = page.getByTestId(dataTestidDictionary.decoder.id);
-
-      const pickerIndicator = decoderWidget.getByText(
-        pickersUiDictionary.exampleAlgPicker.defaultValue,
+      const pickerIndicator = page.getByText(
+        pickersUiDictionary.exampleAlgPicker.defaultValue
       );
 
       await pickerIndicator.click();
@@ -140,7 +143,7 @@ test.describe("Can generate JWT examples", () => {
         const targetToken = DefaultTokensValues[option];
 
         const jwtEditor = decoderWidget.getByTestId(
-          dataTestidDictionary.decoder.jwtEditor.id,
+          dataTestidDictionary.decoder.jwtEditor.id
         );
         const jwtEditorInput = jwtEditor.getByRole("textbox");
 
@@ -169,7 +172,7 @@ test.describe("Can generate JWT examples", () => {
         });
 
         const secretKeyEditor = decoderWidget.getByTestId(
-          dataTestidDictionary.decoder.secretKeyEditor.id,
+          dataTestidDictionary.decoder.secretKeyEditor.id
         );
         const secretKeyInput = secretKeyEditor.getByRole("textbox");
 
@@ -183,9 +186,13 @@ test.describe("Can generate JWT examples", () => {
             status: MessageStatusValue.VISIBLE,
           });
 
-          const encodingValue = await secretKeyEditor
-            .locator(".react-select__single-value")
-            .innerText();
+          const isEncodingSwitchChecked = await page
+            .getByRole("switch")
+            .isChecked();
+
+          const encodingValue = isEncodingSwitchChecked
+            ? EncodingValues.BASE64URL
+            : EncodingValues.UTF8;
 
           expect(encodingValue).toBe(symmetricToken.secretEncoding);
 
@@ -202,8 +209,9 @@ test.describe("Can generate JWT examples", () => {
             status: MessageStatusValue.VISIBLE,
           });
 
-          const formatValue = await secretKeyEditor
+          const formatValue = await page
             .locator(".react-select__single-value")
+            .nth(1)
             .innerText();
 
           expect(formatValue).toBe(asymmetricToken.publicKeyFormat);
@@ -236,7 +244,7 @@ test.describe("decode JWTs", () => {
       const decoderWidget = page.getByTestId(dataTestidDictionary.decoder.id);
 
       const jwtEditor = decoderWidget.getByTestId(
-        dataTestidDictionary.decoder.jwtEditor.id,
+        dataTestidDictionary.decoder.jwtEditor.id
       );
       const jwtEditorInput = jwtEditor.getByRole("textbox");
 
@@ -293,14 +301,14 @@ test.describe("decode JWTs", () => {
         });
 
         const secretKeyEditor = decoderWidget.getByTestId(
-          dataTestidDictionary.decoder.secretKeyEditor.id,
+          dataTestidDictionary.decoder.secretKeyEditor.id
         );
         const secretKeyEditorInput = secretKeyEditor.getByRole("textbox");
 
         await secretKeyEditorInput.fill(entryWithUtf8Secret.secret);
 
         await expect(secretKeyEditorInput).toHaveValue(
-          entryWithUtf8Secret.secret,
+          entryWithUtf8Secret.secret
         );
 
         await checkSecretKeyDecoderEditorStatusBarMessage({
@@ -309,9 +317,13 @@ test.describe("decode JWTs", () => {
           status: MessageStatusValue.VISIBLE,
         });
 
-        const encodingValue = await secretKeyEditor
-          .locator(".react-select__single-value")
-          .innerText();
+        const isEncodingSwitchChecked = await page
+          .getByRole("switch")
+          .isChecked();
+
+        const encodingValue = isEncodingSwitchChecked
+          ? EncodingValues.BASE64URL
+          : EncodingValues.UTF8;
 
         expect(encodingValue).toBe(entryWithUtf8Secret.secretEncoding);
 
@@ -354,17 +366,13 @@ test.describe("decode JWTs", () => {
             status: MessageStatusValue.VISIBLE,
           });
 
-          const formatPicker = secretKeyEditor.locator(
-            ".react-select__single-value",
-          );
-
-          await formatPicker.click();
+          const encodingSwitch = await page.getByTestId(dataTestidDictionary.encoder.switch)
+          expect(encodingSwitch).toBeVisible()
 
-          await page
-            .getByRole("option", {
-              name: entryWithBase64urlSecret.secretEncoding,
-            })
-            .click();
+          if (
+            entryWithBase64urlSecret.secretEncoding === EncodingValues.BASE64URL
+          )
+            await encodingSwitch.click();
 
           await secretKeyEditorInput.fill(entryWithBase64urlSecret.secret);
 
@@ -417,7 +425,7 @@ test.describe("decode JWTs", () => {
         });
 
         const secretKeyEditor = decoderWidget.getByTestId(
-          dataTestidDictionary.decoder.secretKeyEditor.id,
+          dataTestidDictionary.decoder.secretKeyEditor.id
         );
         const secretKeyEditorInput = secretKeyEditor.getByRole("textbox");
 
@@ -431,7 +439,7 @@ test.describe("decode JWTs", () => {
           status: MessageStatusValue.VISIBLE,
         });
 
-        const formatValue = await secretKeyEditor
+        const formatValue = await page
           .locator(".react-select__single-value")
           .innerText();
 
@@ -477,8 +485,8 @@ test.describe("decode JWTs", () => {
               status: MessageStatusValue.VISIBLE,
             });
 
-            const formatPicker = secretKeyEditor.locator(
-              ".react-select__single-value",
+            const formatPicker = page.locator(
+              ".react-select__single-value"
             );
 
             await formatPicker.click();
@@ -496,7 +504,7 @@ test.describe("decode JWTs", () => {
             });
 
             await secretKeyEditorInput.fill(
-              JSON.stringify(entrywithJwkKey.publicKey, null, 2),
+              JSON.stringify(entrywithJwkKey.publicKey, null, 2)
             );
 
             await checkJwtEditorStatusBarMessage({
@@ -547,8 +555,8 @@ test.describe("decode JWTs", () => {
               status: MessageStatusValue.VISIBLE,
             });
 
-            const formatPicker = secretKeyEditor.locator(
-              ".react-select__single-value",
+            const formatPicker = page.locator(
+              ".react-select__single-value"
             );
 
             await formatPicker.click();
@@ -560,7 +568,7 @@ test.describe("decode JWTs", () => {
               .click();
 
             await secretKeyEditorInput.fill(
-              JSON.stringify(entrywithJwkKey.publicKey, null, 2),
+              JSON.stringify(entrywithJwkKey.publicKey, null, 2)
             );
 
             await checkJwtEditorStatusBarMessage({
@@ -608,10 +616,10 @@ test("Can decode JWTs signed with a non-supported algorithm", async ({
     kid: "sig",
   };
   const expectedDecodedPayload = {
-    "sub": "1234567890",
-    "name": "John Doe",
-    "admin": true,
-    "iat": 1516239022
+    sub: "1234567890",
+    name: "John Doe",
+    admin: true,
+    iat: 1516239022,
   };
 
   await page.goto(E2E_BASE_URL);
@@ -622,7 +630,7 @@ test("Can decode JWTs signed with a non-supported algorithm", async ({
   const decoderWidget = page.getByTestId(dataTestidDictionary.decoder.id);
 
   const jwtEditor = decoderWidget.getByTestId(
-    dataTestidDictionary.decoder.jwtEditor.id,
+    dataTestidDictionary.decoder.jwtEditor.id
   );
   const jwtEditorInput = jwtEditor.getByRole("textbox");
 
@@ -644,22 +652,22 @@ test("Can decode JWTs signed with a non-supported algorithm", async ({
 
   await expect(
     decoderWidget.getByTestId(
-      dataTestidDictionary.decoder.decodedHeader.json.id,
-    ),
+      dataTestidDictionary.decoder.decodedHeader.json.id
+    )
   ).toHaveText(JSON.stringify(expectedDecodedHeader, null, 2), {
     useInnerText: true,
   });
 
   await expect(
     decoderWidget.getByTestId(
-      dataTestidDictionary.decoder.decodedPayload.json.id,
-    ),
+      dataTestidDictionary.decoder.decodedPayload.json.id
+    )
   ).toHaveText(JSON.stringify(expectedDecodedPayload, null, 2), {
     useInnerText: true,
   });
 
   const secretKeyEditor = decoderWidget.getByTestId(
-    dataTestidDictionary.decoder.secretKeyEditor.id,
+    dataTestidDictionary.decoder.secretKeyEditor.id
   );
 
   await expect(secretKeyEditor).not.toBeVisible();
@@ -677,10 +685,10 @@ test.describe("Decode pieces of JWTs in Base64Url", () => {
       jwtPiece:
         "eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0",
       expectedDecodedOutput: {
-        "sub": "1234567890",
-        "name": "John Doe",
-        "admin": true,
-        "iat": 1516239022
+        sub: "1234567890",
+        name: "John Doe",
+        admin: true,
+        iat: 1516239022,
       },
     },
     {
@@ -703,7 +711,7 @@ test.describe("Decode pieces of JWTs in Base64Url", () => {
       const decoderWidget = page.getByTestId(dataTestidDictionary.decoder.id);
 
       const jwtEditor = decoderWidget.getByTestId(
-        dataTestidDictionary.decoder.jwtEditor.id,
+        dataTestidDictionary.decoder.jwtEditor.id
       );
       const jwtEditorInput = jwtEditor.getByRole("textbox");
 
@@ -725,20 +733,20 @@ test.describe("Decode pieces of JWTs in Base64Url", () => {
 
       await expect(
         decoderWidget.getByTestId(
-          dataTestidDictionary.decoder.decodedHeader.json.id,
-        ),
+          dataTestidDictionary.decoder.decodedHeader.json.id
+        )
       ).toHaveText(JSON.stringify(expectedDecodedOutput, null, 2), {
         useInnerText: true,
       });
 
       await expect(
         decoderWidget.getByTestId(
-          dataTestidDictionary.decoder.decodedPayload.json.id,
-        ),
+          dataTestidDictionary.decoder.decodedPayload.json.id
+        )
       ).toBeEmpty();
 
       const secretKeyEditor = decoderWidget.getByTestId(
-        dataTestidDictionary.decoder.secretKeyEditor.id,
+        dataTestidDictionary.decoder.secretKeyEditor.id
       );
 
       await expect(secretKeyEditor).not.toBeVisible();

From 6023a287b7b17843648b775490754398b7681af2 Mon Sep 17 00:00:00 2001
From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com>
Date: Tue, 21 Oct 2025 08:35:40 -0500
Subject: [PATCH 7/7] fix encoder e2e tests

---
 e2e/encoder.spec.ts | 94 ++++++++++++++-------------------------------
 1 file changed, 28 insertions(+), 66 deletions(-)

diff --git a/e2e/encoder.spec.ts b/e2e/encoder.spec.ts
index 1bf35f1c..777ddad1 100644
--- a/e2e/encoder.spec.ts
+++ b/e2e/encoder.spec.ts
@@ -27,6 +27,7 @@ import {
   isNoneAlg,
 } from "@/features/common/services/jwt.service";
 import { MessageStatusValue, MessageTypeValue } from "./e2e.values";
+import { EncodingValues } from "@/features/common/values/encoding.values";
 
 const TestJwts = (jwts as JwtDictionaryModel).byAlgorithm;
 
@@ -41,7 +42,7 @@ test.describe("Can interact with header editor in JWT Encoder", () => {
     const encoderWidget = page.getByTestId(dataTestidDictionary.encoder.id);
 
     const headerEditor = encoderWidget.getByTestId(
-      dataTestidDictionary.encoder.headerEditor.id,
+      dataTestidDictionary.encoder.headerEditor.id
     );
     const headerEditorInput = headerEditor.getByRole("textbox");
 
@@ -65,7 +66,7 @@ test.describe("Can interact with header editor in JWT Encoder", () => {
     const encoderWidget = page.getByTestId(dataTestidDictionary.encoder.id);
 
     const headerEditor = encoderWidget.getByTestId(
-      dataTestidDictionary.encoder.headerEditor.id,
+      dataTestidDictionary.encoder.headerEditor.id
     );
     const headerEditorInput = headerEditor.getByRole("textbox");
 
@@ -83,7 +84,7 @@ test.describe("Can interact with header editor in JWT Encoder", () => {
     const encoder = page.getByTestId(dataTestidDictionary.encoder.id);
 
     const headerEditor = encoder.getByTestId(
-      dataTestidDictionary.encoder.headerEditor.id,
+      dataTestidDictionary.encoder.headerEditor.id
     );
     const headerEditorInput = headerEditor.getByRole("textbox");
 
@@ -107,7 +108,7 @@ test.describe("can interact with payload editor in JWT encoder", () => {
     const encoderWidget = page.getByTestId(dataTestidDictionary.encoder.id);
 
     const payloadEditor = encoderWidget.getByTestId(
-      dataTestidDictionary.encoder.payloadEditor.id,
+      dataTestidDictionary.encoder.payloadEditor.id
     );
     const payloadEditorInput = payloadEditor.getByRole("textbox");
 
@@ -131,7 +132,7 @@ test.describe("can interact with payload editor in JWT encoder", () => {
     const encoderWidget = page.getByTestId(dataTestidDictionary.encoder.id);
 
     const payloadEditor = encoderWidget.getByTestId(
-      dataTestidDictionary.encoder.payloadEditor.id,
+      dataTestidDictionary.encoder.payloadEditor.id
     );
     const payloadEditorInput = payloadEditor.getByRole("textbox");
 
@@ -149,7 +150,7 @@ test.describe("can interact with payload editor in JWT encoder", () => {
     const encoder = page.getByTestId(dataTestidDictionary.encoder.id);
 
     const payloadEditor = encoder.getByTestId(
-      dataTestidDictionary.encoder.payloadEditor.id,
+      dataTestidDictionary.encoder.payloadEditor.id
     );
     const payloadEditorInput = payloadEditor.getByRole("textbox");
 
@@ -173,7 +174,7 @@ test.describe("can interact with secret editor in JWT encoder", () => {
     const encoderWidget = page.getByTestId(dataTestidDictionary.encoder.id);
 
     const secretKeyEditor = encoderWidget.getByTestId(
-      dataTestidDictionary.encoder.secretKeyEditor.id,
+      dataTestidDictionary.encoder.secretKeyEditor.id
     );
     const secretKeyEditorInput = secretKeyEditor.getByRole("textbox");
 
@@ -191,7 +192,7 @@ test.describe("can interact with secret editor in JWT encoder", () => {
     const encoderWidget = page.getByTestId(dataTestidDictionary.encoder.id);
 
     const secretKeyEditor = encoderWidget.getByTestId(
-      dataTestidDictionary.encoder.secretKeyEditor.id,
+      dataTestidDictionary.encoder.secretKeyEditor.id
     );
     const secretKeyEditorInput = secretKeyEditor.getByRole("textbox");
 
@@ -209,7 +210,7 @@ test.describe("can interact with secret editor in JWT encoder", () => {
     const encoder = page.getByTestId(dataTestidDictionary.encoder.id);
 
     const secretKeyEditor = encoder.getByTestId(
-      dataTestidDictionary.encoder.secretKeyEditor.id,
+      dataTestidDictionary.encoder.secretKeyEditor.id
     );
     const secretKeyEditorInput = secretKeyEditor.getByRole("textbox");
 
@@ -229,32 +230,6 @@ test.describe("Generate JWT encoding examples", () => {
     await switchToEncoderTab(page);
   });
 
-  test("Can open and close encoder example widget", async ({ page }) => {
-    const lang = await getLang(page);
-    expectToBeNonNull(lang);
-
-    const pickersUiDictionary = getPickersUiDictionary(lang);
-
-    const encoder = page.getByTestId(dataTestidDictionary.encoder.id);
-
-    const exampleButton = encoder.getByRole("button", {
-      name: pickersUiDictionary.exampleAlgPicker.label,
-    });
-
-    await exampleButton.click();
-
-    await expect(exampleButton).not.toBeVisible();
-
-    const closeButton = page.getByRole("button", {
-      name: pickersUiDictionary.exampleAlgPicker.closeButton.label,
-    });
-
-    await closeButton.click();
-
-    await expect(exampleButton).toBeVisible();
-    await expect(closeButton).not.toBeVisible();
-  });
-
   test.describe("Can generate a JWT example", () => {
     test.beforeEach(async ({ page }) => {
       const lang = await getLang(page);
@@ -262,18 +237,8 @@ test.describe("Generate JWT encoding examples", () => {
 
       const pickersUiDictionary = getPickersUiDictionary(lang);
 
-      const encoder = page.getByTestId(dataTestidDictionary.encoder.id);
-
-      const exampleButton = encoder.getByRole("button", {
-        name: pickersUiDictionary.exampleAlgPicker.label,
-      });
-
-      await exampleButton.click();
-
-      await expect(exampleButton).not.toBeVisible();
-
-      const pickerIndicator = encoder.getByText(
-        pickersUiDictionary.exampleAlgPicker.defaultValue,
+      const pickerIndicator = page.getByText(
+        pickersUiDictionary.exampleAlgPicker.defaultValue
       );
 
       await pickerIndicator.click();
@@ -311,7 +276,7 @@ test.describe("Generate JWT encoding examples", () => {
         }
 
         await expect(jwtOutput).toHaveValue(
-          /^[A-Za-z0-9_-]*\.[A-Za-z0-9_-]*\.[A-Za-z0-9_-]*$/,
+          /^[A-Za-z0-9_-]*\.[A-Za-z0-9_-]*\.[A-Za-z0-9_-]*$/
         );
       });
     });
@@ -336,13 +301,13 @@ test.describe("encode JWTs", () => {
       const encoderWidget = page.getByTestId(dataTestidDictionary.encoder.id);
 
       const headerEditor = encoderWidget.getByTestId(
-        dataTestidDictionary.encoder.headerEditor.id,
+        dataTestidDictionary.encoder.headerEditor.id
       );
       const payloadEditor = encoderWidget.getByTestId(
-        dataTestidDictionary.encoder.payloadEditor.id,
+        dataTestidDictionary.encoder.payloadEditor.id
       );
       const secretKeyEditor = encoderWidget.getByTestId(
-        dataTestidDictionary.encoder.secretKeyEditor.id,
+        dataTestidDictionary.encoder.secretKeyEditor.id
       );
       const jwtOutput = encoderWidget
         .getByTestId(dataTestidDictionary.encoder.jwt.id)
@@ -415,16 +380,13 @@ test.describe("encode JWTs", () => {
 
         await expect(jwtOutput).toHaveValue(tokenWithUtf8Secret.jwt);
 
-        const formatPicker = secretKeyEditor.locator(
-          ".react-select__single-value",
-        );
-        await formatPicker.click();
-
-        await page
-          .getByRole("option", {
-            name: tokenWithBase64urlSecret.secretEncoding,
-          })
-          .click();
+        const encodingSwitch = await page.getByTestId(dataTestidDictionary.encoder.switch)
+        expect(encodingSwitch).toBeVisible()
+        
+        if (
+          tokenWithBase64urlSecret.secretEncoding === EncodingValues.BASE64URL
+        )
+          await encodingSwitch.click();
 
         await checkSecretKeyEncoderEditorStatusBarMessage({
           page,
@@ -479,12 +441,12 @@ test.describe("encode JWTs", () => {
           await expect(jwtOutput).toHaveValue(tokenWithPemKey.jwt);
         } else {
           await expect(jwtOutput).toHaveValue(
-            /^[A-Za-z0-9_-]*\.[A-Za-z0-9_-]*\.[A-Za-z0-9_-]*$/,
+            /^[A-Za-z0-9_-]*\.[A-Za-z0-9_-]*\.[A-Za-z0-9_-]*$/
           );
         }
 
-        const formatPicker = secretKeyEditor.locator(
-          ".react-select__single-value",
+        const formatPicker = page.locator(
+          ".react-select__single-value"
         );
         await formatPicker.click();
 
@@ -501,7 +463,7 @@ test.describe("encode JWTs", () => {
         });
 
         await secretKeyEditorInput.fill(
-          JSON.stringify(tokenWithJwkKey.privateKey, null, 2),
+          JSON.stringify(tokenWithJwkKey.privateKey, null, 2)
         );
 
         await checkSecretKeyEncoderEditorStatusBarMessage({
@@ -514,7 +476,7 @@ test.describe("encode JWTs", () => {
           await expect(jwtOutput).toHaveValue(tokenWithJwkKey.jwt);
         } else {
           await expect(jwtOutput).toHaveValue(
-            /^[A-Za-z0-9_-]*\.[A-Za-z0-9_-]*\.[A-Za-z0-9_-]*$/,
+            /^[A-Za-z0-9_-]*\.[A-Za-z0-9_-]*\.[A-Za-z0-9_-]*$/
           );
         }