feat: init test and ci setup

Author: Brooooooklyn

.circleci/config.yml

@@ -0,0 +1,70 @@
+defaults: &defaults
+  working_directory: ~/rxjs-hooks
+  docker:
+    - image: circleci/node:10-browsers
+
+version: 2
+jobs:
+  build:
+    <<: *defaults
+    steps:
+      - checkout
+      - run: echo 'export PATH=${PATH}:${HOME}/${CIRCLE_PROJECT_REPONAME}/node_modules/.bin' >> $BASH_ENV
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+      - run:
+          name: yarn-with-greenkeeper
+          command: |
+            sudo yarn global add greenkeeper-lockfile@1
+            yarn
+      - save_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+          paths:
+            - ~/.cache/yarn
+      - run: greenkeeper-lockfile-update
+      - run: yarn build
+      - run: greenkeeper-lockfile-upload
+      - persist_to_workspace:
+          root: ~/rxjs-hooks
+          paths:
+            - ./*
+  test:
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/rxjs-hooks
+      - run: yarn lint
+      - run: yarn test
+      - run:
+          name: test-coverage
+          command: cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
+
+  deploy:
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/rxjs-hooks
+      - run: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc
+      - run: |
+          if git log -1 --pretty=%B | grep "^[0-9]\+\.[0-9]\+\.[0-9]\+$";
+          then
+            npm publish
+          else
+            echo "Not a release, skipping publish"
+          fi
+workflows:
+  version: 2
+  build_test_and_deploy:
+    jobs:
+      - build
+      - test:
+          requires:
+            - build
+      - deploy:
+          requires:
+            - test
+          filters:
+            tags:
+              only: /.*/
+            branches:
+              only: master

jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  browser: true,
+  verbose: true,
+  rootDir: __dirname,
+  setupTestFrameworkScriptFile: '<rootDir>/tools/test-setup.js',
+  moduleDirectories: ['<rootDir>/node_modules', '<rootDir>/src'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest'
+  },
+  // testRegex: '/__test__/.*\\.spec\\.tsx?$',
+  collectCoverage: true,
+  collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/__test__/**'],
+  coverageReporters: ['lcov', 'html'],
+  preset: 'ts-jest'
+}

package.json

@@ -8,27 +8,36 @@
   "scripts": {
     "build": "rm -rf esm && tsc -p src/tsconfig.json --outDir esm",
     "lint": "tslint -c tslint.json -p src/tsconfig.json",
-    "start": "webpack-dev-server --progress --color"
+    "start": "webpack-dev-server --config ./tools/webpack.config.js --progress --color",
+    "test": "NODE_ENV=test jest --no-cache --ci"
   },
   "repository": {
     "type": "git",
     "url": "git@github.com:LeetCode-OpenSource/rxjs-hooks.git"
   },
   "devDependencies": {
+    "@types/jest": "^23.3.9",
     "@types/lodash": "^4.14.118",
     "@types/react-dom": "^16.0.9",
+    "@types/react-test-renderer": "^16.0.3",
+    "@types/sinon": "^5.0.5",
+    "@types/sinon-chai": "^3.2.0",
     "@types/webpack": "^4.4.19",
     "fork-ts-checker-webpack-plugin": "^0.4.15",
     "happypack": "^5.0.0",
     "html-webpack-plugin": "^3.2.0",
     "husky": "^1.1.4",
+    "jest": "^23.6.0",
     "lint-staged": "^8.0.4",
     "prettier": "^1.15.2",
     "react": "16.7.0-alpha.2",
     "react-dom": "16.7.0-alpha.2",
+    "react-test-renderer": "^16.7.0-alpha.2",
     "rxjs": "^6.3.3",
+    "sinon": "^7.1.1",
     "source-map-loader": "^0.2.4",
     "standard": "^12.0.1",
+    "ts-jest": "^23.10.4",
     "ts-loader": "^5.3.0",
     "tslint": "^5.11.0",
     "tslint-config-prettier": "^1.16.0",

src/__test__/find.ts

@@ -0,0 +1,5 @@
+import { ReactTestInstance } from 'react-test-renderer'
+
+export function find(node: ReactTestInstance, type: string) {
+  return node.find((node) => node.type === type)
+}

src/__test__/use-event-callback.spec.tsx

@@ -0,0 +1,111 @@
+import React from 'react'
+import { Observable, of, Observer } from 'rxjs'
+import { mapTo, delay } from 'rxjs/operators'
+import { create } from 'react-test-renderer'
+import * as Sinon from 'sinon'
+
+import { find } from './find'
+import { useEventCallback } from '../use-event-callback'
+
+describe('useEventCallback specs', () => {
+  function createFixture<T>(
+    factory: (event$: Observable<React.SyntheticEvent<any>>) => Observable<T>,
+    initialValue?: T,
+  ) {
+    return function Fixture() {
+      const [callback, value] = useEventCallback(factory, initialValue)
+      return (
+        <>
+          <h1>{value}</h1>
+          <button onClick={callback}>click me</button>
+        </>
+      )
+    }
+  }
+
+  it('should generate callback', () => {
+    const Fixture = createFixture(() => of(1))
+    const fixtureNode = <Fixture />
+    const testRenderer = create(fixtureNode)
+    testRenderer.update(fixtureNode)
+    const button = find(testRenderer.root, 'button')
+    expect(button.props.onClick.name).toBe('clickCallback')
+  })
+
+  it('should render value', () => {
+    const value = 1
+    const Fixture = createFixture(() => of(value))
+    const fixtureNode = <Fixture />
+    const testRenderer = create(fixtureNode)
+    expect(find(testRenderer.root, 'h1').children).toEqual([])
+    testRenderer.update(fixtureNode)
+    expect(find(testRenderer.root, 'h1').children).toEqual([`${value}`])
+  })
+
+  it('should trigger handler async callback', () => {
+    const timer = Sinon.useFakeTimers()
+    const timeToDelay = 200
+    const value = 1
+    const Fixture = createFixture((event$: Observable<any>) =>
+      event$.pipe(
+        mapTo(value),
+        delay(timeToDelay),
+      ),
+    )
+    const fixtureNode = <Fixture />
+    const testRenderer = create(fixtureNode)
+    testRenderer.update(fixtureNode)
+    const button = find(testRenderer.root, 'button')
+    button.props.onClick()
+    timer.tick(timeToDelay)
+    testRenderer.update(fixtureNode)
+    expect(find(testRenderer.root, 'h1').children).toEqual([`${value}`])
+    timer.restore()
+  })
+
+  it('should handler the initial value', () => {
+    const timer = Sinon.useFakeTimers()
+    const initialValue = 1000
+    const value = 1
+    const timeToDelay = 200
+    const Fixture = createFixture(
+      (event$: Observable<any>) =>
+        event$.pipe(
+          mapTo(value),
+          delay(timeToDelay),
+        ),
+      initialValue,
+    )
+    const fixtureNode = <Fixture />
+    const testRenderer = create(fixtureNode)
+    expect(find(testRenderer.root, 'h1').children).toEqual([`${initialValue}`])
+    testRenderer.update(fixtureNode)
+    const button = find(testRenderer.root, 'button')
+    button.props.onClick()
+    timer.tick(timeToDelay)
+    testRenderer.update(fixtureNode)
+    expect(find(testRenderer.root, 'h1').children).toEqual([`${value}`])
+    timer.restore()
+  })
+
+  it('should call teardown logic after unmount', () => {
+    const spy = Sinon.spy()
+    const Fixture = createFixture(
+      () =>
+        new Observable((observer: Observer<number>) => {
+          const timerId = setTimeout(() => {
+            observer.next(1)
+            observer.complete()
+          }, 1000)
+          return () => {
+            spy()
+            clearTimeout(timerId)
+          }
+        }),
+    )
+    const fixtureNode = <Fixture />
+    const testRenderer = create(fixtureNode)
+    testRenderer.unmount()
+    expect(spy.callCount).toBe(1)
+  })
+})

src/__test__/use-observable.spec.tsx

@@ -0,0 +1,120 @@
+import React from 'react'
+import { create } from 'react-test-renderer'
+import * as Sinon from 'sinon'
+import { of, Observable, Observer } from 'rxjs'
+
+import { find } from './find'
+import { useObservable } from '../use-observable'
+import { tap } from 'rxjs/operators'
+
+describe('useObservable specs', () => {
+  let timer: Sinon.SinonFakeTimers
+
+  beforeEach(() => {
+    timer = Sinon.useFakeTimers()
+  })
+
+  afterEach(() => {
+    timer.restore()
+  })
+
+  it('should get value from sync Observable', () => {
+    const value = 100
+    function Fixture() {
+      const value = useObservable(() => of(100))
+      return <h1>{value}</h1>
+    }
+    const fixtureNode = <Fixture />
+
+    const testRenderer = create(fixtureNode)
+    expect(find(testRenderer.root, 'h1').children).toEqual([])
+    testRenderer.update(fixtureNode)
+
+    expect(find(testRenderer.root, 'h1').children).toEqual([`${value}`])
+  })
+
+  it('should render the initialValue', () => {
+    const initialValue = 2000
+    const value = 100
+    function Fixture() {
+      const value = useObservable(() => of(100), initialValue)
+      return <h1>{value}</h1>
+    }
+    const fixtureNode = <Fixture />
+
+    const testRenderer = create(fixtureNode)
+    expect(find(testRenderer.root, 'h1').children).toEqual([`${initialValue}`])
+    testRenderer.update(fixtureNode)
+
+    expect(find(testRenderer.root, 'h1').children).toEqual([`${value}`])
+  })
+
+  it('should call teardown logic after unmount', () => {
+    const spy = Sinon.spy()
+    function Fixture() {
+      const value = useObservable(
+        () =>
+          new Observable((observer: Observer<number>) => {
+            const timerId = setTimeout(() => {
+              observer.next(1)
+              observer.complete()
+            }, 1000)
+            return () => {
+              spy()
+              clearTimeout(timerId)
+            }
+          }),
+      )
+      return <h1>{value}</h1>
+    }
+    const fixtureNode = <Fixture />
+
+    const testRenderer = create(fixtureNode)
+    expect(spy.callCount).toBe(0)
+    testRenderer.unmount()
+    expect(spy.callCount).toBe(1)
+  })
+
+  it('should emit changed props in observableFactory', () => {
+    const spy = Sinon.spy()
+    function Fixture(props: { foo: number; bar: string; baz: any }) {
+      const value = useObservable((props$: Observable<[number, any]>) => props$.pipe(tap(spy)), null, [
+        props.foo,
+        props.baz,
+      ] as any)
+      return (
+        <>
+          <h1>{value && value[0]}</h1>
+          <div>{value && value[1].foo}</div>
+        </>
+      )
+    }
+
+    const props = {
+      foo: 1,
+      bar: 'bar',
+      baz: {
+        foo: 1,
+      },
+    }
+
+    const testRenderer = create(<Fixture {...props} />)
+    expect(spy.callCount).toBe(0)
+    expect(find(testRenderer.root, 'h1').children).toEqual([])
+    expect(find(testRenderer.root, 'div').children).toEqual([])
+    const newProps = { ...props, bar: 'new bar' }
+    testRenderer.update(<Fixture {...newProps} />)
+    expect(spy.callCount).toBe(1)
+    expect(spy.args[0]).toEqual([[newProps.foo, newProps.baz]])
+    expect(find(testRenderer.root, 'h1').children).toEqual([`${newProps.foo}`])
+    expect(find(testRenderer.root, 'div').children).toEqual([`${newProps.baz.foo}`])
+
+    const renewProps = { ...props, foo: 1000 }
+    testRenderer.update(<Fixture {...renewProps} />)
+
+    expect(spy.callCount).toBe(2)
+    expect(spy.args[1]).toEqual([[renewProps.foo, renewProps.baz]])
+    expect(find(testRenderer.root, 'h1').children).toEqual([`${renewProps.foo}`])
+    expect(find(testRenderer.root, 'div').children).toEqual([`${renewProps.baz.foo}`])
+  })
+})

src/use-event-callback.ts

@@ -17,7 +17,9 @@ export function useEventCallback<T, U = void>(
   useEffect(
     () => {
       const event$ = new Subject<SyntheticEvent<T>>()
-      const clickCallback = (e: SyntheticEvent<T>) => event$.next(e)
+      function clickCallback(e: SyntheticEvent<T>) {
+        return event$.next(e)
+      }
       setState([clickCallback, initialValue])
       const value$ = callback(event$)
       const subscription = value$.subscribe((value) => {

tools/test-setup.js

@@ -0,0 +1,3 @@
+process.on('unhandledRejection', (reason) => {
+  console.error(reason)
+})

webpack.config.js renamed to tools/webpack.config.js

@@ -45,8 +45,6 @@ module.exports = {
   plugins: [
     new webpack.NamedModulesPlugin(),
 
-    new webpack.HotModuleReplacementPlugin(),
-
     new HappyPack({
       id: 'sourcemap',
       loaders: ['source-map-loader'],

tsconfig.json

@@ -15,6 +15,7 @@
     "suppressExcessPropertyErrors": true,
     "forceConsistentCasingInFileNames": true,
     "skipLibCheck": true,
-    "declaration": true
+    "declaration": true,
+    "esModuleInterop": true
   }
 }