react-native-toast-message 2.1.5 → 2.2.0-beta.1

package/lib/src/components/__tests__/AnimatedContainer.test.js

@@ -0,0 +1,147 @@
+/* eslint-env jest */
+import React from 'react';
+import { Dimensions, View } from 'react-native';
+import { render, waitFor } from '~/__helpers__/testing-library/react-native';
+import { mockGestureValues, mockPanResponder } from '../../__helpers__/PanResponder';
+import { AnimatedContainer, animatedValueFor, dampingFor } from '../AnimatedContainer';
+const setup = (props) => {
+    const onHide = jest.fn();
+    const defaultProps = {
+        isVisible: false,
+        position: 'top',
+        topOffset: 40,
+        bottomOffset: 40,
+        keyboardOffset: 10,
+        onHide
+    };
+    const utils = render(<AnimatedContainer {...defaultProps} {...props}>
+      <View testID='childView'/>
+    </AnimatedContainer>);
+    return {
+        ...utils
+    };
+};
+const defaultStyles = {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    top: 0
+};
+describe('test AnimatedContainer component', () => {
+    it('is hidden by default', () => {
+        const { queryByTestId } = setup();
+        expect(queryByTestId('toastAnimatedContainer')).toHaveStyle({
+            ...defaultStyles,
+            opacity: 0
+        });
+        expect(queryByTestId('childView')).not.toBe(null);
+    });
+    it('shows when isVisible is true', async () => {
+        const { queryByTestId } = setup({
+            isVisible: true
+        });
+        await waitFor(() => expect(queryByTestId('toastAnimatedContainer')).toHaveStyle({
+            ...defaultStyles,
+            opacity: 1
+        }));
+        expect(queryByTestId('childView')).not.toBe(null);
+    });
+    it('restores toast position on pan (if gesture is higher than threshold)', async () => {
+        mockPanResponder();
+        const onRestorePosition = jest.fn();
+        const { queryByTestId } = setup({
+            isVisible: true,
+            onRestorePosition
+        });
+        await waitFor(() => expect(queryByTestId('toastAnimatedContainer')).toHaveStyle({
+            ...defaultStyles,
+            opacity: 1
+        }));
+        const panHandler = queryByTestId('toastAnimatedContainer');
+        const gesture = {
+            ...mockGestureValues,
+            moveY: 100,
+            dy: 10
+        };
+        panHandler?.props.onResponderMove(undefined, gesture);
+        panHandler?.props.onResponderRelease(undefined, gesture);
+        expect(onRestorePosition).toHaveBeenCalled();
+    });
+    it('dismisses toast on pan (if gesture is lower than threshold)', async () => {
+        mockPanResponder();
+        const onHide = jest.fn();
+        const { queryByTestId } = setup({
+            isVisible: true,
+            onHide
+        });
+        await waitFor(() => expect(queryByTestId('toastAnimatedContainer')).toHaveStyle({
+            ...defaultStyles,
+            opacity: 1
+        }));
+        const panHandler = queryByTestId('toastAnimatedContainer');
+        const gesture = {
+            ...mockGestureValues,
+            moveY: 5,
+            dy: -78
+        };
+        panHandler?.props.onResponderMove(undefined, gesture);
+        panHandler?.props.onResponderRelease(undefined, gesture);
+        expect(onHide).toHaveBeenCalled();
+    });
+});
+jest.spyOn(Dimensions, 'get').mockImplementation(() => ({
+    height: 600,
+    width: 200,
+    scale: 1,
+    fontScale: 1
+}));
+describe('test dampingFor function', () => {
+    const gesture = {
+        ...mockGestureValues,
+        moveY: 100
+    };
+    it('returns damping for position: bottom', () => {
+        const position = 'bottom';
+        expect(dampingFor(gesture, position)).toBe(500);
+    });
+    it('returns damping for position: top', () => {
+        const position = 'top';
+        expect(dampingFor(gesture, position)).toBe(100);
+    });
+    it('throws if position is not implemented', () => {
+        try {
+            dampingFor(gesture, 'foo');
+        }
+        catch (err) {
+            expect(err).toBeDefined();
+        }
+    });
+});
+describe('test animatedValueFor function', () => {
+    const gesture = {
+        ...mockGestureValues,
+        dy: 10
+    };
+    it('returns animated value for position: bottom', () => {
+        const position = 'bottom';
+        const damping = 100;
+        expect(animatedValueFor(gesture, position, damping)).toBe(0.9);
+    });
+    it('returns animated value for position: top', () => {
+        const position = 'top';
+        const damping = 100;
+        expect(animatedValueFor(gesture, position, damping)).toBe(1.1);
+    });
+    it('throws if position is not implemented', () => {
+        try {
+            const position = 'foo';
+            const damping = 100;
+            animatedValueFor(gesture, position, damping);
+        }
+        catch (err) {
+            expect(err).toBeDefined();
+        }
+    });
+});

