mirror of https://github.com/rancher/dashboard.git
107 lines
3.2 KiB
TypeScript
107 lines
3.2 KiB
TypeScript
/* eslint-disable jest/no-hooks */
|
|
import { mount, VueWrapper } from '@vue/test-utils';
|
|
import AppModal from '@shell/components/AppModal.vue';
|
|
|
|
let wrapper: VueWrapper<InstanceType<typeof AppModal>>;
|
|
|
|
describe('appModal', () => {
|
|
beforeEach(() => {
|
|
document.body.innerHTML = '<div id="modals"></div>';
|
|
wrapper = mount(AppModal, {
|
|
attachTo: document.body,
|
|
props: {
|
|
clickToClose: true,
|
|
width: 600,
|
|
},
|
|
slots: { default: '<div class="content">Modal content</div>' }
|
|
});
|
|
});
|
|
|
|
afterEach(() => {
|
|
wrapper.unmount();
|
|
document.body.innerHTML = '';
|
|
});
|
|
|
|
it('renders modal content', async() => {
|
|
const modalContainer = document.querySelector('#modals .modal-container');
|
|
|
|
expect(modalContainer).toBeTruthy();
|
|
expect(modalContainer?.textContent).toContain('Modal content');
|
|
});
|
|
|
|
it('emits close event when clicked outside', async() => {
|
|
const overlay = document.querySelector('.modal-overlay');
|
|
|
|
expect(overlay).toBeTruthy();
|
|
|
|
await overlay?.dispatchEvent(new Event('click'));
|
|
expect(wrapper.emitted('close')).toBeTruthy();
|
|
});
|
|
|
|
it('emits close event when escape key is pressed', async() => {
|
|
document.dispatchEvent(new KeyboardEvent('keydown', {
|
|
key: 'Escape',
|
|
keyCode: 27,
|
|
}));
|
|
expect(wrapper.emitted('close')).toBeTruthy();
|
|
});
|
|
|
|
it('does not emit close event when clickToClose is false', async() => {
|
|
await wrapper.setProps({ clickToClose: false });
|
|
const overlay = document.querySelector('.modal-overlay');
|
|
|
|
await overlay?.dispatchEvent(new Event('click'));
|
|
expect(wrapper.emitted('close')).toBeFalsy();
|
|
|
|
document.dispatchEvent(new KeyboardEvent('keydown', {
|
|
key: 'Escape',
|
|
keyCode: 27,
|
|
}));
|
|
|
|
expect(wrapper.emitted('close')).toBeFalsy();
|
|
});
|
|
|
|
it('sets a width for the modal container', async() => {
|
|
const container = document.querySelector('.modal-container');
|
|
|
|
expect(container).toBeTruthy();
|
|
expect(container?.style.width).toBe('600px');
|
|
});
|
|
|
|
it('sets a percentage width for the modal container', async() => {
|
|
await wrapper.setProps({ width: '50%' });
|
|
const container = document.querySelector('.modal-container');
|
|
|
|
expect(container).toBeTruthy();
|
|
expect(container?.style.width).toBe('50%');
|
|
});
|
|
|
|
it('does not generate validation errors when setting a pixel width', async() => {
|
|
const consoleErrorSpy = jest.spyOn(console, 'warn');
|
|
|
|
consoleErrorSpy.mockImplementation(() => {});
|
|
|
|
await wrapper.setProps({ width: '200px' });
|
|
const container = document.querySelector('.modal-container');
|
|
|
|
expect(container).toBeTruthy();
|
|
expect(container?.style.width).toBe('200px');
|
|
|
|
expect(consoleErrorSpy).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('generates validation errors with an invalid string for width', async() => {
|
|
const consoleErrorSpy = jest.spyOn(console, 'warn');
|
|
|
|
consoleErrorSpy.mockImplementation(() => {});
|
|
|
|
await wrapper.setProps({ width: 'FAIL' });
|
|
const container = document.querySelector('.modal-container');
|
|
|
|
expect(container).toBeTruthy();
|
|
expect(container?.style.width).toBe('600px');
|
|
|
|
expect(consoleErrorSpy).toHaveBeenCalledTimes(1);
|
|
});
|
|
});
|