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

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

@@ -0,0 +1,157 @@
+import React from 'react';
+import { render, fireEvent, within } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import { ModalWidget } from '../components/ModalWidget';
+
+describe('ModalWidget rendering', () => {
+    it('should render Modal component when visible is true', () => {
+        const { getByTestId, UNSAFE_getByType } = render(
+            <ModalWidget visible={true} height={400}>
+                <Text>Survey Content</Text>
+            </ModalWidget>
+        );
+
+        const modal = UNSAFE_getByType(require('react-native').Modal);
+        expect(modal).toBeTruthy();
+    });
+
+    it('should render children inside the modal', () => {
+        const { getByText } = render(
+            <ModalWidget visible={true} height={400}>
+                <Text>Survey Content</Text>
+            </ModalWidget>
+        );
+
+        expect(getByText('Survey Content')).toBeTruthy();
+    });
+
+    it('should render the close button when visible is true', () => {
+        const { getByText } = render(
+            <ModalWidget visible={true} height={400}>
+                <Text>Content</Text>
+            </ModalWidget>
+        );
+
+        expect(getByText('✕')).toBeTruthy();
+    });
+
+    it('should call onClose when close button is pressed', () => {
+        const mockOnClose = jest.fn();
+        const { getByText } = render(
+            <ModalWidget visible={true} height={400} onClose={mockOnClose}>
+                <Text>Content</Text>
+            </ModalWidget>
+        );
+
+        fireEvent.press(getByText('✕'));
+
+        expect(mockOnClose).toHaveBeenCalledTimes(1);
+    });
+
+    it('should set Modal visible to true via internal state on initial render', () => {
+        const { UNSAFE_getByType } = render(
+            <ModalWidget visible={true} height={400}>
+                <Text>Content</Text>
+            </ModalWidget>
+        );
+
+        const modal = UNSAFE_getByType(require('react-native').Modal);
+        expect(modal.props.visible).toBe(true);
+    });
+
+    it('should use slide animation type', () => {
+        const { UNSAFE_getByType } = render(
+            <ModalWidget visible={true} height={400}>
+                <Text>Content</Text>
+            </ModalWidget>
+        );
+
+        const modal = UNSAFE_getByType(require('react-native').Modal);
+        expect(modal.props.animationType).toBe('slide');
+    });
+
+    it('should set Modal transparent prop to true', () => {
+        const { UNSAFE_getByType } = render(
+            <ModalWidget visible={true} height={400}>
+                <Text>Content</Text>
+            </ModalWidget>
+        );
+
+        const modal = UNSAFE_getByType(require('react-native').Modal);
+        expect(modal.props.transparent).toBe(true);
+    });
+
+    it('should set hardwareAccelerated prop to true', () => {
+        const { UNSAFE_getByType } = render(
+            <ModalWidget visible={true} height={400}>
+                <Text>Content</Text>
+            </ModalWidget>
+        );
+
+        const modal = UNSAFE_getByType(require('react-native').Modal);
+        expect(modal.props.hardwareAccelerated).toBe(true);
+    });
+
+    it('should pass visible=false to Modal when visible prop is false', () => {
+        const { UNSAFE_getByType } = render(
+            <ModalWidget visible={false} height={400}>
+                <Text>Content</Text>
+            </ModalWidget>
+        );
+
+        const modal = UNSAFE_getByType(require('react-native').Modal);
+        expect(modal.props.visible).toBe(false);
+    });
+
+    it('should call onClose when close button is pressed inside modal', () => {
+        const mockOnClose = jest.fn();
+        const { getByText } = render(
+            <ModalWidget visible={true} height={400} onClose={mockOnClose}>
+                <Text>Content</Text>
+            </ModalWidget>
+        );
+
+        fireEvent.press(getByText('✕'));
+
+        expect(mockOnClose).toHaveBeenCalledTimes(1);
+    });
+
+    it('should reflect updated visible prop after rerender', () => {
+        const { UNSAFE_getByType, rerender } = render(
+            <ModalWidget visible={true} height={400} onClose={jest.fn()}>
+                <Text>Content</Text>
+            </ModalWidget>
+        );
+
+        rerender(
+            <ModalWidget visible={false} height={400} onClose={jest.fn()}>
+                <Text>Content</Text>
+            </ModalWidget>
+        );
+
+        const modal = UNSAFE_getByType(require('react-native').Modal);
+        expect(modal.props.visible).toBe(false);
+    });
+
+    it('should not call onClose if onClose prop is not provided', () => {
+        const { getByText } = render(
+            <ModalWidget visible={true} height={400}>
+                <Text>Content</Text>
+            </ModalWidget>
+        );
+
+        expect(() => fireEvent.press(getByText('✕'))).not.toThrow();
+    });
+
+    it('should render multiple children', () => {
+        const { getByText } = render(
+            <ModalWidget visible={true} height={400}>
+                <Text>First Child</Text>
+                <Text>Second Child</Text>
+            </ModalWidget>
+        );
+
+        expect(getByText('First Child')).toBeTruthy();
+        expect(getByText('Second Child')).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,123 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import { OverlayWidget } from '../components/OverlayWidget';
+
+describe('OverlayWidget rendering', () => {
+    it('should render children when visible is true for bottom position', () => {
+        const { getByText } = render(
+            <OverlayWidget visible={true} width={390} height={300} position="bottom">
+                <Text>Bottom Widget</Text>
+            </OverlayWidget>
+        );
+
+        expect(getByText('Bottom Widget')).toBeTruthy();
+    });
+
+    it('should render children when visible is true for top position', () => {
+        const { getByText } = render(
+            <OverlayWidget visible={true} width={390} height={300} position="top">
+                <Text>Top Widget</Text>
+            </OverlayWidget>
+        );
+
+        expect(getByText('Top Widget')).toBeTruthy();
+    });
+
+    it('should render close button when visible is true', () => {
+        const { getByText } = render(
+            <OverlayWidget visible={true} width={390} height={300} position="bottom">
+                <Text>Content</Text>
+            </OverlayWidget>
+        );
+
+        expect(getByText('✕')).toBeTruthy();
+    });
+
+    it('should call onClose when close button is pressed', () => {
+        const mockOnClose = jest.fn();
+        const { getByText } = render(
+            <OverlayWidget visible={true} width={390} height={300} position="bottom" onClose={mockOnClose}>
+                <Text>Content</Text>
+            </OverlayWidget>
+        );
+
+        fireEvent.press(getByText('✕'));
+
+        expect(mockOnClose).toHaveBeenCalledTimes(1);
+    });
+
+    it('should hide entirely after close button is pressed', () => {
+        const { getByText, queryByText } = render(
+            <OverlayWidget visible={true} width={390} height={300} position="bottom" onClose={jest.fn()}>
+                <Text>Dismissible Content</Text>
+            </OverlayWidget>
+        );
+
+        fireEvent.press(getByText('✕'));
+
+        expect(queryByText('Dismissible Content')).toBeNull();
+    });
+
+    it('should not render content when internal visibility is set to false after close', () => {
+        const { getByText, queryByText } = render(
+            <OverlayWidget visible={true} width={390} height={300} position="top" onClose={jest.fn()}>
+                <Text>Top Content</Text>
+            </OverlayWidget>
+        );
+
+        fireEvent.press(getByText('✕'));
+
+        expect(queryByText('✕')).toBeNull();
+    });
+
+    it('should not reopen after internal state is set to false even if rerendered', () => {
+        const { getByText, queryByText, rerender } = render(
+            <OverlayWidget visible={true} width={390} height={300} position="bottom" onClose={jest.fn()}>
+                <Text>Content</Text>
+            </OverlayWidget>
+        );
+
+        fireEvent.press(getByText('✕'));
+
+        rerender(
+            <OverlayWidget visible={true} width={390} height={300} position="bottom" onClose={jest.fn()}>
+                <Text>Content</Text>
+            </OverlayWidget>
+        );
+
+        expect(queryByText('Content')).toBeNull();
+    });
+
+    it('should not call onClose if onClose prop is not provided', () => {
+        const { getByText } = render(
+            <OverlayWidget visible={true} width={390} height={300} position="bottom">
+                <Text>Content</Text>
+            </OverlayWidget>
+        );
+
+        expect(() => fireEvent.press(getByText('✕'))).not.toThrow();
+    });
+
+    it('should hide close button when visible is false', () => {
+        const { queryByText } = render(
+            <OverlayWidget visible={false} width={390} height={300} position="bottom">
+                <Text>Content</Text>
+            </OverlayWidget>
+        );
+
+        expect(queryByText('✕')).toBeNull();
+    });
+
+    it('should render multiple children', () => {
+        const { getByText } = render(
+            <OverlayWidget visible={true} width={390} height={300} position="bottom">
+                <Text>First</Text>
+                <Text>Second</Text>
+            </OverlayWidget>
+        );
+
+        expect(getByText('First')).toBeTruthy();
+        expect(getByText('Second')).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,315 @@
+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', () => {
+        const { UNSAFE_getByType } = render(
+            <SoluCXWidget {...baseProps} type="modal" />
+        );
+
+        const modal = UNSAFE_getByType(require('react-native').Modal);
+        expect(modal).toBeTruthy();
+    });
+
+    it('should render close button inside ModalWidget', () => {
+        const { getByText } = render(
+            <SoluCXWidget {...baseProps} type="modal" />
+        );
+
+        expect(getByText('✕')).toBeTruthy();
+    });
+
+    it('should render WebView inside ModalWidget with correct source', () => {
+        const { getByTestId } = render(
+            <SoluCXWidget {...baseProps} type="modal" />
+        );
+
+        const webview = getByTestId('webview');
+        expect(webview.props.source.uri).toContain('test-key-abc');
+        expect(webview.props.source.uri).toContain('txn-999');
+    });
+
+    it('should render InlineWidget when type is inline', () => {
+        const { queryByTestId, getByText } = render(
+            <SoluCXWidget {...baseProps} type="inline" />
+        );
+
+        expect(queryByTestId('webview')).toBeTruthy();
+        expect(getByText('✕')).toBeTruthy();
+    });
+
+    it('should not render Modal when type is inline', () => {
+        const { UNSAFE_queryByType } = render(
+            <SoluCXWidget {...baseProps} type="inline" />
+        );
+
+        const modal = UNSAFE_queryByType(require('react-native').Modal);
+        expect(modal).toBeNull();
+    });
+
+    it('should render OverlayWidget when type is bottom', () => {
+        const { queryByTestId, getByText } = render(
+            <SoluCXWidget {...baseProps} type="bottom" />
+        );
+
+        expect(queryByTestId('webview')).toBeTruthy();
+        expect(getByText('✕')).toBeTruthy();
+    });
+
+    it('should render OverlayWidget when type is top', () => {
+        const { queryByTestId, getByText } = render(
+            <SoluCXWidget {...baseProps} type="top" />
+        );
+
+        expect(queryByTestId('webview')).toBeTruthy();
+        expect(getByText('✕')).toBeTruthy();
+    });
+
+    it('should not render Modal when type is bottom', () => {
+        const { UNSAFE_queryByType } = render(
+            <SoluCXWidget {...baseProps} type="bottom" />
+        );
+
+        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', () => {
+        const { getByTestId } = render(
+            <SoluCXWidget {...baseProps} type="modal" />
+        );
+
+        const webview = getByTestId('webview');
+        expect(webview.props.originWhitelist).toEqual(['*']);
+    });
+
+    it('should set WebView width style to screen width', () => {
+        const { getByTestId } = render(
+            <SoluCXWidget {...baseProps} type="modal" />
+        );
+
+        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', () => {
+        const { getByTestId } = render(
+            <SoluCXWidget {...baseProps} type="modal" />
+        );
+
+        const webview = getByTestId('webview');
+        const heightStyle = webview.props.style.find(
+            (s: any) => s.height !== undefined
+        );
+        expect(heightStyle.height).toBe(400);
+    });
+
+    it('should build URL containing soluCXKey and transaction_id', () => {
+        const { getByTestId } = render(
+            <SoluCXWidget {...baseProps} type="inline" />
+        );
+
+        const webview = getByTestId('webview');
+        expect(webview.props.source.uri).toContain('test-key-abc');
+        expect(webview.props.source.uri).toContain('transaction_id=txn-999');
+    });
+
+    it('should build URL with mode=widget parameter', () => {
+        const { getByTestId } = render(
+            <SoluCXWidget {...baseProps} type="inline" />
+        );
+
+        const webview = getByTestId('webview');
+        expect(webview.props.source.uri).toContain('mode=widget');
+    });
+});
+
+describe('SoluCXWidget bootstrap flow', () => {
+    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();
+        });
+    });
+});