LukeParke/skeleton
1
0
Fork 0
mirror of https://github.com/LukeHagar/skeleton.git synced 2025-12-07 20:57:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Added TestComponents for Modal & Toast to correctly initialize their Stores
This commit is contained in:
Nik
2023-08-30 18:38:10 +10:00
committed by GitHub
parent 72bd820dc6 603f6dc9b3
commit b15f66c2d9
4 changed files with 37 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/skeleton/src/lib/utilities/Modal/Modal.test.ts
View File

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

12
packages/skeleton/src/lib/utilities/Modal/ModalTest.svelte Normal file
View File

@@ -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 />

12
packages/skeleton/src/lib/utilities/Toast/Toast.test.ts
View File

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

17
packages/skeleton/src/lib/utilities/Toast/ToastTest.svelte Normal file
View File

@@ -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} />