chore(web): re-add PlannerSidebar tests

Author: tyler-dane

docs/development/testing-playbook.md

@@ -47,7 +47,6 @@ E2E workflow (`test-e2e.yml`) is separate and runs on pull requests to `main` vi
 - `bun run test:core` uses `bun test` with a small compatibility preload for the core BSON mock setup.
 - `bun run test:web` runs `bun test --cwd packages/web` directly. Web tests should be isolated enough to run in one Bun process without batching.
 - `bun run test:backend` and `bun run test:scripts` intentionally retain the existing Jest harness while their hoist-heavy module-mocking patterns are migrated.
-- `bun run test:<project>` is the stable CI-facing entrypoint for every package; the root dispatcher chooses the correct runner per project.
 
 ## Retained Jest Layout
 

packages/web/src/components/PlannerSidebar/PlannerSidebar.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from "@testing-library/react";
+import dayjs from "@core/util/date/dayjs";
+import { describe, expect, it, mock } from "bun:test";
+import { createPlannerSidebar } from "./PlannerSidebar";
+
+const PlannerSidebar = createPlannerSidebar({
+  PlannerAccountSummary: () => <div>Account summary</div>,
+  PlannerMonthPicker: () => <div>Calendar picker</div>,
+  PlannerSidebarActions: () => <div>Sidebar actions</div>,
+  ShortcutsOverlay: () => null,
+  SomedayEventSections: () => <div>Week and month planning buckets</div>,
+});
+
+const sidebarProps = {
+  calendarDate: dayjs("2026-05-12"),
+  isShortcutsOpen: false,
+  onCloseShortcuts: mock(),
+  onToggleShortcuts: mock(),
+  onSelectDate: mock(),
+  shortcutSections: [],
+  viewEnd: dayjs("2026-05-16"),
+  viewStart: dayjs("2026-05-10"),
+};
+
+describe("PlannerSidebar", () => {
+  it("shows Someday event sections by default", () => {
+    render(<PlannerSidebar {...sidebarProps} />);
+
+    expect(screen.getByRole("region", { name: "Someday events" })).toBeTruthy();
+    expect(screen.getByText("Week and month planning buckets")).toBeTruthy();
+  });
+
+  it("hides Someday event sections when requested", () => {
+    render(
+      <PlannerSidebar {...sidebarProps} showSomedayEventSections={false} />,
+    );
+
+    expect(screen.queryByRole("region", { name: "Someday events" })).toBeNull();
+    expect(screen.queryByText("Week and month planning buckets")).toBeNull();
+    expect(screen.getByText("Calendar picker")).toBeTruthy();
+    expect(screen.getByText("Account summary")).toBeTruthy();
+    expect(screen.getByText("Sidebar actions")).toBeTruthy();
+  });
+});

packages/web/src/components/PlannerSidebar/PlannerSidebar.tsx

@@ -1,14 +1,16 @@
 import { type HTMLAttributes } from "react";
 import { type Dayjs } from "@core/util/date/dayjs";
 import { ID_SIDEBAR } from "@web/common/constants/web.constants";
-import { type ShortcutOverlaySection } from "@web/components/Shortcuts/ShortcutOverlay/ShortcutsOverlay";
+import {
+  ShortcutsOverlay,
+  type ShortcutOverlaySection,
+} from "@web/components/Shortcuts/ShortcutOverlay/ShortcutsOverlay";
 import { PlannerAccountSummary } from "./PlannerAccountSummary/PlannerAccountSummary";
 import { PlannerMonthPicker } from "./PlannerMonthPicker/PlannerMonthPicker";
 import { PlannerSidebarActions } from "./PlannerSidebarActions/PlannerSidebarActions";
-import { ShortcutsOverlay } from "./ShortcutsOverlay/ShortcutsOverlay";
 import { SomedayEventSections } from "./SomedayEventSections/SomedayEventSections";
 
