| 1 |
import { render, screen } from '@testing-library/react'; |
| 2 |
import userEvent from '@testing-library/user-event'; |
| 3 |
import { SelectAnimation } from '../SelectAnimation'; |
| 4 |
|
| 5 |
jest.mock('@agent/lib/wp', () => ({ |
| 6 |
getOption: jest.fn(() => Promise.resolve({ type: 'fade', speed: 'medium' })), |
| 7 |
})); |
| 8 |
jest.mock('@wordpress/components', () => ({ |
| 9 |
// biome-ignore lint/correctness/noUnusedFunctionParameters: Mocking components, not implementing functionality |
| 10 |
__experimentalToggleGroupControl: ({ children, value, onChange }) => ( |
| 11 |
<div data-testid="toggle-group"> |
| 12 |
{children?.map?.((child) => |
| 13 |
child |
| 14 |
? { |
| 15 |
...child, |
| 16 |
props: { |
| 17 |
...child.props, |
| 18 |
onClick: () => onChange(child.props.value), |
| 19 |
}, |
| 20 |
} |
| 21 |
: null, |
| 22 |
)} |
| 23 |
</div> |
| 24 |
), |
| 25 |
__experimentalToggleGroupControlOption: ({ label, value }) => ( |
| 26 |
<button type="button" data-value={value}> |
| 27 |
{label} |
| 28 |
</button> |
| 29 |
), |
| 30 |
})); |
| 31 |
jest.mock( |
| 32 |
'classnames', |
| 33 |
() => |
| 34 |
(...args) => |
| 35 |
args.filter(Boolean).join(' '), |
| 36 |
); |
| 37 |
|
| 38 |
const mockSetType = jest.fn(); |
| 39 |
const mockSetSpeed = jest.fn(); |
| 40 |
|
| 41 |
beforeEach(() => { |
| 42 |
window.ExtendableAnimations = { |
| 43 |
setType: mockSetType, |
| 44 |
setSpeed: mockSetSpeed, |
| 45 |
}; |
| 46 |
mockSetType.mockClear(); |
| 47 |
mockSetSpeed.mockClear(); |
| 48 |
}); |
| 49 |
|
| 50 |
describe('SelectAnimation — undo on cancel/unmount', () => { |
| 51 |
test('restores initial animation settings on unmount without confirming', async () => { |
| 52 |
const user = userEvent.setup(); |
| 53 |
const { unmount } = render( |
| 54 |
<SelectAnimation |
| 55 |
onConfirm={jest.fn()} |
| 56 |
onCancel={jest.fn()} |
| 57 |
onLoad={jest.fn()} |
| 58 |
/>, |
| 59 |
); |
| 60 |
// Wait for loading to finish |
| 61 |
await screen.findByText(/cancel/i); |
| 62 |
|
| 63 |
// Touch the animation by clicking a type button |
| 64 |
const zoomBtn = screen.getByText('Zoom In'); |
| 65 |
await user.click(zoomBtn); |
| 66 |
|
| 67 |
mockSetType.mockClear(); |
| 68 |
mockSetSpeed.mockClear(); |
| 69 |
|
| 70 |
unmount(); |
| 71 |
expect(mockSetType).toHaveBeenCalledWith('fade'); |
| 72 |
expect(mockSetSpeed).toHaveBeenCalledWith('medium'); |
| 73 |
}); |
| 74 |
|
| 75 |
test('does not restore settings after confirming', async () => { |
| 76 |
const onConfirm = jest.fn(); |
| 77 |
const user = userEvent.setup(); |
| 78 |
const { unmount } = render( |
| 79 |
<SelectAnimation |
| 80 |
onConfirm={onConfirm} |
| 81 |
onCancel={jest.fn()} |
| 82 |
onLoad={jest.fn()} |
| 83 |
/>, |
| 84 |
); |
| 85 |
await screen.findByText(/cancel/i); |
| 86 |
|
| 87 |
const zoomBtn = screen.getByText('Zoom In'); |
| 88 |
await user.click(zoomBtn); |
| 89 |
|
| 90 |
mockSetType.mockClear(); |
| 91 |
mockSetSpeed.mockClear(); |
| 92 |
|
| 93 |
await user.click(screen.getByRole('button', { name: /save/i })); |
| 94 |
expect(onConfirm).toHaveBeenCalled(); |
| 95 |
|
| 96 |
unmount(); |
| 97 |
expect(mockSetType).not.toHaveBeenCalled(); |
| 98 |
expect(mockSetSpeed).not.toHaveBeenCalled(); |
| 99 |
}); |
| 100 |
}); |
| 101 |
|
