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

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();
+    });
+});