From acc44819f45c9b78a603c42d712f41a6561eff13 Mon Sep 17 00:00:00 2001
From: Luis Rudge <luis@luisrudge.net>
Date: Thu, 12 Jan 2017 12:33:37 -0300
Subject: [PATCH] adding jest and a few simple tests

---
 .gitignore                                    |  1 +
 .travis.yml                                   |  1 +
 package.json                                  | 26 +++++++
 .../__snapshots__/auth_button.test.jsx.snap   | 68 +++++++++++++++++++
 src/__tests__/auth_button.test.jsx            | 43 ++++++++++++
 src/__tests__/testUtils.js                    |  9 +++
 6 files changed, 148 insertions(+)
 create mode 100644 src/__tests__/__snapshots__/auth_button.test.jsx.snap
 create mode 100644 src/__tests__/auth_button.test.jsx
 create mode 100644 src/__tests__/testUtils.js

diff --git a/.gitignore b/.gitignore
index d7be52882..f0d5a86b7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 .DS_Store
+coverage/
 build/
 css/index.css
 lib/
diff --git a/.travis.yml b/.travis.yml
index 2a789cbf6..9f6c2e154 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -3,6 +3,7 @@ node_js:
 - '4.2'
 script:
 - 'npm run test:cli'
+- 'npm run test:jest'
 env:
   - CXX=g++-4.8
 sudo: false
diff --git a/package.json b/package.json
index b13ade95d..d97b0c984 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,8 @@
     "test:browser": "zuul --local 8080 --disable-tunnel -- test/**/*.test.js",
     "test:cli": "mochify --extension=.jsx --transform=babelify test/**/*.test.js",
     "test:watch": "mochify --watch --extension=.jsx --transform=babelify test/**/*.test.js",
+    "test:jest": "jest --coverage",
+    "test:jest:watch": "jest --watchAll --coverage",
     "publish:cdn": "ccu",
     "release": "scripts/release.sh"
   },
@@ -46,6 +48,7 @@
     "bump-version": "^0.5.0",
     "component-cdn-uploader": "auth0/component-cdn-uploader#1.1.0",
     "css-loader": "^0.25.0",
+    "enzyme": "2.7.0",
     "eslint": "3.7.1",
     "eslint-config-auth0-base": "6.0.0",
     "eslint-plugin-import": "1.16.0",
@@ -59,8 +62,10 @@
     "grunt-env": "^0.4.4",
     "grunt-exec": "^0.4.6",
     "grunt-webpack": "^1.0.18",
+    "jest": "18.1.0",
     "mochify": "^2.12.0",
     "react-addons-test-utils": "^15.0.0 || ^16.0.0",
+    "react-test-renderer": "15.4.2",
     "semver": "^5.3.0",
     "sinon": "^1.15.4",
     "smart-banner-webpack-plugin": "^2.0.0",
@@ -97,5 +102,26 @@
     "mainBundleFile": "lock.min.js",
     "bucket": "assets.us.auth0.com",
     "localPath": "build"
+  },
+  "jest": {
+    "modulePaths": [
+      "<rootDir>/src/"
+    ],
+    "coveragePathIgnorePatterns": [
+      "/node_modules/",
+      "<rootDir>/test/",
+      "<rootDir>/lib/",
+      "<rootDir>/src/__tests__/testUtils.js"
+    ],
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "<rootDir>/test/",
+      "<rootDir>/lib/",
+      "<rootDir>/src/__tests__/testUtils.js"
+    ],
+    "coverageReporters": [
+      "lcov",
+      "text-summary"
+    ]
   }
 }
diff --git a/src/__tests__/__snapshots__/auth_button.test.jsx.snap b/src/__tests__/__snapshots__/auth_button.test.jsx.snap
new file mode 100644
index 000000000..0b33cccb6
--- /dev/null
+++ b/src/__tests__/__snapshots__/auth_button.test.jsx.snap
@@ -0,0 +1,68 @@
+exports[`AuthButton renders correctly 1`] = `
+<button
+  className="auth0-lock-social-button auth0-lock-social-big-button"
+  data-provider="strategy"
+  disabled={false}
+  onClick={[Function]}
+  style={Object {}}
+  type="button">
+  <div
+    className="auth0-lock-social-button-icon"
+    style={Object {}} />
+  <div
+    className="auth0-lock-social-button-text"
+    style={Object {}}>
+    label
+  </div>
+</button>
+`;
+
+exports[`AuthButton renders when \`big\` is false 1`] = `
+<button
+  className="auth0-lock-social-button"
+  data-provider="strategy"
+  disabled={false}
+  onClick={[Function]}
+  style={Object {}}
+  type="button">
+  <div
+    className="auth0-lock-social-button-icon"
+    style={Object {}} />
+  <div
+    className="auth0-lock-social-button-text"
+    style={Object {}}>
+    label
+  </div>
+</button>
+`;
+
+exports[`AuthButton renders with style customizations 1`] = `
+<button
+  className="auth0-lock-social-button auth0-lock-social-big-button"
+  data-provider="strategy"
+  disabled={false}
+  onClick={[Function]}
+  style={
+    Object {
+      "backgroundColor": "primaryColor",
+    }
+  }
+  type="button">
+  <div
+    className="auth0-lock-social-button-icon"
+    style={
+      Object {
+        "backgroundImage": "url(\'test\')",
+      }
+    } />
+  <div
+    className="auth0-lock-social-button-text"
+    style={
+      Object {
+        "color": "foregroundColor",
+      }
+    }>
+    label
+  </div>
+</button>
+`;
diff --git a/src/__tests__/auth_button.test.jsx b/src/__tests__/auth_button.test.jsx
new file mode 100644
index 000000000..40b49fa1a
--- /dev/null
+++ b/src/__tests__/auth_button.test.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import { expectComponent, noop } from './testUtils'
+
+import AuthButton from 'ui/button/auth_button';
+
+describe('AuthButton', () => {
+  const defaultProps = {
+    label: 'label',
+    onClick: noop,
+    strategy: 'strategy'
+  };
+  it('renders correctly', () => {
+    expectComponent(
+      <AuthButton {...defaultProps} />
+    ).toMatchSnapshot();
+  });
+  it('renders with style customizations', () => {
+    expectComponent(
+      <AuthButton
+        {...defaultProps}
+        icon="test"
+        primaryColor="primaryColor"
+        foregroundColor="foregroundColor"
+        />
+    ).toMatchSnapshot();
+  });
+  it('renders when `big` is false', () => {
+    expectComponent(
+      <AuthButton
+        {...defaultProps}
+        isBig={false}
+        />
+    ).toMatchSnapshot();
+  });
+  it('should trigger onClick when clicked', () => {
+    const onClick = jest.fn();
+    const wrapper = mount(<AuthButton {...defaultProps} onClick={onClick} />);
+    wrapper.find('button').simulate('click');
+    expect(onClick.mock.calls.length).toBe(1);
+  });
+});
diff --git a/src/__tests__/testUtils.js b/src/__tests__/testUtils.js
new file mode 100644
index 000000000..083d8a861
--- /dev/null
+++ b/src/__tests__/testUtils.js
@@ -0,0 +1,9 @@
+import React from 'react'; // eslint-disable-line
+import renderer from 'react-test-renderer';
+
+export const expectComponent = (children) => {
+  const component = renderer.create(children);
+  return expect(component);
+};
+
+export const noop = () => {};