adding jest and a few simple tests

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
+coverage/
 build/
 css/index.css
 lib/

.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

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"
+    ]
   }
 }

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>
+`;

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

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 = () => {};