add jest for front-end component testing (metabase#4165)

* jest setup and simple tests for Button

* add jest to CI

* cleanup

* make eslint play nice

.eslintrc

@@ -45,7 +45,8 @@
     "env": {
         "browser": true,
         "es6": true,
-        "commonjs": true
+        "commonjs": true,
+        "jest": true
     },
     "parser": "babel-eslint",
     "plugins": [

bin/ci

@@ -45,6 +45,7 @@ node-5() {
     run_step lein eastwood
     run_step yarn run lint
     run_step yarn run test
+    run_step yarn run test-jest
     run_step yarn run flow
 }
 node-6() {

frontend/src/metabase/components/Button.spec.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import { render } from 'enzyme';
+
+import Button from './Button';
+
+describe('Button', () => {
+    it('should render correctly', () => {
+        const tree = renderer.create(
+            <Button>Clickity click</Button>
+        ).toJSON();
+
+        expect(tree).toMatchSnapshot()
+    })
+    it('should render correctly with an icon', () => {
+        const tree = renderer.create(
+            <Button icon='star'>
+                Clickity click
+            </Button>
+        ).toJSON();
+
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should render a primary button given the primary prop', () => {
+        const button = render(
+            <Button primary>
+                Clickity click
+            </Button>
+        )
+
+        expect(button.find('button.Button--primary').length).toEqual(1)
+    })
+})

frontend/src/metabase/components/__snapshots__/Button.spec.js.snap

@@ -0,0 +1,34 @@
+exports[`Button should render correctly 1`] = `
+<button
+  className="Button ">
+  <div
+    className="flex layout-centered">
+    <div>
+      Clickity click
+    </div>
+  </div>
+</button>
+`;
+
+exports[`Button should render correctly with an icon 1`] = `
+<button
+  className="Button ">
+  <div
+    className="flex layout-centered">
+    <svg
+      className="mr1"
+      fill="currentcolor"
+      height={14}
+      name="star"
+      size={14}
+      viewBox="0 0 32 32"
+      width={14}>
+      <path
+        d="M16 0 L21 11 L32 12 L23 19 L26 31 L16 25 L6 31 L9 19 L0 12 L11 11" />
+    </svg>
+    <div>
+      Clickity click
+    </div>
+  </div>
+</button>
+`;

frontend/src/metabase/lib/dom.js

@@ -151,11 +151,6 @@ function getTextNodeAtPosition(root, index) {
 var STYLE_SHEET = (function() {
     // Create the <style> tag
     var style = document.createElement("style");
-    style.dataset.x = "x"
-
-    // Add a media (and/or media query) here if you'd like!
-    // style.setAttribute("media", "screen")
-    // style.setAttribute("media", "only screen and (max-width : 1024px)")
 
     // WebKit hack :(
     style.appendChild(document.createTextNode("/* dynamic stylesheet */"));

package.json

@@ -82,6 +82,7 @@
     "babel-register": "^6.11.6",
     "concurrently": "^3.1.0",
     "css-loader": "^0.26.1",
+    "enzyme": "^2.7.0",
     "eslint": "^3.5.0",
     "eslint-import-resolver-webpack": "^0.8.0",
     "eslint-loader": "^1.6.0",
@@ -103,6 +104,7 @@
     "jasmine-promises": "^0.4.1",
     "jasmine-reporters": "^2.2.0",
     "jasmine-spec-reporter": "^3.0.0",
+    "jest": "^18.1.0",
     "json-loader": "^0.5.4",
     "karma": "^1.3.0",
     "karma-chrome-launcher": "^2.0.0",
@@ -116,8 +118,9 @@
     "postcss-loader": "^1.2.1",
     "postcss-url": "^5.1.1",
     "promise-loader": "^1.0.0",
-    "react-addons-test-utils": "^15.3.1",
+    "react-addons-test-utils": "^15.4.2",
     "react-hot-loader": "^1.3.0",
+    "react-test-renderer": "^15.4.2",
     "sauce-connect-launcher": "^1.1.1",
     "selenium-webdriver": "^2.53.3",
     "style-loader": "^0.13.0",
@@ -141,6 +144,15 @@
     "build-hot": "NODE_ENV=hot webpack --bail && NODE_ENV=hot webpack-dev-server --progress",
     "start": "yarn run build && lein ring server",
     "storybook": "start-storybook -p 9001",
-    "preinstall": "ps -fp $PPID | grep -q yarn || echo '\\033[0;33mSorry, npm is not supported. Please use Yarn (https://yarnpkg.com/).\\033[0m'"
+    "preinstall": "ps -fp $PPID | grep -q yarn || echo '\\033[0;33mSorry, npm is not supported. Please use Yarn (https://yarnpkg.com/).\\033[0m'",
+    "test-jest": "jest"
+  },
+  "jest": {
+    "testPathIgnorePatterns": [
+      "<rootDir>/frontend/test/"
+    ],
+    "modulePaths": [
+      "<rootDir>/frontend/src"
+    ]
   }
 }