feat: write tests

.github/workflows/tests.yml

@@ -32,8 +32,8 @@ jobs:
 
       - name: Setup React Native environment
         run: |
-          yarn add react-native@0.63.4
-          yarn add react@16.13.1
+          yarn add react@17.0.1
+          yarn add react-native@0.64.2
 
       - name: Run tests
         run: yarn test --coverage

.npmignore

@@ -1 +1 @@
-__tests__
+**/__tests__/*

jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  preset: 'react-native',
+  testEnvironment: 'node',
+  collectCoverage: true,
+  collectCoverageFrom: ['src/**/*.{ts,tsx}'],
+  setupFilesAfterEnv: [
+    '@testing-library/jest-native/extend-expect',
+    './jest.setup.js'
+  ]
+};

jest.setup.js

@@ -0,0 +1,3 @@
+/* eslint-env jest */
+
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

package.json

@@ -16,13 +16,16 @@
     "build": "rm -rf ./lib && tsc",
     "prettier": "./node_modules/.bin/prettier --write",
     "lint": "./node_modules/.bin/eslint --fix",
-    "lint-staged": "./node_modules/.bin/lint-staged"
+    "lint-staged": "./node_modules/.bin/lint-staged",
+    "test": "./node_modules/.bin/jest"
   },
   "author": "Calin Tamas <calintamas2@gmail.com>",
   "license": "MIT",
   "devDependencies": {
+    "@babel/core": "^7.15.8",
     "@testing-library/jest-native": "^4.0.2",
-    "@testing-library/react-native": "^7.2.0",
+    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/react-native": "^8.0.0",
     "@types/jest": "^27.0.1",
     "eslint-config-backpacker-react-ts": "^0.1.0",
     "husky": "^7.0.2",

src/Toast.tsx

@@ -6,30 +6,9 @@ import { ToastHideParams, ToastProps, ToastShowParams } from './types';
 import { useToast } from './useToast';
 
 const ToastRoot = React.forwardRef((props: ToastProps, ref) => {
-  const {
-    config,
-    type,
-    position,
-    visibilityTime,
-    topOffset,
-    bottomOffset,
-    keyboardOffset,
-    onShow,
-    onHide,
-    onPress
-  } = props;
+  const { config, ...defaultOptions } = props;
   const { show, hide, isVisible, options, data } = useToast({
-    defaultOptions: {
-      type,
-      position,
-      visibilityTime,
-      topOffset,
-      bottomOffset,
-      keyboardOffset,
-      onShow,
-      onHide,
-      onPress
-    }
+    defaultOptions
   });
 
   React.useImperativeHandle(ref, () => ({
@@ -56,33 +35,10 @@ type ToastRef = {
 
 const toastRef = React.createRef<ToastRef>();
 
-export function Toast({
-  config,
-  type,
-  position,
-  visibilityTime,
-  topOffset,
-  bottomOffset,
-  keyboardOffset,
-  onShow,
-  onHide,
-  onPress
-}: ToastProps) {
+export function Toast(props: ToastProps) {
   return (
     <LoggerProvider enableLogs>
-      <ToastRoot
-        ref={toastRef}
-        config={config}
-        type={type}
-        position={position}
-        visibilityTime={visibilityTime}
-        topOffset={topOffset}
-        bottomOffset={bottomOffset}
-        keyboardOffset={keyboardOffset}
-        onShow={onShow}
-        onHide={onHide}
-        onPress={onPress}
-      />
+      <ToastRoot ref={toastRef} {...props} />
     </LoggerProvider>
   );
 }

src/components/AnimatedContainer.tsx

@@ -8,20 +8,23 @@ import {
   useViewDimensions
 } from '../hooks';
 import { ReactChildren, ToastPosition } from '../types';
+import { noop } from '../utils/func';
 import { bound } from '../utils/number';
+import { getTestId } from '../utils/test-id';
 import { styles } from './AnimatedContainer.styles';
 
-type AnimatedContainerProps = {
+export type AnimatedContainerProps = {
   children: ReactChildren;
   isVisible: boolean;
   position: ToastPosition;
   topOffset: number;
   bottomOffset: number;
   keyboardOffset: number;
   onHide: () => void;
+  onRestorePosition?: () => void;
 };
 
-function dampingFor(
+export function dampingFor(
   gesture: PanResponderGestureState,
   position: ToastPosition
 ) {
@@ -39,7 +42,7 @@ function dampingFor(
   }
 }
 
-function animatedValueFor(
+export function animatedValueFor(
   gesture: PanResponderGestureState,
   position: ToastPosition,
   damping: number
@@ -64,7 +67,8 @@ export function AnimatedContainer({
   topOffset,
   bottomOffset,
   keyboardOffset,
-  onHide
+  onHide,
+  onRestorePosition = noop
 }: AnimatedContainerProps) {
   const { log } = useLogger();
 
@@ -87,7 +91,8 @@ export function AnimatedContainer({
   const onRestore = React.useCallback(() => {
     log('Swipe, restoring to original position');
     animate(1);
-  }, [animate, log]);
+    onRestorePosition();
+  }, [animate, log, onRestorePosition]);
 
   const computeNewAnimatedValueForGesture = React.useCallback(
     (gesture: PanResponderGestureState) => {
@@ -111,6 +116,7 @@ export function AnimatedContainer({
 
   return (
     <Animated.View
+      testID={getTestId('AnimatedContainer')}
       onLayout={computeViewDimensions}
       style={[styles.base, styles[position], animationStyles]}
       {...panResponder.panHandlers}>

src/components/BaseToast.tsx

@@ -2,13 +2,10 @@ import React from 'react';
 import { Text, View } from 'react-native';
 
 import { BaseToastProps } from '../types';
+import { getTestId } from '../utils/test-id';
 import { styles } from './BaseToast.styles';
 import { Touchable } from './Touchable';
 
-function getTestId(elementName: string) {
-  return `toast${elementName}`;
-}
-
 export function BaseToast({
   text1,
   text2,