@solucx/react-native-solucx-widget 0.1.16 → 0.2.1

package/src/__tests__/SoluCXWidget.rendering.test.tsx

@@ -0,0 +1,504 @@
+import React from "react";
+import { render, waitFor } from "@testing-library/react-native";
+import { SoluCXWidget } from "../SoluCXWidget";
+import { WidgetData, WidgetOptions } from "../interfaces";
+import { requestWidgetUrl } from "../services/widgetBootstrapService";
+
+jest.mock("react-native-webview", () => {
+    const { forwardRef } = require("react");
+    const { View } = require("react-native");
+    return {
+        __esModule: true,
+        WebView: forwardRef((props: any, ref: any) => <View testID="webview" {...props} ref={ref} />),
+    };
+});
+
+const mockLoadSavedData = jest.fn();
+const mockClose = jest.fn();
+const mockSetIsWidgetVisible = jest.fn();
+const mockOpen = jest.fn();
+const mockShouldDisplayWidget = jest.fn();
+
+jest.mock("../hooks/useWidgetState", () => ({
+    useWidgetState: () => ({
+        widgetHeight: 400,
+        isWidgetVisible: true,
+        setIsWidgetVisible: mockSetIsWidgetVisible,
+        loadSavedData: mockLoadSavedData,
+        resize: jest.fn(),
+        open: mockOpen,
+        close: mockClose,
+        userId: "test-user-123",
+    }),
+}));
+
+jest.mock("../services/widgetEventService", () => ({
+    WidgetEventService: jest.fn().mockImplementation(() => ({
+        handleMessage: jest.fn(),
+    })),
+}));
+
+jest.mock("../services/widgetValidationService", () => ({
+    WidgetValidationService: jest.fn().mockImplementation(() => ({
+        shouldDisplayWidget: mockShouldDisplayWidget,
+    })),
+}));
+
+jest.mock("../services/widgetBootstrapService", () => ({
+    requestWidgetUrl: jest.fn(),
+}));
+
+jest.mock("../constants/Constants", () => ({
+    SDK_NAME: "rn-widget-sdk",
+    SDK_VERSION: "0.1.16",
+}));
+
+jest.mock("../services/ClientVersionCollector", () => ({
+    getClientVersion: jest.fn(() => "1.0.0"),
+}));
+
+jest.mock("../hooks/useDeviceInfoCollector", () => ({
+    getDeviceInfo: jest.fn(() => ({
+        platform: "ios",
+        osVersion: "16.0",
+        screenWidth: 390,
+        screenHeight: 844,
+        windowWidth: 390,
+        windowHeight: 844,
+        scale: 3,
+        fontScale: 1,
+        deviceType: "phone",
+        model: "iPhone 14 Pro",
+    })),
+}));
+
+const mockRequestWidgetUrl = requestWidgetUrl as jest.MockedFunction<typeof requestWidgetUrl>;
+const bootstrappedWidgetUrl = "https://widgets.solucx.com/widget/bootstrap-result";
+
+const baseProps = {
+    soluCXKey: "test-key-abc",
+    data: {
+        customer_id: "cust-001",
+        transaction_id: "txn-999",
+        form_id: "form-123",
+    } as WidgetData,
+    options: {
+        height: 400,
+    } as WidgetOptions,
+};
+
+beforeEach(() => {
+    jest.clearAllMocks();
+    mockShouldDisplayWidget.mockReset();
+    mockShouldDisplayWidget.mockResolvedValue({ canDisplay: true });
+    mockRequestWidgetUrl.mockReset();
+    mockRequestWidgetUrl.mockResolvedValue(bootstrappedWidgetUrl);
+});
+
+describe("SoluCXWidget type routing", () => {
+    it("should render ModalWidget when type is modal", async () => {
+        mockRequestWidgetUrl.mockResolvedValue(bootstrappedWidgetUrl);
+
+        const { UNSAFE_getByType } = render(<SoluCXWidget {...baseProps} type="modal" />);
+
+        await waitFor(() => {
+            const modal = UNSAFE_getByType(require("react-native").Modal);
+            expect(modal).toBeTruthy();
+        });
+    }, 10000);
+
+    it("should render close button inside ModalWidget", async () => {
+        mockRequestWidgetUrl.mockResolvedValue(bootstrappedWidgetUrl);
+
+        const { getByText } = render(<SoluCXWidget {...baseProps} type="modal" />);
+
+        await waitFor(() => {
+            expect(getByText("✕")).toBeTruthy();
+        });
+    });
+
+    it("should render WebView inside ModalWidget with correct source", async () => {
+        mockRequestWidgetUrl.mockResolvedValue(bootstrappedWidgetUrl);
+
+        const { getByTestId } = render(<SoluCXWidget {...baseProps} type="modal" />);
+
+        await waitFor(() => {
+            const webview = getByTestId("webview");
+            expect(webview.props.source.uri).toBe(bootstrappedWidgetUrl);
+        });
+    });
+
+    it("should render InlineWidget when type is inline", async () => {
+        mockRequestWidgetUrl.mockResolvedValue(bootstrappedWidgetUrl);
+
+        const { queryByTestId, getByText } = render(<SoluCXWidget {...baseProps} type="inline" />);
+
+        await waitFor(() => {
+            expect(queryByTestId("webview")).toBeTruthy();
+            expect(getByText("✕")).toBeTruthy();
+        });
+    });
+
+    it("should not render Modal when type is inline", async () => {
+        mockRequestWidgetUrl.mockResolvedValue(bootstrappedWidgetUrl);
+
+        const { UNSAFE_queryByType } = render(<SoluCXWidget {...baseProps} type="inline" />);
+
+        await waitFor(() => {
+            const modal = UNSAFE_queryByType(require("react-native").Modal);
+            expect(modal).toBeNull();
+        });
+    });
+
+    it("should render OverlayWidget when type is bottom", async () => {
+        mockRequestWidgetUrl.mockResolvedValue(bootstrappedWidgetUrl);
+
+        const { queryByTestId, getByText } = render(<SoluCXWidget {...baseProps} type="bottom" />);
+
+        await waitFor(() => {
+            expect(queryByTestId("webview")).toBeTruthy();
+            expect(getByText("✕")).toBeTruthy();
+        });
+    });
+
+    it("should render OverlayWidget when type is top", async () => {
+        mockRequestWidgetUrl.mockResolvedValue(bootstrappedWidgetUrl);
+
+        const { queryByTestId, getByText } = render(<SoluCXWidget {...baseProps} type="top" />);
+
+        await waitFor(() => {
+            expect(queryByTestId("webview")).toBeTruthy();
+            expect(getByText("✕")).toBeTruthy();
+        });
+    });
+
+    it("should not render Modal when type is bottom", async () => {
+        mockRequestWidgetUrl.mockResolvedValue(bootstrappedWidgetUrl);
+
+        const { UNSAFE_queryByType } = render(<SoluCXWidget {...baseProps} type="bottom" />);
+
+        await waitFor(() => {
+            const modal = UNSAFE_queryByType(require("react-native").Modal);
+            expect(modal).toBeNull();
+        });
+    });
+
+    it("should call loadSavedData on mount", () => {
+        render(<SoluCXWidget {...baseProps} type="modal" />);
+
+        expect(mockLoadSavedData).toHaveBeenCalledTimes(1);
+    });
+});
+
+describe("SoluCXWidget WebView configuration", () => {
+    it("should set originWhitelist to allow all origins", async () => {
+        mockRequestWidgetUrl.mockResolvedValue(bootstrappedWidgetUrl);
+
+        const { getByTestId } = render(<SoluCXWidget {...baseProps} type="modal" />);
+
+        await waitFor(() => {
+            const webview = getByTestId("webview");
+            expect(webview.props.originWhitelist).toEqual(["*"]);
+        });
+    });
+
+    it("should set WebView width style to screen width", async () => {
+        mockRequestWidgetUrl.mockResolvedValue(bootstrappedWidgetUrl);
+
+        const { getByTestId } = render(<SoluCXWidget {...baseProps} type="modal" />);
+
+        await waitFor(() => {
+            const webview = getByTestId("webview");
+            const widthStyle = webview.props.style.find((s: any) => s.width !== undefined);
+            expect(widthStyle.width).toBeGreaterThan(0);
+        });
+    });
+
+    it("should set WebView height style to widgetHeight", async () => {
+        mockRequestWidgetUrl.mockResolvedValue(bootstrappedWidgetUrl);
+
+        const { getByTestId } = render(<SoluCXWidget {...baseProps} type="modal" />);
+
+        await waitFor(() => {
+            const webview = getByTestId("webview");
+            const heightStyle = webview.props.style.find((s: any) => s.height !== undefined);
+            expect(heightStyle.height).toBe(400);
+        });
+    });
+
+    it("should use bootstrapped URL for widgets", async () => {
+        mockRequestWidgetUrl.mockResolvedValue(bootstrappedWidgetUrl);
+
+        const { getByTestId } = render(<SoluCXWidget {...baseProps} type="inline" />);
+
+        await waitFor(() => {
+            const webview = getByTestId("webview");
+            expect(webview.props.source.uri).toBe(bootstrappedWidgetUrl);
+        });
+    });
+});
+
+describe("SoluCXWidget bootstrap flow", () => {
+    it("fetches widget URL for form widgets", async () => {
+        mockRequestWidgetUrl.mockResolvedValue(bootstrappedWidgetUrl);
+
+        const props = {
+            ...baseProps,
+            type: "modal" as const,
+        };
+
+        const { queryByTestId, getByTestId } = render(<SoluCXWidget {...props} />);
+
+        expect(queryByTestId("webview")).toBeNull();
+
+        await waitFor(() => {
+            expect(mockRequestWidgetUrl).toHaveBeenCalledTimes(1);
+            expect(mockRequestWidgetUrl).toHaveBeenCalledWith(
+                "test-key-abc",
+                expect.objectContaining({
+                    form_id: "form-123",
+                }),
+                "test-user-123",
+            );
+            expect(mockShouldDisplayWidget).toHaveBeenCalledTimes(1);
+            expect(mockOpen).toHaveBeenCalledTimes(1);
+            expect(queryByTestId("webview")).toBeTruthy();
+        });
+
+        const webview = getByTestId("webview");
+        expect(webview.props.source.uri).toBe(bootstrappedWidgetUrl);
+    });
+
+    it("fetches widget URL before rendering non-form widgets", async () => {
+        mockRequestWidgetUrl.mockResolvedValue(bootstrappedWidgetUrl);
+
+        const props = {
+            ...baseProps,
+            data: {
+                customer_id: "cust-777",
+                journey: "sac",
+            },
+            type: "bottom" as const,
+        };
+
+        const { queryByTestId, getByTestId } = render(<SoluCXWidget {...props} />);
+
+        expect(queryByTestId("webview")).toBeNull();
+
+        await waitFor(() => {
+            expect(mockRequestWidgetUrl).toHaveBeenCalledTimes(1);
+            expect(mockShouldDisplayWidget).toHaveBeenCalledTimes(1);
+            expect(mockOpen).toHaveBeenCalledTimes(1);
+            expect(queryByTestId("webview")).toBeTruthy();
+        });
+
+        const webview = getByTestId("webview");
+        expect(webview.props.source.uri).toBe(bootstrappedWidgetUrl);
+    });
+
+    it("keeps widget hidden when identifier fetch fails", async () => {
+        mockRequestWidgetUrl.mockRejectedValue(new Error("network"));
+
+        const props = {
+            ...baseProps,
+            data: {
+                customer_id: "cust-777",
+                journey: "sac",
+            },
+            type: "bottom" as const,
+        };
+
+        const { queryByTestId } = render(<SoluCXWidget {...props} />);
+
+        expect(queryByTestId("webview")).toBeNull();
+
+        await waitFor(() => {
+            expect(mockRequestWidgetUrl).toHaveBeenCalledTimes(1);
+            expect(mockShouldDisplayWidget).not.toHaveBeenCalled();
+            expect(queryByTestId("webview")).toBeNull();
+        });
+    });
+
+    it("keeps widget hidden when validation fails after bootstrap", async () => {
+        mockRequestWidgetUrl.mockResolvedValue(bootstrappedWidgetUrl);
+        mockShouldDisplayWidget.mockResolvedValue({ canDisplay: false, blockReason: "BLOCKED_BY_MAX_RETRY_ATTEMPTS" });
+
+        const props = {
+            ...baseProps,
+            data: {
+                customer_id: "cust-777",
+                journey: "sac",
+            },
+            type: "bottom" as const,
+        };
+
+        const { queryByTestId } = render(<SoluCXWidget {...props} />);
+
+        expect(queryByTestId("webview")).toBeNull();
+
+        await waitFor(() => {
+            expect(mockRequestWidgetUrl).toHaveBeenCalledTimes(1);
+            expect(mockShouldDisplayWidget).toHaveBeenCalledTimes(1);
+            expect(mockOpen).not.toHaveBeenCalled();
+            expect(queryByTestId("webview")).toBeNull();
+        });
+    });
+});
+
+describe("SoluCXWidget callbacks", () => {
+    it("calls onError when data is not provided", () => {
+        const onError = jest.fn();
+        const props = {
+            ...baseProps,
+            data: null as any,
+            callbacks: { onError },
+        };
+
+        render(<SoluCXWidget {...props} type="modal" />);
+
+        expect(onError).toHaveBeenCalledTimes(1);
+        expect(onError).toHaveBeenCalledWith("Widget data is required but was not provided");
+    });
+
+    it("calls onError with Error message when bootstrap fails with Error instance", async () => {
+        mockRequestWidgetUrl.mockRejectedValue(new Error("Network timeout"));
+        const onError = jest.fn();
+
+        const props = {
+            ...baseProps,
+            data: {
+                customer_id: "cust-777",
+                journey: "sac",
+            },
+            type: "bottom" as const,
+            callbacks: { onError },
+        };
+
+        render(<SoluCXWidget {...props} />);
+
+        await waitFor(() => {
+            expect(onError).toHaveBeenCalledTimes(1);
+            expect(onError).toHaveBeenCalledWith("Network timeout");
+            expect(mockSetIsWidgetVisible).toHaveBeenCalledWith(false);
+        });
+    });
+
+    it("calls onError with string when bootstrap fails with string error", async () => {
+        mockRequestWidgetUrl.mockRejectedValue("Connection failed");
+        const onError = jest.fn();
+
+        const props = {
+            ...baseProps,
+            data: {
+                customer_id: "cust-777",
+                journey: "sac",
+            },
+            type: "bottom" as const,
+            callbacks: { onError },
+        };
+
+        render(<SoluCXWidget {...props} />);
+
+        await waitFor(() => {
+            expect(onError).toHaveBeenCalledTimes(1);
+            expect(onError).toHaveBeenCalledWith("Connection failed");
+        });
+    });
+
+    it("calls onError with JSON string when bootstrap fails with object error", async () => {
+        mockRequestWidgetUrl.mockRejectedValue({ code: 500, message: "Server error" });
+        const onError = jest.fn();
+
+        const props = {
+            ...baseProps,
+            data: {
+                customer_id: "cust-777",
+                journey: "sac",
+            },
+            type: "bottom" as const,
+            callbacks: { onError },
+        };
+
+        render(<SoluCXWidget {...props} />);
+
+        await waitFor(() => {
+            expect(onError).toHaveBeenCalledTimes(1);
+            expect(onError).toHaveBeenCalledWith('{"code":500,"message":"Server error"}');
+        });
+    });
+
+    it('calls onError with "Unknown error" when bootstrap fails with null', async () => {
+        mockRequestWidgetUrl.mockRejectedValue(null);
+        const onError = jest.fn();
+
+        const props = {
+            ...baseProps,
+            data: {
+                customer_id: "cust-777",
+                journey: "sac",
+            },
+            type: "bottom" as const,
+            callbacks: { onError },
+        };
+
+        render(<SoluCXWidget {...props} />);
+
+        await waitFor(() => {
+            expect(onError).toHaveBeenCalledTimes(1);
+            expect(onError).toHaveBeenCalledWith("Unknown error");
+        });
+    });
+
+    it("calls onBlock when validation fails", async () => {
+        mockRequestWidgetUrl.mockResolvedValue(bootstrappedWidgetUrl);
+        mockShouldDisplayWidget.mockResolvedValue({
+            canDisplay: false,
+            blockReason: "BLOCKED_BY_MAX_RETRY_ATTEMPTS",
+        });
+        const onBlock = jest.fn();
+
+        const props = {
+            ...baseProps,
+            data: {
+                customer_id: "cust-777",
+                journey: "sac",
+            },
+            type: "bottom" as const,
+            callbacks: { onBlock },
+        };
+
+        render(<SoluCXWidget {...props} />);
+
+        await waitFor(() => {
+            expect(onBlock).toHaveBeenCalledTimes(1);
+            expect(onBlock).toHaveBeenCalledWith("BLOCKED_BY_MAX_RETRY_ATTEMPTS");
+            expect(mockSetIsWidgetVisible).toHaveBeenCalledWith(false);
+        });
+    });
+
+    it("calls onPreOpen, onOpened callbacks for successful bootstrap", async () => {
+        mockRequestWidgetUrl.mockResolvedValue(bootstrappedWidgetUrl);
+        mockShouldDisplayWidget.mockResolvedValue({ canDisplay: true });
+        const onPreOpen = jest.fn();
+        const onOpened = jest.fn();
+
+        const props = {
+            ...baseProps,
+            data: {
+                customer_id: "cust-777",
+                journey: "sac",
+            },
+            type: "bottom" as const,
+            callbacks: { onPreOpen, onOpened },
+        };
+
+        render(<SoluCXWidget {...props} />);
+
+        await waitFor(() => {
+            expect(onPreOpen).toHaveBeenCalledTimes(1);
+            expect(onPreOpen).toHaveBeenCalledWith("test-user-123");
+            expect(onOpened).toHaveBeenCalledTimes(1);
+            expect(onOpened).toHaveBeenCalledWith("test-user-123");
+        });
+    });
+});