5f11c8d98f
As part of transition to Vue 3.0 and Vite (#230), this commit facilitates the shift towards building rest of the application using Vite. By doing so, it eliminates reliance on outdated Electron building system that offered limited control, blocking desktop builds (#233). Changes include: - Introduce Vite with Vue 2.0 plugin for test execution. - Remove `mocha`, `chai` and other related dependencies. - Adjust test to Vitest syntax. - Revise and update `tests.md` to document the changes. - Add `@modyfi/vite-plugin-yaml` plugin to be able to use yaml file depended logic on test files, replacing previous webpack behavior. - Fix failing tests that are revealed by Vitest due to unhandled errors and lack of assertments. - Remove the test that depends on Vue CLI populating `process.env`. - Use `jsdom` for unit test environment, adding it to dependency to `package.json` as project now depends on it and it was not specified even though `package-lock.json` included it.
106 lines
3.4 KiB
TypeScript
106 lines
3.4 KiB
TypeScript
import { describe, it, expect } from 'vitest';
|
|
import { shallowMount } from '@vue/test-utils';
|
|
import ModalOverlay from '@/presentation/components/Shared/Modal/ModalOverlay.vue';
|
|
|
|
const DOM_MODAL_OVERLAY_BACKGROUND_SELECTOR = '.modal-overlay-background';
|
|
|
|
describe('ModalOverlay.vue', () => {
|
|
describe('show', () => {
|
|
it('renders when prop is true', () => {
|
|
// arrange
|
|
const wrapper = mountComponent({ showProperty: true });
|
|
|
|
// act
|
|
const modalOverlayBackground = wrapper.find(DOM_MODAL_OVERLAY_BACKGROUND_SELECTOR);
|
|
|
|
// assert
|
|
expect(modalOverlayBackground.exists()).to.equal(true);
|
|
});
|
|
|
|
it('does not render prop is false', () => {
|
|
// arrange
|
|
const wrapper = mountComponent({ showProperty: false });
|
|
|
|
// act
|
|
const modalOverlayBackground = wrapper.find(DOM_MODAL_OVERLAY_BACKGROUND_SELECTOR);
|
|
|
|
// assert
|
|
expect(modalOverlayBackground.exists()).to.equal(false);
|
|
});
|
|
|
|
it('sets aria-expanded to `true` prop is true', () => {
|
|
// arrange & act
|
|
const wrapper = mountComponent({ showProperty: true });
|
|
|
|
// assert
|
|
const modalOverlayBackground = wrapper.find(DOM_MODAL_OVERLAY_BACKGROUND_SELECTOR);
|
|
expect(modalOverlayBackground.attributes('aria-expanded')).to.equal('true');
|
|
});
|
|
|
|
describe('on modification', () => {
|
|
it('does not render when initially visible then turned invisible', async () => {
|
|
// arrange
|
|
const wrapper = mountComponent({ showProperty: true });
|
|
await wrapper.vm.$nextTick();
|
|
|
|
// act
|
|
wrapper.setProps({ show: false });
|
|
await wrapper.vm.$nextTick();
|
|
|
|
// assert
|
|
const modalOverlayBackground = wrapper.find(DOM_MODAL_OVERLAY_BACKGROUND_SELECTOR);
|
|
expect(modalOverlayBackground.exists()).to.equal(false);
|
|
});
|
|
|
|
it('renders when initially invisible then turned visible', async () => {
|
|
// arrange
|
|
const wrapper = mountComponent({ showProperty: false });
|
|
await wrapper.vm.$nextTick();
|
|
|
|
// act
|
|
wrapper.setProps({ show: true });
|
|
await wrapper.vm.$nextTick();
|
|
|
|
// assert
|
|
const modalOverlayBackground = wrapper.find(DOM_MODAL_OVERLAY_BACKGROUND_SELECTOR);
|
|
expect(modalOverlayBackground.exists()).to.equal(true);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('event emission', () => {
|
|
it('emits `click` event when clicked', async () => {
|
|
// arrange
|
|
const wrapper = mountComponent({ showProperty: true });
|
|
|
|
// act
|
|
const overlayBackground = wrapper.find(DOM_MODAL_OVERLAY_BACKGROUND_SELECTOR);
|
|
await overlayBackground.trigger('click.self.stop');
|
|
|
|
// assert
|
|
expect(wrapper.emitted().click).to.have.length(1);
|
|
});
|
|
|
|
it('emits `transitionedOut` event after leaving transition', async () => {
|
|
// arrange
|
|
const wrapper = mountComponent({ showProperty: true });
|
|
await wrapper.vm.$nextTick();
|
|
|
|
// act
|
|
wrapper.setProps({ show: false });
|
|
await wrapper.vm.$nextTick();
|
|
const transitionWrapper = wrapper.findComponent({ name: 'transition' });
|
|
transitionWrapper.vm.$emit('after-leave');
|
|
|
|
// assert
|
|
expect(wrapper.emitted().transitionedOut).to.have.length(1);
|
|
});
|
|
});
|
|
});
|
|
|
|
function mountComponent(options?: { readonly showProperty?: boolean }) {
|
|
return shallowMount(ModalOverlay as unknown, {
|
|
propsData: options?.showProperty !== undefined ? { show: options?.showProperty } : undefined,
|
|
});
|
|
}
|