Skip to content

Commit

Permalink
Fix intermittent ModalDialog unit test failures
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
undergroundwires committed Jul 22, 2024
1 parent b16e136 commit a650558
Showing 1 changed file with 14 additions and 11 deletions.
25 changes: 14 additions & 11 deletions tests/unit/presentation/components/Shared/Modal/ModalDialog.spec.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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);
});
});
Expand Down Expand Up @@ -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'],
},
},
},
Expand Down

0 comments on commit a650558

Please sign in to comment.