lots of fixes, changes, styling, fixing outbound calls, rnode-flasher.

tests/frontend/Toast.test.js

@@ -4,29 +4,42 @@ import Toast from "@/components/Toast.vue";
 import GlobalEmitter from "@/js/GlobalEmitter";
 
 describe("Toast.vue", () => {
+    let wrapper;
+
     beforeEach(() => {
         vi.useFakeTimers();
+        wrapper = mount(Toast, {
+            global: {
+                stubs: {
+                    TransitionGroup: { template: "<div><slot /></div>" },
+                    MaterialDesignIcon: {
+                        name: "MaterialDesignIcon",
+                        template: '<div class="mdi-stub"></div>',
+                        props: ["iconName"],
+                    },
+                },
+            },
+        });
     });
 
     afterEach(() => {
+        if (wrapper) {
+            wrapper.unmount();
+        }
         vi.useRealTimers();
-        // Clear all listeners from GlobalEmitter to avoid test pollution
-        GlobalEmitter.off("toast");
     });
 
     it("adds a toast when GlobalEmitter emits 'toast'", async () => {
-        const wrapper = mount(Toast);
-
         GlobalEmitter.emit("toast", { message: "Test Message", type: "success" });
         await wrapper.vm.$nextTick();
 
         expect(wrapper.text()).toContain("Test Message");
-        expect(wrapper.findComponent({ name: "MaterialDesignIcon" }).props("iconName")).toBe("check-circle");
+        const icon = wrapper.findComponent({ name: "MaterialDesignIcon" });
+        expect(icon.exists()).toBe(true);
+        expect(icon.props("iconName")).toBe("check-circle");
     });
 
     it("removes a toast after duration", async () => {
-        const wrapper = mount(Toast);
-
         GlobalEmitter.emit("toast", { message: "Test Message", duration: 1000 });
         await wrapper.vm.$nextTick();
 
@@ -39,8 +52,6 @@ describe("Toast.vue", () => {
     });
 
     it("removes a toast when clicking the close button", async () => {
-        const wrapper = mount(Toast);
-
         GlobalEmitter.emit("toast", { message: "Test Message", duration: 0 });
         await wrapper.vm.$nextTick();
 
@@ -48,13 +59,12 @@ describe("Toast.vue", () => {
 
         const closeButton = wrapper.find("button");
         await closeButton.trigger("click");
+        await wrapper.vm.$nextTick();
 
         expect(wrapper.text()).not.toContain("Test Message");
     });
 
     it("assigns correct classes for different toast types", async () => {
-        const wrapper = mount(Toast);
-
         GlobalEmitter.emit("toast", { message: "Success", type: "success" });
         GlobalEmitter.emit("toast", { message: "Error", type: "error" });
         await wrapper.vm.$nextTick();