package/lib/src/components/__tests__/BaseToast.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-native';

package/lib/src/components/__tests__/BaseToast.test.js

@@ -0,0 +1,81 @@
+/* eslint-env jest */
+import '@testing-library/jest-native';
+import React from 'react';
+import { Image } from 'react-native';
+import { fireEvent, render } from '~/__helpers__/testing-library/react-native';
+import { BaseToast } from '../BaseToast';
+const setup = (props) => {
+    const utils = render(<BaseToast {...props}/>);
+    return {
+        ...utils
+    };
+};
+describe('test BaseToast component', () => {
+    it('renders defaults', () => {
+        const { queryByTestId } = setup();
+        expect(queryByTestId('toastTouchableContainer')).not.toBe(null);
+        expect(queryByTestId('toastContentContainer')).not.toBe(null);
+        expect(queryByTestId('toastText1')).toBe(null);
+        expect(queryByTestId('toastText2')).toBe(null);
+    });
+    it('renders text1 and text2', () => {
+        const { queryByTestId, queryByText } = setup({
+            text1: 'Hello',
+            text2: 'World'
+        });
+        expect(queryByTestId('toastText1')).not.toBe(null);
+        expect(queryByTestId('toastText2')).not.toBe(null);
+        expect(queryByText('Hello')).not.toBe(null);
+        expect(queryByText('World')).not.toBe(null);
+    });
+    it('renders only text1', () => {
+        const { queryByTestId, queryByText } = setup({
+            text1: 'Hello'
+        });
+        expect(queryByTestId('toastText1')).not.toBe(null);
+        expect(queryByTestId('toastText2')).toBe(null);
+        expect(queryByText('Hello')).not.toBe(null);
+    });
+    it('renders only text2', () => {
+        const { queryByTestId, queryByText } = setup({
+            text2: 'World'
+        });
+        expect(queryByTestId('toastText1')).toBe(null);
+        expect(queryByTestId('toastText2')).not.toBe(null);
+        expect(queryByText('World')).not.toBe(null);
+    });
+    it('fires onPress', () => {
+        const onPress = jest.fn();
+        const { queryByTestId } = setup({
+            onPress
+        });
+        const touchableContainer = queryByTestId('toastTouchableContainer');
+        expect(touchableContainer).not.toBe(null);
+        fireEvent.press(touchableContainer);
+        expect(onPress).toHaveBeenCalled();
+    });
+    it('adds custom style to toastTouchableContainer', () => {
+        const { queryByTestId } = setup({
+            style: {
+                borderRadius: 20
+            }
+        });
+        const touchableContainer = queryByTestId('toastTouchableContainer');
+        expect(touchableContainer).not.toBe(null);
+        expect(touchableContainer).toHaveStyle({
+            borderRadius: 20
+        });
+    });
+    it('renders leading icon', () => {
+        const { queryByTestId } = setup({
+            renderLeadingIcon: () => (<Image source={{ uri: 'testUri' }} testID='leadingIcon'/>)
+        });
+        expect(queryByTestId('leadingIcon')).not.toBe(null);
+    });
+    it('renders trailing icon', () => {
+        const { queryByTestId } = setup({
+            renderTrailingIcon: () => (<Image source={{ uri: 'testUri' }} testID='trailingIcon'/>)
+        });
+        expect(queryByTestId('trailingIcon')).not.toBe(null);
+    });
+});

package/lib/src/components/__tests__/ErrorToast.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/components/__tests__/ErrorToast.test.js

@@ -0,0 +1,20 @@
+/* eslint-env jest */
+import React from 'react';
+import { render } from '~/__helpers__/testing-library/react-native';
+import { ErrorToast } from '../ErrorToast';
+const setup = (props) => {
+    const utils = render(<ErrorToast {...props}/>);
+    return {
+        ...utils
+    };
+};
+describe('test ErrorToast component', () => {
+    it('renders default style', () => {
+        const { queryByTestId } = setup();
+        const touchableContainer = queryByTestId('toastTouchableContainer');
+        expect(touchableContainer).not.toBe(null);
+        expect(touchableContainer).toHaveStyle({
+            borderLeftColor: '#FE6301'
+        });
+    });
+});