-interface Props extends HTMLAttributes<HTMLDivElement> {
+export interface PlannerSidebarProps extends HTMLAttributes<HTMLDivElement> {
   calendarDate: Dayjs;
   monthsShown?: number;
   isShortcutsOpen: boolean;
@@ -22,58 +24,82 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
   viewStart: Dayjs;
 }
 
-export function PlannerSidebar({
-  calendarDate,
-  monthsShown = 1,
-  isShortcutsOpen,
-  onCloseShortcuts,
-  onToggleShortcuts,
-  onSelectDate,
-  onToggleSidebar,
-  shortcutSections,
-  showSomedayEventSections = true,
-  viewEnd,
-  viewStart,
-  ...props
-}: Props) {
-  return (
-    <aside
-      {...props}
-      aria-label="Planner sidebar"
-      className="relative flex h-full w-[285px] min-w-[285px] flex-col overflow-hidden border-border-primary border-r bg-panel-bg pt-5 text-panel-text"
-      id={ID_SIDEBAR}
-    >
-      <div className="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto px-4 pb-5 [scrollbar-gutter:stable]">
-        <PlannerMonthPicker
-          monthsShown={monthsShown}
-          onSelectDate={onSelectDate}
-          onToggleSidebar={onToggleSidebar}
-          selectedDate={calendarDate}
-        />
+type PlannerSidebarDependencies = {
+  PlannerAccountSummary: typeof PlannerAccountSummary;
+  PlannerMonthPicker: typeof PlannerMonthPicker;
+  PlannerSidebarActions: typeof PlannerSidebarActions;
+  ShortcutsOverlay: typeof ShortcutsOverlay;
+  SomedayEventSections: typeof SomedayEventSections;
+};
+
+export function createPlannerSidebar({
+  PlannerAccountSummary: PlannerAccountSummaryComponent,
+  PlannerMonthPicker: PlannerMonthPickerComponent,
+  PlannerSidebarActions: PlannerSidebarActionsComponent,
+  ShortcutsOverlay: ShortcutsOverlayComponent,
+  SomedayEventSections: SomedayEventSectionsComponent,
+}: PlannerSidebarDependencies) {
+  return function PlannerSidebar({
+    calendarDate,
+    monthsShown = 1,
+    isShortcutsOpen,
+    onCloseShortcuts,
+    onToggleShortcuts,
+    onSelectDate,
+    onToggleSidebar,
+    shortcutSections,
+    showSomedayEventSections = true,
+    viewEnd,
+    viewStart,
+    ...props
+  }: PlannerSidebarProps) {
+    return (
+      <aside
+        {...props}
+        aria-label="Planner sidebar"
+        className="relative flex h-full w-[285px] min-w-[285px] flex-col overflow-hidden border-border-primary border-r bg-panel-bg pt-5 text-panel-text"
+        id={ID_SIDEBAR}
+      >
+        <div className="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto px-4 pb-5 [scrollbar-gutter:stable]">
+          <PlannerMonthPickerComponent
+            monthsShown={monthsShown}
+            onSelectDate={onSelectDate}
+            onToggleSidebar={onToggleSidebar}
+            selectedDate={calendarDate}
+          />
 
-        {showSomedayEventSections ? (
-          <section aria-label="Someday events">
-            <SomedayEventSections
-              calendarDate={calendarDate}
-              viewEnd={viewEnd}
-              viewStart={viewStart}
-            />
-          </section>
-        ) : null}
-      </div>
+          {showSomedayEventSections ? (
+            <section aria-label="Someday events">
+              <SomedayEventSectionsComponent
+                calendarDate={calendarDate}
+                viewEnd={viewEnd}
+                viewStart={viewStart}
+              />
+            </section>
+          ) : null}
+        </div>
 
-      <PlannerAccountSummary />
+        <PlannerAccountSummaryComponent />
 
-      <PlannerSidebarActions
-        isShortcutsOpen={isShortcutsOpen}
-        onToggleShortcuts={onToggleShortcuts}
-      />
+        <PlannerSidebarActionsComponent
+          isShortcutsOpen={isShortcutsOpen}
+          onToggleShortcuts={onToggleShortcuts}
+        />
 
-      <ShortcutsOverlay
-        isOpen={isShortcutsOpen}
-        onClose={onCloseShortcuts}
-        sections={shortcutSections}
-      />
-    </aside>
-  );
+        <ShortcutsOverlayComponent
+          isOpen={isShortcutsOpen}
+          onClose={onCloseShortcuts}
+          sections={shortcutSections}
+        />
+      </aside>
+    );
+  };
 }
+
+export const PlannerSidebar = createPlannerSidebar({
+  PlannerAccountSummary,
+  PlannerMonthPicker,
+  PlannerSidebarActions,
+  ShortcutsOverlay,
+  SomedayEventSections,
+});