Add data-status-enum attribute as a needle for testing purposes

Stormbase · Nov 29, 2024 · dd5a3aa · dd5a3aa
1 parent 8dd9dd3
commit dd5a3aa
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 2 deletions.
diff --git a/client/src/auth.ts b/client/src/auth.ts
@@ -1,4 +1,4 @@
-import { State, Config } from "./types";
+import { State, Config, StatusEnum } from "./types";
 import { getConfig } from "./utils";
 import {
   browserSupportsWebAuthn,
@@ -220,6 +220,7 @@ import {
         );
         await setPasskeyVerifyState({
           buttonDisabled: true,
+          statusEnum: StatusEnum.BUSY,
           buttonLabel: gettext("Verifying..."),
         });
 
@@ -238,6 +239,7 @@ import {
             buttonDisabled: false,
             buttonLabel,
             requestFocus: true,
+            statusEnum: StatusEnum.GET_OPTIONS_FAILED,
             status: gettext(
               "Verification failed. Could not retrieve parameters from the server.",
             ),
@@ -271,6 +273,7 @@ import {
                   buttonDisabled: false,
                   buttonLabel,
                   requestFocus: true,
+                  statusEnum: StatusEnum.ABORTED,
                   status: gettext("Verification aborted."),
                 });
                 break;
@@ -279,6 +282,7 @@ import {
                   buttonDisabled: false,
                   buttonLabel,
                   requestFocus: true,
+                  statusEnum: StatusEnum.NOT_ALLOWED_OR_ABORTED,
                   status: gettext("Verification canceled or not allowed."),
                 });
                 break;