package/lib/src/components/__tests__/InfoToast.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/components/__tests__/InfoToast.test.js

@@ -0,0 +1,20 @@
+/* eslint-env jest */
+import React from 'react';
+import { render } from '~/__helpers__/testing-library/react-native';
+import { InfoToast } from '../InfoToast';
+const setup = (props) => {
+    const utils = render(<InfoToast {...props}/>);
+    return {
+        ...utils
+    };
+};
+describe('test ErrorToast component', () => {
+    it('renders default style', () => {
+        const { queryByTestId } = setup();
+        const touchableContainer = queryByTestId('toastTouchableContainer');
+        expect(touchableContainer).not.toBe(null);
+        expect(touchableContainer).toHaveStyle({
+            borderLeftColor: '#87CEFA'
+        });
+    });
+});

package/lib/src/components/__tests__/SuccessToast.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/components/__tests__/SuccessToast.test.js

@@ -0,0 +1,20 @@
+/* eslint-env jest */
+import React from 'react';
+import { render } from '~/__helpers__/testing-library/react-native';
+import { SuccessToast } from '../SuccessToast';
+const setup = (props) => {
+    const utils = render(<SuccessToast {...props}/>);
+    return {
+        ...utils
+    };
+};
+describe('test SuccessToast component', () => {
+    it('renders default style', () => {
+        const { queryByTestId } = setup();
+        const touchableContainer = queryByTestId('toastTouchableContainer');
+        expect(touchableContainer).not.toBe(null);
+        expect(touchableContainer).toHaveStyle({
+            borderLeftColor: '#69C779'
+        });
+    });
+});

package/lib/src/contexts/EnvironmentContext.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ToastProps } from '~/types';
+export declare type EnvironmentContextType = {
+    useNativeDriver?: ToastProps['useNativeDriver'];
+};
+declare const EnvironmentProvider: React.FC<EnvironmentContextType>;
+declare function useEnvironmentContext(): EnvironmentContextType;
+export { EnvironmentProvider, useEnvironmentContext };

package/lib/src/contexts/EnvironmentContext.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Platform } from 'react-native';
+const EnvironmentContext = React.createContext(null);
+const EnvironmentProvider = ({ children, useNativeDriver = Platform.select({
+    default: true,
+    web: false
+}) }) => {
+    const value = {
+        useNativeDriver
+    };
+    return (<EnvironmentContext.Provider value={value}>
+      {children}
+    </EnvironmentContext.Provider>);
+};
+function useEnvironmentContext() {
+    const ctx = React.useContext(EnvironmentContext);
+    if (!ctx) {
+        throw new Error(`useEnvironment() must be called within EnvironmentProvider context`);
+    }
+    return ctx;
+}
+export { EnvironmentProvider, useEnvironmentContext };

package/lib/src/contexts/__tests__/EnvironmentContext.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/contexts/__tests__/EnvironmentContext.test.js

@@ -0,0 +1,29 @@
+/* eslint-env jest */
+import React from 'react';
+import { renderHook } from '~/__helpers__/testing-library/react-hooks';
+import { EnvironmentProvider, useEnvironmentContext } from '../EnvironmentContext';
+describe('test useEnvironmentContext hook', () => {
+    const setup = (props) => {
+        const utils = renderHook(useEnvironmentContext, {
+            wrapper: ({ children }) => (<EnvironmentProvider {...props}>{children}</EnvironmentProvider>)
+        });
+        return {
+            ...utils
+        };
+    };
+    it('returns environment dependencies / props', () => {
+        const { result } = setup({
+            useNativeDriver: true
+        });
+        expect(result.current.useNativeDriver).toBe(true);
+    });
+    it('throws if there is no EnvironmentProvider', () => {
+        expect(() => {
+            const { result } = renderHook(useEnvironmentContext, {
+                wrapper: ({ children }) => <>{children}</>
+            });
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+            result.current;
+        }).toThrow(new Error('useEnvironment() must be called within EnvironmentProvider context'));
+    });
+});

package/lib/src/contexts/__tests__/LoggerContext.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/contexts/__tests__/LoggerContext.test.js

