import { mount } from '@vue/test-utils';
|
import { nextTick } from 'vue';
|
|
import { afterEach, describe, expect, it, vi } from 'vitest';
|
|
import ImagePreview from './Functional.vue';
|
|
describe('functional image preview', () => {
|
afterEach(() => {
|
document.body.innerHTML = '';
|
vi.restoreAllMocks();
|
});
|
|
it('closes on Escape and removes its keydown listener', async () => {
|
const removeEventListener = vi.spyOn(window, 'removeEventListener');
|
const underlyingKeydown = vi.fn();
|
document.addEventListener('keydown', underlyingKeydown);
|
const wrapper = mount(ImagePreview, {
|
attachTo: document.body,
|
props: {
|
imageList: ['https://example.test/image.png'],
|
show: true,
|
},
|
});
|
|
expect(wrapper.find('.img-preview').exists()).toBe(true);
|
|
document.body.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, cancelable: true, key: 'Escape' }));
|
await nextTick();
|
|
expect(wrapper.find('.img-preview').exists()).toBe(false);
|
expect(underlyingKeydown).not.toHaveBeenCalled();
|
expect(removeEventListener).toHaveBeenCalledWith('keydown', expect.any(Function), true);
|
|
document.removeEventListener('keydown', underlyingKeydown);
|
wrapper.unmount();
|
});
|
|
it('ignores other keys', async () => {
|
const wrapper = mount(ImagePreview, {
|
attachTo: document.body,
|
props: {
|
imageList: ['https://example.test/image.png'],
|
show: true,
|
},
|
});
|
|
document.body.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Enter' }));
|
await nextTick();
|
|
expect(wrapper.find('.img-preview').exists()).toBe(true);
|
|
wrapper.unmount();
|
});
|
});
|