Snapshot tests

chapter09/package-lock.json

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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";
+    /* eslint-disable no-fallthrough */
-    const WARN_COLOR = "brown";
+    switch (MIN_LEVEL_TO_LOG) {
-    const INFO_COLOR = "blue";
+        case "debug":
-    const VERBOSE_COLOR = "green";
+            log.debug = (topic: string, ...args: any) =>
-    const DEBUG_COLOR = "gray";
+                logMessage("gray", topic, ...args);
 
-    // CHANGE TO: COLOR, TOPIC, MESSAGE, ...EXTRA)
+        case "verbose":
+            log.verbose = (topic: string, ...args: any) =>
+                logMessage("green", topic, ...args);
 
-    log = {
+        case "info":
-        logMessage(
+            log.info = (topic: string, ...args: any) =>
-            color: string,
+                logMessage("blue", topic, ...args);
-            topic: string,
-            message: any = "--",
-            ...rest: any
-        ) {
-            const logger = debug(topic);
-            logger.color = color;
-            logger(message, ...rest);
-        },
 
-        error(topic: string, ...args: any) {
+        case "warn":
-            this.logMessage(ERROR_COLOR, topic, ...args);
+            log.warn = (topic: string, ...args: any) =>
-        },
+                logMessage("brown", topic, ...args);
 
-        warn(topic: string, ...args: any) {
+        case "error":
-            this.logMessage(WARN_COLOR, topic, ...args);
+        default:
-        },
+            log.error = (topic: string, ...args: any) =>
-
+                logMessage("red", 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/logging/index.without.level.js

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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();
+    });
+});