@@ -0,0 +1,35 @@
+/* eslint-env jest */
+import React from 'react';
+import { renderHook } from '~/__helpers__/testing-library/react-hooks';
+import { LoggerProvider, useLogger } from '../LoggerContext';
+const setup = (props) => {
+    const wrapper = ({ children }) => (<LoggerProvider {...props}>{children}</LoggerProvider>);
+    const utils = renderHook(useLogger, {
+        wrapper
+    });
+    return {
+        ...utils
+    };
+};
+describe('test Logger context', () => {
+    const spy = jest.spyOn(console, 'log');
+    it('injects the log function', () => {
+        const { result } = setup();
+        expect(result.current.log).toBeDefined();
+    });
+    it('it calls console.log when enableLogs: true', () => {
+        const { result } = setup({
+            enableLogs: true
+        });
+        const args = ['answer', 'is', 42];
+        result.current.log(...args);
+        expect(spy).toHaveBeenCalledWith('Toast:', ...args);
+    });
+    it('it does not call console.log when enableLogs: false', () => {
+        const { result } = setup({
+            enableLogs: false
+        });
+        result.current.log('test');
+        expect(spy).not.toHaveBeenCalledWith('test');
+    });
+});

package/lib/src/contexts/index.d.ts

@@ -1 +1,4 @@
-export * from './LoggerContext';
+export { LoggerProvider, useLogger } from './LoggerContext';
+export type { LoggerContextType } from './LoggerContext';
+export { EnvironmentProvider, useEnvironmentContext } from './EnvironmentContext';
+export type { EnvironmentContextType } from './EnvironmentContext';

package/lib/src/contexts/index.js

@@ -1 +1,2 @@
-export * from './LoggerContext';
+export { LoggerProvider, useLogger } from './LoggerContext';
+export { EnvironmentProvider, useEnvironmentContext } from './EnvironmentContext';

package/lib/src/hooks/__tests__/useKeyboard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/hooks/__tests__/useKeyboard.test.js

@@ -0,0 +1,60 @@
+/* eslint-env jest */
+import { DeviceEventEmitter } from 'react-native';
+import { act, renderHook } from '~/__helpers__/testing-library/react-hooks';
+import { isIOS } from '../../utils/platform';
+import { useKeyboard } from '../useKeyboard';
+jest.mock('../../utils/platform');
+const mockIsIOS = isIOS;
+const setup = (platform = 'ios') => {
+    mockIsIOS.mockReturnValue(platform === 'ios');
+    const utils = renderHook(useKeyboard);
+    return {
+        ...utils
+    };
+};
+describe('test useKeyboard hook', () => {
+    it('returns defaults', () => {
+        const { result } = setup();
+        expect(result.current.isKeyboardVisible).toBe(false);
+        expect(result.current.keyboardHeight).toBe(0);
+    });
+    it('updates keyboard height on show', () => {
+        const { result } = setup();
+        expect(result.current.isKeyboardVisible).toBe(false);
+        expect(result.current.keyboardHeight).toBe(0);
+        act(() => {
+            DeviceEventEmitter.emit('keyboardDidShow', {
+                endCoordinates: {
+                    height: 425
+                }
+            });
+        });
+        expect(result.current.isKeyboardVisible).toBe(true);
+        expect(result.current.keyboardHeight).toBe(425);
+    });
+    it('updates keyboard height on hide', () => {
+        const { result } = setup();
+        expect(result.current.isKeyboardVisible).toBe(false);
+        expect(result.current.keyboardHeight).toBe(0);
+        act(() => {
+            DeviceEventEmitter.emit('keyboardDidShow', {
+                endCoordinates: {
+                    height: 425
+                }
+            });
+        });
+        expect(result.current.isKeyboardVisible).toBe(true);
+        expect(result.current.keyboardHeight).toBe(425);
+        act(() => {
+            DeviceEventEmitter.emit('keyboardDidHide');
+        });
+        expect(result.current.isKeyboardVisible).toBe(false);
+        expect(result.current.keyboardHeight).toBe(0);
+    });
+    it('does nothing on Android', () => {
+        mockIsIOS.mockReturnValue(false);
+        const { result } = setup('android');
+        expect(result.current.isKeyboardVisible).toBe(false);
+        expect(result.current.keyboardHeight).toBe(0);
+    });
+});

package/lib/src/hooks/__tests__/usePanResponder.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/hooks/__tests__/usePanResponder.test.js