@@ -287,6 +291,7 @@ import {
                   buttonDisabled: false,
                   buttonLabel,
                   requestFocus: true,
+                  statusEnum: StatusEnum.UNKNOWN_ERROR,
                   status: gettext(
                     "Verification failed. An unknown error occurred.",
                   ),
@@ -308,6 +313,7 @@ import {
 
         await setPasskeyVerifyState({
           buttonDisabled: true,
+          statusEnum: StatusEnum.BUSY,
           buttonLabel: gettext("Finishing verification..."),
         });
 
@@ -340,6 +346,7 @@ import {
             buttonDisabled: false,
             buttonLabel,
             requestFocus: true,
+            statusEnum: StatusEnum.SERVER_ERROR,
             status: gettext(
               "Verification failed. An unknown server error occurred.",
             ),
@@ -366,6 +373,7 @@ import {
           await setPasskeyVerifyState({
             buttonDisabled: false,
             buttonLabel,
+            statusEnum: StatusEnum.SERVER_ERROR,
             requestFocus: true,
             status: msg,
           });
@@ -386,6 +394,7 @@ import {
           await setPasskeyVerifyState({
             buttonDisabled: false,
             buttonLabel,
+            statusEnum: StatusEnum.SUCCESS,
             status: gettext("Verification successful!"),
           });
 
@@ -411,6 +420,7 @@ import {
           await setPasskeyVerifyState({
             buttonDisabled: false,
             buttonLabel,
+            statusEnum: StatusEnum.SERVER_ERROR,
             requestFocus: true,
             status: msg,
           });
@@ -432,6 +442,12 @@ import {
       passkeyAuthButton.disabled = state.buttonDisabled;
       passkeyAuthButton.textContent = state.buttonLabel;
 
+      if (state.statusEnum) {
+        passkeyStatusText.setAttribute("data-status-enum", state.statusEnum);
+      } else {
+        passkeyStatusText.removeAttribute("data-status-enum");
+      }
+
       if (passkeyStatusText) {
         // If there is a status message, we want to make sure screen readers
         // announce it to the user for clarity as to what is happening.

diff --git a/client/src/register.ts b/client/src/register.ts
@@ -1,4 +1,4 @@
-import { State, Config } from "./types";
+import { State, Config, StatusEnum } from "./types";
 import { getConfig } from "./utils";
 import {
   browserSupportsWebAuthn,
@@ -60,6 +60,7 @@ import {
             buttonDisabled: false,
             buttonLabel,
             requestFocus: true,
+            statusEnum: StatusEnum.GET_OPTIONS_FAILED,
             status: gettext(
               "Registration failed. Unable to fetch registration options from server.",
             ),
@@ -89,6 +90,7 @@ import {
                 setPasskeyRegisterState({
                   buttonDisabled: false,
                   buttonLabel,
+                  statusEnum: StatusEnum.ABORTED,
                   status: gettext("Registration aborted."),
                   requestFocus: true,
                 });
@@ -97,6 +99,7 @@ import {
                 setPasskeyRegisterState({
                   buttonDisabled: false,
                   buttonLabel,
+                  statusEnum: StatusEnum.STATE_ERROR,
                   status: gettext(
                     "Registration failed. You most likely already have a Passkey registered for this site.",
                   ),
@@ -107,6 +110,7 @@ import {
                 setPasskeyRegisterState({
                   buttonDisabled: false,
                   buttonLabel,
+                  statusEnum: StatusEnum.NOT_ALLOWED_OR_ABORTED,
                   status: gettext("Registration aborted or not allowed."),
                   requestFocus: true,
                 });
@@ -115,6 +119,7 @@ import {
                 setPasskeyRegisterState({
                   buttonDisabled: false,
                   buttonLabel,
+                  statusEnum: StatusEnum.SECURITY_ERROR,
                   status: gettext(
                     "Registration failed. A technical problem occurred that prevents you from registering a Passkey for this site.",
                   ),
@@ -125,6 +130,7 @@ import {
                 setPasskeyRegisterState({
                   buttonDisabled: false,
                   buttonLabel,
+                  statusEnum: StatusEnum.UNKNOWN_ERROR,
                   status: gettext(
                     "Registration failed. An unknown error occurred.",
                   ),
@@ -146,6 +152,7 @@ import {
 
         setPasskeyRegisterState({
           buttonDisabled: true,
+          statusEnum: StatusEnum.BUSY,
           buttonLabel: gettext("Finishing registration..."),
         });
 
@@ -164,6 +171,7 @@ import {
           setPasskeyRegisterState({
             buttonDisabled: false,
             buttonLabel,
+            statusEnum: StatusEnum.SERVER_ERROR,
             status: gettext(
               "Registration failed. The server was unable to verify this passkey.",
             ),
@@ -189,6 +197,7 @@ import {
           setPasskeyRegisterState({
             buttonDisabled: false,
             buttonLabel,
+            statusEnum: StatusEnum.SERVER_ERROR,
             status: gettext("Registration failed. A server error occurred."),
             requestFocus: true,
           });
@@ -211,6 +220,7 @@ import {
           setPasskeyRegisterState({
             buttonDisabled: false,
             buttonLabel,
+            statusEnum: StatusEnum.SUCCESS,
             status: gettext("Registration successful!"),
             requestFocus: true,
           });
@@ -230,6 +240,7 @@ import {
           setPasskeyRegisterState({
             buttonDisabled: false,
             buttonLabel,
+            statusEnum: StatusEnum.SERVER_ERROR,
             status: msg,
             requestFocus: true,
           });
@@ -258,6 +269,12 @@ import {
         passkeyRegisterButton.disabled = state.buttonDisabled;
         passkeyRegisterButton.textContent = state.buttonLabel;
 
+        if (state.statusEnum) {
+          passkeyStatusText.setAttribute("data-status-enum", state.statusEnum);
+        } else {
+          passkeyStatusText.removeAttribute("data-status-enum");
+        }
+
         if (passkeyStatusText) {
           if (state.status) {
             // If there is a status message, we want to make sure screen readers

diff --git a/client/src/types.ts b/client/src/types.ts
@@ -1,8 +1,21 @@
+export enum StatusEnum {
+  UNKNOWN_ERROR = "unknown-error",
+  STATE_ERROR = "state-error",
+  SECURITY_ERROR = "security-error",
+  GET_OPTIONS_FAILED = "get-options-failed",
+  ABORTED = "aborted",
+  NOT_ALLOWED_OR_ABORTED = "not-allowed-or-aborted",
+  SERVER_ERROR = "server-error",
+  SUCCESS = "success",
+  BUSY = "busy",
+}
+
 export type State = {
   buttonDisabled: boolean;
   buttonLabel: string;
   /** Text to display in the status field. */
   status?: string;
+  statusEnum?: StatusEnum;
   /** Request the focus be returned to the button. */
   requestFocus?: boolean;
 };