Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hooks stable #10

Merged
merged 8 commits into from Apr 4, 2019
Merged

Hooks stable #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ea8b077
Update to the one with hooks
NateBrady23 Feb 7, 2019
3ecc8f1
readme nit
NateBrady23 Feb 7, 2019
15a3b67
Remove alpha warning
NateBrady23 Feb 7, 2019
988e3f6
Fix test warnings: update tests with act()
NateBrady23 Apr 4, 2019
60ead63
Merge branch 'master' into hooks-stable
NateBrady23 Apr 4, 2019
ea7b263
Add build status badge and fix additional tests
NateBrady23 Apr 4, 2019
7460e91
jk about that Build Status badge
NateBrady23 Apr 4, 2019
fd3a31f
jk about the jk about the Build Status badge
NateBrady23 Apr 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
@@ -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.

Expand Down Expand Up @@ -29,6 +29,7 @@ const contract = {
}

export default function Counter() {

const [state, actions] = useGovernor(initialState, contract);

return (
Expand Down
26 changes: 14 additions & 12 deletions package.json
View file
Open in desktop
Expand Up @@ -29,8 +29,8 @@
"Nate Brady <nbrady@techempower.com>"
],
"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": {
Expand All @@ -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",
Expand Down Expand Up @@ -111,12 +111,14 @@
]
},
"babel": {
"presets": [[
"react-app",
{
"helpers": false,
"absoluteRuntime": false
}
]]
"presets": [
[
"react-app",
{
"helpers": false,
"absoluteRuntime": false
}
]
]
}
}
51 changes: 28 additions & 23 deletions src/tests/counter-provider/CounterProvider.spec.js
View file
Open in desktop
@@ -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";
Expand Down Expand Up @@ -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 () => {
Expand Down Expand Up @@ -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);
});
});
123 changes: 71 additions & 52 deletions src/tests/counter/Counter.spec.js
View file
Open in desktop
@@ -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";
Expand All @@ -10,90 +11,100 @@ it("renders without crashing", () => {
});

it("starts with initial state", () => {
const counter = TestRenderer.create(<Counter />);
const val = counter.root.findByProps({ className: "val" });
const counter = TestRenderer.create(<Counter/>);
const val = counter.root.findByProps({className: "val"});

expect(val.props.value).toBe(0);
});

it("can increment", async () => {
const counter = TestRenderer.create(<Counter />);
const val = counter.root.findByProps({ className: "val" });
const button = counter.root.findByProps({ className: "inc" });
const counter = TestRenderer.create(<Counter/>);
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(<Counter />);
const val = counter.root.findByProps({ className: "val" });
const button = counter.root.findByProps({ className: "dec" });
const counter = TestRenderer.create(<Counter/>);
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(<Counter />);
const val = counter.root.findByProps({ className: "val" });
const button = counter.root.findByProps({ className: "add5" });
const counter = TestRenderer.create(<Counter/>);
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 () => {
const counter = TestRenderer.create(<Counter />);
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 () => {
const counter = TestRenderer.create(<Counter />);
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 () => {
Expand All @@ -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 () => {
Expand All @@ -117,38 +130,44 @@ 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 () => {
const counter = TestRenderer.create(<Counter />);
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 () => {
const counter = TestRenderer.create(<Counter />);
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);
});
});