fix(test): tightens NotificationDrawer assertions and adds coverage

Author: wgordon17

src/app/index.css

@@ -92,7 +92,8 @@
   animation: toast-slide-out 0.3s ease-in forwards;
 }
 
-/* Kobalte Dialog drawer animations */
+/* Kobalte Dialog drawer animations — uses data-attribute selectors instead of @utility
+   because Kobalte sets [data-expanded]/[data-closed] based on open/closed state */
 .drawer-content[data-closed] {
   animation: drawer-slide-out 0.3s ease-in forwards;
 }

tests/components/shared/NotificationDrawer.test.tsx

@@ -53,6 +53,7 @@ describe("NotificationDrawer", () => {
     vi.advanceTimersByTime(0);
     expect(screen.getByText(/Something failed/)).toBeDefined();
     expect(screen.getByText(/api/)).toBeDefined();
+    expect(screen.queryByText("(will retry)")).toBeNull();
   });
 
   it("shows newest notification first in the list", () => {
@@ -108,20 +109,23 @@ describe("NotificationDrawer", () => {
   });
 
   it("calls onClose when overlay backdrop is clicked", () => {
+    // Kobalte dismisses via document-level capture-phase pointerdown (createInteractOutside),
+    // not an overlay click handler. data-testid targets the overlay because Dialog.Overlay
+    // has no ARIA role to query by.
     const onClose = vi.fn();
     render(() => <NotificationDrawer open={true} onClose={onClose} />);
     vi.advanceTimersByTime(0);
     const overlay = screen.getByTestId("notification-overlay");
     fireEvent.pointerDown(overlay);
-    expect(onClose).toHaveBeenCalled();
+    expect(onClose).toHaveBeenCalledTimes(1);
   });
 
   it("calls onClose when X button is clicked", () => {
     const onClose = vi.fn();
     render(() => <NotificationDrawer open={true} onClose={onClose} />);
     vi.advanceTimersByTime(0);
     fireEvent.click(screen.getByLabelText("Close notifications"));
-    expect(onClose).toHaveBeenCalled();
+    expect(onClose).toHaveBeenCalledTimes(1);
   });
 
   it("shows empty state text when no notifications", () => {
@@ -159,6 +163,35 @@ describe("NotificationDrawer", () => {
     render(() => <NotificationDrawer open={true} onClose={onClose} />);
     vi.advanceTimersByTime(0);
     fireEvent.keyDown(document, { key: "Escape" });
-    expect(onClose).toHaveBeenCalled();
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("shows retryable indicator when notification is retryable", () => {
+    pushNotification("api", "Transient failure", "error", true);
+    renderDrawer(true);
+    vi.advanceTimersByTime(0);
+    expect(screen.queryByText("(will retry)")).not.toBeNull();
+  });
+
+  it("marks dialog as closed when open transitions from true to false", () => {
+    // solid-presence waits for animationend to unmount; happy-dom has no CSS engine
+    // so the element stays in DOM with data-closed instead of being removed
+    const { setIsOpen } = renderDrawer(true);
+    vi.advanceTimersByTime(0);
+    const dialog = screen.getByRole("dialog");
+    expect(dialog.hasAttribute("data-closed")).toBe(false);
+    setIsOpen(false);
+    vi.advanceTimersByTime(0);
+    expect(dialog.hasAttribute("data-closed")).toBe(true);
+  });
+
+  it("has accessible description for screen readers", () => {
+    renderDrawer(true);
+    vi.advanceTimersByTime(0);
+    const dialog = screen.getByRole("dialog");
+    const descId = dialog.getAttribute("aria-describedby");
+    expect(descId).toBeTruthy();
+    const descEl = document.getElementById(descId!);
+    expect(descEl?.textContent).toContain("Recent system notifications and errors");
   });
 });