Add testing (#40)

* Add testing and some basic tests

* Run tests as part of publish script.

Bail on failed tests

* Add test to makefile

Author: aaronnorby

Makefile

@@ -6,3 +6,6 @@ start:
 
 lint:
 	npm run lint
+
+test:
+	npm test

README.md

@@ -68,6 +68,26 @@ purposes. It is by default served via webpack-dev-server.
 
 `make start` will start the demo app served by webpack-dev-server
 
+### Testing
+
+Tests use Jest and Enzyme.
+
+Run tests with:
+
+```
+make test
+```
+
+This starts Jest in watch mode. To run a particular test file, while in watch mode
+hit `p` and then type the path or name of the file.
+
+Some tests use snapshots. If intended changes to a component cause snapshot tests
+to fail, snapshot files need to be updated (stored in `__snapshots__` directories).
+To do this run:
+
+```
+npm run jest --updateSnapshot
+```
 
 ### To run the linter
 

config/jest/cssTransform.js

@@ -0,0 +1,10 @@
+// Turn style imports into empty objects
+
+module.exports = {
+  process() {
+    return 'module.exports = {};';
+  },
+  getCacheKey(fileData, filename) {
+    return 'cssTransform';
+  }
+};

config/jest/fileTransform.js

@@ -0,0 +1,8 @@
+// transform file imports into filenames
+const path = require('path');
+
+module.exports = {
+  process(src, filename) {
+    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
+  }
+};

package.json

@@ -13,6 +13,8 @@
     "build": "webpack -p --progress",
     "start": "node ./scripts/start.js",
     "lint": "node_modules/.bin/eslint ./src/**/*.jsx",
+    "test": "node_modules/.bin/jest --env=jsdom --watch",
+    "jest": "node_modules/.bin/jest --env=jsdom",
     "tag-and-publish": "node ./scripts/publish.js"
   },
   "author": "PlanGrid <opensource@plangrid.com>",
@@ -39,6 +41,7 @@
   "devDependencies": {
     "autoprefixer": "^7.1.0",
     "babel-core": "^6.24.1",
+    "babel-jest": "^20.0.3",
     "babel-loader": "^7.0.0",
     "babel-plugin-transform-class-properties": "^6.19.0",
     "babel-plugin-transform-es2015-classes": "^6.18.0",
@@ -50,6 +53,7 @@
     "babel-runtime": "^6.20.0",
     "chalk": "^1.1.3",
     "css-loader": "^0.28.1",
+    "enzyme": "^2.8.2",
     "eslint": "^3.19.0",
     "eslint-config-airbnb": "^15.0.1",
     "eslint-import-resolver-webpack": "^0.8.1",
@@ -60,8 +64,10 @@
     "file-loader": "^0.11.1",
     "html-webpack-plugin": "^2.28.0",
     "inquirer": "^3.0.6",
+    "jest": "^20.0.4",
     "node-sass": "^4.5.3",
     "postcss-loader": "^2.0.5",
+    "react-test-renderer": "^15.5.4",
     "sass-loader": "^6.0.5",
     "style-loader": "^0.17.0",
     "url-loader": "^0.5.8",
@@ -80,6 +86,24 @@
     "xlsx": "^0.10.1",
     "pdfjs-dist": "1.8.357"
   },
+  "jest": {
+    "testPathIgnorePatterns": [
+      "<rootDir>[/\\\\](build|node_modules|scripts|example_files)[/\\\\]"
+    ],
+    "testEnvironment": "node",
+    "transform": {
+      "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
+      "^.+\\.(css|scss)$": "<rootDir>/config/jest/cssTransform.js",
+      "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
+    },
+    "transformIgnorePatterns": [
+      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
+    ],
+    "moduleDirectories": [
+      "src",
+      "node_modules"
+    ]
+  },
   "eslintConfig": {
     "extends": "airbnb",
     "plugins": [

scripts/publish.js

@@ -1,3 +1,5 @@
+const fs = require('fs');
+const path = require('path');
 const execSync = require('child_process').execSync;
 
 const inquirer = require('inquirer');
@@ -7,8 +9,11 @@ const runColor = chalk.bold.blue;
 const errColor = chalk.bold.red;
 const goodColor = chalk.bold.green;
 
+const appDir = fs.realpathSync(process.cwd());
+
 const buildCommand = 'npm run build';
 const branchCommand = 'git rev-parse --abbrev-ref HEAD';
+const jestCommand = `${path.join(appDir, 'node_modules/.bin/jest')} --env=jsdom --silent`;
 
 inquirer.prompt([
   {
@@ -31,7 +36,13 @@ inquirer.prompt([
   };
 
   //run tests
-  console.log(errColor('no tests are configured.😢 someone should fix that.'));
+  try {
+    console.log(runColor('running tests'));
+    execSync(jestCommand);
+  } catch (e) {
+    console.log(errColor('Tests failed. Aborting publish.'));
+    return;
+  }
 
   // make sure we're on the master branch
   const branch = execSync(branchCommand);

tests/components/__snapshots__/error.test.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Error component matches stored snapshot 1`] = `
+<div
+  className="error-message"
+>
+  <p
+    className="alert"
+  >
+    Unable to preview file
+  </p>
+</div>
+`;

tests/components/drivers/__snapshots__/audio-viewer.test.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AudioViewer matches snapshot 1`] = `
+<div
+  className="pg-driver-view"
+>
+  <div
+    className="video-container"
+  >
+    <div
+      className="loading-container"
+    >
+      <span
+        className="loading"
+      />
+    </div>
+    <audio
+      controls={true}
+      onCanPlay={[Function]}
+      src="fake/path"
+      style={
+        Object {
+          "visibility": "hidden",
+        }
+      }
+    >
+      Video playback is not supported by your browser.
+    </audio>
+  </div>
+</div>
+`;

tests/components/drivers/audio-viewer.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import { AudioViewer } from 'components/drivers';
+
+describe('AudioViewer', () => {
+  it('matches snapshot', () => {
+    const tree = renderer.create(
+      <AudioViewer filePath='fake/path' />
+    ).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

tests/components/error.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import Error from 'components/error';
+
+describe('Error component', () => {
+  it('matches stored snapshot', () => {
+    const tree = renderer.create(
+      <Error />
+    ).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

tests/components/file-viewer.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import FileViewer from 'components/file-viewer';
+
+describe('file-viewer', () => {
+  it('renders without crashing', () => {
+    mount(
+      <FileViewer fileType='fake' filePath='fake/path' />
+    );
+  });
+});