@@ -0,0 +1,112 @@
+/* eslint-env jest */
+import { Animated } from 'react-native';
+import { renderHook } from '~/__helpers__/testing-library/react-hooks';
+import { mockGestureValues } from '../../__helpers__/PanResponder';
+import { usePanResponder } from '../usePanResponder';
+import { shouldSetPanResponder } from '..';
+const setup = ({ newAnimatedValueForGesture = 0 } = {}) => {
+    const animatedValue = {
+        current: new Animated.Value(0)
+    };
+    const computeNewAnimatedValueForGesture = jest.fn(() => newAnimatedValueForGesture);
+    const onDismiss = jest.fn();
+    const onRestore = jest.fn();
+    const utils = renderHook(() => usePanResponder({
+        animatedValue,
+        computeNewAnimatedValueForGesture,
+        onDismiss,
+        onRestore
+    }));
+    return {
+        animatedValue,
+        computeNewAnimatedValueForGesture,
+        onDismiss,
+        onRestore,
+        ...utils
+    };
+};
+describe('test usePanResponder hook', () => {
+    it('returns defaults', () => {
+        const { result } = setup();
+        expect(result.current.panResponder.panHandlers).toBeDefined();
+        expect(result.current.onMove).toBeDefined();
+        expect(result.current.onRelease).toBeDefined();
+    });
+    it('computes new animated value on move gesture', () => {
+        const { result, computeNewAnimatedValueForGesture } = setup({
+            newAnimatedValueForGesture: 1
+        });
+        result.current.onMove({}, mockGestureValues);
+        expect(computeNewAnimatedValueForGesture).toBeCalledWith(mockGestureValues);
+    });
+    it('computes new animated value on release gesture', () => {
+        const { result, computeNewAnimatedValueForGesture } = setup({
+            newAnimatedValueForGesture: 1
+        });
+        result.current.onRelease({}, mockGestureValues);
+        expect(computeNewAnimatedValueForGesture).toBeCalledWith(mockGestureValues);
+    });
+    it('calls onDismiss when swipe gesture value is below dismiss threshold', () => {
+        const { result, computeNewAnimatedValueForGesture, onDismiss } = setup({
+            newAnimatedValueForGesture: 0.65
+        });
+        result.current.onRelease({}, mockGestureValues);
+        expect(computeNewAnimatedValueForGesture).toBeCalledWith(mockGestureValues);
+        expect(onDismiss).toHaveBeenCalled();
+    });
+    it('calls onDismiss when swipe gesture vy (velocity) is over dismiss threshold', () => {
+        const { result, computeNewAnimatedValueForGesture, onDismiss } = setup({
+            newAnimatedValueForGesture: 1
+        });
+        const gesture = {
+            ...mockGestureValues,
+            vy: -0.8,
+            dy: -1
+        };
+        result.current.onRelease({}, gesture);
+        expect(computeNewAnimatedValueForGesture).toBeCalledWith(gesture);
+        expect(onDismiss).toHaveBeenCalled();
+    });
+    it('calls onRestore when swipe gesture value is not below dismiss threshold', () => {
+        const { result, computeNewAnimatedValueForGesture, onRestore } = setup({
+            newAnimatedValueForGesture: 0.66
+        });
+        result.current.onRelease({}, mockGestureValues);
+        expect(computeNewAnimatedValueForGesture).toBeCalledWith(mockGestureValues);
+        expect(onRestore).toHaveBeenCalled();
+    });
+});
+describe('test shouldSetPanResponder function', () => {
+    it('is set when dx > offset', () => {
+        const gesture = {
+            ...mockGestureValues,
+            dx: 2.1,
+            dy: 0
+        };
+        expect(shouldSetPanResponder({}, gesture)).toBe(true);
+    });
+    it('is set when dy > offset', () => {
+        const gesture = {
+            ...mockGestureValues,
+            dx: 0,
+            dy: 2.1
+        };
+        expect(shouldSetPanResponder({}, gesture)).toBe(true);
+    });
+    it('is not set when dx <= offset', () => {
+        const gesture = {
+            ...mockGestureValues,
+            dx: 2,
+            dy: 0
+        };
+        expect(shouldSetPanResponder({}, gesture)).toBe(false);
+    });
+    it('is not set when dy <= offset', () => {
+        const gesture = {
+            ...mockGestureValues,
+            dx: 0,
+            dy: 2
+        };
+        expect(shouldSetPanResponder({}, gesture)).toBe(false);
+    });
+});

package/lib/src/hooks/__tests__/useSlideAnimation.test.d.ts

@@ -0,0 +1 @@
+export {};