82 lines
2.7 KiB
JavaScript
82 lines
2.7 KiB
JavaScript
|
import { describe, expect, it } from 'vitest';
|
||
|
|
import { mount } from '@vue/test-utils';
|
||
|
|
|
||
|
|
import ConfirmDialog from '../../../resources/js/Components/ConfirmDialog.vue';
|
||
|
|
|
||
|
|
const mountDialog = (props = {}) =>
|
||
|
|
mount(ConfirmDialog, { props: { open: true, ...props } });
|
||
|
|
|
||
|
|
const escapeKey = () =>
|
||
|
|
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
|
||
|
|
|
||
|
|
describe('ConfirmDialog', () => {
|
||
|
|
it('renders nothing when closed', () => {
|
||
|
|
const wrapper = mount(ConfirmDialog, { props: { open: false } });
|
||
|
|
|
||
|
|
expect(wrapper.find('[role="dialog"]').exists()).toBe(false);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('renders the title, message, and confirm label when open', () => {
|
||
|
|
const wrapper = mountDialog({
|
||
|
|
title: 'Delete prompt?',
|
||
|
|
message: 'This is permanent.',
|
||
|
|
confirmLabel: 'Delete',
|
||
|
|
});
|
||
|
|
|
||
|
|
expect(wrapper.find('[role="dialog"]').attributes('aria-modal')).toBe('true');
|
||
|
|
expect(wrapper.find('h2').text()).toBe('Delete prompt?');
|
||
|
|
expect(wrapper.find('p').text()).toBe('This is permanent.');
|
||
|
|
|
||
|
|
const buttons = wrapper.findAll('button');
|
||
|
|
expect(buttons).toHaveLength(2);
|
||
|
|
expect(buttons[0].text()).toBe('Cancel');
|
||
|
|
expect(buttons[1].text()).toBe('Delete');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('omits the message paragraph when there is no message', () => {
|
||
|
|
const wrapper = mountDialog({ message: '' });
|
||
|
|
|
||
|
|
expect(wrapper.find('p').exists()).toBe(false);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('emits "confirm" when the confirm button is clicked', async () => {
|
||
|
|
const wrapper = mountDialog();
|
||
|
|
|
||
|
|
await wrapper.findAll('button')[1].trigger('click');
|
||
|
|
|
||
|
|
expect(wrapper.emitted('confirm')).toHaveLength(1);
|
||
|
|
expect(wrapper.emitted('cancel')).toBeUndefined();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('emits "cancel" when the cancel button is clicked', async () => {
|
||
|
|
const wrapper = mountDialog();
|
||
|
|
|
||
|
|
await wrapper.findAll('button')[0].trigger('click');
|
||
|
|
|
||
|
|
expect(wrapper.emitted('cancel')).toHaveLength(1);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('emits "cancel" on Escape while open, and ignores other keys', async () => {
|
||
|
|
const wrapper = mountDialog();
|
||
|
|
|
||
|
|
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
|
||
|
|
expect(wrapper.emitted('cancel')).toBeUndefined();
|
||
|
|
|
||
|
|
escapeKey();
|
||
|
|
expect(wrapper.emitted('cancel')).toHaveLength(1);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('detaches the Escape handler when closed or unmounted', async () => {
|
||
|
|
const wrapper = mountDialog();
|
||
|
|
|
||
|
|
await wrapper.setProps({ open: false });
|
||
|
|
escapeKey();
|
||
|
|
expect(wrapper.emitted('cancel')).toBeUndefined();
|
||
|
|
|
||
|
|
await wrapper.setProps({ open: true });
|
||
|
|
wrapper.unmount();
|
||
|
|
escapeKey();
|
||
|
|
expect(wrapper.emitted('cancel')).toBeUndefined();
|
||
|
|
});
|
||
|
|
});
|