test: replace role texts by testids

frontend/src/components/drawer/PasskeyModal.tsx

@@ -41,10 +41,15 @@ export function PasskeyModal() {
             required
             type="password"
             placeholder="password"
+            data-testid="passkey-input"
             className="font-sans validator input input-bordered rounded-r-none"
           />
           <div className="validator-message text-xs text-error"></div>
-          <button type="submit" className="btn btn-primary rounded-l-none">
+          <button
+            type="submit"
+            data-testid="passkey-submit-btn"
+            className="btn btn-primary rounded-l-none"
+          >
             Unlock
           </button>
         </form>

frontend/src/components/editor/ToolBar.tsx

@@ -194,6 +194,7 @@ export function ToolBar({
         </div>
         <button
           type="button"
+          data-testid="vault-trigger-btn"
           className="btn btn-neutral btn-sm rounded-full px-6 group"
           onClick={() => setConfirmModal("VAULT")}
         >
@@ -299,6 +300,7 @@ export function VaultConfirmModal({
         <div className="w-full flex justify-center gap-8 mt-4">
           <button
             type="button"
+            data-testid="vault-cancel-btn"
             className="btn btn-ghost btn-sm mt-4"
             onClick={() => setConfirmModal(null)}
           >
@@ -307,6 +309,7 @@ export function VaultConfirmModal({
           <button
             className="btn btn-primary btn-sm mt-4"
             type="submit"
+            data-testid="vault-confirm-btn"
             form="vault-form"
           >
             Take it

frontend/src/components/ui/FormField.tsx

@@ -1,43 +1,44 @@
 import type { UseFormRegisterReturn } from "react-hook-form";
 
 interface FormFieldProps {
-    label: string;
-    type?: string;
-    placeholder?: string;
-    registration: UseFormRegisterReturn;
-    error?: string;
-    handleFocus?: () => void;
-    "data-testid"?: string;
+  label: string;
+  type?: string;
+  placeholder?: string;
+  registration: UseFormRegisterReturn;
+  error?: string;
+  handleFocus?: () => void;
+  "data-testid"?: string;
 }
 
 export default function FormField({
-    label,
-    type = "text",
-    placeholder,
-    registration,
-    error,
-    handleFocus,
-    "data-testid": testId,
+  label,
+  type = "text",
+  placeholder,
+  registration,
+  error,
+  handleFocus,
+  "data-testid": testId,
 }: FormFieldProps) {
-    return (
-        <div className="form-control">
-            <label
-                htmlFor={registration.name}
-                className="field-label font-display text-neutral-content/80 font-medium"
-            >
-                {label}
-            </label>
-            <input
-                {...registration}
-                id={registration.name}
-                data-testid={testId}
-                type={type}
-                placeholder={placeholder}
-                className={`input input-bordered focus:input-primary ${error ? "input-error" : ""
-                    }`}
-                onFocus={handleFocus}
-            />
-            {error && <p className="text-error">{error}</p>}
-        </div>
-    );
+  return (
+    <div className="form-control">
+      <label
+        htmlFor={registration.name}
+        className="field-label font-display text-neutral-content/80 font-medium"
+      >
+        {label}
+      </label>
+      <input
+        {...registration}
+        id={registration.name}
+        data-testid={testId}
+        type={type}
+        placeholder={placeholder}
+        className={`input input-bordered focus:input-primary ${
+          error ? "input-error" : ""
+        }`}
+        onFocus={handleFocus}
+      />
+      {error && <p className="text-error">{error}</p>}
+    </div>
+  );
 }

frontend/src/components/ui/Modal.tsx

@@ -3,42 +3,42 @@ import type { ReactNode } from "react";
 import { createPortal } from "react-dom";
 
 interface ModalProps {
-    isOpen: boolean;
-    onClose?: () => void;
-    children: ReactNode;
-    "data-testid"?: string;
+  isOpen: boolean;
+  onClose?: () => void;
+  children: ReactNode;
+  "data-testid"?: string;
 }
 
 export function Modal({
-    isOpen,
-    onClose,
-    children,
-    "data-testid": testId,
+  isOpen,
+  onClose,
+  children,
+  "data-testid": testId,
 }: ModalProps) {
-    if (!isOpen) return null;
-    // render the modal top of all elements and position them to document viewport (/ the main wrapper).
-    // NOTE: this is recommended approach for modals as it shouldn't be bound to the parent box.
-    const mainContainer = document.querySelector("main") || document.body;
-    return createPortal(
-        <div
-            data-testid={testId}
-            className="modal modal-open modal-middle backdrop-blur-md before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/textures/noise.gif')]"
-        >
-            <div className="modal-box border border-neutral/60 relative bg-base-100/60 flex flex-col items-center text-center gap-6">
-                {onClose && (
-                    <button
-                        type="button"
-                        data-testid="modal-close-btn"
-                        className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2 z-20"
-                        onClick={onClose}
-                        aria-label="Close"
-                    >
-                        <XCircleIcon size={18} weight="bold" />
-                    </button>
-                )}
-                {children}
-            </div>
-        </div>,
-        mainContainer,
-    );
+  if (!isOpen) return null;
+  // render the modal top of all elements and position them to document viewport (/ the main wrapper).
+  // NOTE: this is recommended approach for modals as it shouldn't be bound to the parent box.
+  const mainContainer = document.querySelector("main") || document.body;
+  return createPortal(
+    <div
+      data-testid={testId}
+      className="modal modal-open modal-middle backdrop-blur-md before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/textures/noise.gif')]"
+    >
+      <div className="modal-box border border-neutral/60 relative bg-base-100/60 flex flex-col items-center text-center gap-6">
+        {onClose && (
+          <button
+            type="button"
+            data-testid="modal-close-btn"
+            className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2 z-20"
+            onClick={onClose}
+            aria-label="Close"
+          >
+            <XCircleIcon size={18} weight="bold" />
+          </button>
+        )}
+        {children}
+      </div>
+    </div>,
+    mainContainer,
+  );
 }