From ea8b077983bcc0e143409108057f564aad574d82 Mon Sep 17 00:00:00 2001 From: Nate Brady Date: Wed, 6 Feb 2019 16:27:33 -0800 Subject: [PATCH 1/7] Update to the one with hooks --- package.json | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index cbcf457..b413bb3 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.8.1", + "react-dom": "16.8.1", + "react-test-renderer": "16.8.1", "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 + } + ] + ] } } From 3ecc8f15a6730400c167d596e9d37a058eeecc30 Mon Sep 17 00:00:00 2001 From: Nate Brady Date: Wed, 6 Feb 2019 16:29:48 -0800 Subject: [PATCH 2/7] readme nit --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 2040942..aef295a 100755 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ build the boilerplate of `actions`, `dispatch`, and `reducer`. ```JavaScript const initialState = { count: 1 }; -const count_actions = { +const countActions = { increment(state) { return { count: state.count + 1 @@ -29,7 +29,7 @@ const count_actions = { } export default function Counter() { - const [state, actions] = useGovernor(initialState, count_actions); + const [state, actions] = useGovernor(initialState, countActions); return (
From 15a3b67e60fb92337601586ed0ff4be7ea0a1940 Mon Sep 17 00:00:00 2001 From: Nate Brady Date: Wed, 6 Feb 2019 16:30:35 -0800 Subject: [PATCH 3/7] Remove alpha warning --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index aef295a..6d7e4cd 100755 --- a/README.md +++ b/README.md @@ -1,7 +1,5 @@ # React Governor -_That typical "HOOKS ARE STILL ALPHA" warning_ - Use a governor hook to manage state with actions for, and created by, the people. ## What is `useGovernor`? From 988e3f6ee212852bca1289d818d44674275129c3 Mon Sep 17 00:00:00 2001 From: Nate Brady Date: Thu, 4 Apr 2019 13:50:04 -0700 Subject: [PATCH 4/7] Fix test warnings: update tests with act() --- package.json | 6 +- .../counter-provider/CounterProvider.spec.js | 51 ++++---- src/tests/counter/Counter.spec.js | 109 ++++++++++-------- 3 files changed, 94 insertions(+), 72 deletions(-) diff --git a/package.json b/package.json index b413bb3..ba6b4dc 100644 --- a/package.json +++ b/package.json @@ -56,9 +56,9 @@ "jest-pnp-resolver": "1.0.1", "jest-resolve": "23.6.0", "pretty-bytes": "^5.1.0", - "react": "16.8.1", - "react-dom": "16.8.1", - "react-test-renderer": "16.8.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", 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 dbf06bb..a06cd99 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 asyncFunc", async () => { @@ -115,11 +128,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 () => { @@ -127,9 +142,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); + }); }); From ea7b26348ed5cde48a9d92fb2a84790885aa5c88 Mon Sep 17 00:00:00 2001 From: Nate Brady Date: Thu, 4 Apr 2019 14:19:02 -0700 Subject: [PATCH 5/7] Add build status badge and fix additional tests --- README.md | 2 + src/tests/counter/Counter.spec.js | 14 +++--- .../simple-counter/SimpleCounter.spec.js | 49 +++++++++++-------- 3 files changed, 39 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index b071ff5..3b2c2c0 100755 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # React Governor +![Build Status](https://codebuild.us-west-1.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoiTjNsMDNUT0ZPZDBWSHg2SlQrSStZajRjTG1QRkpVUktpelJKSzU1NjloZHhoL3B4TnN4bmkxWGk1VW1WUnVTYWd0QjZYQUt3ZUJPd0s4djdGT1NHTTZRPSIsIml2UGFyYW1ldGVyU3BlYyI6ImpKOEF1ZWI0RFRhTzA2WUoiLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D&branch=master) + Use a governor hook to manage state with actions for, and created by, the people. ## What is `useGovernor`? diff --git a/src/tests/counter/Counter.spec.js b/src/tests/counter/Counter.spec.js index cc0fefd..60cfbd7 100755 --- a/src/tests/counter/Counter.spec.js +++ b/src/tests/counter/Counter.spec.js @@ -130,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 () => { 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); + }); }); From 7460e915bb136455652b6349b24bb8acc3094915 Mon Sep 17 00:00:00 2001 From: Nate Brady Date: Thu, 4 Apr 2019 14:23:36 -0700 Subject: [PATCH 6/7] jk about that Build Status badge --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index 3b2c2c0..b071ff5 100755 --- a/README.md +++ b/README.md @@ -1,7 +1,5 @@ # React Governor -![Build Status](https://codebuild.us-west-1.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoiTjNsMDNUT0ZPZDBWSHg2SlQrSStZajRjTG1QRkpVUktpelJKSzU1NjloZHhoL3B4TnN4bmkxWGk1VW1WUnVTYWd0QjZYQUt3ZUJPd0s4djdGT1NHTTZRPSIsIml2UGFyYW1ldGVyU3BlYyI6ImpKOEF1ZWI0RFRhTzA2WUoiLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D&branch=master) - Use a governor hook to manage state with actions for, and created by, the people. ## What is `useGovernor`? From fd3a31f1457f65fcdc4f7fefec7eb729c2e63570 Mon Sep 17 00:00:00 2001 From: Nate Brady Date: Thu, 4 Apr 2019 14:25:56 -0700 Subject: [PATCH 7/7] jk about the jk about the Build Status badge --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index b071ff5..399c319 100755 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # React Governor +![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. ## What is `useGovernor`?