Update tests and zeroPad fn

README.md

@@ -188,7 +188,7 @@ import Countdown, { zeroPad, getTimeDifference } from 'react-countdown-now';
 ```
 
 ### `zeroPad(value, [length = 2])`
-The `zeroPad` function works similar to other well-known pad-functions and takes 2 arguments into account. A `value` which can be a `string` or `number`, as well as a `length` parameter which defaults to `2` as you are most likely only going to use this function if you actually want to pad one of your values.
+The `zeroPad` function works similar to other well-known pad-functions and takes 2 arguments into account. A `value` which can be a `string` or `number`, as well as a `length` parameter which defaults to `2` as you are most likely only going to use this function if you actually want to pad one of your values. Either returns a number if `length` equals `0`, or the zero-padded string.
 
 ### `getTimeDifference(date, [{ now = Date.now, precision = 0, controlled = false }])`
 `getTimeDifference` calculates the time difference between a given end [`date`](#date) and the current date (`now`). It returns, similiar to the [`renderer`](#renderer) callback, a custom object which contains some time related data:

src/Countdown.jsx

@@ -6,9 +6,10 @@ import PropTypes from 'prop-types';
  *
  * @param {any} value Value to zero-pad.
  * @param {number} [length=2] Amount of characters to pad.
- * @returns Left-padded string.
+ * @returns Left-padded number/string.
  */
 export const zeroPad = (value, length = 2) => {
+  if (length === 0) return value;
   const strValue = String(value);
   return strValue.length >= length ? strValue : ('0'.repeat(length) + strValue).slice(length * -1);
 };

src/Countdown.test.jsx

@@ -24,8 +24,19 @@ const defaultStats = {
 describe('<Countdown />', () => {
   jest.useFakeTimers();
 
+  let wrapper = null;
+  let wrapperDate = null;
+
+  beforeEach(() => {
+    Date.now = now;
+    const date = Date.now() + 10000;
+    const root = document.createElement('div');
+    wrapperDate = date;
+    wrapper = mount(<Countdown date={date} />, { attachTo: root });
+  });
+
   it('compares snapshot of countdown with custom renderer', () => {
-    const wrapper = shallow(
+    wrapper = shallow(
       <Countdown
         date={Date.now() + timeDiff}
         renderer={props => (
@@ -57,7 +68,7 @@ describe('<Countdown />', () => {
     let completionist = null;
     Completionist.prototype.componentDidMount = jest.fn();
 
-    const wrapper = mount(
+    wrapper = mount(
       <Countdown date={Date.now() + timeDiff} zeroPadLength={0}>
         <Completionist
           ref={el => {
@@ -92,20 +103,10 @@ describe('<Countdown />', () => {
   });
 
   it('compares snapshot of countdown with daysInHours => true', () => {
-    const wrapper = shallow(<Countdown date={Date.now() + timeDiff} daysInHours />);
+    wrapper = shallow(<Countdown date={Date.now() + timeDiff} daysInHours />);
     expect(wrapper).toMatchSnapshot();
   });
 
-  let wrapper = null;
-  let wrapperDate = null;
-
-  beforeEach(() => {
-    const date = Date.now() + 10000;
-    const root = document.createElement('div');
-    wrapperDate = date;
-    wrapper = mount(<Countdown date={date} />, { attachTo: root });
-  });
-
   it('should trigger onTick and onComplete callbacks', () => {
     const onTick = jest.fn(stats => {
       expect(stats).toEqual(getTimeDifference(wrapperDate));
@@ -123,6 +124,8 @@ describe('<Countdown />', () => {
     jest.runTimersToTime(6000);
     expect(onTick.mock.calls.length).toBe(6);
     expect(wrapper.state().seconds).toBe(6);
+
+    wrapper.update();
     expect(wrapper).toMatchSnapshot();
 
     // Forward 3 more seconds
@@ -158,8 +161,23 @@ describe('<Countdown />', () => {
     expect(wrapper.state().completed).toBe(true);
   });
 
+  it('should not (try to) set state after component unmount', () => {
+    expect(wrapper.state().completed).toBe(false);
+
+    Date.now = jest.fn(() => wrapperDate - 6000);
+    jest.runTimersToTime(6000);
+    expect(wrapper.state().seconds).toBe(6);
+
+    wrapper.instance().mounted = false;
+    Date.now = jest.fn(() => wrapperDate - 3000);
+    jest.runTimersToTime(3000);
+    expect(wrapper.state().seconds).toBe(6);
+  });
+
   afterEach(() => {
-    wrapper.detach();
+    try {
+      wrapper.detach();
+    } catch (e) {}
   });
 });
 
@@ -181,7 +199,7 @@ describe('zeroPad', () => {
   });
 
   it('should not zero-pad 1 if length is 0 or 1', () => {
-    expect(zeroPad(1, 0)).toBe('1');
+    expect(zeroPad(1, 0)).toBe(1);
     expect(zeroPad(1, 1)).toBe('1');
   });
 

src/__snapshots__/Countdown.test.jsx.snap

@@ -3,8 +3,8 @@
 exports[`<Countdown /> compares snapshot of countdown with custom renderer 1`] = `
 <div>
   1
-  1
-  1
+  01
+  01
   50
 </div>
 `;
@@ -26,14 +26,14 @@ exports[`<Countdown /> compares snapshots and correct mounting of React children
   daysInHours={false}
   intervalDelay={1000}
   precision={0}
-  zeroPadLength={2}
+  zeroPadLength={0}
 >
   <span>
     1
     :
-    01
+    1
     :
-    01
+    1
     :
     50
   </span>
@@ -47,7 +47,7 @@ exports[`<Countdown /> compares snapshots and correct mounting of React children
   daysInHours={false}
   intervalDelay={1000}
   precision={0}
-  zeroPadLength={2}
+  zeroPadLength={0}
 >
   <Completionist
     countdown={
@@ -64,15 +64,15 @@ exports[`<Countdown /> compares snapshots and correct mounting of React children
         "precision": 0,
         "seconds": 0,
         "total": 0,
-        "zeroPadLength": 2,
+        "zeroPadLength": 0,
       }
     }
     name="master"
   >
     <div>
-      Completed!
+      Completed! 
       master
-
+       
       Another child
     </div>
   </Completionist>