ecki/modernjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Snapshot tests

Browse Source
This commit is contained in:
Federico Kereki
2018-08-10 21:29:29 -03:00
parent 18cc4c9b9e
commit 5aac89837c
18 changed files with 412 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
chapter09/package-lock.json
Generated
+24
View File
@@ -11536,6 +11536,12 @@
"integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=",
"dev": true
},
"prettier": {
"version": "1.14.2",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-1.14.2.tgz",
"integrity": "sha512-McHPg0n1pIke+A/4VcaS2en+pTNjy4xF+Uuq86u/5dyDO59/TtFZtQ708QIRkEZ3qwKz3GVkVa6mpxK/CpB8Rg==",
"dev": true
},
"pretty-bytes": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-4.0.2.tgz",
@@ -11920,6 +11926,12 @@
"integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw==",
"dev": true
},
"react-is": {
"version": "16.4.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.4.2.tgz",
"integrity": "sha512-rI3cGFj/obHbBz156PvErrS5xc6f1eWyTwyV4mo0vF2lGgXgS+mm7EKD5buLJq6jNgIagQescGSVG2YzgXt8Yg==",
"dev": true
},
"react-loadable": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/react-loadable/-/react-loadable-5.4.0.tgz",
@@ -12270,6 +12282,18 @@
}
}
},
"react-test-renderer": {
"version": "16.4.2",
"resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.4.2.tgz",
"integrity": "sha512-vdTPnRMDbxfv4wL4lzN4EkVGXyYs7LE2uImOsqh1FKiP6L5o1oJl8nore5sFi9vxrP9PK3l4rgb/fZ4PVUaWSA==",
"dev": true,
"requires": {
"fbjs": "^0.8.16",
"object-assign": "^4.1.1",
"prop-types": "^15.6.0",
"react-is": "^16.4.2"
}
},
"read-pkg": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
chapter09/package.json
+2
View File
@@ -15,10 +15,12 @@
"flow-bin": "^0.75.0",
"flow-coverage-report": "^0.5.0",
"flow-typed": "^2.4.0",
"prettier": "^1.14.2",
"react-app-rewire-eslint": "^0.2.3",
"react-app-rewired": "^1.5.2",
"react-devtools": "^3.2.3",
"react-scripts": "1.1.4",
"react-test-renderer": "^16.4.2",
"redux-devtools-extension": "^2.13.5"
},
"dependencies": {
chapter09/src/counterApp/__snapshots__/clicksDisplay.test.js.snap
+8
View File
@@ -0,0 +1,8 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`clicksDisplay renders correctly 1`] = `
<div>
Clicks so far:
22
</div>
`;
chapter09/src/counterApp/__snapshots__/counter.test.js.snap
+24
View File
@@ -0,0 +1,24 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`clicksDisplay renders correctly 1`] = `
<div>
Value:
9
<br />
<button
onClick={[Function]}
>
Add 1
</button>
<button
onClick={[Function]}
>
Subtract 2
</button>
<button
onClick={[Function]}
>
Reset
</button>
</div>
`;
chapter09/src/counterApp/clicksDisplay.test.js
+13
View File
@@ -0,0 +1,13 @@
import React from "react";
import TestRenderer from "react-test-renderer";
import { ClicksDisplay } from "./clicksDisplay.component";
describe("clicksDisplay", () => {
it("renders correctly", () => {
const tree = TestRenderer.create(
<ClicksDisplay clicks={22} />
).toJSON();
expect(tree).toMatchSnapshot();
});
});
chapter09/src/counterApp/counter.test.js
+13
View File
@@ -0,0 +1,13 @@
import React from "react";
import TestRenderer from "react-test-renderer";
import { Counter } from "./counter.component";
describe("clicksDisplay", () => {
it("renders correctly", () => {
const tree = TestRenderer.create(
<Counter count={9} dispatch={() => null} />
).toJSON();
expect(tree).toMatchSnapshot();
});
});
chapter09/src/index.js
+18
View File
@@ -4,5 +4,23 @@ import ReactDOM from "react-dom";
import App from "./App.routing.auth";
import registerServiceWorker from "./registerServiceWorker";
import { log } from "./logging";
log.error("myapp:SERVICE:LOGIN", `Attempt`, { user: "FK", pass: "who?" });
log.verbose("myapp:FORM:INITIAL", "Doing render");
log.info(
"myapp:SERVICE:ERROR_STORE",
"Reporting problem",
"Something wrong",
404
);
log.warn("myapp:SERVICE:LOGIN");
log.debug("myapp:SERVICE:INFO", "This won't be logged... low level");
log.info("myapp:SERVICE:GETDATE", "Success", {
day: 22,
month: 9,
year: 60
});
log.verbose("myapp:SERVICE:LOGIN", "Successful login");
ReactDOM.render(<App />, document.getElementById("root"));
registerServiceWorker();
chapter09/src/index.with.logging.js
-25
View File
@@ -1,25 +0,0 @@
import React from "react";
import ReactDOM from "react-dom";
import App from "./App.routing.auth";
import registerServiceWorker from "./registerServiceWorker";
import { log } from "./logging";
log.error("myapp:SERVICE:LOGIN", `Attempt`, { user: "FK", pass: "who?" });
log.verbose("myapp:FORM:INITIAL", "Doing render");
log.info(
"myapp:SERVICE:ERROR_STORE",
"Reporting problem",
"Something wrong",
404
);
log.warn("myapp:SERVICE:LOGIN");
log.info("myapp:SERVICE:GETDATE", "Success", {
day: 22,
month: 9,
year: 60
});
log.verbose("myapp:SERVICE:LOGIN", "Successful login");
ReactDOM.render(<App />, document.getElementById("root"));
registerServiceWorker();
chapter09/src/index.without.logging.js
+8
View File
@@ -0,0 +1,8 @@
import React from "react";
import ReactDOM from "react-dom";
import App from "./App.routing.auth";
import registerServiceWorker from "./registerServiceWorker";
ReactDOM.render(<App />, document.getElementById("root"));
registerServiceWorker();
chapter09/src/logging/index.js
+38 -45
View File
@@ -3,60 +3,53 @@
import debug from "debug";
const WHAT_TO_LOG = "myapp:SERVICE:*"; // change this to suit your needs
const MIN_LEVEL_TO_LOG = "info"; // error, warn, info, verbose, or debug
let log;
const log = {
error() {},
warn() {},
info() {},
verbose() {},
debug() {}
};
const logMessage = (
color: string,
topic: string,
message: any = "--",
...rest: any
) => {
const logger = debug(topic);
logger.color = color;
logger(message, ...rest);
};
if (process.env.NODE_ENV === "development") {
localStorage.setItem("debug", WHAT_TO_LOG);
const ERROR_COLOR = "red";
const WARN_COLOR = "brown";
const INFO_COLOR = "blue";
const VERBOSE_COLOR = "green";
const DEBUG_COLOR = "gray";
/* eslint-disable no-fallthrough */
switch (MIN_LEVEL_TO_LOG) {
case "debug":
log.debug = (topic: string, ...args: any) =>
logMessage("gray", topic, ...args);
// CHANGE TO: COLOR, TOPIC, MESSAGE, ...EXTRA)
case "verbose":
log.verbose = (topic: string, ...args: any) =>
logMessage("green", topic, ...args);
log = {
logMessage(
color: string,
topic: string,
message: any = "--",
...rest: any
) {
const logger = debug(topic);
logger.color = color;
logger(message, ...rest);
},
case "info":
log.info = (topic: string, ...args: any) =>
logMessage("blue", topic, ...args);
error(topic: string, ...args: any) {
this.logMessage(ERROR_COLOR, topic, ...args);
},
case "warn":
log.warn = (topic: string, ...args: any) =>
logMessage("brown", topic, ...args);
warn(topic: string, ...args: any) {
this.logMessage(WARN_COLOR, topic, ...args);
},
info(topic: string, ...args: any) {
this.logMessage(INFO_COLOR, topic, ...args);
},
verbose(topic: string, ...args: any) {
this.logMessage(VERBOSE_COLOR, topic, ...args);
},
debug(topic: string, ...args: any) {
this.logMessage(DEBUG_COLOR, topic, ...args);
}
};
} else {
log = {
error() {},
warn() {},
info() {},
verbose() {},
debug() {}
};
case "error":
default:
log.error = (topic: string, ...args: any) =>
logMessage("red", topic, ...args);
}
}
export { log };
chapter09/src/logging/index.without.level.js
+62
View File
@@ -0,0 +1,62 @@
/* @flow */
import debug from "debug";
const WHAT_TO_LOG = "myapp:SERVICE:*"; // change this to suit your needs
let log;
if (process.env.NODE_ENV === "development") {
localStorage.setItem("debug", WHAT_TO_LOG);
const ERROR_COLOR = "red";
const WARN_COLOR = "brown";
const INFO_COLOR = "blue";
const VERBOSE_COLOR = "green";
const DEBUG_COLOR = "gray";
// CHANGE TO: COLOR, TOPIC, MESSAGE, ...EXTRA)
log = {
logMessage(
color: string,
topic: string,
message: any = "--",
...rest: any
) {
const logger = debug(topic);
logger.color = color;
logger(message, ...rest);
},
error(topic: string, ...args: any) {
this.logMessage(ERROR_COLOR, topic, ...args);
},
warn(topic: string, ...args: any) {
this.logMessage(WARN_COLOR, topic, ...args);
},
info(topic: string, ...args: any) {
this.logMessage(INFO_COLOR, topic, ...args);
},
verbose(topic: string, ...args: any) {
this.logMessage(VERBOSE_COLOR, topic, ...args);
},
debug(topic: string, ...args: any) {
this.logMessage(DEBUG_COLOR, topic, ...args);
}
};
} else {
log = {
error() {},
warn() {},
info() {},
verbose() {},
debug() {}
};
}
export { log };
chapter09/src/regionsApp/__snapshots__/countryAndRegions.test.js.snap
+21
View File
@@ -0,0 +1,21 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`App for Regions and Countries renders correctly 1`] = `
<div>
<div>
Select:
<CountrySelect
getCountries={[Function]}
list={Array []}
loading={true}
onSelect={[Function]}
/>
</div>
<div>
Display:
<RegionsTable
list={Array []}
/>
</div>
</div>
`;
chapter09/src/regionsApp/__snapshots__/countrySelect.test.js.snap
+41
View File
@@ -0,0 +1,41 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CountrySelect renders correctly a countries dropdown 1`] = `
<div
className="bordered"
>
Country: 
<select
onChange={[Function]}
>
<option
value=""
>
Select a country:
</option>
<option
value="AR"
>
Argentina
</option>
<option
value="BR"
>
Brazil
</option>
<option
value="UY"
>
Uruguay
</option>
</select>
</div>
`;
exports[`CountrySelect renders correctly when loading, with no countries 1`] = `
<div
className="bordered"
>
Loading countries...
</div>
`;
chapter09/src/regionsApp/__snapshots__/regionsTable.test.js.snap
+25
View File
@@ -0,0 +1,25 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`RegionsTable renders correctly a list 1`] = `
<div
className="bordered"
>
<div>
Cerro Largo
</div>
<div>
Maldonado
</div>
<div>
Montevideo
</div>
</div>
`;
exports[`RegionsTable renders correctly an empty list 1`] = `
<div
className="bordered"
>
No regions.
</div>
`;
chapter09/src/regionsApp/countryAndRegions.test.js
+33
View File
@@ -0,0 +1,33 @@
import React from "react";
import ShallowRenderer from "react-test-renderer/shallow";
import { CountrySelect } from "./countrySelect.component";
import { RegionsTable } from "./regionsTable.component";
class CountryAndRegions extends React.Component {
render() {
return (
<div>
<div>
Select:
<CountrySelect
loading={true}
onSelect={() => null}
getCountries={() => null}
list={[]}
/>
</div>
<div>
Displays: <RegionsTable list={[]} />
</div>
</div>
);
}
}
describe("App for Regions and Countries", () => {
it("renders correctly", () => {
const tree = new ShallowRenderer().render(<CountryAndRegions />);
expect(tree).toMatchSnapshot();
});
});
chapter09/src/regionsApp/countrySelect.test.js
+43
View File
@@ -0,0 +1,43 @@
import React from "react";
import TestRenderer from "react-test-renderer";
import { CountrySelect } from "./countrySelect.component";
describe("CountrySelect", () => {
it("renders correctly when loading, with no countries", () => {
const tree = TestRenderer.create(
<CountrySelect
loading={true}
onSelect={() => null}
getCountries={() => null}
list={[]}
/>
).toJSON();
expect(tree).toMatchSnapshot();
});
it("renders correctly a countries dropdown", () => {
const tree = TestRenderer.create(
<CountrySelect
loading={false}
onSelect={() => null}
getCountries={() => null}
list={[
{
countryCode: "UY",
countryName: "Uruguay"
},
{
countryCode: "AR",
countryName: "Argentina"
},
{
countryCode: "BR",
countryName: "Brazil"
}
]}
/>
).toJSON();
expect(tree).toMatchSnapshot();
});
});
chapter09/src/regionsApp/regionsTable.component.js
+1 -1
View File
@@ -12,7 +12,7 @@ export class RegionsTable extends React.PureComponent<{
}>
}> {
static propTypes = {
list: PropTypes.arrayOf(PropTypes.object).isRequired
list: PropTypes.arrayOf(PropTypes.object)
};
static defaultProps = {
chapter09/src/regionsApp/regionsTable.test.js
+38
View File
@@ -0,0 +1,38 @@
import React from "react";
import TestRenderer from "react-test-renderer";
import { RegionsTable } from "./regionsTable.component";
describe("RegionsTable", () => {
it("renders correctly an empty list", () => {
const tree = TestRenderer.create(
<RegionsTable list={[]} />
).toJSON();
expect(tree).toMatchSnapshot();
});
it("renders correctly a list", () => {
const tree = TestRenderer.create(
<RegionsTable
list={[
{
countryCode: "UY",
regionCode: "10",
regionName: "Montevideo"
},
{
countryCode: "UY",
regionCode: "9",
regionName: "Maldonado"
},
{
countryCode: "UY",
regionCode: "5",
regionName: "Cerro Largo"
}
]}
/>
).toJSON();
expect(tree).toMatchSnapshot();
});
});