Bugfix/toast transition error when triggered/closing at the same tick

Author: VitAndrGuid

.changeset/forty-trains-type.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+bugfix: Toast wrapper being removed from the DOM wrongfully after a second toast is triggered when the first one is finishing its outro transition

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

@@ -122,15 +122,21 @@
 		}
 	}
 
+	let wrapperVisible = false;
+
 	// Reactive
 	$: classesWrapper = `${cWrapper} ${cPosition} ${zIndex} ${$$props.class || ''}`;
 	$: classesSnackbar = `${cSnackbar} ${cAlign} ${padding}`;
 	$: classesToast = `${cToast} ${width} ${color} ${padding} ${spacing} ${rounded} ${shadow}`;
 	// Filtered Toast Store
 	$: filteredToasts = Array.from($toastStore).slice(0, max);
+
+	$: if (filteredToasts.length) {
+		wrapperVisible = true;
+	}
 </script>
 
-{#if $toastStore.length}
+{#if filteredToasts.length > 0 || wrapperVisible}
 	<!-- Wrapper -->
 	<div class="snackbar-wrapper {classesWrapper}" data-testid="snackbar-wrapper">
 		<!-- List -->
@@ -148,6 +154,10 @@
 						params: { x: animAxis.x, y: animAxis.y, ...transitionOutParams },
 						enabled: transitions
 					}}
+					on:outroend={() => {
+						const outroFinishedForLastToastOnQueue = filteredToasts.length === 0;
+						if (outroFinishedForLastToastOnQueue) wrapperVisible = false;
+					}}
 					on:mouseenter={() => onMouseEnter(i)}
 					on:mouseleave={() => onMouseLeave(i)}
 					role={t.hideDismiss ? 'alert' : 'alertdialog'}

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

@@ -1,6 +1,5 @@
-import { render } from '@testing-library/svelte';
-import { describe, it, expect } from 'vitest';
-
+import { render, screen } from '@testing-library/svelte';
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
 import type { ToastSettings } from './types.js';
 import ToastTest from './ToastTest.svelte';
 
@@ -16,6 +15,57 @@ const toastMessage: ToastSettings = {
 };
 
 describe('Toast.svelte', () => {
+	const snackbarWrapperTestId = 'snackbar-wrapper';
+
+	// see: https://testing-library.com/docs/svelte-testing-library/faq/#why-arent-transition-events-running
+	beforeEach(() => {
+		const rafMock = (fn: (_: Date) => void) => setTimeout(() => fn(new Date()), 16);
+		vi.stubGlobal('requestAnimationFrame', rafMock);
+	});
+
+	afterEach(() => {
+		vi.unstubAllGlobals();
+	});
+
+	it('does not show the toast wrapper if the toast queue is empty', () => {
+		expect(() => screen.getByTestId(snackbarWrapperTestId)).toThrow();
+	});
+
+	it('keeps the toast wrapper visible if a second toast is scheduled on the same tick as the closing of the first one, until the outro animation of the first toast is finished', async () => {
+		const { getByTestId } = render(ToastTest, {
+			props: {
+				max: 2,
+				toastSettings: [
+					// note how toast B is scheduled to trigger at the same tick as toast A
+					{ message: 'A', timeout: 10 },
+					{ message: 'B', triggerDelay: 10, timeout: 10 }
+				]
+			}
+		});
+
+		const getWrapperElementAfterTimeout = (timeout: number) =>
+			new Promise((resolve) =>
+				setTimeout(() => {
+					try {
+						const el = getByTestId(snackbarWrapperTestId);
+						resolve(el);
+					} catch {
+						resolve(false);
+					}
+				}, timeout)
+			);
+
+		const [wrapperVisibilityOnAToBChange, wrapperVisibilityAfterAOutroFinishes, wrapperVisibilityAfterBOutroFinishes] = await Promise.all([
+			getWrapperElementAfterTimeout(10),
+			getWrapperElementAfterTimeout(16),
+			getWrapperElementAfterTimeout(50)
+		]);
+
+		expect(wrapperVisibilityOnAToBChange).toBeTruthy();
+		expect(wrapperVisibilityAfterAOutroFinishes).toBeTruthy();
+		expect(wrapperVisibilityAfterBOutroFinishes).toBeFalsy();
+	});
+
 	it('Renders modal alert', async () => {
 		const { getByTestId } = render(ToastTest, { props: { toastSettings: [toastMessage] } });
 		expect(getByTestId('toast')).toBeTruthy();

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

@@ -3,14 +3,22 @@
 	import type { ToastSettings } from './types.js';
 	import Toast from './Toast.svelte';
 
-	export let toastSettings: Array<ToastSettings> = [];
+	interface TestToastSettings extends ToastSettings {
+		triggerDelay?: number;
+	}
+
+	export let toastSettings: Array<TestToastSettings> = [];
 	export let max: number | undefined = undefined;
 
 	initializeToastStore();
 	const toastStore = getToastStore();
 
-	toastSettings.forEach((element) => {
-		toastStore.trigger(element);
+	toastSettings.forEach(({ triggerDelay, ...settings }) => {
+		if (triggerDelay) {
+			setTimeout(() => toastStore.trigger(settings), triggerDelay);
+		} else {
+			toastStore.trigger(settings);
+		}
 	});
 </script>