44r0n7/privacy.sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix intermittent ModalDialog unit test failures

Browse Source 
Refactor `ModalDialog` unit tests to use `shallowMount` consistently.
Previously, tests sometimes failed due to the `UseSvgLoader` hook
attempting icon loads during component teardown, which occasionally led
led to errors when the `window` object became unavailable. By
switching to `shallowMount`, tests no longer deeply render child
components, mitigating the risk of such errors and aligning with
unit testing best practices.

Additionally, this commit sets a default value for the `modelValue`
prop in test setups to address Vue warnings about missing required
props, further stabilizing the test environment.
This commit is contained in:
undergroundwires
2024-07-22 15:10:12 +02:00
parent b16e13678c
commit a6505587bf
1 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
tests/unit/presentation/components/Shared/Modal/ModalDialog.spec.ts
View File

@@ -1,7 +1,6 @@
import { describe, it, expect } from 'vitest'; import { describe, it, expect } from 'vitest';
import { shallowMount, mount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import ModalDialog from '@/presentation/components/Shared/Modal/ModalDialog.vue'; import ModalDialog from '@/presentation/components/Shared/Modal/ModalDialog.vue';
import ModalContainer from '@/presentation/components/Shared/Modal/ModalContainer.vue';
const DOM_CLOSE_BUTTON_SELECTOR = '.dialog__close-button'; const DOM_CLOSE_BUTTON_SELECTOR = '.dialog__close-button';
const MODAL_CONTAINER_COMPONENT_NAME = 'ModalContainer'; const MODAL_CONTAINER_COMPONENT_NAME = 'ModalContainer';
@@ -19,18 +18,19 @@ describe('ModalDialog.vue', () => {
describe(`binds the visibility flag ${MODAL_CONTAINER_COMPONENT_NAME}`, () => { describe(`binds the visibility flag ${MODAL_CONTAINER_COMPONENT_NAME}`, () => {
it('given true', () => { it('given true', () => {
// arrange & act // arrange & act
const wrapper = mountComponent({ modelValue: true, deepMount: true }); const wrapper = mountComponent({ modelValue: true });
// assert // assert
const modalContainerWrapper = wrapper.findComponent(ModalContainer); const modalContainerWrapper = wrapper.findComponent({ name: MODAL_CONTAINER_COMPONENT_NAME });
expect(modalContainerWrapper.props('modelValue')).to.equal(true); expect(modalContainerWrapper.props('modelValue')).to.equal(true);
}); });
it('given false', () => { it('given false', () => {
// arrange & act // arrange & act
const wrapper = mountComponent({ modelValue: false, deepMount: true }); const wrapper = mountComponent({ modelValue: false });
// assert // assert
const modalContainerWrapper = wrapper.findComponent(ModalContainer); const modalContainerWrapper = wrapper.findComponent({ name: MODAL_CONTAINER_COMPONENT_NAME });
expect(modalContainerWrapper.props('modelValue')).to.equal(false); expect(modalContainerWrapper.props('modelValue')).to.equal(false);
}); });
}); });
@@ -65,17 +65,20 @@ describe('ModalDialog.vue', () => {
function mountComponent(options?: { function mountComponent(options?: {
readonly modelValue?: boolean, readonly modelValue?: boolean,
readonly slotHtml?: string, readonly slotHtml?: string,
readonly deepMount?: boolean,
}) { }) {
const mountFunction = options?.deepMount === true ? mount : shallowMount; const wrapper = shallowMount(ModalDialog, {
const wrapper = mountFunction(ModalDialog, { props: {
props: options?.modelValue !== undefined ? { modelValue: options?.modelValue } : undefined, modelValue: options?.modelValue !== undefined
? options?.modelValue
: true /* provide default value to required property */,
},
slots: options?.slotHtml !== undefined ? { default: options?.slotHtml } : undefined, slots: options?.slotHtml !== undefined ? { default: options?.slotHtml } : undefined,
global: { global: {
stubs: options?.deepMount === true ? undefined : { stubs: {
[MODAL_CONTAINER_COMPONENT_NAME]: { [MODAL_CONTAINER_COMPONENT_NAME]: {
name: MODAL_CONTAINER_COMPONENT_NAME, name: MODAL_CONTAINER_COMPONENT_NAME,
template: '<slot />', template: '<slot />',
props: ['modelValue'],
}, },
}, },
}, },