feat(e2e): add data-testids to components

components/AccentSubmitButton.tsx

@@ -4,6 +4,7 @@ type Props = {
   loading?: boolean;
   className?: string;
   type?: "button" | "submit" | "reset" | undefined;
+  "data-testid"?: string;
 };
 
 export default function AccentSubmitButton({
@@ -12,6 +13,7 @@ export default function AccentSubmitButton({
   loading,
   className,
   type,
+  "data-testid": dataTestId,
 }: Props) {
   return (
     <button
@@ -19,6 +21,7 @@ export default function AccentSubmitButton({
       className={`border primary-btn-gradient select-none duration-200 bg-black border-[oklch(var(--p))] hover:border-[#0070b5] rounded-lg text-center px-4 py-2 text-white active:scale-95 tracking-wider w-fit flex justify-center items-center gap-2 ${
         className || ""
       }`}
+      data-testid={dataTestId}
       onClick={() => {
         if (loading !== undefined && !loading && onClick) onClick();
       }}

components/Modal.tsx

@@ -32,8 +32,14 @@ export default function Modal({ toggleModal, className, children }: Props) {
           <Drawer.Overlay className="fixed inset-0 bg-black/40" />
           <ClickAwayHandler onClickOutside={() => setDrawerIsOpen(false)}>
             <Drawer.Content className="flex flex-col rounded-t-2xl h-[90%] mt-24 fixed bottom-0 left-0 right-0 z-30">
-              <div className="p-4 pb-32 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto">
-                <div className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-neutral mb-5" />
+              <div
+                className="p-4 pb-32 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto"
+                data-testid="mobile-modal-container"
+              >
+                <div
+                  className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-neutral mb-5"
+                  data-testid="mobile-modal-slider"
+                />
 
                 {children}
               </div>
@@ -44,19 +50,28 @@ export default function Modal({ toggleModal, className, children }: Props) {
     );
   } else {
     return (
-      <div className="overflow-y-auto pt-2 sm:py-2 fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex justify-center items-center fade-in z-40">
+      <div
+        className="overflow-y-auto pt-2 sm:py-2 fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex justify-center items-center fade-in z-40"
+        data-testid="modal-outer"
+      >
         <ClickAwayHandler
           onClickOutside={toggleModal}
           className={`w-full mt-auto sm:m-auto sm:w-11/12 sm:max-w-2xl ${
             className || ""
           }`}
         >
-          <div className="slide-up mt-auto sm:m-auto relative border-neutral-content rounded-t-2xl sm:rounded-2xl border-t sm:border shadow-2xl p-5 bg-base-100 overflow-y-auto sm:overflow-y-visible">
+          <div
+            className="slide-up mt-auto sm:m-auto relative border-neutral-content rounded-t-2xl sm:rounded-2xl border-t sm:border shadow-2xl p-5 bg-base-100 overflow-y-auto sm:overflow-y-visible"
+            data-testid="modal-container"
+          >
             <div
               onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
               className="absolute top-4 right-3 btn btn-sm outline-none btn-circle btn-ghost z-10"
             >
-              <i className="bi-x text-neutral text-2xl"></i>
+              <i
+                className="bi-x text-neutral text-2xl"
+                data-testid="close-modal-button"
+              ></i>
             </div>
             {children}
           </div>

components/TextInput.tsx

@@ -9,6 +9,7 @@ type Props = {
   onKeyDown?: KeyboardEventHandler<HTMLInputElement> | undefined;
   className?: string;
   spellCheck?: boolean;
+  "data-testid"?: string;
 };
 
 export default function TextInput({
@@ -20,9 +21,11 @@ export default function TextInput({
   onKeyDown,
   className,
   spellCheck,
+  "data-testid": dataTestId,
 }: Props) {
   return (
     <input
+      data-testid={dataTestId}
       spellCheck={spellCheck}
       autoFocus={autoFocus}
       type={type ? type : "text"}