fix: stabilize algorithm picker e2e. (#940)

* fix: stabilize algorithm picker visibility in JWT editor tests.

* fix: refactor capabilities state management in algorithm picker cmp.

* fix: clean up whitespace in workflow YAML files.

Author: jonathanp-okta

.github/workflows/production.yaml

@@ -23,20 +23,20 @@ jobs:
 
             - name: Run Vitest
               run: npx vitest run
-            
+
             - name: Install Playwright Browsers
               run: npx playwright install --with-deps
 
             - name: Run Playwright Tests
               run: NODE_OPTIONS="--no-experimental-strip-types" npx playwright test
-            
+
             - name: Upload Playwright Traces
               if: failure()
               uses: actions/upload-artifact@v4
               with:
                 name: playwright-traces
                 path: playwright-report/**/trace.zip
-    
+
   Deploy-Production:
     needs: test
     runs-on:

.github/workflows/tests.yaml

@@ -22,18 +22,16 @@ jobs:
 
             - name: Run Vitest
               run: npx vitest run
-            
+
             - name: Install Playwright Browsers
               run: npx playwright install --with-deps
 
             - name: Run Playwright Tests
               run: NODE_OPTIONS="--no-experimental-strip-types" npx playwright test
-            
+
             - name: Upload Playwright Traces
               if: failure()
               uses: actions/upload-artifact@v4
               with:
                 name: playwright-traces
-                path: playwright-report/**/trace.zip
-
-        
+                path: test-results/**/trace.zip

e2e/decoder.spec.ts

@@ -116,13 +116,20 @@ test.describe("Can generate JWT examples", () => {
       const lang = await getLang(page);
       expectToBeNonNull(lang);
 
+      const algorithmPicker = page.getByRole("combobox", {
+        name: "Debugger picker",
+      });
+      const algorithmPickerRegion = page
+        .getByRole("region")
+        .filter({ has: algorithmPicker });
       const pickersUiDictionary = getPickersUiDictionary(lang);
       const pickerIndicator = page.getByText(
         pickersUiDictionary.exampleAlgPicker.defaultValue
       );
 
+      await expect(algorithmPickerRegion).toHaveAttribute("aria-busy", "false");
       await pickerIndicator.click();
-      await page.getByRole("listbox").waitFor({ state: "visible" });
+      await expect(page.getByRole("listbox")).toBeVisible();
     });
 
     const options = Object.keys(DefaultTokensValues);

e2e/encoder.spec.ts

@@ -235,14 +235,20 @@ test.describe("Generate JWT encoding examples", () => {
       const lang = await getLang(page);
       expectToBeNonNull(lang);
 
+      const algorithmPicker = page.getByRole("combobox", {
+        name: "Debugger picker",
+      });
+      const algorithmPickerRegion = page
+        .getByRole("region")
+        .filter({ has: algorithmPicker });
       const pickersUiDictionary = getPickersUiDictionary(lang);
-
       const pickerIndicator = page.getByText(
         pickersUiDictionary.exampleAlgPicker.defaultValue
       );
 
+      await expect(algorithmPickerRegion).toHaveAttribute("aria-busy", "false");
       await pickerIndicator.click();
-      await page.getByRole("listbox").waitFor({ state: "visible" });
+      await expect(page.getByRole("listbox")).toBeVisible();
     });
 
     const options = Object.keys(DefaultTokensValues);

src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.component.tsx

@@ -64,9 +64,14 @@ export const WidgetAlgPickerComponent: React.FC<
   const [pickerState, setPickerState] = useState<PickerStates>(
     PickerStates.IDLE
   );
-  const [canUseEs512, setCanUseEs512] = useState(false);
-  const [canUseEd25519, setCanUseEd25519] = useState(false);
-  const [canUseEd448, setCanUseEd448] = useState(false);
+  const [capabilities, setCapabilities] = useState({
+    canUseEs512: false,
+    canUseEd25519: false,
+    canUseEd448: false,
+    isLoading: true,
+  });
+
+  const { canUseEs512, canUseEd25519, canUseEd448, isLoading } = capabilities;
 
   const dictionary = getPickersUiDictionary(languageCode);
 
@@ -93,16 +98,19 @@ export const WidgetAlgPickerComponent: React.FC<
   };
 
   useEffect(() => {
-    (async function runEs512Check() {
-      setCanUseEs512(await isP521Supported());
-    })();
-
-    (async function runEd25519Check() {
-      setCanUseEd25519(await isEd25519Supported());
-    })();
-
-    (async function runEd448Check() {
-      setCanUseEd448(await isEd448Supported());
+    (async function checkCapabilities() {
+      const [canUseEs512, canUseEd25519, canUseEd448] = await Promise.all([
+        isP521Supported(),
+        isEd25519Supported(),
+        isEd448Supported(),
+      ]);
+
+      setCapabilities({
+        canUseEs512,
+        canUseEd25519,
+        canUseEd448,
+        isLoading: false,
+      });
     })();
   }, []);
 
@@ -188,7 +196,12 @@ export const WidgetAlgPickerComponent: React.FC<
   }, [noneAlgOptions, asymmetricAlgOptions, symmetricAlgOptions]);
 
   return (
-    <div role="region" aria-label={label} className={styles.alg_picker}>
+    <div
+      role="region"
+      aria-label={label}
+      aria-busy={isLoading}
+      className={styles.alg_picker}
+    >
       <div className={styles.container}>
         <div className={styles.picker}>
           <div className={styles.picker__label}>