Added more tests, updated README and #8

Author: mCodex

README.md

@@ -4,6 +4,8 @@
 [![npm version](https://badge.fury.io/js/react-native-rooster.svg)](https://badge.fury.io/js/react-native-rooster)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 ![npm bundle size](https://img.shields.io/bundlephobia/min/react-native-rooster)
+![snyk](https://img.shields.io/snyk/vulnerabilities/npm/react-native-rooster)
+![website](https://img.shields.io/website?url=https%3A%2F%2Fmcodex.dev%2Freact-native-rooster)
 
 # react-native-rooster
 
@@ -85,7 +87,7 @@ For example:
 ```javascript
 import { setToastConfig } from 'react-native-rooster';
 
-addToast({
+setToastConfig({
   bgColor: {
       success: 'olive',
     },

example/yalc.lock

@@ -2,7 +2,7 @@
   "version": "v1",
   "packages": {
     "react-native-rooster": {
-      "signature": "7e82ec7ac183ad6321c085bf0463484e",
+      "signature": "b8dbe210d1043df049fdd413d1c5e0f2",
       "file": true
     }
   }

package.json

@@ -40,13 +40,14 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@testing-library/jest-native": "^3.2.0",
+    "@testing-library/react-hooks": "^3.4.1",
     "@types/jest": "^26.0.7",
     "@types/react": "^16.9.43",
     "@types/react-native": "^0.63.2",
     "@types/react-test-renderer": "^16.9.2",
     "@types/styled-components": "^5.1.1",
-    "@typescript-eslint/eslint-plugin": "^3.7.0",
-    "@typescript-eslint/parser": "^3.7.0",
+    "@typescript-eslint/eslint-plugin": "^3.7.1",
+    "@typescript-eslint/parser": "^3.7.1",
     "babel-jest": "^26.1.0",
     "eslint": "^7.5.0",
     "eslint-config-airbnb": "^18.2.0",
@@ -55,7 +56,7 @@
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-react": "^7.20.4",
     "eslint-plugin-react-hooks": "^4.0.8",
     "jest": "^26.1.0",
     "lodash": "^4.17.19",
@@ -69,7 +70,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.3",
     "rollup-plugin-typescript2": "^0.27.1",
     "styled-components": "^5.1.1",
-    "ts-jest": "^26.1.3",
+    "ts-jest": "^26.1.4",
     "typescript": "^3.9.7",
     "yalc": "^1.0.0-pre.40"
   },

src/components/ToastContainer/__tests__/ToastContainer.spec.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import { render } from 'react-native-testing-library';
+import { render, fireEvent } from 'react-native-testing-library';
+import { renderHook } from '@testing-library/react-hooks';
+
+import ToastProvider from '../../../providers/ToastProvider';
+
+import ToastContext from '../../../contexts/ToastContext';
+
+import useToast from '../../../hooks/useToast';
 
 import ToastContainer from '..';
 
@@ -33,29 +40,6 @@ describe('ToastContainer', () => {
     expect(getByText('Toast success message')).toBeTruthy();
   });
 
-  // it('should be able to automatically dismiss toast with setTimeout fn', () => {
-  //   const messages = [
-  //     {
-  //       id: '1',
-  //       message: 'Testing toast timeout',
-  //     },
-  //   ];
-
-  //   const { getByText } = render(
-  //     <ToastContainer messages={messages} toastConfig={defaultConfig} />,
-  //     {
-  //       wrapper: ToastProvider,
-  //     },
-  //   );
-
-  //   expect(setTimeout).toHaveBeenCalledTimes(1);
-  //   expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 3000);
-  //   setTimeout(() => {
-  //     expect(getByText('Testing toast timeout')).toBeFalsy();
-  //   }, 3000);
-  //   jest.runAllTimers();
-  // });
-
   it('should be able to render a toast on screen with title', () => {
     const messages = [
       {
@@ -72,4 +56,75 @@ describe('ToastContainer', () => {
     expect(getByText('My Title')).toBeTruthy();
     expect(getByText('Toast success message')).toBeTruthy();
   });
+
+  it('should be able to automatically dismiss toast with setTimeout fn', () => {
+    const messages = [
+      {
+        id: '1',
+        message: 'Testing toast timeout',
+      },
+    ];
+
+    const { result } = renderHook(() => useToast(), {
+      wrapper: ToastProvider,
+    });
+
+    const CustomProvider: React.FC = ({ children }) => (
+      <ToastContext.Provider value={result.current}>
+        {children}
+      </ToastContext.Provider>
+    );
+
+    const { getByText } = render(
+      <ToastContainer messages={messages} toastConfig={defaultConfig} />,
+      {
+        wrapper: CustomProvider,
+      },
+    );
+
+    expect(setTimeout).toHaveBeenCalledTimes(1);
+    setTimeout(() => {
+      expect(getByText('Testing toast timeout')).toBeFalsy();
+    }, 3000);
+
+    jest.useFakeTimers();
+  });
+
+  it('should be able to render a toast on screen and close by clicking on it', async () => {
+    const messages = [
+      {
+        id: '1',
+        message: 'An error ocurred',
+      },
+    ];
+
+    const { result } = renderHook(() => useToast(), {
+      wrapper: ToastProvider,
+    });
+
+    const removeToastHookSpy = jest
+      .spyOn(result.current, 'removeToast')
+      .mockImplementationOnce(() => jest.fn());
+
+    const CustomProvider: React.FC = ({ children }) => (
+      <ToastContext.Provider value={result.current}>
+        {children}
+      </ToastContext.Provider>
+    );
+
+    const { getByText } = render(
+      <ToastContainer messages={messages} toastConfig={defaultConfig} />,
+      {
+        wrapper: CustomProvider,
+      },
+    );
+
+    const toast = getByText('An error ocurred');
+
+    expect(toast).toBeTruthy();
+
+    fireEvent.press(toast);
+
+    expect(removeToastHookSpy).toHaveBeenCalledTimes(1);
+  });
 });

src/components/ToastContainer/index.tsx

@@ -47,6 +47,7 @@ const Toast: React.FC<IToastComponent> = (props) => {
           bottom={handleBottomPadding}
           type={type}
           bgColor={bgColor}
+          onPress={() => removeToast(id)}
         >
           {title && <Title>{title}</Title>}
           <Message>{message}</Message>

src/components/ToastContainer/styles.ts

@@ -11,7 +11,7 @@ interface ContainerProps {
   };
 }
 
-export const Container = styled.View<ContainerProps>`
+export const Container = styled.TouchableOpacity<ContainerProps>`
   align-self: center;
   position: absolute;
 

src/providers/__tests__/ToastProvider.spec.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { waitFor } from 'react-native-testing-library';
+import { renderHook, act } from '@testing-library/react-hooks';
+
+import ToastProvider from '../ToastProvider';
+
+import useToast from '../../hooks/useToast';
+
+describe('ToastProvider', () => {
+  it('should be able to add a toast using addToast', async () => {
+    const setState = jest.fn();
+
+    const useStateMock: any = (initState: any) => [initState, setState];
+
+    jest.spyOn(React, 'useState').mockImplementation(useStateMock);
+
+    const { result } = renderHook(() => useToast(), {
+      wrapper: ToastProvider,
+    });
+
+    await waitFor(() => {
+      result.current.addToast({
+        title: 'hello',
+        message: 'New Message',
+      });
+    });
+
+    // should write the assertions
+  });
+
+  it("should be able to change toast's global config", () => {
+    const { result } = renderHook(() => useToast(), {
+      wrapper: ToastProvider,
+    });
+
+    act(() => {
+      result.current.setToastConfig({
+        bgColor: {
+          success: 'olive',
+        },
+      });
+    });
+
+    // should write the assertions
+  });
+});