add tests

Author: alexdriaguine

package.json

@@ -45,10 +45,12 @@
     "cross-env": "^5.1.4",
     "ease-component": "^1.0.0",
     "gh-pages": "^1.2.0",
+    "mock-raf": "^1.0.0",
     "raf": "^3.4.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-scripts-ts": "^2.16.0",
+    "react-testing-library": "^5.2.0",
     "rollup": "^0.62.0",
     "rollup-plugin-babel": "^3.0.7",
     "rollup-plugin-commonjs": "^9.1.3",

src/index.tsx

@@ -47,7 +47,7 @@ const easeOutCubic: Easing = n => --n * n * n + 1
 
 class Counter extends React.Component<Props, State> {
   public state = {
-    value: 0,
+    value: this.props.from || 0,
     start: Date.now(),
     isAnimating: true,
   }
@@ -63,6 +63,7 @@ class Counter extends React.Component<Props, State> {
       const duration = this.props.duration || 1000
       const easing = this.props.easing || easeOutCubic
 
+    
       if (now - start >= duration) {
         this.setState({isAnimating: false})
       }

src/test.ts

@@ -0,0 +1,79 @@
+import {Counter} from './'
+import * as T from 'react-testing-library'
+import * as React from 'react'
+
+jest.useFakeTimers();
+
+(global as any).requestAnimationFrame = function(callback: () => void) {
+  setTimeout(callback, 0);
+};
+
+afterEach(T.cleanup)
+
+describe('ExampleComponent', () => {
+  it('is truthy', () => {
+    expect(Counter).toBeTruthy()
+  })
+
+  it('renders the number', () => {
+    const to = 1000
+    const res = T.render(<Counter to={to}/>)
+    jest.runAllTimers()
+    expect(res.container.innerHTML).toBeTruthy()
+    expect(res.container.firstChild).toBeTruthy();
+    expect(res.container.firstChild && Number(res.container.firstChild.textContent)).toBe(to)
+  })
+
+  it ('renders from first', () => {
+    const from = 42
+    const to = 84
+    const res = T.render(<Counter from={from} to={to} />)
+    const node = res.container.firstChild
+
+    expect(node && Number(node.textContent)).toBe(from)
+
+    jest.runAllTimers()
+
+    expect(node && Number(node.textContent)).toBe(to)
+  })
+
+  it('works with render prop', () => {
+    const from = 42
+    const to = 84
+    const res = T.render(
+      <Counter from={from} to={to}>
+        {value => <div data-testid="test">{value}</div>}
+      </Counter>
+    )
+
+    let actual = Number(res.getByTestId("test").innerHTML)
+    expect(actual).toBeTruthy()
+    expect(actual).toBe(from)
+
+    jest.runAllTimers()
+
+    actual = Number(res.getByTestId("test").innerHTML)
+    expect(actual).toBe(to)
+    
+  })
+
+  it('works with a custom easing function prop', () => {
+    const from = 42
+    const to = 84
+    const res = T.render(
+      <Counter from={from} to={to} easing={n => n}>
+        {value => <div data-testid="test">{value}</div>}
+      </Counter>
+    )
+
+    let actual = Number(res.getByTestId("test").innerHTML)
+    expect(actual).toBeTruthy()
+    expect(actual).toBe(from)
+
+    jest.runAllTimers()
+
+    actual = Number(res.getByTestId("test").innerHTML)
+    expect(actual).toBe(to)
+    
+  })
+})

src/test.tsx

@@ -16,6 +16,10 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
+"@sheerun/mutationobserver-shim@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz#8013f2af54a2b7d735f71560ff360d3a8176a87b"
+
 "@types/[email protected]":
   version "0.0.39"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
@@ -2152,6 +2156,14 @@ dom-serializer@0:
     domelementtype "~1.1.1"
     entities "~1.1.1"
 
+dom-testing-library@^3.8.1:
+  version "3.11.1"
+  resolved "https://registry.yarnpkg.com/dom-testing-library/-/dom-testing-library-3.11.1.tgz#a2a1b0fe04700f585da9f3539ca626ab17ccf050"
+  dependencies:
+    "@sheerun/mutationobserver-shim" "^0.3.2"
+    pretty-format "^23.6.0"
+    wait-for-expect "^1.0.0"
+
 dom-urls@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/dom-urls/-/dom-urls-1.1.0.tgz#001ddf81628cd1e706125c7176f53ccec55d918e"
@@ -4672,6 +4684,12 @@ [email protected], mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
   dependencies:
     minimist "0.0.8"
 
+mock-raf@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/mock-raf/-/mock-raf-1.0.0.tgz#a288145178893e2040b230f2182fee2049f16f25"
+  dependencies:
+    object-assign "^3.0.0"
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -4922,6 +4940,10 @@ [email protected], object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
 
+object-assign@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
+
 object-copy@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
@@ -5589,6 +5611,13 @@ pretty-format@^22.4.0, pretty-format@^22.4.3:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
 
+pretty-format@^23.6.0:
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-23.6.0.tgz#5eaac8eeb6b33b987b7fe6097ea6a8a146ab5760"
+  dependencies:
+    ansi-regex "^3.0.0"
+    ansi-styles "^3.2.0"
+
 private@^0.1.6, private@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
@@ -5837,6 +5866,13 @@ react-scripts-ts@^2.16.0:
   optionalDependencies:
     fsevents "^1.1.3"
 
+react-testing-library@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-testing-library/-/react-testing-library-5.2.0.tgz#d7af9b0e6d1b653287d8c06cd0eab9e6d5d645ba"
+  dependencies:
+    dom-testing-library "^3.8.1"
+    wait-for-expect "^1.0.0"
+
 react@^16.4.1:
   version "16.5.2"
   resolved "https://registry.yarnpkg.com/react/-/react-16.5.2.tgz#19f6b444ed139baa45609eee6dc3d318b3895d42"
@@ -7385,6 +7421,10 @@ w3c-hr-time@^1.0.1:
   dependencies:
     browser-process-hrtime "^0.1.2"
 
+wait-for-expect@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/wait-for-expect/-/wait-for-expect-1.0.1.tgz#73ab346ed56ed2ef66c380a59fd623755ceac0ce"
+
 walker@~1.0.5:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"