frontend/src/pages/jails/__tests__/BanUnbanForm.test.tsx

@@ -2,6 +2,8 @@ import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import { BanUnbanForm } from "../BanUnbanForm";
+import { NotificationProvider } from "../../../services/notificationService";
+import { NotificationContainer } from "../../../components/NotificationContainer";
 
 const getRequiredElement = <T extends Element>(elements: T[], index: number): T => {
   const element = elements[index];
@@ -11,6 +13,15 @@ const getRequiredElement = <T extends Element>(elements: T[], index: number): T
   return element;
 };
 
+const renderWithNotifications = (component: React.ReactNode): void => {
+  render(
+    <NotificationProvider>
+      <NotificationContainer />
+      {component}
+    </NotificationProvider>,
+  );
+};
+
 describe("BanUnbanForm", () => {
   it("disables the ban button while the ban request is pending and shows success", async () => {
     let resolveBan: () => void = () => undefined;
@@ -23,7 +34,9 @@ describe("BanUnbanForm", () => {
     const onUnban = vi.fn().mockResolvedValue(undefined);
     const user = userEvent.setup();
 
-    render(<BanUnbanForm jailNames={["sshd"]} onBan={onBan} onUnban={onUnban} />);
+    renderWithNotifications(
+      <BanUnbanForm jailNames={["sshd"]} onBan={onBan} onUnban={onUnban} />,
+    );
 
     const banIpInputs = screen.getAllByPlaceholderText("e.g. 192.168.1.100");
     const banIpInput = getRequiredElement(banIpInputs, 0);
@@ -57,7 +70,9 @@ describe("BanUnbanForm", () => {
     );
     const user = userEvent.setup();
 
-    render(<BanUnbanForm jailNames={["sshd"]} onBan={onBan} onUnban={onUnban} />);
+    renderWithNotifications(
+      <BanUnbanForm jailNames={["sshd"]} onBan={onBan} onUnban={onUnban} />,
+    );
 
     const unbanIpInputs = screen.getAllByPlaceholderText("e.g. 192.168.1.100");
     const unbanIpInput = getRequiredElement(unbanIpInputs, 1);