Skip to content

Commit

Permalink
fixed session cards test for dashboard home
Browse files Browse the repository at this point in the history
  • Loading branch information
@teetangh
teetangh committed Jan 4, 2025
1 parent 5bd42ba commit bd52064
Show file tree
Hide file tree
Showing 3 changed files with 205 additions and 111 deletions.
2 changes: 0 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,9 @@ Welcome to our development team! To help you get started, we've outlined the ess

Before you start, make sure you have the following installed and configured on your development machine:

```
- Node.js (version 18 or higher)
- npm or yarn
- Git
```

## Step 1: Clone the Project Repository

Expand Down
156 changes: 80 additions & 76 deletions app/dashboard/consultee/[consulteeId]/(features)/home/SessionCards.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,87 +144,91 @@ export function MonthlyEventCard({ event, slots }: MonthlyEventCardProps) {
};

return (
<Button
onClick={handleClick}
variant="ghost"
className="w-full text-left px-6 py-4 h-auto hover:bg-gray-50 block"
>
<div className="flex items-center gap-4">
<Avatar className="h-8 w-8">
<AvatarImage
src={getConsultantImage(event) ?? "/placeholder.svg"}
alt="Consultant"
/>
<AvatarFallback>{getConsultantInitial(event)}</AvatarFallback>
</Avatar>
<div className="min-w-0 flex-1">
<div className="flex items-center justify-between gap-3">
<div>
<h3 className="font-medium text-sm text-gray-900 truncate">
{getEventTitle(event)}
</h3>
<span
className="text-sm text-gray-600"
data-testid="consultant-name"
>
{getConsultantName(event)}
</span>
</div>
<div className="flex items-center gap-2">
<Badge
className={`${
event.type === "Subscription"
? "bg-purple-100 text-purple-800"
: "bg-indigo-100 text-indigo-800"
} text-xs px-2 py-0.5`}
>
{event.type}
</Badge>
<Badge
className={`${getStatusColor(status)} text-xs px-2 py-0.5`}
data-testid="event-status"
>
{status}
</Badge>
</div>
</div>
<div className="mt-2 space-y-1">
{slots.map((slot) => (
<div
key={slot.date.getTime()}
className="text-sm text-gray-600 flex items-center gap-4"
data-testid="monthly-slot"
>
<span className="min-w-[100px]">
{slot.date.toLocaleString(undefined, {
weekday: "short",
day: "numeric",
month: "short",
})}
</span>
<span>
{slot.endTime
? `${formatTimeString(slot.date)} - ${formatTimeString(
slot.endTime,
)}`
: formatTimeString(slot.date)}
{slot.isTentative && (
<span className="text-red-500 ml-1">*</span>
)}
<div>
<Button
onClick={handleClick}
variant="ghost"
className="w-full text-left px-6 py-4 h-auto hover:bg-gray-50 block"
>
<div className="flex items-center gap-4">
<Avatar className="h-8 w-8">
<AvatarImage
src={getConsultantImage(event) ?? "/placeholder.svg"}
alt="Consultant"
/>
<AvatarFallback>{getConsultantInitial(event)}</AvatarFallback>
</Avatar>
<div className="min-w-0 flex-1">
<div className="flex items-center justify-between gap-3">
<div>
<h3 className="font-medium text-sm text-gray-900 truncate">
{getEventTitle(event)}
</h3>
<span
className="text-sm text-gray-600"
data-testid="consultant-name"
>
{getConsultantName(event)}
</span>
</div>
))}
{slots.some((slot) => slot.isTentative) && (
<div
className="text-xs text-red-500"
data-testid="tentative-notice"
>
* Subject to change
<div className="flex items-center gap-2">
<Badge
className={`${
event.type === "Subscription"
? "bg-purple-100 text-purple-800"
: "bg-indigo-100 text-indigo-800"
} text-xs px-2 py-0.5`}
>
{event.type}
</Badge>
<Badge
className={`${getStatusColor(status)} text-xs px-2 py-0.5`}
data-testid="event-status"
>
{status}
</Badge>
</div>
)}
</div>
</div>
</div>
</Button>
<div className="px-6 pb-4">
<div className="mt-2 space-y-1">
{slots.map((slot) => (
<div
key={slot.date.getTime()}
className="text-sm text-gray-600 flex items-center gap-4"
data-testid="monthly-slot"
>
<span className="min-w-[100px]">
{slot.date.toLocaleString(undefined, {
weekday: "short",
day: "numeric",
month: "short",
})}
</span>
<span>
{slot.endTime
? `${formatTimeString(slot.date)} - ${formatTimeString(
slot.endTime,
)}`
: formatTimeString(slot.date)}
{slot.isTentative && (
<span className="text-red-500 ml-1">*</span>
)}
</span>
</div>
))}
{slots.some((slot) => slot.isTentative) && (
<div
className="text-xs text-red-500"
data-testid="tentative-notice"
>
* Subject to change
</div>
)}
</div>
</div>
</Button>
</div>
);
}
158 changes: 125 additions & 33 deletions cypress/e2e/dashboard/dashboard-home.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ interface Slot {
isTentative: boolean;
event: {
id: string;
type: string;
status?: string;
requestStatus?: string;
consultationPlan?: {
Expand Down Expand Up @@ -50,13 +51,31 @@ interface Slot {

function getAllSlots(events: any[]): Slot[] {
return events.flatMap((event) => {
// Set the type first
const eventWithType = {
...event,
type: event.consultationPlan
? "Consultation"
: event.subscriptionPlan
? "Subscription"
: event.webinarPlan
? "Webinar"
: event.classPlan
? "Class"
: "Unknown",
};

// Now get slots based on the type
const slots =
event.appointment?.slotsOfAppointment ||
event.appointments?.flatMap((apt: any) => apt.slotsOfAppointment) ||
[];
eventWithType.type === "Subscription" || eventWithType.type === "Class"
? eventWithType.appointments?.flatMap(
(apt: any) => apt.slotsOfAppointment,
) || []
: eventWithType.appointment?.slotsOfAppointment || [];

return slots.map((slot: any) => ({
...slot,
event,
event: eventWithType,
}));
});
}
Expand Down Expand Up @@ -105,14 +124,12 @@ function getMonthYearString(date: Date): string {
);

// Log upcoming slots count
cy.writeFile("cypress/logs/info.json", [
{
timestamp: new Date().toISOString(),
type: "upcoming_slots",
count: futureSlots.length,
consulteeId,
},
]);
cy.writeFile(`cypress/logs/${consulteeId}-upcoming.json`, {
timestamp: new Date().toISOString(),
type: "upcoming_slots",
count: futureSlots.length,
consulteeId,
});

// Verify upcoming section
cy.log("Verifying upcoming section");
Expand Down Expand Up @@ -191,40 +208,115 @@ function getMonthYearString(date: Date): string {
const monthString = getMonthYearString(date);
cy.log(`Checking month: ${monthString}`);

// Navigate to month
cy.get('[data-testid="monthly-slot-list"]')
// Log the events for debugging
cy.writeFile(`cypress/logs/${consulteeId}-events.json`, {
timestamp: new Date().toISOString(),
type: "events_debug",
month: monthString,
events: slots.map((slot) => ({
event: slot.event,
slot: {
startTime: slot.slotStartTimeInUTC,
endTime: slot.slotEndTimeInUTC,
isTentative: slot.isTentative,
},
})),
});

// Log current state before navigation
cy.get('[data-testid="monthly-slot-list"]', { timeout: 10000 })
.parent()
.find("h2")
.then(($header) => {
const currentMonth = $header.text();
cy.writeFile(`cypress/logs/${consulteeId}-navigation.json`, {
timestamp: new Date().toISOString(),
type: "navigation_debug",
currentMonth,
targetMonth: monthString,
slots: slots.map((slot) => ({
date: slot.slotStartTimeInUTC,
eventType: slot.event.type,
})),
});

// If not on target month, navigate to it
if (currentMonth !== monthString) {
// Determine direction and click button
const targetDate = date.getTime();
const currentDate = new Date(currentMonth).getTime();

const button =
targetDate < currentDate ? "prev-month" : "next-month";
cy.get(`[data-testid="${button}"]`).click();
cy.wait(200);
// Function to navigate one step
const navigateOneStep = () => {
const targetDate = date.getTime();
const currentDate = new Date(currentMonth).getTime();
const button =
targetDate < currentDate ? "prev-month" : "next-month";
cy.log(
`Attempting to navigate from ${currentMonth} to ${monthString} using ${button}`,
);
return cy
.get(`[data-testid="${button}"]`)
.click()
.wait(500);
};

// Try navigation up to 3 times
cy.wrap(null).then(() => {
const attemptNavigation = (attempt = 1) => {
if (attempt > 3) {
throw new Error(
`Failed to navigate to ${monthString} after 3 attempts`,
);
}

return navigateOneStep().then(() => {
return cy
.get('[data-testid="monthly-slot-list"]')
.parent()
.find("h2")
.invoke("text")
.then((newMonth) => {
if (newMonth !== monthString) {
cy.log(
`Navigation attempt ${attempt} failed, retrying...`,
);
return attemptNavigation(attempt + 1);
}
});
});
};

return attemptNavigation();
});
}
});

// Log the DOM state
cy.get('[data-testid="monthly-slot-list"]').then(($list) => {
cy.writeFile(`cypress/logs/${consulteeId}-dom.json`, {
timestamp: new Date().toISOString(),
type: "dom_debug",
month: monthString,
html: $list.html(),
});
});

// Verify slots for this month
cy.get('[data-testid="monthly-slot"]')
cy.get('[data-testid="monthly-slot"]', { timeout: 10000 })
.should("have.length", slots.length)
.then(() => {
cy.writeFile("cypress/logs/info.json", [
{
timestamp: new Date().toISOString(),
type: "monthly_verification",
month: monthString,
expectedSlots: slots.length,
actualSlots: slots.length,
consulteeId,
},
]);
cy.writeFile(`cypress/logs/${consulteeId}-monthly.json`, {
timestamp: new Date().toISOString(),
type: "monthly_verification",
month: monthString,
expectedSlots: slots.length,
actualSlots: slots.length,
consulteeId,
slots: slots.map((slot) => ({
startTime: slot.slotStartTimeInUTC,
endTime: slot.slotEndTimeInUTC,
isTentative: slot.isTentative,
eventType: slot.event.type,
eventId: slot.event.id,
})),
});
});
});
}
Expand Down

0 comments on commit bd52064

Please sign in to comment.