diff --git a/README.md b/README.md index 6ce2bb0..399c319 100755 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # React Governor -_That typical "HOOKS ARE STILL ALPHA" warning_ +![Build Status](https://travis-ci.org/TechEmpower/react-governor.svg?branch=master) Use a governor hook to manage state with actions for, and created by, the people. @@ -29,6 +29,7 @@ const contract = { } export default function Counter() { + const [state, actions] = useGovernor(initialState, contract); return ( diff --git a/package.json b/package.json index cbcf457..ba6b4dc 100644 --- a/package.json +++ b/package.json @@ -29,8 +29,8 @@ "Nate Brady " ], "peerDependencies": { - "react": "16.8.0-alpha.1", - "react-dom": "16.8.0-alpha.1" + "react": "^16.8.0", + "react-dom": "^16.8.0" }, "dependencies": {}, "devDependencies": { @@ -56,9 +56,9 @@ "jest-pnp-resolver": "1.0.1", "jest-resolve": "23.6.0", "pretty-bytes": "^5.1.0", - "react": "16.8.0-alpha.1", - "react-dom": "16.8.0-alpha.1", - "react-test-renderer": "16.8.0-alpha.1", + "react": "16.9.0-alpha.0", + "react-dom": "16.9.0-alpha.0", + "react-test-renderer": "16.9.0-alpha.0", "rollup": "^1.1.2", "rollup-plugin-babel": "^4.3.2", "rollup-plugin-commonjs": "^9.2.0", @@ -111,12 +111,14 @@ ] }, "babel": { - "presets": [[ - "react-app", - { - "helpers": false, - "absoluteRuntime": false - } - ]] + "presets": [ + [ + "react-app", + { + "helpers": false, + "absoluteRuntime": false + } + ] + ] } } diff --git a/src/tests/counter-provider/CounterProvider.spec.js b/src/tests/counter-provider/CounterProvider.spec.js index 050056b..8391288 100755 --- a/src/tests/counter-provider/CounterProvider.spec.js +++ b/src/tests/counter-provider/CounterProvider.spec.js @@ -1,5 +1,6 @@ import React from "react"; import ReactDOM from "react-dom"; +import { act } from "react-dom/test-utils"; import TestRenderer from "react-test-renderer"; import CounterProvider from "../../examples/counter-provider/CounterProvider"; @@ -57,18 +58,20 @@ it("shares state among sibling context consumers", async () => { .findByType(CounterChildTwo) .findByProps({ className: "dec" }); - expect(val.props.value).toBe(0); - expect(val2.props.value).toBe(0); + await act(async () => { + expect(val.props.value).toBe(0); + expect(val2.props.value).toBe(0); - await buttonOneInc.props.onClick(); + await buttonOneInc.props.onClick(); - expect(val.props.value).toBe(1); - expect(val2.props.value).toBe(1); + expect(val.props.value).toBe(1); + expect(val2.props.value).toBe(1); - await buttonTwoDec.props.onClick(); + await buttonTwoDec.props.onClick(); - expect(val.props.value).toBe(0); - expect(val2.props.value).toBe(0); + expect(val.props.value).toBe(0); + expect(val2.props.value).toBe(0); + }); }); it("shares state among sibling and children context consumers", async () => { @@ -105,25 +108,27 @@ it("shares state among sibling and children context consumers", async () => { .findByType(CounterGrandchild) .findByProps({ className: "inc" }); - expect(val.props.value).toBe(0); - expect(val2.props.value).toBe(0); - expect(gval.props.value).toBe(0); + await act(async () => { + expect(val.props.value).toBe(0); + expect(val2.props.value).toBe(0); + expect(gval.props.value).toBe(0); - await buttonOneInc.props.onClick(); + await buttonOneInc.props.onClick(); - expect(val.props.value).toBe(1); - expect(val2.props.value).toBe(1); - expect(gval.props.value).toBe(1); + expect(val.props.value).toBe(1); + expect(val2.props.value).toBe(1); + expect(gval.props.value).toBe(1); - await buttonTwoDec.props.onClick(); + await buttonTwoDec.props.onClick(); - expect(val.props.value).toBe(0); - expect(val2.props.value).toBe(0); - expect(gval.props.value).toBe(0); + expect(val.props.value).toBe(0); + expect(val2.props.value).toBe(0); + expect(gval.props.value).toBe(0); - await gbutton.props.onClick(); + await gbutton.props.onClick(); - expect(val.props.value).toBe(1); - expect(val2.props.value).toBe(1); - expect(gval.props.value).toBe(1); + expect(val.props.value).toBe(1); + expect(val2.props.value).toBe(1); + expect(gval.props.value).toBe(1); + }); }); diff --git a/src/tests/counter/Counter.spec.js b/src/tests/counter/Counter.spec.js index dc05e34..60cfbd7 100755 --- a/src/tests/counter/Counter.spec.js +++ b/src/tests/counter/Counter.spec.js @@ -1,5 +1,6 @@ import React from "react"; import ReactDOM from "react-dom"; +import { act } from "react-dom/test-utils"; import TestRenderer from "react-test-renderer"; import Counter from "../../examples/counter/Counter"; @@ -10,58 +11,64 @@ it("renders without crashing", () => { }); it("starts with initial state", () => { - const counter = TestRenderer.create(); - const val = counter.root.findByProps({ className: "val" }); + const counter = TestRenderer.create(); + const val = counter.root.findByProps({className: "val"}); expect(val.props.value).toBe(0); }); it("can increment", async () => { - const counter = TestRenderer.create(); - const val = counter.root.findByProps({ className: "val" }); - const button = counter.root.findByProps({ className: "inc" }); + const counter = TestRenderer.create(); + const val = counter.root.findByProps({className: "val"}); + const button = counter.root.findByProps({className: "inc"}); - expect(val.props.value).toBe(0); + await act(async () => { + expect(val.props.value).toBe(0); - await button.props.onClick(); + await button.props.onClick(); - expect(val.props.value).toBe(1); + expect(val.props.value).toBe(1); - await button.props.onClick(); + await button.props.onClick(); - expect(val.props.value).toBe(2); + expect(val.props.value).toBe(2); + }); }); it("can decrement", async () => { - const counter = TestRenderer.create(); - const val = counter.root.findByProps({ className: "val" }); - const button = counter.root.findByProps({ className: "dec" }); + const counter = TestRenderer.create(); + const val = counter.root.findByProps({className: "val"}); + const button = counter.root.findByProps({className: "dec"}); - expect(val.props.value).toBe(0); + await act(async () => { + expect(val.props.value).toBe(0); - await button.props.onClick(); + await button.props.onClick(); - expect(val.props.value).toBe(-1); + expect(val.props.value).toBe(-1); - await button.props.onClick(); + await button.props.onClick(); - expect(val.props.value).toBe(-2); + expect(val.props.value).toBe(-2); + }); }); it("can add5", async () => { - const counter = TestRenderer.create(); - const val = counter.root.findByProps({ className: "val" }); - const button = counter.root.findByProps({ className: "add5" }); + const counter = TestRenderer.create(); + const val = counter.root.findByProps({className: "val"}); + const button = counter.root.findByProps({className: "add5"}); - expect(val.props.value).toBe(0); + await act(async () => { + expect(val.props.value).toBe(0); - await button.props.onClick(); + await button.props.onClick(); - expect(val.props.value).toBe(5); + expect(val.props.value).toBe(5); - await button.props.onClick(); + await button.props.onClick(); - expect(val.props.value).toBe(10); + expect(val.props.value).toBe(10); + }); }); it("can set", async () => { @@ -69,15 +76,17 @@ it("can set", async () => { const val = counter.root.findByProps({ className: "val" }); const button = counter.root.findByProps({ className: "set" }); - expect(val.props.value).toBe(0); + await act(async () => { + expect(val.props.value).toBe(0); - await button.props.onClick(); + await button.props.onClick(); - expect(val.props.value).toBe(137); + expect(val.props.value).toBe(137); - await button.props.onClick(); + await button.props.onClick(); - expect(val.props.value).toBe(137); + expect(val.props.value).toBe(137); + }); }); it("can addSum", async () => { @@ -85,15 +94,17 @@ it("can addSum", async () => { const val = counter.root.findByProps({ className: "val" }); const button = counter.root.findByProps({ className: "addSum" }); - expect(val.props.value).toBe(0); + await act(async () => { + expect(val.props.value).toBe(0); - await button.props.onClick(); + await button.props.onClick(); - expect(val.props.value).toBe(7); + expect(val.props.value).toBe(7); - await button.props.onClick(); + await button.props.onClick(); - expect(val.props.value).toBe(14); + expect(val.props.value).toBe(14); + }); }); it("can addNewState", async () => { @@ -102,12 +113,14 @@ it("can addNewState", async () => { const newState = counter.root.findByProps({ className: "newState" }); const button = counter.root.findByProps({ className: "addNewState" }); - expect(newState.props.value).toBe(undefined); + await act(async () => { + expect(newState.props.value).toBe(undefined); - await button.props.onClick(); + await button.props.onClick(); - expect(newState.props.value).toBe("Hello"); - expect(val.props.value).toBe(0); + expect(newState.props.value).toBe("Hello"); + expect(val.props.value).toBe(0); + }); }); it("can removeState", async () => { @@ -117,16 +130,18 @@ it("can removeState", async () => { const button = counter.root.findByProps({ className: "addNewState" }); const removeButton = counter.root.findByProps({ className: "removeState" }); - expect(newState.props.value).toBe(undefined); + await act(async() => { + expect(newState.props.value).toBe(undefined); - await button.props.onClick(); + await button.props.onClick(); - expect(newState.props.value).toBe("Hello"); - expect(val.props.value).toBe(0); + expect(newState.props.value).toBe("Hello"); + expect(val.props.value).toBe(0); - await removeButton.props.onClick(); + await removeButton.props.onClick(); - expect(val.props.value).toBe(undefined); + expect(val.props.value).toBe(undefined); + }); }); it("can asyncFunc", async () => { @@ -134,11 +149,13 @@ it("can asyncFunc", async () => { const val = counter.root.findByProps({ className: "val" }); const button = counter.root.findByProps({ className: "asyncFunc" }); - expect(val.props.value).toBe(0); + await act(async () => { + expect(val.props.value).toBe(0); - await button.props.onClick(); + await button.props.onClick(); - expect(val.props.value).toBe(256); + expect(val.props.value).toBe(256); + }); }); it("can fetchGoogle", async () => { @@ -146,9 +163,11 @@ it("can fetchGoogle", async () => { const val = counter.root.findByProps({ className: "googleStatus" }); const button = counter.root.findByProps({ className: "fetchGoogle" }); - expect(val.props.value).toBe(undefined); + await act(async () => { + expect(val.props.value).toBe(undefined); - await button.props.onClick(); + await button.props.onClick(); - expect(val.props.value).toBe(200); + expect(val.props.value).toBe(200); + }); }); diff --git a/src/tests/simple-counter/SimpleCounter.spec.js b/src/tests/simple-counter/SimpleCounter.spec.js index 60bf6ea..9ab578a 100755 --- a/src/tests/simple-counter/SimpleCounter.spec.js +++ b/src/tests/simple-counter/SimpleCounter.spec.js @@ -1,5 +1,6 @@ import React from "react"; import ReactDOM from "react-dom"; +import { act } from "react-dom/test-utils"; import TestRenderer from "react-test-renderer"; import SimpleCounter from "../../examples/simple-counter/SimpleCounter"; @@ -21,15 +22,17 @@ it("can increment", async () => { const val = counter.root.findByProps({ className: "val" }); const button = counter.root.findByProps({ className: "inc" }); - expect(val.props.value).toBe(0); + await act(async() => { + expect(val.props.value).toBe(0); - await button.props.onClick(); + await button.props.onClick(); - expect(val.props.value).toBe(1); + expect(val.props.value).toBe(1); - await button.props.onClick(); + await button.props.onClick(); - expect(val.props.value).toBe(2); + expect(val.props.value).toBe(2); + }); }); it("can decrement", async () => { @@ -37,15 +40,17 @@ it("can decrement", async () => { const val = counter.root.findByProps({ className: "val" }); const button = counter.root.findByProps({ className: "dec" }); - expect(val.props.value).toBe(0); + await act(async() => { + expect(val.props.value).toBe(0); - await button.props.onClick(); + await button.props.onClick(); - expect(val.props.value).toBe(-1); + expect(val.props.value).toBe(-1); - await button.props.onClick(); + await button.props.onClick(); - expect(val.props.value).toBe(-2); + expect(val.props.value).toBe(-2); + }); }); it("can add5", async () => { @@ -53,15 +58,17 @@ it("can add5", async () => { const val = counter.root.findByProps({ className: "val" }); const button = counter.root.findByProps({ className: "add5" }); - expect(val.props.value).toBe(0); + await act(async() => { + expect(val.props.value).toBe(0); - await button.props.onClick(); + await button.props.onClick(); - expect(val.props.value).toBe(5); + expect(val.props.value).toBe(5); - await button.props.onClick(); + await button.props.onClick(); - expect(val.props.value).toBe(10); + expect(val.props.value).toBe(10); + }); }); it("can sub2", async () => { @@ -69,13 +76,15 @@ it("can sub2", async () => { const val = counter.root.findByProps({ className: "val" }); const button = counter.root.findByProps({ className: "sub2" }); - expect(val.props.value).toBe(0); + await act(async() => { + expect(val.props.value).toBe(0); - await button.props.onClick(); + await button.props.onClick(); - expect(val.props.value).toBe(-2); + expect(val.props.value).toBe(-2); - await button.props.onClick(); + await button.props.onClick(); - expect(val.props.value).toBe(-4); + expect(val.props.value).toBe(-4); + }); });