Skip to content

Commit

Permalink
Merge pull request #42 from rjz/fix/react-16
Browse files Browse the repository at this point in the history
Updates dependencies
  • Loading branch information
rjz committed Mar 21, 2019
2 parents 161b6fe + ee07be5 commit 5d17a6c
Show file tree
Hide file tree
Showing 9 changed files with 147 additions and 117 deletions.
69 changes: 35 additions & 34 deletions package.json
Expand Up @@ -9,7 +9,7 @@
},
"scripts": {
"start": "http-server -c-1",
"build": "npm run test && webpack",
"build": "npm test && webpack",
"watch": "webpack --watch",
"lint": "tslint -c tslint.json 'src/**/*.{ts,tsx}'",
"pretest": "npm run lint",
Expand All @@ -18,42 +18,43 @@
"author": "RJ Zaworski <rj@rjzaworski.com> (http://rjzaworski.com)",
"license": "ISC",
"dependencies": {
"react": "^16.4.0",
"react-redux": "^5.0.7",
"redux": "^3.7.2",
"typescript-formatter": "^7.2.2"
"react": "^16.8.4",
"react-redux": "^6.0.1",
"redux": "^4.0.1"
},
"devDependencies": {
"@types/jest": "^22.2.3",
"@babel/core": "^7.4.0",
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.3.3",
"@types/jest": "^24.0.11",
"@types/minimist": "^1.2.0",
"@types/node": "^9.6.22",
"@types/react": "^16.3.18",
"@types/react-addons-test-utils": "^0.14.21",
"@types/react-dom": "^16.0.6",
"@types/react-redux": "^5.0.20",
"@types/node": "^11.11.4",
"@types/react": "^16.8.8",
"@types/react-addons-test-utils": "^0.14.24",
"@types/react-dom": "^16.8.2",
"@types/react-redux": "^7.0.5",
"@types/react-test-renderer": "^16.8.1",
"@types/semver": "^5.5.0",
"@types/sinon": "^4.3.3",
"babel-core": "6.26.0",
"babel-loader": "7.1.2",
"babel-polyfill": "6.26.0",
"babel-preset-es2015": "6.24.1",
"coveralls": "3.0.0",
"http-server": "0.10.0",
"jest": "^22.4.4",
"jest-cli": "^22.4.4",
"raf": "3.4.0",
"react-addons-test-utils": "15.6.2",
"react-dom": "16.0.0",
"react-test-renderer": "16.0.0",
"sinon": "4.0.1",
"source-map-loader": "0.2.2",
"ts-jest": "^22.4.6",
"ts-loader": "^4.4.1",
"tslint": "^5.10.0",
"typescript": "^2.9.2",
"webpack": "^4.12.0",
"webpack-cli": "^2.1.5",
"zakalwe": "1.0.3"
"@types/sinon": "^7.0.10",
"babel-loader": "^8.0.5",
"coveralls": "^3.0.3",
"http-server": "^0.11.1",
"jest": "^24.5.0",
"jest-cli": "^24.5.0",
"raf": "^3.4.1",
"react-addons-test-utils": "^15.6.2",
"react-dom": "^16.8.4",
"react-test-renderer": "^16.8.4",
"sinon": "^7.3.0",
"source-map-loader": "^0.2.4",
"ts-jest": "^24.0.0",
"ts-loader": "^5.3.3",
"tslint": "^5.14.0",
"typescript": "^3.3.4000",
"typescript-formatter": "^7.2.2",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"zakalwe": "^1.0.10"
},
"jest": {
"moduleFileExtensions": [
Expand All @@ -65,7 +66,7 @@
"raf/polyfill"
],
"transform": {
"\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
"\\.(ts|tsx)$": "ts-jest"
},
"testRegex": "/__tests__/.*\\.(ts|tsx|js)$"
}
Expand Down
15 changes: 8 additions & 7 deletions src/actions/__tests__/index_spec.ts
Expand Up @@ -2,6 +2,7 @@ jest.mock('../../api')

import { createStore } from 'redux'
import * as apiExports from '../../api'
import { Action } from '../action'
import * as actions from '../index'

const api: jest.Mocked<apiExports.Api> = apiExports.api as any
Expand All @@ -14,7 +15,7 @@ describe('actions', () => {
return { dispatch, reducer }
}

const eventually = (assertFn) =>
const eventually = (assertFn: () => void) =>
new Promise((resolve, reject) => {
setTimeout(() => {
try {
Expand All @@ -26,7 +27,7 @@ describe('actions', () => {
}, 1)
})

const expectTypes = (reducer, types) =>
const expectTypes = (reducer: jest.Mock, types: Action['type'][]) =>
() =>
expect(reducer.mock.calls.map(x => x[1].type)).toEqual(types)

Expand Down Expand Up @@ -90,14 +91,14 @@ describe('actions', () => {
})

it('sends an API request', () => {
actions.loadCount()(jest.fn())
actions.loadCount({})(jest.fn())
expect(api.load.mock.calls.length).toEqual(1)
})

describe('when API request succeeds', () => {
it('dispatches LOAD_COUNT_SUCCESS', () => {
const { dispatch, reducer } = store()
actions.loadCount()(dispatch)
actions.loadCount({})(dispatch)
return eventually(expectTypes(reducer, [
'LOAD_COUNT_REQUEST',
'LOAD_COUNT_SUCCESS',
Expand All @@ -106,7 +107,7 @@ describe('actions', () => {

it('includes new value with LOAD_COUNT_SUCCESS', () => {
const { dispatch, reducer } = store()
actions.loadCount()(dispatch)
actions.loadCount({})(dispatch)
return eventually(() => {
expect(reducer.mock.calls[1][1].response).toEqual({ value: 14 })
})
Expand All @@ -120,7 +121,7 @@ describe('actions', () => {

it('dispatches LOAD_COUNT_ERROR', () => {
const { dispatch, reducer } = store()
actions.loadCount()(dispatch)
actions.loadCount({})(dispatch)
return eventually(expectTypes(reducer, [
'LOAD_COUNT_REQUEST',
'LOAD_COUNT_ERROR',
Expand All @@ -129,7 +130,7 @@ describe('actions', () => {

it('includes error message with LOAD_COUNT_ERROR', () => {
const { dispatch, reducer } = store()
actions.loadCount()(dispatch)
actions.loadCount({})(dispatch)
return eventually(() => {
expect(reducer.mock.calls[1][1].error)
.toEqual('something terrible happened')
Expand Down
77 changes: 37 additions & 40 deletions src/components/__tests__/__snapshots__/counter_spec.tsx.snap
@@ -1,44 +1,41 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`components/Counter renders 1`] = `
<Loadable(PureCounter)
counter={
Object {
"value": 0,
}
}
error=""
increment={[Function]}
isLoading={false}
isSaving={false}
label="a counter!"
load={[Function]}
save={[Function]}
store={
Object {
"dispatch": [Function],
"getState": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
Symbol(observable): [Function],
}
}
storeSubscription={
Subscription {
"listeners": Object {
"notify": [Function],
},
"onStateChange": [Function],
"parentSub": undefined,
"store": Object {
"dispatch": [Function],
"getState": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
Symbol(observable): [Function],
},
"unsubscribe": null,
}
}
/>
<div>
<div
className="hero"
>
<strong>
0
</strong>
</div>
<form>
<button
onClick={[Function]}
>
click me!
</button>
<button
disabled={false}
onClick={[Function]}
>
save
</button>
<button
disabled={false}
onClick={[Function]}
>
load
</button>
<pre>
{
"counter": {
"value": 0
},
"isSaving": false,
"isLoading": false
}
</pre>
</form>
</div>
`;
52 changes: 35 additions & 17 deletions src/components/__tests__/counter_spec.tsx
@@ -1,9 +1,11 @@
// tslint:disable-next-line no-unused-variable
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import * as TestUtils from 'react-dom/test-utils'
import * as ReactShallowRenderer from 'react-test-renderer/shallow'
import * as TestRenderer from 'react-test-renderer'

import { createStore } from 'redux'
import { Provider } from 'react-redux'

import { Counter } from '../counter'
import reducers from '../../reducers'
Expand All @@ -12,27 +14,43 @@ describe('components/Counter', () => {

it('renders', () => {
const store = createStore(reducers)
const renderer = new ReactShallowRenderer()
expect(renderer.render(
<Counter label='a counter!' store={store} />
)).toMatchSnapshot()
const renderer = TestRenderer.create(
<Provider store={store}>
<Counter />
</Provider>
)
expect(renderer.toJSON()).toMatchSnapshot()
})

describe('clicking "increment"', () => {
let container: Element
beforeEach(() => {
container = document.createElement('div')
document.body.appendChild(container)
})

afterEach(() => {
document.body.removeChild(container)
container = null
})

it('increments counter', () => {
const store = createStore(reducers)
const counter = TestUtils.renderIntoDocument(
<Counter label='a counter!' store={store} />
)
const [
increment,
] = TestUtils.scryRenderedDOMComponentsWithTag(counter, 'button')
TestUtils.Simulate.click(increment)
TestUtils.Simulate.click(increment)
TestUtils.Simulate.click(increment)

const pre = TestUtils.findRenderedDOMComponentWithTag(counter, 'pre')
expect(JSON.parse(pre.textContent).counter.value).toEqual(3)
TestUtils.act(() => {
ReactDOM.render(
<Provider store={store}>
<Counter />
</Provider>
, container)
})

const button = container.querySelector('button')
TestUtils.act(() => {
TestUtils.Simulate.click(button)
})

const pre = container.querySelector('pre')
expect(JSON.parse(pre.textContent).counter.value).toEqual(1)
})
})
})
5 changes: 3 additions & 2 deletions src/components/counter.tsx
Expand Up @@ -9,6 +9,7 @@ import {
} from '../actions'

import { compose } from '../utils'
import { Action } from '../actions'
import * as state from '../reducers'

import loadable from '../decorators/loadable'
Expand Down Expand Up @@ -39,7 +40,7 @@ const mapStateToProps = (state: state.All, ownProps: OwnProps): ConnectedState =
error: state.error,
})

const mapDispatchToProps = (dispatch: redux.Dispatch<state.All>): ConnectedDispatch => ({
const mapDispatchToProps = (dispatch: redux.Dispatch<Action>): ConnectedDispatch => ({
increment: (n: number) =>
dispatch(incrementCounter(n)),
load: () =>
Expand All @@ -48,7 +49,7 @@ const mapDispatchToProps = (dispatch: redux.Dispatch<state.All>): ConnectedDispa
saveCount({ value })(dispatch),
})

class PureCounter extends React.Component<ConnectedState & ConnectedDispatch & OwnProps, {}> {
export class PureCounter extends React.Component<ConnectedState & ConnectedDispatch & OwnProps, {}> {

_onClickIncrement = (e: React.SyntheticEvent<HTMLButtonElement>) => {
e.preventDefault()
Expand Down
12 changes: 11 additions & 1 deletion src/decorators/__tests__/__snapshots__/loadable_spec.tsx.snap
@@ -1,3 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`decorators/loadable maps props to loading 1`] = `<TestComponent />`;
exports[`decorators/loadable handles loaded state 1`] = `
<div>
OK
</div>
`;

exports[`decorators/loadable handles loading state 1`] = `
<div>
Just a moment, please...
</div>
`;
24 changes: 13 additions & 11 deletions src/decorators/__tests__/loadable_spec.tsx
@@ -1,26 +1,28 @@
// tslint:disable-next-line no-unused-variable
import * as React from 'react'
import * as TestUtils from 'react-dom/test-utils'
import * as ReactShallowRenderer from 'react-test-renderer/shallow'
import * as TestRenderer from 'react-test-renderer'

import loadable from '../loadable'

const TestComponent = () => <div>OK</div>
const LoadableTestComponent = loadable(props => props.isLoading)(TestComponent)

describe('decorators/loadable', () => {
describe.only('decorators/loadable', () => {

it('sets friendly .displayName', () => {
expect(LoadableTestComponent.displayName)
const LoadedTestComponent = loadable(() => false)(TestComponent)
expect(LoadedTestComponent.displayName)
.toEqual('Loadable(TestComponent)')
})

it('maps props to loading', () => {
const renderer = new ReactShallowRenderer()
expect(renderer.render(<LoadableTestComponent isLoading />).props.children)
.toEqual('Just a moment, please...')
it('handles loading state', () => {
const LoadingTestComponent = loadable(() => true)(TestComponent)
const renderer = TestRenderer.create(<LoadingTestComponent />)
expect(renderer.toJSON()).toMatchSnapshot()
})

expect(renderer.render(<LoadableTestComponent />))
.toMatchSnapshot()
it('handles loaded state', () => {
const LoadedTestComponent = loadable(() => false)(TestComponent)
const renderer = TestRenderer.create(<LoadedTestComponent />)
expect(renderer.toJSON()).toMatchSnapshot()
})
})

0 comments on commit 5d17a6c

Please sign in to comment.