revisions on testing, update on images (uber-archive#40)

qiaoxin136 · Nov 28, 2017 · 46840ec · 46840ec
1 parent 3dca3fe
commit 46840ec
Show file tree

Hide file tree

Showing 36 changed files with 100 additions and 138 deletions.
diff --git a/src/demos/testing-a-geospatial-app/1-smoke-screens/src/test/index.js b/src/demos/testing-a-geospatial-app/1-smoke-screens/src/test/index.js
diff --git a/...-geospatial-app/1-smoke-screens/README.md → ...-a-geospatial-app/1-smoke-tests/README.md b/...-geospatial-app/1-smoke-screens/README.md → ...-a-geospatial-app/1-smoke-tests/README.md
diff --git a/...geospatial-app/1-smoke-screens/index.html → ...a-geospatial-app/1-smoke-tests/index.html b/...geospatial-app/1-smoke-screens/index.html → ...a-geospatial-app/1-smoke-tests/index.html
diff --git a/...ospatial-app/1-smoke-screens/package.json → ...geospatial-app/1-smoke-tests/package.json b/...ospatial-app/1-smoke-screens/package.json → ...geospatial-app/1-smoke-tests/package.json
diff --git a/...-a-geospatial-app/1-smoke-screens/root.js → ...ng-a-geospatial-app/1-smoke-tests/root.js b/...-a-geospatial-app/1-smoke-screens/root.js → ...ng-a-geospatial-app/1-smoke-tests/root.js
diff --git a/...patial-app/1-smoke-screens/src/actions.js → ...ospatial-app/1-smoke-tests/src/actions.js b/...patial-app/1-smoke-screens/src/actions.js → ...ospatial-app/1-smoke-tests/src/actions.js
diff --git a/...-app/1-smoke-screens/src/app-container.js → ...al-app/1-smoke-tests/src/app-container.js b/...-app/1-smoke-screens/src/app-container.js → ...al-app/1-smoke-tests/src/app-container.js
diff --git a/...geospatial-app/1-smoke-screens/src/app.js → ...a-geospatial-app/1-smoke-tests/src/app.js b/...geospatial-app/1-smoke-screens/src/app.js → ...a-geospatial-app/1-smoke-tests/src/app.js
diff --git a/...spatial-app/1-smoke-screens/src/charts.js → ...eospatial-app/1-smoke-tests/src/charts.js b/...spatial-app/1-smoke-screens/src/charts.js → ...eospatial-app/1-smoke-tests/src/charts.js
diff --git a/...app/1-smoke-screens/src/deckgl-overlay.js → ...l-app/1-smoke-tests/src/deckgl-overlay.js b/...app/1-smoke-screens/src/deckgl-overlay.js → ...l-app/1-smoke-tests/src/deckgl-overlay.js
diff --git a/...app/1-smoke-screens/src/layer-controls.js → ...l-app/1-smoke-tests/src/layer-controls.js b/...app/1-smoke-screens/src/layer-controls.js → ...l-app/1-smoke-tests/src/layer-controls.js
diff --git a/...atial-app/1-smoke-screens/src/provider.js → ...spatial-app/1-smoke-tests/src/provider.js b/...atial-app/1-smoke-screens/src/provider.js → ...spatial-app/1-smoke-tests/src/provider.js
diff --git a/...patial-app/1-smoke-screens/src/reducer.js → ...ospatial-app/1-smoke-tests/src/reducer.js b/...patial-app/1-smoke-screens/src/reducer.js → ...ospatial-app/1-smoke-tests/src/reducer.js
diff --git a/...ospatial-app/1-smoke-screens/src/style.js → ...geospatial-app/1-smoke-tests/src/style.js b/...ospatial-app/1-smoke-screens/src/style.js → ...geospatial-app/1-smoke-tests/src/style.js
diff --git a/src/demos/testing-a-geospatial-app/1-smoke-tests/src/test/index.js b/src/demos/testing-a-geospatial-app/1-smoke-tests/src/test/index.js
@@ -0,0 +1 @@
+import './smoke-tests';
diff --git a/...testing-actions/src/test/smoke-screens.js → ...app/1-smoke-tests/src/test/smoke-tests.js b/...testing-actions/src/test/smoke-screens.js → ...app/1-smoke-tests/src/test/smoke-tests.js
@@ -7,15 +7,15 @@ import { LayerControls } from "../layer-controls";
 
 import test from "tape-catch";
 
-test("Smokescreens", assert => {
+test("Smoketests", assert => {
   const app = <App />;
-  assert.ok(true, 'App smoke screen ok');
+  assert.ok(true, 'App smoke test ok');
   const charts = <Charts />;
-  assert.ok(true, "Charts smoke screen ok");
+  assert.ok(true, "Charts smoke test ok");
   const deckGLOverlay = <DeckGLOverlay />;
-  assert.ok(true, "DeckGLOverlay smoke screen ok");
+  assert.ok(true, "DeckGLOverlay smoke test ok");
   const layerControls = <LayerControls />;
-  assert.ok(true, "layerControls smoke screen ok");
+  assert.ok(true, "layerControls smoke test ok");
 
   assert.end();
 });
diff --git a/...ial-app/1-smoke-screens/webpack.config.js → ...atial-app/1-smoke-tests/webpack.config.js b/...ial-app/1-smoke-screens/webpack.config.js → ...atial-app/1-smoke-tests/webpack.config.js
diff --git a/...-geospatial-app/1-smoke-screens/yarn.lock → ...-a-geospatial-app/1-smoke-tests/yarn.lock b/...-geospatial-app/1-smoke-screens/yarn.lock → ...-a-geospatial-app/1-smoke-tests/yarn.lock
diff --git a/src/demos/testing-a-geospatial-app/2-code-coverage/src/test/index.js b/src/demos/testing-a-geospatial-app/2-code-coverage/src/test/index.js
@@ -1 +1 @@
-import './smoke-screens';
+import './smoke-tests';
diff --git a/...1-smoke-screens/src/test/smoke-screens.js → ...p/2-code-coverage/src/test/smoke-tests.js b/...1-smoke-screens/src/test/smoke-screens.js → ...p/2-code-coverage/src/test/smoke-tests.js
@@ -7,15 +7,15 @@ import { LayerControls } from "../layer-controls";
 
 import test from "tape-catch";
 
-test("Smokescreens", assert => {
+test("Smoketests", assert => {
   const app = <App />;
-  assert.ok(true, 'App smoke screen ok');
+  assert.ok(true, 'App smoke test ok');
   const charts = <Charts />;
-  assert.ok(true, "Charts smoke screen ok");
+  assert.ok(true, "Charts smoke test ok");
   const deckGLOverlay = <DeckGLOverlay />;
-  assert.ok(true, "DeckGLOverlay smoke screen ok");
+  assert.ok(true, "DeckGLOverlay smoke test ok");
   const layerControls = <LayerControls />;
-  assert.ok(true, "layerControls smoke screen ok");
+  assert.ok(true, "layerControls smoke test ok");
 
   assert.end();
 });
diff --git a/src/demos/testing-a-geospatial-app/3-testing-ui/package.json b/src/demos/testing-a-geospatial-app/3-testing-ui/package.json
@@ -1,13 +1,10 @@
 {
   "scripts": {
-    "start-local":
-      "webpack-dev-server --env.local --progress --hot --port 3030 --open",
+    "start-local": "webpack-dev-server --env.local --progress --hot --port 3030 --open",
     "start": "webpack-dev-server --progress --hot --port 3030 --open",
     "build": "NODE_ENV=production webpack --env.prod=true",
-    "test":
-      "NODE_ENV=test tape -r babel-register -r ./src/test/setup-browser-env.js ./src/test/",
-    "cover":
-      "nyc --reporter html --reporter cobertura --reporter json-summary npm test ./src/**/*.js"
+    "test": "NODE_ENV=test tape -r babel-register -r ./src/test/setup-browser-env.js ./src/test/",
+    "cover": "nyc --reporter html --reporter cobertura --reporter json-summary npm test ./src/**/*.js"
   },
   "dependencies": {
     "babel-polyfill": "^6.26.0",
@@ -17,6 +14,7 @@
     "enzyme-adapter-react-15": "^1.0.5",
     "immutable": "^3.8.1",
     "jsdom": "^11.4.0",
+    "jsdom-global": "^3.0.2",
     "luma.gl": "^4.0.1",
     "nyc": "^11.3.0",
     "react": "^15.4.1",
@@ -37,6 +35,10 @@
     "webpack-dev-server": "^2.2.0"
   },
   "babel": {
-    "presets": ["env", "stage-2", "react"]
+    "presets": [
+      "env",
+      "stage-2",
+      "react"
+    ]
   }
 }
diff --git a/src/demos/testing-a-geospatial-app/3-testing-ui/src/test/index.js b/src/demos/testing-a-geospatial-app/3-testing-ui/src/test/index.js
@@ -1,2 +1,2 @@
 import "./components";
-import "./smoke-screens";
+import "./smoke-tests";
diff --git a/src/demos/testing-a-geospatial-app/3-testing-ui/src/test/setup-browser-env.js b/src/demos/testing-a-geospatial-app/3-testing-ui/src/test/setup-browser-env.js
@@ -1,30 +1,9 @@
 /* setup.js */
-import "babel-polyfill";
-const { JSDOM } = require("jsdom");
-const Adapter = require("enzyme-adapter-react-15");
-const { configure } = require("enzyme");
+import 'babel-polyfill';
+import JSDOM from 'jsdom';
+const Adapter = require('enzyme-adapter-react-15');
+const { configure } = require('enzyme');
 
-const jsdom = new JSDOM("<!doctype html><html><body></body></html>");
-const { window } = jsdom;
-
-function copyProps(src, target) {
-  const props = Object.getOwnPropertyNames(src)
-    .filter(prop => typeof target[prop] === "undefined")
-    .reduce(
-      (result, prop) => ({
-        ...result,
-        [prop]: Object.getOwnPropertyDescriptor(src, prop)
-      }),
-      {}
-    );
-  Object.defineProperties(target, props);
-}
-
-global.window = window;
-global.document = window.document;
-global.navigator = {
-  userAgent: "node.js"
-};
-copyProps(window, global);
+require('jsdom-global')();
 
 configure({ adapter: new Adapter() });
diff --git a/...2-code-coverage/src/test/smoke-screens.js → ...-app/3-testing-ui/src/test/smoke-tests.js b/...2-code-coverage/src/test/smoke-screens.js → ...-app/3-testing-ui/src/test/smoke-tests.js
@@ -7,15 +7,15 @@ import { LayerControls } from "../layer-controls";
 
 import test from "tape-catch";
 
-test("Smokescreens", assert => {
+test("Smoketests", assert => {
   const app = <App />;
-  assert.ok(true, 'App smoke screen ok');
+  assert.ok(true, 'App smoke test ok');
   const charts = <Charts />;
-  assert.ok(true, "Charts smoke screen ok");
+  assert.ok(true, "Charts smoke test ok");
   const deckGLOverlay = <DeckGLOverlay />;
-  assert.ok(true, "DeckGLOverlay smoke screen ok");
+  assert.ok(true, "DeckGLOverlay smoke test ok");
   const layerControls = <LayerControls />;
-  assert.ok(true, "layerControls smoke screen ok");
+  assert.ok(true, "layerControls smoke test ok");
 
   assert.end();
 });
diff --git a/src/demos/testing-a-geospatial-app/3-testing-ui/yarn.lock b/src/demos/testing-a-geospatial-app/3-testing-ui/yarn.lock
@@ -631,6 +631,14 @@ babel-plugin-transform-strict-mode@^6.24.1:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
 
+babel-polyfill@^6.26.0:
+  version "6.26.0"
+  resolved "https://unpm.uberinternal.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153"
+  dependencies:
+    babel-runtime "^6.26.0"
+    core-js "^2.5.0"
+    regenerator-runtime "^0.10.5"
+
 babel-preset-env@^1.6.1:
   version "1.6.1"
   resolved "https://unpm.uberinternal.com/babel-preset-env/-/babel-preset-env-1.6.1.tgz#a18b564cc9b9afdf4aae57ae3c1b0d99188e6f48"
@@ -1193,7 +1201,7 @@ core-js@^1.0.0:
   version "1.2.7"
   resolved "https://unpm.uberinternal.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
 
-core-js@^2.0.0, core-js@^2.4.0:
+core-js@^2.0.0, core-js@^2.4.0, core-js@^2.5.0:
   version "2.5.1"
   resolved "https://unpm.uberinternal.com/core-js/-/core-js-2.5.1.tgz#ae6874dc66937789b80754ff5428df66819ca50b"
 
@@ -2858,6 +2866,10 @@ jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://unpm.uberinternal.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
 
+jsdom-global@^3.0.2:
+  version "3.0.2"
+  resolved "https://unpm.uberinternal.com/jsdom-global/-/jsdom-global-3.0.2.tgz#6bd299c13b0c4626b2da2c0393cd4385d606acb9"
+
 jsdom@^11.4.0:
   version "11.4.0"
   resolved "https://unpm.uberinternal.com/jsdom/-/jsdom-11.4.0.tgz#a3941a9699cbb0d61f8ab86f6f28f4ad5ea60d04"
@@ -4246,6 +4258,10 @@ regenerate@^1.2.1:
   version "1.3.3"
   resolved "https://unpm.uberinternal.com/regenerate/-/regenerate-1.3.3.tgz#0c336d3980553d755c39b586ae3b20aa49c82b7f"
 
+regenerator-runtime@^0.10.5:
+  version "0.10.5"
+  resolved "https://unpm.uberinternal.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
+
 regenerator-runtime@^0.11.0:
   version "0.11.0"
   resolved "https://unpm.uberinternal.com/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz#7e54fe5b5ccd5d6624ea6255c3473be090b802e1"

diff --git a/src/demos/testing-a-geospatial-app/4-testing-actions/package.json b/src/demos/testing-a-geospatial-app/4-testing-actions/package.json
@@ -14,6 +14,7 @@
     "enzyme-adapter-react-15": "^1.0.5",
     "immutable": "^3.8.1",
     "jsdom": "^11.4.0",
+    "jsdom-global": "^3.0.2",
     "luma.gl": "^4.0.1",
     "nyc": "^11.3.0",
     "react": "^15.4.1",

diff --git a/src/demos/testing-a-geospatial-app/4-testing-actions/src/test/index.js b/src/demos/testing-a-geospatial-app/4-testing-actions/src/test/index.js
@@ -1,3 +1,3 @@
 import "./actions";
 import "./components";
-import "./smoke-screens";
+import "./smoke-tests";
diff --git a/src/demos/testing-a-geospatial-app/4-testing-actions/src/test/setup-browser-env.js b/src/demos/testing-a-geospatial-app/4-testing-actions/src/test/setup-browser-env.js
@@ -1,31 +1,9 @@
 /* setup.js */
-import 'babel-polyfill';
-const { JSDOM } = require("jsdom");
+import "babel-polyfill";
+import JSDOM from "jsdom";
 const Adapter = require("enzyme-adapter-react-15");
 const { configure } = require("enzyme");
 
-const jsdom = new JSDOM("<!doctype html><html><body></body></html>");
-const { window } = jsdom;
-
-function copyProps(src, target) {
-  const props = Object.getOwnPropertyNames(src)
-    .filter(prop => typeof target[prop] === "undefined")
-    .reduce(
-      (result, prop) => ({
-        ...result,
-        [prop]: Object.getOwnPropertyDescriptor(src, prop)
-      }),
-      {}
-    );
-  Object.defineProperties(target, props);
-}
-
-global.window = window;
-global.document = window.document;
-global.navigator = {
-  userAgent: "node.js"
-};
-copyProps(window, global);
+require("jsdom-global")();
 
 configure({ adapter: new Adapter() });
-
diff --git a/...pp/3-testing-ui/src/test/smoke-screens.js → ...4-testing-actions/src/test/smoke-tests.js b/...pp/3-testing-ui/src/test/smoke-screens.js → ...4-testing-actions/src/test/smoke-tests.js
@@ -7,15 +7,15 @@ import { LayerControls } from "../layer-controls";
 
 import test from "tape-catch";
 
-test("Smokescreens", assert => {
+test("Smoketests", assert => {
   const app = <App />;
-  assert.ok(true, 'App smoke screen ok');
+  assert.ok(true, 'App smoke test ok');
   const charts = <Charts />;
-  assert.ok(true, "Charts smoke screen ok");
+  assert.ok(true, "Charts smoke test ok");
   const deckGLOverlay = <DeckGLOverlay />;
-  assert.ok(true, "DeckGLOverlay smoke screen ok");
+  assert.ok(true, "DeckGLOverlay smoke test ok");
   const layerControls = <LayerControls />;
-  assert.ok(true, "layerControls smoke screen ok");
+  assert.ok(true, "layerControls smoke test ok");
 
   assert.end();
 });
diff --git a/src/demos/testing-a-geospatial-app/4-testing-actions/yarn.lock b/src/demos/testing-a-geospatial-app/4-testing-actions/yarn.lock
@@ -2866,6 +2866,10 @@ jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://unpm.uberinternal.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
 
+jsdom-global@^3.0.2:
+  version "3.0.2"
+  resolved "https://unpm.uberinternal.com/jsdom-global/-/jsdom-global-3.0.2.tgz#6bd299c13b0c4626b2da2c0393cd4385d606acb9"
+
 jsdom@^11.4.0:
   version "11.4.0"
   resolved "https://unpm.uberinternal.com/jsdom/-/jsdom-11.4.0.tgz#a3941a9699cbb0d61f8ab86f6f28f4ad5ea60d04"

diff --git a/...sting-a-geospatial-app/1-smoke-screens.md → ...testing-a-geospatial-app/1-smoke-tests.md b/...sting-a-geospatial-app/1-smoke-screens.md → ...testing-a-geospatial-app/1-smoke-tests.md
@@ -16,9 +16,11 @@ But with testing, it is possible to _prevent_ some of these problems. If after a
 
 It's also often a good idea to write tests after a change, because such a test can _explain_ the idea behind the change. The second function of tests, beyond preventing bugs, is to describe expected behaviors of the app; tests are also a form of documentation.
 
-## Smoke screens
+## Smoke tests
 
-Smoke screens are the dumbest, most basic tests. We're just trying to see if calling the React components of our app doesn't cause a crash. They are honestly not the most useful tests, in the grand scheme of things, but they are also very easy and short to write and if a smoke screen ever fails, you certainly have a problem. So let's write our first set of smoke screens.
+Smoke tests are the dumbest, most basic tests. We're just trying to see if calling the React components of our app doesn't cause a crash. Even though they are very short and easy to write, and that they can prevent catastrophic (albeit unlikely) failures, in the grand scheme of things, they are rarely worth the time. 
+
+What they are good for, however, is to help us understand how to get started with testing.
 
 ## Installing new stuff
 
@@ -52,15 +54,15 @@ Likewise, in addition to "scripts", "dependencies" and "devDependencies", create
 
 ## Writing our first tests
 
-Now, create a "test" folder in our "src" folder, and create two files inside, index.js and smoke-screens.js.
+Now, create a "test" folder in our "src" folder, and create two files inside, index.js and smoke-tests.js.
 
 index.js is where we'll organize all our tests. For now, just add this single line:
 
 ```
-import './smoke-screens';
+import './smoke-tests';
 ```
 
-And now, add this to smoke-screens.js: 
+And now, add this to smoke-tests.js: 
 
 ```
 import React from "react";
@@ -71,15 +73,15 @@ import Charts from "../charts";
 import DeckGLOverlay from "../deckgl-overlay";
 import { LayerControls } from "../layer-controls";
 
-test("Smokescreens", assert => {
+test("Smoketests", assert => {
   const app = <App />;
-  assert.ok(true, 'App smoke screen ok');
+  assert.ok(true, 'App smoke test ok');
   const charts = <Charts />;
-  assert.ok(true, "Charts smoke screen ok");
+  assert.ok(true, "Charts smoke test ok");
   const deckGLOverlay = <DeckGLOverlay />;
-  assert.ok(true, "DeckGLOverlay smoke screen ok");
+  assert.ok(true, "DeckGLOverlay smoke test ok");
   const layerControls = <Controls />;
-  assert.ok(true, "layerControls smoke screen ok");
+  assert.ok(true, "layerControls smoke test ok");
 
   assert.end();
 });
@@ -94,10 +96,10 @@ npm run test
 And you should get:
 
 ```
-# Smokescreens
-ok 1 App smoke screen ok
-ok 2 Charts smoke screen ok
-ok 3 DeckGLOverlay smoke screen ok
+# Smoke tests
+ok 1 App smoke test ok
+ok 2 Charts smoke test ok
+ok 3 DeckGLOverlay smoke test ok
 not ok 4 ReferenceError: Controls is not defined
 
 (lengthy error message)
@@ -111,7 +113,7 @@ error Command failed with exit code 1.
 
 ```
 
-## Analysis of smoke-screen.js
+## Analysis of smoke-test.js
 
 We're importing React, because we're going to write some JSX. Then test from tape-catch, which is what we are going to use to write our tests.
 We import all of our components.
@@ -137,11 +139,11 @@ const layerControls = <LayerControls />;
 and now run npm run test again:
 
 ```
-# Smokescreens
-ok 1 App smoke screen ok
-ok 2 Charts smoke screen ok
-ok 3 DeckGLOverlay smoke screen ok
-ok 4 layerControls smoke screen ok
+# Smoketests
+ok 1 App smoke test ok
+ok 2 Charts smoke test ok
+ok 3 DeckGLOverlay smoke test ok
+ok 4 layerControls smoke test ok
 
 1..4
 # tests 4
@@ -161,6 +163,6 @@ Let's continue to the next section: [code coverage](#testing-a-geospatial-app/2-
 <ul class='insert takeaways'>
 <li>Testing helps prevent bugs especially as parts of the app are updated independantly.</li>
 <li>Testing means running a series of tests which must all pass.</li>
-<li>Smoke screens test if a component constructor will run without crashing.</li>
-<li>Smoke screens are very simple tests but can prevent catastrophic failures.</li>
+<li>Smoke tests test if a component constructor will run without crashing.</li>
+<li>Smoke tests are very simple tests but can prevent catastrophic failures.</li>
 </ul>
diff --git a/src/docs/testing-a-geospatial-app/2-code-coverage.md b/src/docs/testing-a-geospatial-app/2-code-coverage.md
@@ -33,7 +33,7 @@ You'll be able to see that for now, our 4 tests cover 42.59% of our statements a
 
 Code coverage is helpful but is not the endgame. It's much easier to achieve a great code coverage than to write helpful tests!
 
-Let's continue to the next section: [testing UI](#testing-a-geospatial-app/3-testing-ui).
+Let's continue to the next section: [testing UI](#testing-a-geospatial-app/3-testing-uis).
 
 <ul class='insert takeaways'>
 <li>Code coverage is one high-level measure of how thorough tests are for an app.</li>