Merge pull request #1983 from Sarenor/chore/fix-failing-tests-after-v2

Added TestComponents for Modal & Toast to correctly initialize their Stores

packages/skeleton/src/lib/utilities/Modal/Modal.test.ts

@@ -1,10 +1,9 @@
 import { render } from '@testing-library/svelte';
 import { describe, it, expect } from 'vitest';
 
-import { getModalStore } from '$lib/utilities/Modal/stores.js';
-import type { ModalSettings } from '$lib/utilities/Modal/types.js';
+import type { ModalSettings } from './types.js';
 
-import Modal from '$lib/utilities/Modal/Modal.svelte';
+import ModalTest from './ModalTest.svelte';
 
 // Modal Payloads
 const modalAlert: ModalSettings = {
@@ -27,25 +26,20 @@ const modalPrompt: ModalSettings = {
 };
 
 describe('Modal.svelte', () => {
-	const modalStore = getModalStore();
-
 	it('Renders modal alert', async () => {
-		modalStore.trigger(modalAlert);
-		const { getByTestId } = render(Modal);
+		const { getByTestId } = render(ModalTest, { props: { modalSetting: modalAlert } });
 		expect(getByTestId('modal-backdrop')).toBeTruthy();
 		expect(getByTestId('modal')).toBeTruthy();
 	});
 
 	it('Renders modal confirm', async () => {
-		modalStore.trigger(modalConfirm);
-		const { getByTestId } = render(Modal);
+		const { getByTestId } = render(ModalTest, { props: { modalSetting: modalConfirm } });
 		expect(getByTestId('modal-backdrop')).toBeTruthy();
 		expect(getByTestId('modal')).toBeTruthy();
 	});
 
 	it('Renders modal prompt', async () => {
-		modalStore.trigger(modalPrompt);
-		const { getByTestId } = render(Modal);
+		const { getByTestId } = render(ModalTest, { props: { modalSetting: modalPrompt } });
 		expect(getByTestId('modal-backdrop')).toBeTruthy();
 		expect(getByTestId('modal')).toBeTruthy();
 	});

packages/skeleton/src/lib/utilities/Modal/ModalTest.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { initializeModalStore, getModalStore } from './stores.js';
+	import Modal from './Modal.svelte';
+	import type { ModalSettings } from './types.js';
+
+	export let modalSetting: ModalSettings;
+
+	initializeModalStore();
+	getModalStore().trigger(modalSetting);
+</script>
+
+<Modal />

packages/skeleton/src/lib/utilities/Toast/Toast.test.ts

@@ -1,9 +1,8 @@
 import { render } from '@testing-library/svelte';
 import { describe, it, expect } from 'vitest';
 
-import { getToastStore } from '$lib/utilities/Toast/stores.js';
 import type { ToastSettings } from './types.js';
-import Toast from '$lib/utilities/Toast/Toast.svelte';
+import ToastTest from './ToastTest.svelte';
 
 // Toast Payload
 const toastMessage: ToastSettings = {
@@ -17,18 +16,13 @@ const toastMessage: ToastSettings = {
 };
 
 describe('Toast.svelte', () => {
-	const toastStore = getToastStore();
-
 	it('Renders modal alert', async () => {
-		toastStore.trigger(toastMessage);
-		const { getByTestId } = render(Toast);
+		const { getByTestId } = render(ToastTest, { props: { toastSettings: [toastMessage] } });
 		expect(getByTestId('toast')).toBeTruthy();
 	});
 
 	it('Renders only the configured max toasts at a time', async () => {
-		toastStore.trigger({ message: '1' });
-		toastStore.trigger({ message: '2' });
-		const { getAllByTestId } = render(Toast, { max: 1 });
+		const { getAllByTestId } = render(ToastTest, { props: { max: 1, toastSettings: [{ message: '1' }, { message: '2' }] } });
 		expect(getAllByTestId('toast').length).toBe(1);
 	});
 });

packages/skeleton/src/lib/utilities/Toast/ToastTest.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { initializeToastStore, getToastStore } from './stores.js';
+	import type { ToastSettings } from './types.js';
+	import Toast from './Toast.svelte';
+
+	export let toastSettings: Array<ToastSettings> = [];
+	export let max: number | undefined = undefined;
+
+	initializeToastStore();
+	const toastStore = getToastStore();
+
+	toastSettings.forEach((element) => {
+		toastStore.trigger(element);
+	});
+</script>
+
+<Toast {max} />