diff --git a/.github/workflows/production.yaml b/.github/workflows/production.yaml index adca8ecb..88ba5c88 100644 --- a/.github/workflows/production.yaml +++ b/.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: diff --git a/.github/workflows/tests.yaml b/.github/workflows/tests.yaml index 34a9871c..e2d1972d 100644 --- a/.github/workflows/tests.yaml +++ b/.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 - - \ No newline at end of file + path: test-results/**/trace.zip diff --git a/e2e/decoder.spec.ts b/e2e/decoder.spec.ts index e77ce924..460cc6e6 100644 --- a/e2e/decoder.spec.ts +++ b/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); diff --git a/e2e/encoder.spec.ts b/e2e/encoder.spec.ts index f5d2b357..2478909d 100644 --- a/e2e/encoder.spec.ts +++ b/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); diff --git a/src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.component.tsx b/src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.component.tsx index 272b2c28..2ea12e1d 100644 --- a/src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.component.tsx +++ b/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.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 ( -
+