Add startOnMount prop and fix some tests (#245)

* Add startOnMount prop and fix some tests * Add props and readme for startOnMount
glennreyes · Dec 14, 2019 · a8a505d · a8a505d
1 parent 9492baf
commit a8a505d
Show file tree

Hide file tree

Showing 7 changed files with 139 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -39,6 +39,7 @@ Click [here](https://github.com/glennreyes/react-countup/tree/d0002932dac8a274f9
       - [`preserveValue: boolean`](#preservevalue-boolean)
       - [`separator: string`](#separator-string)
       - [`start: number`](#start-number)
+      - [`startOnMount: boolean`](#startonmount-boolean)
       - [`suffix: string`](#suffix-string)
       - [`useEasing: boolean`](#useeasing-boolean)
       - [`easingFn: (t: number, b: number, c: number, d: number) => number`](#easingfn-t-number-b-number-c-number-d-number--number)
@@ -250,6 +251,12 @@ Initial value.
 
 Default: `0`
 
+#### `startOnMount: boolean`
+
+Use for start counter on mount for hook usage.
+
+Default: `true`
+
 #### `suffix: string`
 
 Static text after the transitioning value.

diff --git a/index.d.ts b/index.d.ts
@@ -35,6 +35,7 @@ export interface CountUpProps {
 declare class CountUp extends React.Component<CountUpProps, any> {}
 
 export interface useCountUpProps {
+  startOnMount?: boolean;
   start?: number;
   end: number;
   delay?: number;

diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "@babel/preset-env": "7.7.6",
     "@babel/preset-react": "7.7.4",
     "@testing-library/react": "9.4.0",
+    "@testing-library/react-hooks": "^3.2.1",
     "babel-jest": "24.9.0",
     "husky": "3.1.0",
     "jest": "24.9.0",
@@ -51,6 +52,7 @@
     "raf": "3.4.1",
     "react": "16.12.0",
     "react-dom": "16.12.0",
+    "react-test-renderer": "^16.12.0",
     "rollup": "1.27.12",
     "rollup-plugin-babel": "4.3.3"
   }

diff --git a/src/CountUp.js b/src/CountUp.js
@@ -17,6 +17,7 @@ class CountUp extends Component {
     redraw: PropTypes.bool,
     separator: PropTypes.string,
     start: PropTypes.number,
+    startOnMount: PropTypes.bool,
     suffix: PropTypes.string,
     style: PropTypes.object,
     useEasing: PropTypes.bool,
@@ -39,6 +40,7 @@ class CountUp extends Component {
     redraw: false,
     separator: '',
     start: 0,
+    startOnMount: true,
     suffix: '',
     style: undefined,
     useEasing: true,

diff --git a/src/__tests__/useCountUp.test.js b/src/__tests__/useCountUp.test.js
@@ -1,34 +1,67 @@
 'use strict';
 
 import React from 'react';
-import { cleanup, fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, act } from '@testing-library/react';
+import { cleanup } from '@testing-library/react-hooks';
 import { useCountUp } from '../index';
 
-jest.useFakeTimers();
 afterEach(cleanup);
 
-it('renders start value correctly with hook', () => {
+it('renders countup correctly', async done => {
   const Hook = () => {
     const { countUp } = useCountUp({ end: 10 });
     return <span>{countUp}</span>;
   };
 
   const { container } = render(<Hook />);
-  const span = container.firstChild;
-  jest.runAllTimers();
-  expect(span.textContent).toEqual('0');
+
+  await act(() => {
+    return new Promise(() => {
+      setTimeout(() => {
+        const span = container.firstChild;
+        expect(span.textContent).toEqual('10');
+        done();
+      }, 1100);
+    });
+  });
 });
 
-it('renders with delay correctly with hook', () => {
+it('does not start countup when startOnMount is false', async done => {
+  const Hook = () => {
+    const { countUp } = useCountUp({ end: 10, startOnMount: false });
+    return <span>{countUp}</span>;
+  };
+
+  const { container } = render(<Hook />);
+
+  await act(() => {
+    return new Promise(() => {
+      setTimeout(() => {
+        const span = container.firstChild;
+        expect(span.textContent).toEqual('0');
+        done();
+      }, 1100);
+    });
+  });
+});
+
+it('renders with delay correctly with hook', async done => {
   const Hook = () => {
     const { countUp } = useCountUp({ delay: 1, end: 10 });
     return <span>{countUp}</span>;
   };
 
   const { container } = render(<Hook />);
-  const span = container.firstChild;
-  jest.runAllTimers();
-  expect(span.textContent).toEqual('0');
+
+  await act(() => {
+    return new Promise(() => {
+      setTimeout(() => {
+        const span = container.firstChild;
+        expect(span.textContent).toEqual('10');
+        done();
+      }, 2100);
+    });
+  });
 });
 
 it('calls start correctly with hook', () => {
@@ -41,9 +74,7 @@ it('calls start correctly with hook', () => {
   };
 
   const { container } = render(<Hook />);
-  jest.runAllTimers();
   fireEvent.click(container.firstChild);
-  jest.runAllTimers();
   expect(spy.start).toHaveBeenCalled();
 });
 
@@ -57,9 +88,7 @@ it('calls reset correctly with hook', () => {
   };
 
   const { container } = render(<Hook />);
-  jest.runAllTimers();
   fireEvent.click(container.firstChild);
-  jest.runAllTimers();
   expect(spy.reset).toHaveBeenCalled();
 });
 
@@ -74,9 +103,7 @@ it('calls update correctly with hook', () => {
   };
 
   const { container } = render(<Hook />);
-  jest.runAllTimers();
   fireEvent.click(container.firstChild);
-  jest.runAllTimers();
   expect(spy.onUpdate).toHaveBeenCalled();
 });
 
@@ -91,8 +118,35 @@ it('calls pauseResume correctly with hook', () => {
   };
 
   const { container } = render(<Hook />);
-  jest.runAllTimers();
   fireEvent.click(container.firstChild);
-  jest.runAllTimers();
   expect(spy.onPauseResume).toHaveBeenCalled();
 });
+
+it('calls start correctly with hook', async done => {
+  const spy = {};
+  const onStart = jest.fn();
+  const Hook = () => {
+    spy.onStart = onStart;
+    spyOn(spy, 'onStart');
+    const { countUp, start } = useCountUp({
+      end: 10,
+      onStart,
+      startOnMount: false,
+    });
+    return <span onClick={start}>{countUp}</span>;
+  };
+
+  const { container } = render(<Hook />);
+
+  fireEvent.click(container.firstChild);
+
+  await act(() => {
+    return new Promise(() => {
+      setTimeout(() => {
+        done();
+      }, 1100);
+    });
+  });
+
+  expect(spy.onStart).toHaveBeenCalled();
+});
diff --git a/src/useCountUp.js b/src/useCountUp.js
@@ -62,14 +62,16 @@ const useCountUp = props => {
   };
 
   useEffect(() => {
-    const { delay, onStart, onEnd } = _props;
-    const timeout = setTimeout(() => {
-      onStart({ pauseResume, reset, update });
-      getCountUp().start(() => {
-        clearTimeout(timeout);
-        onEnd({ pauseResume, reset, start: restart, update });
-      });
-    }, delay * 1000);
+    const { delay, onStart, onEnd, startOnMount } = _props;
+    if (startOnMount) {
+      const timeout = setTimeout(() => {
+        onStart({ pauseResume, reset, update });
+        getCountUp().start(() => {
+          clearTimeout(timeout);
+          onEnd({ pauseResume, reset, start: restart, update });
+        });
+      }, delay * 1000);
+    }
     return reset;
   }, []);
 

diff --git a/yarn.lock b/yarn.lock
@@ -793,20 +793,20 @@
     "@babel/plugin-transform-react-jsx-self" "^7.7.4"
     "@babel/plugin-transform-react-jsx-source" "^7.7.4"
 
+"@babel/runtime@^7.5.4", "@babel/runtime@^7.7.6":
+  version "7.7.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.6.tgz#d18c511121aff1b4f2cd1d452f1bac9601dd830f"
+  integrity sha512-BWAJxpNVa0QlE5gZdWjSxXtemZyZ9RmrmVozxt3NUXeZhVIJ5ANyqmMc0JDrivBZyxUuQvFxlvH4OWWOogGfUw==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/runtime@^7.6.2":
   version "7.6.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.3.tgz#935122c74c73d2240cafd32ddb5fc2a6cd35cf1f"
   integrity sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA==
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.7.6":
-  version "7.7.6"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.6.tgz#d18c511121aff1b4f2cd1d452f1bac9601dd830f"
-  integrity sha512-BWAJxpNVa0QlE5gZdWjSxXtemZyZ9RmrmVozxt3NUXeZhVIJ5ANyqmMc0JDrivBZyxUuQvFxlvH4OWWOogGfUw==
-  dependencies:
-    regenerator-runtime "^0.13.2"
-
 "@babel/template@^7.1.0", "@babel/template@^7.4.0", "@babel/template@^7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.6.0.tgz#7f0159c7f5012230dad64cca42ec9bdb5c9536e6"
@@ -1046,6 +1046,14 @@
     pretty-format "^24.9.0"
     wait-for-expect "^3.0.0"
 
+"@testing-library/react-hooks@^3.2.1":
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-3.2.1.tgz#19b6caa048ef15faa69d439c469033873ea01294"
+  integrity sha512-1OB6Ksvlk6BCJA1xpj8/WWz0XVd1qRcgqdaFAq+xeC6l61Ucj0P6QpA5u+Db/x9gU4DCX8ziR5b66Mlfg0M2RA==
+  dependencies:
+    "@babel/runtime" "^7.5.4"
+    "@types/testing-library__react-hooks" "^3.0.0"
+
 "@testing-library/[email protected]":
   version "9.4.0"
   resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-9.4.0.tgz#b021ac8cb987c8dc54c6841875f745bf9b2e88e5"
@@ -1140,6 +1148,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-test-renderer@*":
+  version "16.9.1"
+  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-16.9.1.tgz#9d432c46c515ebe50c45fa92c6fb5acdc22e39c4"
+  integrity sha512-nCXQokZN1jp+QkoDNmDZwoWpKY8HDczqevIDO4Uv9/s9rbGPbSpy8Uaxa5ixHKkcm/Wt0Y9C3wCxZivh4Al+rQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*":
   version "16.9.9"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.9.tgz#a62c6f40f04bc7681be5e20975503a64fe783c3a"
@@ -1160,6 +1175,14 @@
   dependencies:
     pretty-format "^24.3.0"
 
+"@types/testing-library__react-hooks@^3.0.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@types/testing-library__react-hooks/-/testing-library__react-hooks-3.1.0.tgz#04d174ce767fbcce3ccb5021d7f156e1b06008a9"
+  integrity sha512-QJc1sgH9DD6jbfybzugnP0sY8wPzzIq8sHDBuThzCr2ZEbyHIaAvN9ytx/tHzcWL5MqmeZJqiUm/GsythaGx3g==
+  dependencies:
+    "@types/react" "*"
+    "@types/react-test-renderer" "*"
+
 "@types/testing-library__react@^9.1.2":
   version "9.1.2"
   resolved "https://registry.yarnpkg.com/@types/testing-library__react/-/testing-library__react-9.1.2.tgz#e33af9124c60a010fc03a34eff8f8a34a75c4351"
@@ -3948,6 +3971,21 @@ react-is@^16.8.1, react-is@^16.8.4:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.2.tgz#984120fd4d16800e9a738208ab1fba422d23b5ab"
   integrity sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA==
 
+react-is@^16.8.6:
+  version "16.12.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
+  integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
+
+react-test-renderer@^16.12.0:
+  version "16.12.0"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.12.0.tgz#11417ffda579306d4e841a794d32140f3da1b43f"
+  integrity sha512-Vj/teSqt2oayaWxkbhQ6gKis+t5JrknXfPVo+aIJ8QwYAqMPH77uptOdrlphyxl8eQI/rtkOYg86i/UWkpFu0w==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    react-is "^16.8.6"
+    scheduler "^0.18.0"
+
 [email protected]:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"