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