fix(quick-260610-jlp-01): wire SettingsSheet 'How to enable' to open InstructionSheet

- Add instructionsOpen state to SettingsSheet - Change broken onClick={onClose} to onClick={() => setInstructionsOpen(true)} - Render InstructionSheet conditionally when instructionsOpen=true - Add InstructionSheet.test.tsx: asserts dialog opens + onClose not called (UAT-05-T4)
2026-06-10 14:12:38 -04:00
parent 74b5d44712
commit 874c030291
2 changed files with 97 additions and 1 deletions
@@ -0,0 +1,90 @@
+/**
+ * InstructionSheet.test.tsx — wiring test for SettingsSheet "How to enable" fix (UAT-05-T4).
+ *
+ * Asserts:
+ *   - Clicking "How to enable" in SettingsSheet opens the InstructionSheet dialog
+ *   - The dialog has heading "How to enable notifications"
+ *   - onClose (the sheet-close prop) is NOT called when the dialog opens
+ */
+
+import React from 'react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+
+// ── Module mocks ──────────────────────────────────────────────────────────────
+
+vi.mock('../hooks/usePushSubscription.js', () => ({
+  usePushSubscription: vi.fn(() => ({
+    permission: 'denied' as NotificationPermission,
+    isSubscribed: false,
+    subscribe: vi.fn(),
+    setEnabled: vi.fn(),
+  })),
+  readNotificationsEnabled: vi.fn(() => false),
+}))
+
+// ── Minimal Notification stub (jsdom lacks it) ────────────────────────────────
+
+beforeEach(() => {
+  if (typeof globalThis.Notification === 'undefined') {
+    Object.defineProperty(globalThis, 'Notification', {
+      value: { permission: 'denied' },
+      writable: true,
+      configurable: true,
+    })
+  } else {
+    Object.defineProperty(globalThis.Notification, 'permission', {
+      value: 'denied',
+      writable: true,
+      configurable: true,
+    })
+  }
+})
+
+// ── Import component (after mocks) ────────────────────────────────────────────
+
+import { SettingsSheet } from './SettingsSheet.js'
+
+// ── Tests ─────────────────────────────────────────────────────────────────────
+
+describe('SettingsSheet — "How to enable" wiring (UAT-05-T4)', () => {
+  it('clicking "How to enable" opens the InstructionSheet dialog and does NOT call onClose', () => {
+    const onCloseSpy = vi.fn()
+    render(<SettingsSheet isOpen={true} onClose={onCloseSpy} />)
+
+    // No instruction dialog yet
+    expect(screen.queryByRole('dialog', { name: /re-enable notifications/i })).toBeNull()
+
+    // Click the "How to enable" button
+    const howToEnableBtn = screen.getByText('How to enable')
+    fireEvent.click(howToEnableBtn)
+
+    // The InstructionSheet dialog should now be visible
+    const instructionDialog = screen.getByRole('dialog', { name: /re-enable notifications/i })
+    expect(instructionDialog).toBeDefined()
+
+    // The heading inside the dialog
+    expect(screen.getByText('How to enable notifications')).toBeDefined()
+
+    // onClose (sheet close prop) must NOT have been called
+    expect(onCloseSpy).not.toHaveBeenCalled()
+  })
+
+  it('InstructionSheet "Done" button closes the instruction dialog without calling sheet onClose', () => {
+    const onCloseSpy = vi.fn()
+    render(<SettingsSheet isOpen={true} onClose={onCloseSpy} />)
+
+    // Open the instruction sheet
+    fireEvent.click(screen.getByText('How to enable'))
+    expect(screen.getByRole('dialog', { name: /re-enable notifications/i })).toBeDefined()
+
+    // Click Done — closes the instruction sheet
+    fireEvent.click(screen.getByText('Done'))
+
+    // Instruction dialog should be gone
+    expect(screen.queryByRole('dialog', { name: /re-enable notifications/i })).toBeNull()
+
+    // Sheet onClose must NOT have been called
+    expect(onCloseSpy).not.toHaveBeenCalled()
+  })
+})