feat(dashboard): Recent activity events route to entity by kind
SP21 Task 2.5 — the Dashboard's 'Recent activity' card now routes clicks
to the matching entity drawer / page by event kind:
- claim_* → /claims?claim=<id> (drawer in Phase 5)
- provider_added → /providers?provider=<npi> (ProviderDrawer)
- remit_received → toast 'coming in a later phase' (RemitDrawer in Phase 4)
- anything else → toast (manual_match, unknown kinds)
Implementation:
- New src/lib/event-routing.ts with the eventKindToUrl() helper,
plus a unit test covering all 6 + default branches.
- src/components/ActivityFeed.tsx gains an optional onItemClick
prop; when set, each row gets role='button', tabIndex=0, the
drillable hover affordance (chevron + tint), and an Enter/Space
keybinding. e.stopPropagation() is called before the handler so a
parent row click can't double-fire (same fix as Task 2.4).
- src/pages/Dashboard.tsx wires the handler on the 'Recent activity'
card via eventKindToUrl + sonner toast for unhandled kinds.
- Backend: CycloneStore.recent_activity() now exposes claimId and
remittanceId on each row (read from ActivityEvent.claim_id /
remittance_id) so the routing helper has the entity ids it needs.
- The frontend Activity interface gains optional claimId /
remittanceId fields; the in-memory sample data and the
addClaim store action populate them so the dashboard works in
both API-configured and sample-data modes.
This commit is contained in:
@@ -1,11 +1,15 @@
|
||||
// @vitest-environment happy-dom
|
||||
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
|
||||
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||
import { cleanup, fireEvent, render, screen } from "@testing-library/react";
|
||||
import { ActivityFeed } from "./ActivityFeed";
|
||||
import type { Activity } from "@/types";
|
||||
|
||||
// happy-dom keeps `document.body` between tests; without cleanup,
|
||||
// `screen.getByRole("button")` finds buttons from earlier renders.
|
||||
afterEach(() => cleanup());
|
||||
|
||||
const baseActivity: Activity = {
|
||||
id: "a-1",
|
||||
kind: "claim_submitted",
|
||||
@@ -47,4 +51,99 @@ describe("ActivityFeed", () => {
|
||||
expect(() => render(<ActivityFeed items={[unknown]} />)).not.toThrow();
|
||||
expect(screen.getByText("future_kind event arrived")).toBeTruthy();
|
||||
});
|
||||
|
||||
// -------------------------------------------------------------------
|
||||
// SP21 Task 2.5: optional `onItemClick` prop makes each row a
|
||||
// drillable target. Default behavior (no handler) must stay unchanged.
|
||||
// -------------------------------------------------------------------
|
||||
|
||||
it("does not attach row-level click attrs when onItemClick is omitted", () => {
|
||||
render(<ActivityFeed items={[baseActivity]} />);
|
||||
const li = screen.getByRole("listitem");
|
||||
expect(li.getAttribute("role")).not.toBe("button");
|
||||
expect(li.getAttribute("tabindex")).toBeNull();
|
||||
expect(li.classList.contains("drillable")).toBe(false);
|
||||
});
|
||||
|
||||
it("attaches role/tabIndex/drillable class when onItemClick is provided", () => {
|
||||
render(
|
||||
<ActivityFeed
|
||||
items={[baseActivity]}
|
||||
onItemClick={() => {}}
|
||||
/>,
|
||||
);
|
||||
const li = screen.getByRole("button", { name: /View claim submitted/ });
|
||||
expect(li.tagName).toBe("LI");
|
||||
expect(li.getAttribute("tabindex")).toBe("0");
|
||||
expect(li.classList.contains("drillable")).toBe(true);
|
||||
});
|
||||
|
||||
it("calls onItemClick with the event on click", () => {
|
||||
const onItemClick = vi.fn();
|
||||
render(
|
||||
<ActivityFeed
|
||||
items={[baseActivity]}
|
||||
onItemClick={onItemClick}
|
||||
/>,
|
||||
);
|
||||
const li = screen.getByRole("button");
|
||||
fireEvent.click(li);
|
||||
expect(onItemClick).toHaveBeenCalledTimes(1);
|
||||
expect(onItemClick).toHaveBeenCalledWith(baseActivity);
|
||||
});
|
||||
|
||||
it("calls onItemClick on Enter keydown", () => {
|
||||
const onItemClick = vi.fn();
|
||||
render(
|
||||
<ActivityFeed
|
||||
items={[baseActivity]}
|
||||
onItemClick={onItemClick}
|
||||
/>,
|
||||
);
|
||||
const li = screen.getByRole("button");
|
||||
fireEvent.keyDown(li, { key: "Enter" });
|
||||
expect(onItemClick).toHaveBeenCalledTimes(1);
|
||||
expect(onItemClick).toHaveBeenCalledWith(baseActivity);
|
||||
});
|
||||
|
||||
it("calls onItemClick on Space keydown", () => {
|
||||
const onItemClick = vi.fn();
|
||||
render(
|
||||
<ActivityFeed
|
||||
items={[baseActivity]}
|
||||
onItemClick={onItemClick}
|
||||
/>,
|
||||
);
|
||||
fireEvent.keyDown(screen.getByRole("button"), { key: " " });
|
||||
expect(onItemClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("does not call onItemClick for unrelated keys", () => {
|
||||
const onItemClick = vi.fn();
|
||||
render(
|
||||
<ActivityFeed
|
||||
items={[baseActivity]}
|
||||
onItemClick={onItemClick}
|
||||
/>,
|
||||
);
|
||||
fireEvent.keyDown(screen.getByRole("button"), { key: "a" });
|
||||
expect(onItemClick).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
// Regression for the Task 2.4 event-bubbling pattern: clicks on a
|
||||
// drillable row must not bubble to a parent row click. Without
|
||||
// stopPropagation a Dashboard parent handler could fire alongside
|
||||
// the row click and corrupt history.
|
||||
it("stops click propagation so a parent row handler does not also fire", () => {
|
||||
const onItemClick = vi.fn();
|
||||
const parentClick = vi.fn();
|
||||
render(
|
||||
<ul onClick={parentClick}>
|
||||
<ActivityFeed items={[baseActivity]} onItemClick={onItemClick} />
|
||||
</ul>,
|
||||
);
|
||||
fireEvent.click(screen.getByRole("button"));
|
||||
expect(onItemClick).toHaveBeenCalledTimes(1);
|
||||
expect(parentClick).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user