|
| 1 | +import React from 'react'; |
| 2 | +import { act, fireEvent, render, screen } from '@testing-library/react'; |
| 3 | +import Modal from '../index'; |
| 4 | +import { createModalStore } from '../modal-context'; |
| 5 | + |
| 6 | +describe('Modal context — legacy useModal(id)', () => { |
| 7 | + function Toolbar() { |
| 8 | + const confirm = Modal.useModal('confirm'); |
| 9 | + return <button onClick={confirm.show}>open</button>; |
| 10 | + } |
| 11 | + function ConfirmModal() { |
| 12 | + const { visible, close } = Modal.useModal('confirm'); |
| 13 | + return ( |
| 14 | + <Modal visible={visible} onClose={close} header="Confirm"> |
| 15 | + confirm body |
| 16 | + </Modal> |
| 17 | + ); |
| 18 | + } |
| 19 | + |
| 20 | + it('shows and closes a modal via per-id hook', () => { |
| 21 | + render( |
| 22 | + <Modal.Provider store={createModalStore()}> |
| 23 | + <Toolbar /> |
| 24 | + <ConfirmModal /> |
| 25 | + </Modal.Provider> |
| 26 | + ); |
| 27 | + |
| 28 | + expect(screen.queryByText('confirm body')).not.toBeInTheDocument(); |
| 29 | + fireEvent.click(screen.getByText('open')); |
| 30 | + expect(screen.getByText('confirm body')).toBeInTheDocument(); |
| 31 | + }); |
| 32 | +}); |
| 33 | + |
| 34 | +describe('Modal context — imperative API + outlet', () => { |
| 35 | + function ConfirmContent(props: { message: string }) { |
| 36 | + const { visible, hide, remove } = Modal.useModalSelf<{ message: string }, boolean>(); |
| 37 | + return ( |
| 38 | + <Modal |
| 39 | + visible={visible} |
| 40 | + header="Are you sure?" |
| 41 | + afterClose={remove} |
| 42 | + onConfirm={() => hide(true)} |
| 43 | + onCancel={() => hide(false)}> |
| 44 | + <span data-testid="message">{props.message}</span> |
| 45 | + </Modal> |
| 46 | + ); |
| 47 | + } |
| 48 | + |
| 49 | + it('renders registered components and resolves with hide(result)', async () => { |
| 50 | + const store = createModalStore(); |
| 51 | + store.register('confirm', ConfirmContent); |
| 52 | + |
| 53 | + let resolved: boolean | undefined; |
| 54 | + function Trigger() { |
| 55 | + const modal = Modal.useModalActions(); |
| 56 | + return ( |
| 57 | + <button |
| 58 | + onClick={async () => { |
| 59 | + resolved = await modal.show<boolean, { message: string }>('confirm', { |
| 60 | + message: 'delete this?', |
| 61 | + }); |
| 62 | + }}> |
| 63 | + ask |
| 64 | + </button> |
| 65 | + ); |
| 66 | + } |
| 67 | + |
| 68 | + render( |
| 69 | + <Modal.Provider store={store}> |
| 70 | + <Trigger /> |
| 71 | + </Modal.Provider> |
| 72 | + ); |
| 73 | + |
| 74 | + fireEvent.click(screen.getByText('ask')); |
| 75 | + expect(screen.getByTestId('message')).toHaveTextContent('delete this?'); |
| 76 | + |
| 77 | + await act(async () => { |
| 78 | + fireEvent.click(screen.getByText('OK')); |
| 79 | + }); |
| 80 | + expect(resolved).toBe(true); |
| 81 | + }); |
| 82 | + |
| 83 | + it('declarative <Modal.Register> works the same as store.register', () => { |
| 84 | + const store = createModalStore(); |
| 85 | + function Trigger() { |
| 86 | + const modal = Modal.useModalActions(); |
| 87 | + return <button onClick={() => modal.show('confirm', { message: 'hi' })}>go</button>; |
| 88 | + } |
| 89 | + |
| 90 | + render( |
| 91 | + <Modal.Provider store={store}> |
| 92 | + <Modal.Register id="confirm" component={ConfirmContent} /> |
| 93 | + <Trigger /> |
| 94 | + </Modal.Provider> |
| 95 | + ); |
| 96 | + |
| 97 | + expect(store.isRegistered('confirm')).toBe(true); |
| 98 | + fireEvent.click(screen.getByText('go')); |
| 99 | + expect(screen.getByTestId('message')).toHaveTextContent('hi'); |
| 100 | + }); |
| 101 | + |
| 102 | + it('<Modal.Register> unregisters when unmounted', () => { |
| 103 | + const store = createModalStore(); |
| 104 | + function Host({ mounted }: { mounted: boolean }) { |
| 105 | + return ( |
| 106 | + <Modal.Provider store={store}> |
| 107 | + {mounted ? <Modal.Register id="confirm" component={ConfirmContent} /> : null} |
| 108 | + </Modal.Provider> |
| 109 | + ); |
| 110 | + } |
| 111 | + |
| 112 | + const { rerender } = render(<Host mounted />); |
| 113 | + expect(store.isRegistered('confirm')).toBe(true); |
| 114 | + |
| 115 | + rerender(<Host mounted={false} />); |
| 116 | + expect(store.isRegistered('confirm')).toBe(false); |
| 117 | + }); |
| 118 | + |
| 119 | + it('hideAll resolves all open modals with undefined', async () => { |
| 120 | + const store = createModalStore(); |
| 121 | + store.register('a', () => { |
| 122 | + const { visible, remove } = Modal.useModalSelf(); |
| 123 | + return ( |
| 124 | + <Modal visible={visible} afterClose={remove} header="a"> |
| 125 | + a body |
| 126 | + </Modal> |
| 127 | + ); |
| 128 | + }); |
| 129 | + store.register('b', () => { |
| 130 | + const { visible, remove } = Modal.useModalSelf(); |
| 131 | + return ( |
| 132 | + <Modal visible={visible} afterClose={remove} header="b"> |
| 133 | + b body |
| 134 | + </Modal> |
| 135 | + ); |
| 136 | + }); |
| 137 | + |
| 138 | + let aResult: unknown = 'untouched'; |
| 139 | + let bResult: unknown = 'untouched'; |
| 140 | + render(<Modal.Provider store={store}>{null}</Modal.Provider>); |
| 141 | + |
| 142 | + await act(async () => { |
| 143 | + store.show('a').then((v) => (aResult = v)); |
| 144 | + store.show('b').then((v) => (bResult = v)); |
| 145 | + }); |
| 146 | + expect(screen.getByText('a body')).toBeInTheDocument(); |
| 147 | + expect(screen.getByText('b body')).toBeInTheDocument(); |
| 148 | + |
| 149 | + await act(async () => { |
| 150 | + store.hideAll(); |
| 151 | + }); |
| 152 | + expect(aResult).toBeUndefined(); |
| 153 | + expect(bResult).toBeUndefined(); |
| 154 | + }); |
| 155 | + |
| 156 | + it('remove() drains a pending resolver instead of leaking the promise', async () => { |
| 157 | + const store = createModalStore(); |
| 158 | + store.register('confirm', ConfirmContent); |
| 159 | + |
| 160 | + let resolved: unknown = 'untouched'; |
| 161 | + await act(async () => { |
| 162 | + store.show<boolean, { message: string }>('confirm', { message: 'x' }).then((v) => { |
| 163 | + resolved = v; |
| 164 | + }); |
| 165 | + }); |
| 166 | + |
| 167 | + await act(async () => { |
| 168 | + store.remove('confirm'); |
| 169 | + }); |
| 170 | + // microtask flush |
| 171 | + await act(async () => {}); |
| 172 | + |
| 173 | + expect(resolved).toBeUndefined(); |
| 174 | + }); |
| 175 | + |
| 176 | + it('useModalSelf throws outside an outlet', () => { |
| 177 | + function Bad() { |
| 178 | + Modal.useModalSelf(); |
| 179 | + return null; |
| 180 | + } |
| 181 | + const spy = jest.spyOn(console, 'error').mockImplementation(() => {}); |
| 182 | + expect(() => |
| 183 | + render( |
| 184 | + <Modal.Provider store={createModalStore()}> |
| 185 | + <Bad /> |
| 186 | + </Modal.Provider> |
| 187 | + ) |
| 188 | + ).toThrow(/useModalSelf must be used inside/); |
| 189 | + spy.mockRestore(); |
| 190 | + }); |
| 191 | +}); |
0 commit comments