refactor/optimize e2e test (#3)

how fast i'll go 🏄‍♂️ --------- Co-authored-by: me <ramvignesh-b@github.com> Reviewed-on: #3
2026-05-06 18:04:11 +00:00
parent 8d0ab979f5
commit ac2f541ebe
23 changed files with 605 additions and 586 deletions
@@ -35,6 +35,7 @@ export function DrawerSection({
      <button
        type="button"
        onClick={onClick}
+        data-testid={`drawer-section-${id}`}
        className={`w-full p-[24px_28px] cursor-pointer flex items-center gap-5 transition-all duration-2000 ease-in-out outline-none focus-visible:ring-2 focus-visible:ring-primary/50 border border-base-content/10 text-left bg-linear-to-r from-transparent to-base-100/40`}
      >
        <div className="flex-1">
@@ -33,6 +33,7 @@ export function LetterItem({
    <button
      type="button"
      onClick={handleNavigate}
+      data-testid={`letter-item-${id}`}
      className={`${isLocked ? "pointer-events-none" : ""} p-4 border-base-content/3 flex items-start gap-4 hover:bg-base-300 transition-all delay-75 duration-100 group text-left cursor-pointer w-9/12 mx-auto hover:scale-120 hover:h-24 hover:-translate-y-3 hover:pb-4 hover:border-x-5 hover:border-t-5 border-t-2 hover:-mb-2`}
    >
      <div className="text-[0.85rem] italic text-base-content/40 flex-1 truncate group-hover:text-base-content/60 transition-none animate-[opacity_200ms_linear_forwards]">
@@ -1,77 +1,78 @@
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion } from "motion/react";
 import { useEffect, useRef, useState } from "react";
 import { getWelcomeLetterContent } from "../../config/welcomeLetter";
 import { formatDate } from "../../utils/dateFormat";
 import { type CanvasTools, ComposeCanvas } from "../editor/ComposeCanvas";
 import { EnvelopeReveal } from "../reader/EnvelopeReveal";

-interface WelcomeLetterOverlayProps {
-  onComplete: () => void;
-  userName: string;
+export interface WelcomeLetterOverlayProps {
+    onComplete: () => void;
+    userName: string;
 }

 export function WelcomeLetterOverlay({
-  onComplete,
-  userName,
+    onComplete,
+    userName,
 }: WelcomeLetterOverlayProps) {
-  const [revealState, setRevealState] = useState<"SEALED" | "REVEALED">(
-    "SEALED",
-  );
-  const canvasRef = useRef<CanvasTools>(null);
+    const [revealState, setRevealState] = useState<"SEALED" | "REVEALED">(
+        "SEALED",
+    );
+    const canvasRef = useRef<CanvasTools>(null);

-  useEffect(() => {
-    if (revealState === "REVEALED" && canvasRef.current) {
-      const welcomeContent = getWelcomeLetterContent(userName);
-      canvasRef.current.loadData(welcomeContent);
-    }
-  }, [revealState, userName]);
+    useEffect(() => {
+        if (revealState === "REVEALED" && canvasRef.current) {
+            const welcomeContent = getWelcomeLetterContent(userName);
+            canvasRef.current.loadData(welcomeContent);
+        }
+    }, [revealState, userName]);

-  return (
-    <div className="fixed inset-0 z-30 backdrop-blur-3xl flex flex-col items-center justify-center p-4 md:p-8 overflow-x-hidden">
-      <div className="fixed inset-0 bg-vig pointer-events-none z-0" />
+    return (
+        <div className="fixed inset-0 z-30 backdrop-blur-3xl flex flex-col items-center justify-center p-4 md:p-8 overflow-x-hidden">
+            <div className="fixed inset-0 bg-vig pointer-events-none z-0" />

-      <div className="w-full max-w-4xl z-10 flex flex-col items-center">
-        <AnimatePresence mode="wait">
-          {revealState === "SEALED" && (
-            <motion.div
-              key="envelope"
-              initial={{ scale: 0.5, opacity: 0 }}
-              animate={{ scale: 0.8, opacity: 1 }}
-              exit={{
-                scale: 1,
-                opacity: 0,
-                transition: { duration: 0.5, ease: "easeOut" },
-              }}
-              transition={{ duration: 4, delay: 1 }}
-            >
-              <EnvelopeReveal
-                recipient={userName}
-                date={formatDate(new Date())}
-                onRevealComplete={() => setRevealState("REVEALED")}
-                ignite={false}
-              />
-            </motion.div>
-          )}
-        </AnimatePresence>
-        <div
-          className={`w-full space-y-8 py-12 ${revealState === "REVEALED" ? "block" : "hidden"}`}
-        >
-          <div className="bg-paper shadow-warm rounded-sm overflow-hidden mx-auto max-w-180">
-            <div className="p-1 md:p-2 bg-base-content/5 opacity-10 pointer-events-none absolute inset-0 z-10" />
-            <ComposeCanvas ref={canvasRef} readOnly />
-          </div>
+            <div className="w-full max-w-4xl z-10 flex flex-col items-center">
+                <AnimatePresence mode="wait">
+                    {revealState === "SEALED" && (
+                        <motion.div
+                            key="envelope"
+                            initial={{ scale: 0.5, opacity: 0 }}
+                            animate={{ scale: 0.8, opacity: 1 }}
+                            exit={{
+                                scale: 1,
+                                opacity: 0,
+                                transition: { duration: 0.5, ease: "easeOut" },
+                            }}
+                            transition={{ duration: 4, delay: 1 }}
+                        >
+                            <EnvelopeReveal
+                                recipient={userName}
+                                date={formatDate(new Date())}
+                                onRevealComplete={() => setRevealState("REVEALED")}
+                                ignite={false}
+                            />
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+                <div
+                    className={`w-full space-y-8 py-12 ${revealState === "REVEALED" ? "block" : "hidden"}`}
+                >
+                    <div className="bg-paper shadow-warm rounded-sm overflow-hidden mx-auto max-w-180">
+                        <div className="p-1 md:p-2 bg-base-content/5 opacity-10 pointer-events-none absolute inset-0 z-10" />
+                        <ComposeCanvas ref={canvasRef} readOnly />
+                    </div>

-          <div className="flex justify-center mt-12">
-            <button
-              type="button"
-              onClick={onComplete}
-              className="btn btn-accent opacity-80 px-12 shadow-lg"
-            >
-              I'll see you
-            </button>
-          </div>
+                    <div className="flex justify-center mt-12">
+                        <button
+                            type="button"
+                            data-testid="dismiss-welcome-letter-btn"
+                            onClick={onComplete}
+                            className="btn btn-accent opacity-80 px-12 shadow-lg"
+                        >
+                            I'll see you
+                        </button>
+                    </div>
+                </div>
+            </div>
        </div>
-      </div>
-    </div>
-  );
+    );
 }
@@ -15,7 +15,7 @@ export function PostSealModal({
  type = "KEPT",
 }: PostSealModalProps) {
  return (
-    <Modal isOpen={!!sealedTargetId}>
+    <Modal isOpen={!!sealedTargetId} data-testid="post-seal-modal">
      <LockIcon size={32} weight="duotone" className="text-primary mt-3" />
      <h3 className="font-serif text-2xl">Your letter is sealed</h3>
      <p className="text-base-content/60">
@@ -53,6 +53,7 @@ export function PostSealModal({
          <>
            <button
              type="button"
+              data-testid="keep-it-btn"
              className="btn btn-ghost btn-sm"
              onClick={() => navigate(ROUTES.DRAWER)}
            >
@@ -60,6 +61,7 @@ export function PostSealModal({
            </button>
            <button
              type="button"
+              data-testid="view-letter-btn"
              className="btn btn-primary btn-sm"
              onClick={() => navigate(PATHS.read(sealedTargetId!))}
            >
@@ -140,6 +140,7 @@ export function ToolBar({
      <div className="flex items-center gap-2">
        <button
          type="button"
+          data-testid="draft-btn"
          className="btn btn-ghost btn-sm text-xxs group tracking-widester uppercase font-bold text-base-content/60 hover:text-base-content"
          title="Store in your private drawer"
          onClick={() => onSave("DRAFT")}
@@ -155,6 +156,7 @@ export function ToolBar({
        {/*Seal */}
        <button
          type="button"
+          data-testid="seal-trigger-btn"
          className={`btn btn-primary btn-sm rounded-full px-6 group ${sealBtnClicked ? "invisible" : "visible"}`}
          onClick={() => setSealBtnClicked(true)}
        >
@@ -176,6 +178,7 @@ export function ToolBar({
      >
        <button
          type="button"
+          data-testid="seal-confirm-btn"
          className="btn btn-accent btn-sm rounded-full px-6 group"
          onClick={() => onSave("SEALED")}
        >
@@ -65,6 +65,7 @@ export default function WelcomeModal({
          <div className="modal-action w-full">
            <button
              type="button"
+              data-testid="welcome-dismiss-btn"
              onClick={() => setShowWelcome(false)}
              className="btn btn-primary w-full shadow-lg"
            >
@@ -80,6 +80,7 @@ export function EnvelopeReveal({
            />
          </div>
          <img
+            data-testid="wax-seal"
            className={
              "translate-y-24 delay-2000 absolute z-6 peer-has-checked:pointer-events-none peer-has-checked:opacity-0 peer-has-checked:delay-0 transition-opacity duration-1000 cursor-pointer"
            }
@@ -91,6 +92,7 @@ export function EnvelopeReveal({
          <button
            type="button"
            id="letter"
+            data-testid="envelope-letter"
            className={`absolute mx-auto transition-all peer-has-checked:delay-800 peer-has-checked:duration-1000 duration-1000 mt-2 h-55 w-105 bg-paper peer-has-checked:-mt-12 hover:-mt-24 cursor-pointer ${revealLetter ? "duration-1000 peer-has-checked:duration-3000 w-screen max-w-4xl h-screen z-101 -translate-y-90" : "peer-has-checked:z-1"}`}
            onClick={handleClick}
          ></button>
@@ -112,6 +114,7 @@ export function EnvelopeReveal({

        <button
          id="env-front"
+          data-testid="envelope-front"
          type="button"
          disabled={!isInteractive}
          className={`text-left p-10 absolute inset-0 backface-hidden w-110 bg-base-200 z-99 rounded-md -translate-x-2 ${isFlipped ? "pointer-events-none" : ""}`}
@@ -14,7 +14,11 @@ export function ShareModal({ shareLink, setShareLink }: ShareModalProps) {
  };
  return (
    <>
-      <Modal isOpen={!!shareLink} onClose={() => setShareLink(null)}>
+      <Modal
+        isOpen={!!shareLink}
+        onClose={() => setShareLink(null)}
+        data-testid="share-letter-modal"
+      >
        <div className="flex flex-col items-center justify-center text-center gap-6 py-4">
          <div className="space-y-2">
            <PaperPlaneTiltIcon
@@ -47,6 +51,7 @@ export function ShareModal({ shareLink, setShareLink }: ShareModalProps) {
            <button
              type="button"
              onClick={copyToClipboard}
+              data-testid="copy-link-btn"
              className="btn btn-primary font-sans btn-sm rounded-tl-xl rounded-bl-xl rounded-tr-full rounded-br-full"
            >
              Copy
@@ -7,6 +7,7 @@ interface FormFieldProps {
  registration: UseFormRegisterReturn;
  error?: string;
  handleFocus?: () => void;
+  "data-testid"?: string;
 }

 export default function FormField({
@@ -16,6 +17,7 @@ export default function FormField({
  registration,
  error,
  handleFocus,
+  "data-testid": testId,
 }: FormFieldProps) {
  return (
    <div className="form-control">
@@ -28,6 +30,7 @@ export default function FormField({
      <input
        {...registration}
        id={registration.name}
+        data-testid={testId}
        type={type}
        placeholder={placeholder}
        className={`input input-bordered focus:input-primary ${
@@ -5,17 +5,27 @@ interface ModalProps {
  isOpen: boolean;
  onClose?: () => void;
  children: ReactNode;
+  "data-testid"?: string;
 }

-export function Modal({ isOpen, onClose, children }: ModalProps) {
+export function Modal({
+  isOpen,
+  onClose,
+  children,
+  "data-testid": testId,
+}: ModalProps) {
  if (!isOpen) return null;

  return (
-    <div 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/noise.gif')]">
+    <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/noise.gif')]"
+    >
      <div className="modal-box 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"