diff --git a/package-lock.json b/package-lock.json index 34929af007..2d99e33b29 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16682,9 +16682,9 @@ } }, "node_modules/svelte-sonner": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/svelte-sonner/-/svelte-sonner-1.1.1.tgz", - "integrity": "sha512-5cd3p7wa4cq0NsqslMwdlPb7x1JglEZ/GKrLePWNr5bCxR1nagAVrY01FRFrXfUGs41miLt3C327+8XJo5BzZw==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/svelte-sonner/-/svelte-sonner-1.2.1.tgz", + "integrity": "sha512-N00LOWb60fjKXULbpngku+7E9Krb16KpNq4/Eax5Vu7o1Dpbca55QpaLPsB+yp82JIEdFhfJuv5cVXLoe0ZtVA==", "license": "MIT", "dependencies": { "runed": "^0.28.0" @@ -18674,7 +18674,7 @@ "@stackoverflow/stacks-utils": "^1.0.0", "clsx": "^2.1.1", "svelte-floating-ui": "^1.6.2", - "svelte-sonner": "^1.1.1" + "svelte-sonner": "^1.2.1" }, "peerDependencies": { "@stackoverflow/stacks": "^3.0.0", diff --git a/packages/stacks-svelte/package.json b/packages/stacks-svelte/package.json index 20871b6409..e5e76fceb2 100644 --- a/packages/stacks-svelte/package.json +++ b/packages/stacks-svelte/package.json @@ -40,7 +40,7 @@ "@stackoverflow/stacks-icons-legacy": "npm:@stackoverflow/stacks-icons@^6.9.0", "@stackoverflow/stacks-utils": "^1.0.0", "svelte-floating-ui": "^1.6.2", - "svelte-sonner": "^1.1.1" + "svelte-sonner": "^1.2.1" }, "files": [ "lib", diff --git a/packages/stacks-svelte/src/components/Toast/Toast.test.ts b/packages/stacks-svelte/src/components/Toast/Toast.test.ts index ead25580e0..9158fcdc59 100644 --- a/packages/stacks-svelte/src/components/Toast/Toast.test.ts +++ b/packages/stacks-svelte/src/components/Toast/Toast.test.ts @@ -2,12 +2,29 @@ import { expect } from "@open-wc/testing"; import { render, screen, waitFor } from "@testing-library/svelte"; import userEvent from "@testing-library/user-event"; import sinon from "sinon"; +import { toast } from "svelte-sonner"; import { createRawSnippet, mount, unmount } from "svelte"; import NoticeAction from "../Notice/NoticeAction.svelte"; import Toaster, { showToast, hideToast } from "./Toast.svelte"; +async function dismissToasts() { + try { + // Dismiss while the Toaster is mounted, before automatic DOM cleanup. + toast.dismiss(); + await waitFor( + () => + expect(document.querySelector("[data-sonner-toast]")).to.not + .exist + ); + } finally { + sinon.restore(); + } +} + describe("showToast", () => { + afterEach(dismissToasts); + it("should render a default toast component", async () => { render(Toaster); showToast("Test Toast"); @@ -65,7 +82,6 @@ describe("showToast", () => { await waitFor( () => expect(screen.queryByText("Test Toast")).to.not.exist ); - clock.restore(); }); it("should never close automatically when transient is false", async () => { @@ -78,7 +94,6 @@ describe("showToast", () => { await waitFor(() => expect(screen.getByText("Test Toast")).to.exist); await clock.tickAsync(15000); expect(screen.getByText("Test Toast")).to.exist; - clock.restore(); }); it("should close the toast based on the duration option when provided", async () => { @@ -93,7 +108,6 @@ describe("showToast", () => { await waitFor( () => expect(screen.queryByText("Test Toast")).to.not.exist ); - clock.restore(); }); it("should render other actions in the toast when provided", async () => { @@ -148,7 +162,6 @@ describe("showToast", () => { expect(onCloseSpy).to.have.been.called; expect(onAutoCloseSpy).to.have.been.called; expect(onUserCloseSpy).to.not.have.been.called; - clock.restore(); }); it("should call onClose and onUserClose callbacks when the toast is closed by the user", async () => { @@ -192,6 +205,8 @@ describe("showToast", () => { }); describe("hideToast", () => { + afterEach(dismissToasts); + it("should close a toast programmatically", async () => { render(Toaster); const toastId = showToast("Test Toast", { transient: false });