@terreno/ui 0.14.1 → 0.15.0

package/src/ToastNotifications.test.tsx

@@ -3,7 +3,7 @@ import {act, render, waitFor} from "@testing-library/react-native";
 import React from "react";
 import {Text} from "react-native";
 
-import {
+import ToastContainer, {
   GlobalToast,
   type ToastContainerRef,
   type ToastOptions,
@@ -1586,4 +1586,751 @@ describe("ToastNotifications", () => {
       unmount();
     });
   });
+
+  describe("Toast with swipeEnabled and pan interactions", () => {
+    // Capture PanResponder config callbacks to test them directly
+    const capturedConfigs: Array<Record<string, Function>> = [];
+
+    it("should exercise pan responder callbacks directly", async () => {
+      const {PanResponder} = require("react-native");
+      const originalCreate = PanResponder.create;
+      PanResponder.create = (config: Record<string, Function>) => {
+        capturedConfigs.push(config);
+        return originalCreate.call(PanResponder, config);
+      };
+
+      let toastRef: ToastType | null = null;
+      const TestComponent = () => {
+        const toast = useToastNotifications();
+        toastRef = toast;
+        return <Text>Test</Text>;
+      };
+
+      render(
+        <ToastProvider swipeEnabled>
+          <TestComponent />
+        </ToastProvider>
+      );
+
+      await waitFor(() => {
+        expect(toastRef?.show).toBeDefined();
+      });
+
+      await act(async () => {
+        toastRef?.show("Swipe toast", {id: "swipe-direct", swipeEnabled: true});
+      });
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      });
+
+      // Find the captured PanResponder config
+      const panConfig = capturedConfigs[capturedConfigs.length - 1];
+      expect(panConfig).toBeDefined();
+
+      if (panConfig) {
+        const mockEvent = {};
+
+        // Test onMoveShouldSetPanResponder with large movement
+        if (panConfig.onMoveShouldSetPanResponder) {
+          const result = panConfig.onMoveShouldSetPanResponder(mockEvent, {dx: 20, dy: 0});
+          expect(result).toBe(true);
+        }
+
+        // Test onMoveShouldSetPanResponder with no movement
+        if (panConfig.onMoveShouldSetPanResponder) {
+          const result = panConfig.onMoveShouldSetPanResponder(mockEvent, {dx: 0, dy: 0});
+          expect(result).toBe(false);
+        }
+
+        // Test onPanResponderMove
+        if (panConfig.onPanResponderMove) {
+          await act(async () => {
+            panConfig.onPanResponderMove(mockEvent, {dx: 30, dy: 5});
+          });
+        }
+
+        // Test onPanResponderRelease with swipe right (dx > 50)
+        if (panConfig.onPanResponderRelease) {
+          await act(async () => {
+            panConfig.onPanResponderRelease(mockEvent, {dx: 60, dy: 0});
+          });
+          await act(async () => {
+            await new Promise((resolve) => setTimeout(resolve, 300));
+          });
+        }
+      }
+
+      PanResponder.create = originalCreate;
+    });
+
+    it("should handle swipe left via pan responder callback", async () => {
+      const {PanResponder} = require("react-native");
+      const configs: Array<Record<string, Function>> = [];
+      const originalCreate = PanResponder.create;
+      PanResponder.create = (config: Record<string, Function>) => {
+        configs.push(config);
+        return originalCreate.call(PanResponder, config);
+      };
+
+      let toastRef: ToastType | null = null;
+      const TestComponent = () => {
+        const toast = useToastNotifications();
+        toastRef = toast;
+        return <Text>Test</Text>;
+      };
+
+      render(
+        <ToastProvider swipeEnabled>
+          <TestComponent />
+        </ToastProvider>
+      );
+
+      await waitFor(() => {
+        expect(toastRef?.show).toBeDefined();
+      });
+
+      await act(async () => {
+        toastRef?.show("Swipe left", {id: "swipe-left-direct", swipeEnabled: true});
+      });
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      });
+
+      const panConfig = configs[configs.length - 1];
+      if (panConfig?.onPanResponderRelease) {
+        // Swipe left (dx < -50)
+        await act(async () => {
+          panConfig.onPanResponderRelease({}, {dx: -60, dy: 0});
+        });
+        await act(async () => {
+          await new Promise((resolve) => setTimeout(resolve, 300));
+        });
+      }
+
+      PanResponder.create = originalCreate;
+    });
+
+    it("should snap back on small swipe via pan responder callback", async () => {
+      const {PanResponder} = require("react-native");
+      const configs: Array<Record<string, Function>> = [];
+      const originalCreate = PanResponder.create;
+      PanResponder.create = (config: Record<string, Function>) => {
+        configs.push(config);
+        return originalCreate.call(PanResponder, config);
+      };
+
+      let toastRef: ToastType | null = null;
+      const TestComponent = () => {
+        const toast = useToastNotifications();
+        toastRef = toast;
+        return <Text>Test</Text>;
+      };
+
+      render(
+        <ToastProvider swipeEnabled>
+          <TestComponent />
+        </ToastProvider>
+      );
+
+      await waitFor(() => {
+        expect(toastRef?.show).toBeDefined();
+      });
+
+      await act(async () => {
+        toastRef?.show("Small swipe", {id: "swipe-small-direct", swipeEnabled: true});
+      });
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      });
+
+      const panConfig = configs[configs.length - 1];
+      if (panConfig?.onPanResponderRelease) {
+        // Small swipe that should spring back
+        await act(async () => {
+          panConfig.onPanResponderRelease({}, {dx: 10, dy: 0});
+        });
+        await act(async () => {
+          await new Promise((resolve) => setTimeout(resolve, 300));
+        });
+      }
+
+      PanResponder.create = originalCreate;
+    });
+  });
+
+  describe("Toast lifecycle and auto-close", () => {
+    it("should auto-close toast after duration expires", async () => {
+      let toastRef: ToastType | null = null;
+
+      const TestComponent = () => {
+        const toast = useToastNotifications();
+        toastRef = toast;
+        return <Text>Test</Text>;
+      };
+
+      render(
+        <ToastProvider swipeEnabled={false}>
+          <TestComponent />
+        </ToastProvider>
+      );
+
+      await waitFor(() => {
+        expect(toastRef?.show).toBeDefined();
+      });
+
+      const onCloseMock = mock(() => {});
+      await act(async () => {
+        toastRef?.show("Auto close toast", {
+          duration: 100,
+          id: "auto-close",
+          onClose: onCloseMock,
+        });
+      });
+
+      // Wait for requestAnimationFrame + duration + animation
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 600));
+      });
+    });
+
+    it("should trigger handleClose when hiding a toast", async () => {
+      let toastRef: ToastType | null = null;
+
+      const TestComponent = () => {
+        const toast = useToastNotifications();
+        toastRef = toast;
+        return <Text>Test</Text>;
+      };
+
+      render(
+        <ToastProvider swipeEnabled={false}>
+          <TestComponent />
+        </ToastProvider>
+      );
+
+      await waitFor(() => {
+        expect(toastRef?.show).toBeDefined();
+      });
+
+      await act(async () => {
+        toastRef?.show("Hide me", {duration: 0, id: "hide-close"});
+      });
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      });
+
+      // Hide triggers the close animation
+      await act(async () => {
+        toastRef?.hide("hide-close");
+      });
+
+      // Wait for close animation to complete
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 500));
+      });
+    });
+
+    it("should auto-destroy toast after animation completes", async () => {
+      let toastRef: ToastType | null = null;
+      const onCloseMock = mock(() => {});
+
+      const TestComponent = () => {
+        const toast = useToastNotifications();
+        toastRef = toast;
+        return <Text>Test</Text>;
+      };
+
+      render(
+        <ToastProvider animationDuration={50} swipeEnabled={false}>
+          <TestComponent />
+        </ToastProvider>
+      );
+
+      await waitFor(() => {
+        expect(toastRef?.show).toBeDefined();
+      });
+
+      await act(async () => {
+        toastRef?.show("Short life", {
+          animationDuration: 50,
+          duration: 50,
+          id: "short-life",
+          onClose: onCloseMock,
+        });
+      });
+
+      // Wait long enough for auto-close + animation
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 400));
+      });
+
+      expect(toastRef?.isOpen("short-life")).toBe(false);
+    });
+  });
+
+  describe("Toast swipe gestures", () => {
+    it("should render swipe-enabled toast and handle pan gestures", async () => {
+      let toastRef: ToastType | null = null;
+
+      const TestComponent = () => {
+        const toast = useToastNotifications();
+        toastRef = toast;
+        return <Text>Test</Text>;
+      };
+
+      render(
+        <ToastProvider swipeEnabled>
+          <TestComponent />
+        </ToastProvider>
+      );
+
+      await waitFor(() => {
+        expect(toastRef?.show).toBeDefined();
+      });
+
+      await act(async () => {
+        toastRef?.show("Swipe me", {swipeEnabled: true});
+      });
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      });
+    });
+  });
+
+  describe("Toast animation types", () => {
+    it("should show toast with zoom-in animation", async () => {
+      let toastRef: ToastType | null = null;
+
+      const TestComponent = () => {
+        const toast = useToastNotifications();
+        toastRef = toast;
+        return <Text>Test</Text>;
+      };
+
+      render(
+        <ToastProvider animationType="zoom-in" swipeEnabled={false}>
+          <TestComponent />
+        </ToastProvider>
+      );
+
+      await waitFor(() => {
+        expect(toastRef?.show).toBeDefined();
+      });
+
+      await act(async () => {
+        toastRef?.show("Zoom toast", {animationType: "zoom-in"});
+      });
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      });
+    });
+
+    it("should show toast with bottom placement and slide-in", async () => {
+      let toastRef: ToastType | null = null;
+
+      const TestComponent = () => {
+        const toast = useToastNotifications();
+        toastRef = toast;
+        return <Text>Test</Text>;
+      };
+
+      render(
+        <ToastProvider placement="bottom" swipeEnabled={false}>
+          <TestComponent />
+        </ToastProvider>
+      );
+
+      await waitFor(() => {
+        expect(toastRef?.show).toBeDefined();
+      });
+
+      await act(async () => {
+        toastRef?.show("Bottom slide toast", {placement: "bottom"});
+      });
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      });
+    });
+  });
+
+  describe("Toast renderType and renderToast", () => {
+    it("should render custom toast via renderType", async () => {
+      let toastRef: ToastType | null = null;
+
+      const TestComponent = () => {
+        const toast = useToastNotifications();
+        toastRef = toast;
+        return <Text>Test</Text>;
+      };
+
+      const customRenderType = {
+        custom: (toast: ToastProps) => <Text>Custom: {String(toast.message)}</Text>,
+      };
+
+      render(
+        <ToastProvider renderType={customRenderType} swipeEnabled={false}>
+          <TestComponent />
+        </ToastProvider>
+      );
+
+      await waitFor(() => {
+        expect(toastRef?.show).toBeDefined();
+      });
+
+      await act(async () => {
+        toastRef?.show("Hello", {type: "custom"});
+      });
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      });
+    });
+
+    it("should render custom toast via renderToast", async () => {
+      let toastRef: ToastType | null = null;
+
+      const TestComponent = () => {
+        const toast = useToastNotifications();
+        toastRef = toast;
+        return <Text>Test</Text>;
+      };
+
+      render(
+        <ToastProvider
+          renderToast={(toast) => <Text>Rendered: {String(toast.message)}</Text>}
+          swipeEnabled={false}
+        >
+          <TestComponent />
+        </ToastProvider>
+      );
+
+      await waitFor(() => {
+        expect(toastRef?.show).toBeDefined();
+      });
+
+      await act(async () => {
+        toastRef?.show("Custom render");
+      });
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      });
+    });
+  });
+
+  describe("Toast onPress", () => {
+    it("should call onPress when toast is pressed", async () => {
+      let toastRef: ToastType | null = null;
+      const onPressMock = mock((_id: string) => {});
+
+      const TestComponent = () => {
+        const toast = useToastNotifications();
+        toastRef = toast;
+        return <Text>Test</Text>;
+      };
+
+      render(
+        <ToastProvider swipeEnabled={false}>
+          <TestComponent />
+        </ToastProvider>
+      );
+
+      await waitFor(() => {
+        expect(toastRef?.show).toBeDefined();
+      });
+
+      await act(async () => {
+        toastRef?.show("Press me", {id: "press-test", onPress: onPressMock});
+      });
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      });
+    });
+  });
+
+  describe("Toast custom colors", () => {
+    it("should render with custom success/danger/warning/normal colors", async () => {
+      let toastRef: ToastType | null = null;
+
+      const TestComponent = () => {
+        const toast = useToastNotifications();
+        toastRef = toast;
+        return <Text>Test</Text>;
+      };
+
+      render(
+        <ToastProvider
+          dangerColor="#ff0000"
+          normalColor="#999999"
+          successColor="#00ff00"
+          swipeEnabled={false}
+          warningColor="#ffff00"
+        >
+          <TestComponent />
+        </ToastProvider>
+      );
+
+      await waitFor(() => {
+        expect(toastRef?.show).toBeDefined();
+      });
+
+      await act(async () => {
+        toastRef?.show("Normal toast");
+      });
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      });
+    });
+  });
+
+  describe("center placement toast rendering", () => {
+    it("should fully render center toast content including filter and map callbacks", async () => {
+      let toastRef: ToastType | null = null;
+      const TestComponent = () => {
+        const toast = useToastNotifications();
+        toastRef = toast;
+        return <Text>Test</Text>;
+      };
+
+      const {getByText} = render(
+        <ToastProvider placement="center" swipeEnabled={false}>
+          <TestComponent />
+        </ToastProvider>
+      );
+
+      await waitFor(() => {
+        expect(toastRef?.show).toBeDefined();
+      });
+
+      await act(async () => {
+        toastRef?.show("Center rendered", {placement: "center"});
+      });
+
+      // Flush the requestAnimationFrame (mocked as setTimeout(, 0)) and re-renders
+      for (let i = 0; i < 5; i++) {
+        await act(async () => {
+          await new Promise((resolve) => setTimeout(resolve, 50));
+        });
+      }
+
+      expect(getByText("Center rendered")).toBeTruthy();
+    });
+
+    it("should render multiple center toasts through filter and map", async () => {
+      let toastRef: ToastType | null = null;
+      const TestComponent = () => {
+        const toast = useToastNotifications();
+        toastRef = toast;
+        return <Text>Test</Text>;
+      };
+
+      const {getByText} = render(
+        <ToastProvider placement="center" swipeEnabled={false}>
+          <TestComponent />
+        </ToastProvider>
+      );
+
+      await waitFor(() => {
+        expect(toastRef?.show).toBeDefined();
+      });
+
+      await act(async () => {
+        toastRef?.show("Center X", {id: "cx", placement: "center"});
+      });
+
+      for (let i = 0; i < 5; i++) {
+        await act(async () => {
+          await new Promise((resolve) => setTimeout(resolve, 50));
+        });
+      }
+
+      await act(async () => {
+        toastRef?.show("Center Y", {id: "cy", placement: "center"});
+      });
+
+      for (let i = 0; i < 5; i++) {
+        await act(async () => {
+          await new Promise((resolve) => setTimeout(resolve, 50));
+        });
+      }
+
+      expect(getByText("Center X")).toBeTruthy();
+      expect(getByText("Center Y")).toBeTruthy();
+    });
+  });
+
+  describe("auto-close timer callback", () => {
+    it("should fire the setTimeout callback that calls handleClose", async () => {
+      let toastRef: ToastType | null = null;
+      const onCloseMock = mock(() => {});
+
+      const TestComponent = () => {
+        const toast = useToastNotifications();
+        toastRef = toast;
+        return <Text>Test</Text>;
+      };
+
+      render(
+        <ToastProvider swipeEnabled={false}>
+          <TestComponent />
+        </ToastProvider>
+      );
+
+      await waitFor(() => {
+        expect(toastRef?.show).toBeDefined();
+      });
+
+      await act(async () => {
+        toastRef?.show("Timer toast", {
+          duration: 50,
+          id: "timer-toast",
+          onClose: onCloseMock,
+        });
+      });
+
+      // Flush RAF + duration timeout + close animation
+      for (let i = 0; i < 15; i++) {
+        await act(async () => {
+          await new Promise((resolve) => setTimeout(resolve, 50));
+        });
+      }
+    });
+  });
+
+  describe("onHide callback on toast props", () => {
+    it("should exercise the onHide function via renderToast", async () => {
+      let toastRef: ToastType | null = null;
+      let capturedOnHide: (() => void) | null = null;
+
+      const customRenderToast = (toast: ToastProps) => {
+        if (!capturedOnHide) {
+          capturedOnHide = toast.onHide;
+        }
+        return <Text>{String(toast.message)}</Text>;
+      };
+
+      const TestComponent = () => {
+        const toast = useToastNotifications();
+        toastRef = toast;
+        return <Text>Test</Text>;
+      };
+
+      render(
+        <ToastProvider renderToast={customRenderToast} swipeEnabled={false}>
+          <TestComponent />
+        </ToastProvider>
+      );
+
+      await waitFor(() => {
+        expect(toastRef?.show).toBeDefined();
+      });
+
+      await act(async () => {
+        toastRef?.show("Custom toast", {id: "onhide-test"});
+      });
+
+      // Flush RAF and let the toast render with the custom renderer
+      for (let i = 0; i < 5; i++) {
+        await act(async () => {
+          await new Promise((resolve) => setTimeout(resolve, 50));
+        });
+      }
+
+      // Call the captured onHide to exercise the () => hide(id) callback
+      if (capturedOnHide) {
+        await act(async () => {
+          capturedOnHide!();
+        });
+
+        // Let the hide animation complete
+        for (let i = 0; i < 5; i++) {
+          await act(async () => {
+            await new Promise((resolve) => setTimeout(resolve, 50));
+          });
+        }
+      }
+    });
+  });
+
+  describe("update map callback with toast in state", () => {
+    it("should invoke the map callback inside update when toasts exist", async () => {
+      let toastRef: ToastType | null = null;
+
+      const TestComponent = () => {
+        const toast = useToastNotifications();
+        toastRef = toast;
+        return <Text>Test</Text>;
+      };
+
+      render(
+        <ToastProvider swipeEnabled={false}>
+          <TestComponent />
+        </ToastProvider>
+      );
+
+      await waitFor(() => {
+        expect(toastRef?.show).toBeDefined();
+      });
+
+      await act(async () => {
+        toastRef?.show("Original", {duration: 0, id: "update-map-test"});
+      });
+
+      // Flush RAF so the toast is actually in state before calling update
+      for (let i = 0; i < 5; i++) {
+        await act(async () => {
+          await new Promise((resolve) => setTimeout(resolve, 50));
+        });
+      }
+
+      // Now update — the map callback will iterate over the non-empty toasts array
+      await act(async () => {
+        toastRef?.update("update-map-test", "Updated");
+      });
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      });
+    });
+  });
+
+  describe("isOpen some callback with toast in state", () => {
+    it("should invoke the some callback inside isOpen when toasts exist", async () => {
+      // Use ToastContainer directly via ref to get the latest isOpen closure
+      // (the context-based ref from ToastProvider captures stale toasts)
+      const containerRef = React.createRef<ToastContainerRef>();
+
+      render(<ToastContainer ref={containerRef} />);
+
+      await waitFor(() => {
+        expect(containerRef.current?.show).toBeDefined();
+      });
+
+      await act(async () => {
+        containerRef.current?.show("IsOpen test", {duration: 0, id: "isopen-some-test"});
+      });
+
+      // Flush RAF so the toast is actually in state
+      for (let i = 0; i < 5; i++) {
+        await act(async () => {
+          await new Promise((resolve) => setTimeout(resolve, 50));
+        });
+      }
+
+      // Now isOpen — the some callback will iterate over the non-empty toasts array.
+      // Using the ref directly ensures we get the latest isOpen with updated toasts.
+      await waitFor(() => {
+        expect(containerRef.current?.isOpen("isopen-some-test")).toBe(true);
+      });
+    });
+  });
 });