test(web): add unit tests for all-day event menu interactions

- Introduce tests for single-day and multi-day all-day events in AgendaEventMenu.
- Validate menu visibility, focus behavior, and outside click interactions for all-day events.
- Ensure no time/date information is displayed for all-day events in the menu.

Author: tyler-dane

packages/web/src/views/Day/components/Agenda/Events/AgendaEventMenu/AgendaEventMenu.test.tsx

@@ -229,4 +229,122 @@ describe("AgendaEventMenu", () => {
     // Menu should still be visible
     expect(screen.getByText("Test Event")).toBeInTheDocument();
   });
+
+  describe("All-day events", () => {
+    const singleDayAllDayEvent: Schema_Event = {
+      _id: "test-allday-1",
+      title: "Single Day All Day Event",
+      description: "This is a single day all day event",
+      startDate: "2024-01-15T00:00:00Z",
+      endDate: "2024-01-15T23:59:59Z",
+      isAllDay: true,
+    };
+
+    const multiDayAllDayEvent: Schema_Event = {
+      _id: "test-allday-2",
+      title: "Multi Day All Day Event",
+      description: "This is a multi day all day event",
+      startDate: "2024-01-15T00:00:00Z",
+      endDate: "2024-01-17T23:59:59Z",
+      isAllDay: true,
+    };
+
+    it("should show menu for single-day all-day event without time display", async () => {
+      const user = userEvent.setup();
+      render(<TestComponent event={singleDayAllDayEvent} />);
+
+      const trigger = screen.getByRole("button", {
+        name: "Event Trigger",
+      });
+      await user.hover(trigger);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText("Single Day All Day Event"),
+        ).toBeInTheDocument();
+        expect(
+          screen.getByText("This is a single day all day event"),
+        ).toBeInTheDocument();
+      });
+
+      // Should not show any time/date info for all-day events
+      expect(screen.queryByText(/2024-01-15/)).not.toBeInTheDocument();
+      expect(screen.queryByText(/2024-01-17/)).not.toBeInTheDocument();
+    });
+
+    it("should show menu for multi-day all-day event without time display", async () => {
+      const user = userEvent.setup();
+      render(<TestComponent event={multiDayAllDayEvent} />);
+
+      const trigger = screen.getByRole("button", {
+        name: "Event Trigger",
+      });
+      await user.hover(trigger);
+
+      await waitFor(() => {
+        expect(screen.getByText("Multi Day All Day Event")).toBeInTheDocument();
+        expect(
+          screen.getByText("This is a multi day all day event"),
+        ).toBeInTheDocument();
+      });
+
+      // Should not show any time/date info for all-day events
+      expect(screen.queryByText(/2024-01-15/)).not.toBeInTheDocument();
+      expect(screen.queryByText(/2024-01-17/)).not.toBeInTheDocument();
+    });
+
+    it("should show menu on focus for all-day events", async () => {
+      const user = userEvent.setup();
+      render(<TestComponent event={singleDayAllDayEvent} />);
+
+      const trigger = screen.getByRole("button", {
+        name: "Event Trigger",
+      });
+      await act(async () => {
+        await user.tab();
+      });
+
+      expect(document.activeElement).toBe(trigger);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText("Single Day All Day Event"),
+        ).toBeInTheDocument();
+      });
+    });
+
+    it("should close menu on outside click for all-day events", async () => {
+      const user = userEvent.setup();
+      render(
+        <div>
+          <TestComponent event={multiDayAllDayEvent} />
+          <button>Outside Button</button>
+        </div>,
+      );
+
+      const trigger = screen.getByRole("button", {
+        name: "Event Trigger",
+      });
+      await act(async () => {
+        await user.hover(trigger);
+      });
+
+      await waitFor(() => {
+        expect(screen.getByText("Multi Day All Day Event")).toBeInTheDocument();
+      });
+
+      const outsideButton = screen.getByRole("button", {
+        name: "Outside Button",
+      });
+      await act(async () => {
+        await user.click(outsideButton);
+      });
+
+      await waitFor(() => {
+        expect(
+          screen.queryByText("Multi Day All Day Event"),
+        ).not.toBeInTheDocument();
+      });
+    });
+  });
 });

packages/web/src/views/Day/components/Agenda/Events/AgendaEventMenu/AgendaEventMenuContent.tsx

@@ -15,9 +15,15 @@ export const AgendaEventMenuContent = forwardRef<
   const context = useAgendaEventMenuContext();
   const ref = useMergeRefs([context.refs.setFloating, propRef]);
 
-  const startTime = event.startDate ? getAgendaEventTime(event.startDate) : "";
-  const endTime = event.endDate ? getAgendaEventTime(event.endDate) : "";
-  const timeRange = startTime && endTime ? `${startTime} - ${endTime}` : "";
+  let timeDisplay = "";
+  if (!event.isAllDay) {
+    const startTime = event.startDate
+      ? getAgendaEventTime(event.startDate)
+      : "";
+    const endTime = event.endDate ? getAgendaEventTime(event.endDate) : "";
+    timeDisplay = startTime && endTime ? `${startTime} - ${endTime}` : "";
+  }
+  // All-day events: timeDisplay stays empty (no dates shown)
 
   return (
     <FloatingPortal>
@@ -45,12 +51,12 @@ export const AgendaEventMenuContent = forwardRef<
             >
               {event.title || "Untitled Event"}
             </h3>
-            {timeRange && (
+            {timeDisplay && (
               <time
                 className="text-xs font-medium text-gray-600"
                 dateTime={`${event.startDate}/${event.endDate}`}
               >
-                {timeRange}
+                {timeDisplay}
               </time>
             )}
             {event.description && (

packages/web/src/views/Day/components/Agenda/Events/AllDayAgendaEvent/AllDayAgendaEvent.tsx

@@ -1,21 +1,29 @@
 import { Schema_Event } from "@core/types/event.types";
+import { AgendaEventMenu } from "../AgendaEventMenu/AgendaEventMenu";
+import { AgendaEventMenuContent } from "../AgendaEventMenu/AgendaEventMenuContent";
+import { AgendaEventMenuTrigger } from "../AgendaEventMenu/AgendaEventMenuTrigger";
 
 export const AllDayAgendaEvent = ({ event }: { event: Schema_Event }) => {
   if (!event.title) return null;
 
   const isPast = event.endDate ? new Date(event.endDate) < new Date() : false;
 
   return (
-    <div
-      className={`text-white-100 flex items-center rounded bg-blue-200 px-2 py-1 text-xs focus:ring-2 focus:ring-yellow-200 focus:outline-none ${
-        isPast ? "opacity-60" : ""
-      }`}
-      title={event.title}
-      tabIndex={0}
-      role="button"
-      data-event-id={event._id}
-    >
-      <span className="flex-1 truncate">{event.title}</span>
-    </div>
+    <AgendaEventMenu>
+      <AgendaEventMenuTrigger asChild>
+        <div
+          className={`text-white-100 flex items-center rounded bg-blue-200 px-2 py-1 text-xs focus:ring-2 focus:ring-yellow-200 focus:outline-none ${
+            isPast ? "opacity-60" : ""
+          }`}
+          title={event.title}
+          tabIndex={0}
+          role="button"
+          data-event-id={event._id}
+        >
+          <span className="flex-1 truncate">{event.title}</span>
+        </div>
+      </AgendaEventMenuTrigger>
+      <AgendaEventMenuContent event={event} />
+    </AgendaEventMenu>
   );
 };