From 8a35f724ed16d9263b26fa6de8b7d563de0545d5 Mon Sep 17 00:00:00 2001
From: jefische <jefische86@gmail.com>
Date: Mon, 27 Oct 2025 14:17:54 -0500
Subject: [PATCH 1/3] test: #196 initial unit test for JourneyCard component

---
 components/JourneyCard/JourneyCard.test.tsx | 16 ++++++++++++++++
 components/JourneyCard/JourneyCard.tsx      |  2 +-
 2 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 components/JourneyCard/JourneyCard.test.tsx

diff --git a/components/JourneyCard/JourneyCard.test.tsx b/components/JourneyCard/JourneyCard.test.tsx
new file mode 100644
index 00000000..ce5bda67
--- /dev/null
+++ b/components/JourneyCard/JourneyCard.test.tsx
@@ -0,0 +1,16 @@
+import { JourneyCard } from './JourneyCard';
+import { render, screen } from '@testing-library/react';
+
+describe('JourneyCard Component', () => {
+
+  it('Renders the component with proper supplied dates', () => {
+    render(<JourneyCard drawingDate='2025-10-31T05:00:00+00:00' exchangeDate='2025-11-27T06:00:00+00:00'/>);
+
+    screen.debug();
+    const journeyCardElement = screen.getByTestId('journey-card');
+    expect(journeyCardElement).toBeInTheDocument();
+
+  });
+
+
+});
diff --git a/components/JourneyCard/JourneyCard.tsx b/components/JourneyCard/JourneyCard.tsx
index b902e769..3ee971f7 100644
--- a/components/JourneyCard/JourneyCard.tsx
+++ b/components/JourneyCard/JourneyCard.tsx
@@ -46,7 +46,7 @@ export const JourneyCard = ({
   ];
 
   return (
-    <Card className="w-full bg-groupCardGreen border-none">
+    <Card className="w-full bg-groupCardGreen border-none" data-testid="journey-card">
       <CardHeader className="bg-groupCardGreen rounded-xl p-2">
         <CardTitle className="p-4 flex gap-2 items-center text-white font-bold">
           Your Gift Giving Journey

From 8b4ee9a535b9dd8b3deb9eb44c3f6611065621ad Mon Sep 17 00:00:00 2001
From: jefische <jefische86@gmail.com>
Date: Mon, 27 Oct 2025 15:40:36 -0500
Subject: [PATCH 2/3] Update to test drawing and exchange date elements

---
 components/JourneyCard/JourneyCard.test.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/JourneyCard/JourneyCard.test.tsx b/components/JourneyCard/JourneyCard.test.tsx
index ce5bda67..9dc12ace 100644
--- a/components/JourneyCard/JourneyCard.test.tsx
+++ b/components/JourneyCard/JourneyCard.test.tsx
@@ -1,16 +1,23 @@
 import { JourneyCard } from './JourneyCard';
 import { render, screen } from '@testing-library/react';
+import { formatDate } from '@/lib/utils';
 
 describe('JourneyCard Component', () => {
 
-  it('Renders the component with proper supplied dates', () => {
+  it('Renders the component given serialized ISO date string values', () => {
     render(<JourneyCard drawingDate='2025-10-31T05:00:00+00:00' exchangeDate='2025-11-27T06:00:00+00:00'/>);
 
-    screen.debug();
     const journeyCardElement = screen.getByTestId('journey-card');
     expect(journeyCardElement).toBeInTheDocument();
+    
+    const drawingDateElement = screen.getByText(/we'll review who you're gifting to/)
+    const drawingDateValue = formatDate('2025-10-31T05:00:00+00:00');
+    expect(drawingDateElement).toHaveTextContent(drawingDateValue);
 
-  });
+    const exchangeDateElement = screen.getByText(/Bring your wrapped gift to exchange on/)
+    const exchangeDateValue = formatDate('2025-11-27T06:00:00+00:00');
+    expect(exchangeDateElement).toHaveTextContent(exchangeDateValue);
 
+  });
 
 });

From cd1aa42d812390de639770da3426f0386106432d Mon Sep 17 00:00:00 2001
From: jefische <jefische86@gmail.com>
Date: Fri, 31 Oct 2025 10:23:17 -0500
Subject: [PATCH 3/3] updated tests to verify each journey step and check
 dynamic content by index

---
 components/JourneyCard/JourneyCard.test.tsx | 30 ++++++++++++++++++---
 components/JourneyCard/JourneyCard.tsx      |  2 +-
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/components/JourneyCard/JourneyCard.test.tsx b/components/JourneyCard/JourneyCard.test.tsx
index 9dc12ace..d4542e33 100644
--- a/components/JourneyCard/JourneyCard.test.tsx
+++ b/components/JourneyCard/JourneyCard.test.tsx
@@ -4,20 +4,42 @@ import { formatDate } from '@/lib/utils';
 
 describe('JourneyCard Component', () => {
 
-  it('Renders the component given serialized ISO date string values', () => {
+  it('Renders the JourneyCard component with props when an exchange group is entered', () => {
     render(<JourneyCard drawingDate='2025-10-31T05:00:00+00:00' exchangeDate='2025-11-27T06:00:00+00:00'/>);
 
+    // Verify component renders to the document
     const journeyCardElement = screen.getByTestId('journey-card');
     expect(journeyCardElement).toBeInTheDocument();
+
+  });
+
+  it('Verify each journey step is rendered to the document', () => {
+    render(<JourneyCard drawingDate='2025-10-31T05:00:00+00:00' exchangeDate='2025-11-27T06:00:00+00:00'/>);
+
+    const journeyStepOneElement = screen.getByTestId('journey-step-1');
+    const journeyStepTwoElement = screen.getByTestId('journey-step-2');
+    const journeyStepThreeElement = screen.getByTestId('journey-step-3');
+    const journeyStepFourElement = screen.getByTestId('journey-step-4');
+
+    expect(journeyStepOneElement).toBeInTheDocument();
+    expect(journeyStepTwoElement).toBeInTheDocument();
+    expect(journeyStepThreeElement).toBeInTheDocument();
+    expect(journeyStepFourElement).toBeInTheDocument();
     
-    const drawingDateElement = screen.getByText(/we'll review who you're gifting to/)
+  });
+
+  it('Verify journey steps 1 and 4 render given serialized ISO date string values', () => {
+    render(<JourneyCard drawingDate='2025-10-31T05:00:00+00:00' exchangeDate='2025-11-27T06:00:00+00:00'/>);
+  
+    // Verifying step 1 contains the drawing date
+    const drawingDateElement = screen.getByTestId('journey-step-1');
     const drawingDateValue = formatDate('2025-10-31T05:00:00+00:00');
     expect(drawingDateElement).toHaveTextContent(drawingDateValue);
 
-    const exchangeDateElement = screen.getByText(/Bring your wrapped gift to exchange on/)
+    // Verifying step 4 contains the exchange date
+    const exchangeDateElement = screen.getByTestId('journey-step-4');
     const exchangeDateValue = formatDate('2025-11-27T06:00:00+00:00');
     expect(exchangeDateElement).toHaveTextContent(exchangeDateValue);
-
   });
 
 });
diff --git a/components/JourneyCard/JourneyCard.tsx b/components/JourneyCard/JourneyCard.tsx
index bbf40e7a..f10d413e 100644
--- a/components/JourneyCard/JourneyCard.tsx
+++ b/components/JourneyCard/JourneyCard.tsx
@@ -70,7 +70,7 @@ export const JourneyCard = ({
       <CardContent className="pt-4">
         <div className="flex flex-col gap-6">
           {journeySteps.map((step) => (
-            <div key={step.id} className="flex gap-4 items-center">
+            <div key={step.id} className="flex gap-4 items-center" data-testid={`journey-step-${step.id}`}>
               <div className="bg-white rounded-full w-10 h-10 flex items-center justify-center">
                 {step.icon}
               </div>