fix(gro66): E2E selector fix + groomer isolation + portal confirm/cancel

* Implement confirm/cancel in customer portal (GRO-50) Backend: - Add POST /api/portal/appointments/:id/confirm endpoint - Validates impersonation session auth and ownership - Rejects past/in-progress, non-pending, or already-cancelled/completed - Sets confirmationStatus="confirmed", confirmedAt, updatedAt - Add POST /api/portal/appointments/:id/cancel endpoint - Same auth/ownership pattern - Rejects past/in-progress or already-cancelled/completed - Sets status="cancelled", confirmationStatus="cancelled", cancelledAt, updatedAt Frontend (Appointments.tsx): - Add confirmationStatus field to Appointment type and mock data - Add ConfirmationSection component: shows status badge + confirm button - Add CancelAppointmentButton: wires to cancel API with loading/error state - Wire existing Cancel button to CancelAppointmentButton - Show confirmation status badge in expanded view for upcoming appointments Co-Authored-By: Paperclip <noreply@paperclip.ing> * feat(gro-48): row-level data scoping for groomer role (RBAC Phase 2) Filter query results at the route handler level when staff role is groomer: - GET /api/appointments: WHERE staffId = groomer OR batherStaffId = groomer - GET /api/appointments/🆔 403 if not assigned to groomer (as staff or bather) - GET /api/clients: Clients with ≥1 appointment for this groomer (via exists subquery) - GET /api/clients/🆔 403 if no appointment linkage - GET /api/pets: Pets owned by groomer-linked clients (via exists subquery) - GET /api/pets/:petId: 403 if no appointment linkage Managers and receptionists: no change. Added exists to @groombook/db exports (was missing from re-export). Added groomerIsolation unit tests for role guard and filter logic. Co-Authored-By: Paperclip <noreply@paperclip.ing> * fix(gro-50): add portal confirm/cancel tests and fix ConfirmationSection state - Add test coverage for POST /portal/appointments/:id/confirm endpoint - Add test coverage for POST /portal/appointments/:id/cancel endpoint - Fix ConfirmationSection not updating local status after successful confirm - Remove unused onCancel prop from ConfirmationSection call site - Fix Appointments.test.tsx missing confirmationStatus field Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * test(gro-50): add ConfirmationSection UI component tests Add tests for the ConfirmationSection component: - Renders correct badge for each confirmationStatus state - Shows/hides Confirm button based on status - Calls confirm API with correct headers - Handles sessionId null case - Shows error messages for 401/403/422 responses - Shows loading state while confirming - Shows success message briefly after confirm - Does not call API if user cancels confirm dialog Co-Authored-By: Paperclip <noreply@paperclip.ing> * fix(gro-48): address QA review feedback — staffRow?.role and portal TS guards - appointments.ts: use staffRow?.role (consistent with clients.ts/pets.ts) to handle undefined staff context safely - portal.ts: add null guards on .returning() results for confirm and cancel endpoints (TS18048: 'updated' is possibly undefined) - All 188 tests passing; TypeScript typecheck clean Co-Authored-By: Paperclip <noreply@paperclip.ing> * fix(gro66): use specific selector for banner visibility assertion Replace ambiguous `getByText("STAFF VIEW")` that matched both the ImpersonationBanner and the CustomerPortal watermark with a precise `getByTestId("impersonation-banner")` selector to eliminate strict mode violations. Co-Authored-By: Paperclip <noreply@paperclip.ing> * fix(gro-66): add missing afterEach to vitest import Co-Authored-By: Paperclip <noreply@paperclip.ing> * fix(gro-48): add icalToken to MANAGER mock after rebase After rebasing onto origin/main (which added icalToken to the staff schema via GRO-107), the MANAGER mock in groomerIsolation.test.ts was missing the new required field. Added icalToken: null to the MANAGER constant. factories.ts is clean (no duplicate icalToken after rebase). Co-Authored-By: Paperclip <noreply@paperclip.ing> * fix(gro-47): add non-null assertions on Drizzle RETURNING results Drizzle's update().returning() types the array element as T | undefined. After the if (!appt) guard, updated is still typed as possibly undefined because RETURNING can succeed with no rows. Add ! assertions since we already guard with the existence check. Co-Authored-By: Paperclip <noreply@paperclip.ing> --------- Co-authored-by: Flea Flicker <fleaflicker@groombook.ai> Co-authored-by: Paperclip <noreply@paperclip.ing> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: Flea Flicker <flea-flicker@paperclip.ing>
2026-03-27 14:23:19 +00:00
parent 8ab6319311
commit 9eb0c3d151
11 changed files with 869 additions and 36 deletions
@@ -1,7 +1,7 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import type { Appointment } from "../portal/mockData.js";
-import { parseTimeTo24Hour, isUpcoming, CustomerNotesSection } from "../portal/sections/Appointments.js";
+import { parseTimeTo24Hour, isUpcoming, CustomerNotesSection, ConfirmationSection } from "../portal/sections/Appointments.js";

 const UPCOMING_APPT: Appointment = {
  id: "appt-1",
@@ -18,6 +18,7 @@ const UPCOMING_APPT: Appointment = {
  status: "confirmed",
  notes: "",
  customerNotes: "",
+  confirmationStatus: "pending",
 };

 const PAST_APPT: Appointment = {
@@ -191,4 +192,191 @@ describe("CustomerNotesSection", () => {
    render(<CustomerNotesSection appointment={{ ...UPCOMING_APPT, status: "cancelled" }} sessionId="test-session-id" />);
    expect(screen.queryByRole("button", { name: /Save Notes/i })).not.toBeInTheDocument();
  });
+});
+
+describe("ConfirmationSection", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    global.fetch = vi.fn();
+    vi.stubGlobal("confirm", vi.fn(() => true));
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("renders pending badge when confirmationStatus is pending", () => {
+    render(<ConfirmationSection appointment={UPCOMING_APPT} sessionId="test-session-id" />);
+    expect(screen.getByText("Pending confirmation")).toBeInTheDocument();
+  });
+
+  it("renders confirmed badge when confirmationStatus is confirmed", () => {
+    render(<ConfirmationSection appointment={{ ...UPCOMING_APPT, confirmationStatus: "confirmed" }} sessionId="test-session-id" />);
+    expect(screen.getByText("✓ Confirmed")).toBeInTheDocument();
+  });
+
+  it("renders cancelled badge when confirmationStatus is cancelled", () => {
+    render(<ConfirmationSection appointment={{ ...UPCOMING_APPT, confirmationStatus: "cancelled" }} sessionId="test-session-id" />);
+    expect(screen.getByText("Cancelled")).toBeInTheDocument();
+  });
+
+  it("shows Confirm Appointment button when status is pending", () => {
+    render(<ConfirmationSection appointment={UPCOMING_APPT} sessionId="test-session-id" />);
+    expect(screen.getByRole("button", { name: /Confirm Appointment/i })).toBeInTheDocument();
+  });
+
+  it("does not show Confirm button when already confirmed", () => {
+    render(<ConfirmationSection appointment={{ ...UPCOMING_APPT, confirmationStatus: "confirmed" }} sessionId="test-session-id" />);
+    expect(screen.queryByRole("button", { name: /Confirm Appointment/i })).not.toBeInTheDocument();
+  });
+
+  it("does not show Confirm button when cancelled", () => {
+    render(<ConfirmationSection appointment={{ ...UPCOMING_APPT, confirmationStatus: "cancelled" }} sessionId="test-session-id" />);
+    expect(screen.queryByRole("button", { name: /Confirm Appointment/i })).not.toBeInTheDocument();
+  });
+
+  it("calls confirm API and updates local status on success", async () => {
+    vi.mocked(global.fetch).mockResolvedValue({
+      ok: true,
+      json: async () => ({ id: "appt-1", confirmationStatus: "confirmed" }),
+    } as Response);
+
+    render(<ConfirmationSection appointment={UPCOMING_APPT} sessionId="test-session-id" />);
+    fireEvent.click(screen.getByRole("button", { name: /Confirm Appointment/i }));
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith(
+        "/api/portal/appointments/appt-1/confirm",
+        expect.objectContaining({ method: "POST" })
+      );
+    });
+    await waitFor(() => {
+      expect(screen.getByText("✓ Confirmed")).toBeInTheDocument();
+    });
+  });
+
+  it("sends X-Impersonation-Session-Id header when session exists", async () => {
+    vi.mocked(global.fetch).mockResolvedValue({
+      ok: true,
+      json: async () => ({ id: "appt-1", confirmationStatus: "confirmed" }),
+    } as Response);
+
+    render(<ConfirmationSection appointment={UPCOMING_APPT} sessionId="test-session-id" />);
+    fireEvent.click(screen.getByRole("button", { name: /Confirm Appointment/i }));
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith(
+        "/api/portal/appointments/appt-1/confirm",
+        expect.objectContaining({
+          headers: expect.objectContaining({
+            "X-Impersonation-Session-Id": "test-session-id",
+          }),
+        })
+      );
+    });
+  });
+
+  it("does not send X-Impersonation-Session-Id header when sessionId is null", async () => {
+    vi.mocked(global.fetch).mockResolvedValue({
+      ok: true,
+      json: async () => ({ id: "appt-1", confirmationStatus: "confirmed" }),
+    } as Response);
+
+    render(<ConfirmationSection appointment={UPCOMING_APPT} sessionId={null} />);
+    fireEvent.click(screen.getByRole("button", { name: /Confirm Appointment/i }));
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith(
+        "/api/portal/appointments/appt-1/confirm",
+        expect.objectContaining({
+          headers: expect.not.objectContaining({
+            "X-Impersonation-Session-Id": expect.anything(),
+          }),
+        })
+      );
+    });
+  });
+
+  it("shows error message when confirm API returns 401", async () => {
+    vi.mocked(global.fetch).mockResolvedValue({
+      ok: false,
+      status: 401,
+      json: async () => ({ error: "Unauthorized" }),
+    } as Response);
+
+    render(<ConfirmationSection appointment={UPCOMING_APPT} sessionId="test-session-id" />);
+    fireEvent.click(screen.getByRole("button", { name: /Confirm Appointment/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/Unauthorized/i)).toBeInTheDocument();
+    });
+  });
+
+  it("shows error message when confirm API returns 403", async () => {
+    vi.mocked(global.fetch).mockResolvedValue({
+      ok: false,
+      status: 403,
+      json: async () => ({ error: "Forbidden" }),
+    } as Response);
+
+    render(<ConfirmationSection appointment={UPCOMING_APPT} sessionId="test-session-id" />);
+    fireEvent.click(screen.getByRole("button", { name: /Confirm Appointment/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/Forbidden/i)).toBeInTheDocument();
+    });
+  });
+
+  it("shows error message when confirm API returns 422 (invalid state)", async () => {
+    vi.mocked(global.fetch).mockResolvedValue({
+      ok: false,
+      status: 422,
+      json: async () => ({ error: "Cannot confirm - appointment is not in pending state" }),
+    } as Response);
+
+    render(<ConfirmationSection appointment={UPCOMING_APPT} sessionId="test-session-id" />);
+    fireEvent.click(screen.getByRole("button", { name: /Confirm Appointment/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/Cannot confirm/i)).toBeInTheDocument();
+    });
+  });
+
+  it("does not call confirm API if user cancels the confirmation dialog", async () => {
+    vi.stubGlobal("confirm", vi.fn(() => false));
+
+    render(<ConfirmationSection appointment={UPCOMING_APPT} sessionId="test-session-id" />);
+    fireEvent.click(screen.getByRole("button", { name: /Confirm Appointment/i }));
+
+    expect(global.fetch).not.toHaveBeenCalled();
+  });
+
+  it("shows loading state while confirming", async () => {
+    vi.mocked(global.fetch).mockReturnValue(new Promise(() => {})); // Never resolves
+
+    render(<ConfirmationSection appointment={UPCOMING_APPT} sessionId="test-session-id" />);
+    // Get button reference before clicking
+    const btn = screen.getByRole("button", { name: /Confirm Appointment/i });
+    fireEvent.click(btn);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Confirming.../i)).toBeInTheDocument();
+    });
+    // Button is disabled while loading
+    expect(btn).toBeDisabled();
+  });
+
+  it("shows success message briefly after confirm", async () => {
+    vi.mocked(global.fetch).mockResolvedValue({
+      ok: true,
+      json: async () => ({ id: "appt-1", confirmationStatus: "confirmed" }),
+    } as Response);
+
+    render(<ConfirmationSection appointment={UPCOMING_APPT} sessionId="test-session-id" />);
+    fireEvent.click(screen.getByRole("button", { name: /Confirm Appointment/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/Confirmed!/i)).toBeInTheDocument();
+    });
+  });
 });