test(today): add tests for TodayViewContent component

- Introduce tests for TodayViewContent to ensure proper rendering and functionality
- Verify layout includes tasks and calendar sections
- Check for today's date display and task addition functionality
- Mock dependencies for isolated testing of component behavior

Author: tyler-dane

packages/web/src/views/Today/TodayViewContent.test.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { act } from "react";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { TodayViewContent } from "./TodayViewContent";
+import { TaskProvider } from "./context/TaskProvider";
+
+// Mock the CalendarAgenda component
+jest.mock("./components/CalendarAgenda", () => ({
+  CalendarAgenda: () => (
+    <div className="h-96 bg-gray-100">Calendar Content</div>
+  ),
+}));
+
+// Mock the keyboard shortcuts hook
+jest.mock("./hooks/useKeyboardShortcuts", () => ({
+  useKeyboardShortcuts: jest.fn(),
+}));
+
+const renderWithProvider = (component: React.ReactElement) => {
+  return render(<TaskProvider>{component}</TaskProvider>);
+};
+
+describe("TodayViewContent", () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it("should render the main layout with tasks and calendar sections", () => {
+    renderWithProvider(<TodayViewContent />);
+
+    // Verify the main components are present
+    expect(screen.getByText("Add task")).toBeInTheDocument();
+    expect(screen.getByText("Calendar Content")).toBeInTheDocument();
+  });
+
+  it("should display today's date in the tasks section", () => {
+    renderWithProvider(<TodayViewContent />);
+
+    // Check that today's date is displayed
+    const todayHeading = new Date().toLocaleDateString("en-US", {
+      weekday: "long",
+      month: "long",
+      day: "numeric",
+    });
+    expect(screen.getByText(todayHeading)).toBeInTheDocument();
+  });
+
+  it("should allow users to add new tasks", async () => {
+    const user = userEvent.setup();
+    renderWithProvider(<TodayViewContent />);
+
+    // Click the add task button
+    const addTaskButton = screen.getByText("Add task");
+    await act(() => user.click(addTaskButton));
+
+    // Verify input field appears
+    expect(
+      screen.getByPlaceholderText("Enter task title..."),
+    ).toBeInTheDocument();
+  });
+
+  it("should maintain a fixed height layout that fills the viewport", () => {
+    renderWithProvider(<TodayViewContent />);
+
+    // The layout should be present and functional
+    expect(screen.getByText("Add task")).toBeInTheDocument();
+    expect(screen.getByText("Calendar Content")).toBeInTheDocument();
+  });
+
+  it("should display add task button", () => {
+    renderWithProvider(<TodayViewContent />);
+
+    // The tasks section should be present and functional
+    expect(screen.getByText("Add task")).toBeInTheDocument();
+
+    // Users should be able to interact with the tasks section
+    expect(screen.getByText("Add task")).toBeEnabled();
+  });
+});

packages/web/src/views/Today/TodayViewContent.tsx

@@ -90,22 +90,20 @@ export const TodayViewContent = () => {
   });
 
   return (
-    <div className=" flex min-h-screen justify-center bg-darkBlue-400 px-6 py-8">
-      <div className="flex w-full max-witems-stretch gap-8">
-        {/* Tasks Panel */}
-        <div className="flex w-96 text-white flex-shrink-0">
-          <TaskList
-            onTaskFocus={setFocusedTaskId}
-            focusedTaskId={focusedTaskId}
-            onSelectTask={setSelectedTaskIndex}
-            selectedTaskIndex={selectedTaskIndex}
-          />
-        </div>
+    <div className="bg-red-400 flex w-full max-w-items-stretch gap-8 px-6 py-8 overflow-hidden h-screen">
+      {/* Tasks Panel */}
+      <div className="flex w-96 text-white flex-shrink-0 overflow-y-auto">
+        <TaskList
+          onTaskFocus={setFocusedTaskId}
+          focusedTaskId={focusedTaskId}
+          onSelectTask={setSelectedTaskIndex}
+          selectedTaskIndex={selectedTaskIndex}
+        />
+      </div>
 
-        {/* Calendar Panel */}
-        <div className="flex flex-1 min-w-0">
-          <CalendarAgenda />
-        </div>
+      {/* Calendar Panel */}
+      <div className="flex flex-1 min-w-0 overflow-y-auto">
+        <CalendarAgenda />
       </div>
     </div>
   );