Upgrade react version (#1135)

* upgrading packages + fixing tests and transitions

* Fix invalid ref

* Fix versioning

* Formatting package.json

* preventing warnings from showing in the tests

* Make just run tests serially

* removing unused ref

Author: luisrudge

.vscode/settings.json

@@ -1,12 +1,13 @@
-// Place your settings in this file to overwrite default and user settings.
 {
+  // Place your settings in this file to overwrite default and user settings.
   "search.exclude": {
     "**/node_modules": true,
     "**/bower_components": true,
     "**/lib": true,
-    "**/coverage": true
+    "**/coverage": true,
+    "**/examples": true
   },
   "editor.formatOnSave": true,
   "prettier.printWidth": 100,
   "prettier.singleQuote": true
-}
+}

Gruntfile.js

@@ -82,7 +82,7 @@ module.exports = function(grunt) {
         port: 3000,
         https: true,
         webpack: {
-          devtool: 'eval'
+          devtool: 'cheap-module-source-map'
         }
       },
       design: {
@@ -92,7 +92,7 @@ module.exports = function(grunt) {
             path: path.join(__dirname, 'build'),
             filename: 'lock.design.js'
           },
-          devtool: 'eval'
+          devtool: 'cheap-module-source-map'
         }
       }
     },

css/_transitions.styl

@@ -14,12 +14,12 @@
 
 /*Slide out*/
 
-.slide-leave {
+.slide-exit {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }
 
-.slide-leave.slide-leave-active {
+.slide-exit.slide-exit-active {
   -webkit-transform: translate3d(100%, 0, 0);
   transform: translate3d(100%, 0, 0);
   -webkit-transition: -webkit-transform .3s ease-in;
@@ -58,13 +58,13 @@
 
 /*vslide out*/
 
-.vslide-leave {
+.vslide-exit {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }
 
 
-.vslide-leave.vslide-leave-active {
+.vslide-exit.vslide-exit-active {
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
   -webkit-transition: -webkit-transform .35s;
@@ -93,15 +93,15 @@
 
 /*Horizontal fade out*/
 
-.horizontal-fade-leave {
+.horizontal-fade-exit {
   opacity: 1;
   position: absolute;
   width: 100%;
   top: 0;
   left: 0;
 }
 
-.horizontal-fade-leave.horizontal-fade-leave-active {
+.horizontal-fade-exit.horizontal-fade-exit-active {
   opacity: 0;
   -webkit-transform: translate3d(-100%, 0, 0);
   transform: translate3d(-100%, 0, 0);
@@ -132,15 +132,15 @@
 
 /* reverse horizontal fade out */
 
-.reverse-horizontal-fade-leave {
+.reverse-horizontal-fade-exit {
   opacity: 1;
   position: absolute;
   width: 100%;
   top: 0;
   left: 0;
 }
 
-.reverse-horizontal-fade-leave.reverse-horizontal-fade-leave-active {
+.reverse-horizontal-fade-exit.reverse-horizontal-fade-exit-active {
   opacity: 0;
   -webkit-transform: translate3d(100%, 0, 0);
   transform: translate3d(100%, 0, 0);
@@ -163,7 +163,7 @@
 
 /* fade out*/
 
-.fade-leave {
+.fade-exit {
   opacity: 1;
   position: absolute;
   width: 100%;
@@ -173,7 +173,7 @@
   opacity: 1;
 }
 
-.fade-leave.fade-leave-active {
+.fade-exit.fade-exit-active {
   opacity: 0;
 
   -webkit-transition: opacity .5s linear;

css/index.styl

@@ -58,7 +58,7 @@ tabsHeight = 40px
       paddingTop 10px
       paddingBottom 10px
 
-    &.global-message-leave
+    &.global-message-exit
       transition all 0.2s
       height 0
       paddingTop 0
@@ -132,7 +132,7 @@ tabsHeight = 40px
     background white
     position relative
 
-    &.horizontal-fade-leave
+    &.horizontal-fade-exit
       .auth0-lock-content, .auth0-lock-terms
         opacity .3
         pointer-events none

package.json

@@ -4,15 +4,7 @@
   "description": "Auth0 Lock",
   "author": "Auth0 <[email protected]> (http://auth0.com)",
   "license": "MIT",
-  "keywords": [
-    "auth0",
-    "auth",
-    "openid",
-    "authentication",
-    "passwordless",
-    "browser",
-    "jwt"
-  ],
+  "keywords": ["auth0", "auth", "openid", "authentication", "passwordless", "browser", "jwt"],
   "repository": {
     "type": "git",
     "url": "git://github.com/auth0/lock"
@@ -28,10 +20,13 @@
     "precommit": "lint-staged",
     "lint": "eslint --ext .jsx,.js src/",
     "test": "cross-env BABEL_ENV=test zuul -- test/**/*.test.js",
-    "test:browser": "cross-env BABEL_ENV=test zuul --local 8080 --disable-tunnel -- test/**/*.test.js",
-    "test:cli": "cross-env BABEL_ENV=test mochify --extension=.jsx --transform=babelify test/**/*.test.js",
-    "test:watch": "cross-env BABEL_ENV=test mochify --watch --extension=.jsx --transform=babelify test/**/*.test.js",
-    "test:jest": "jest --coverage",
+    "test:browser":
+      "cross-env BABEL_ENV=test zuul --local 8080 --disable-tunnel -- test/**/*.test.js",
+    "test:cli":
+      "cross-env BABEL_ENV=test mochify --extension=.jsx --transform=babelify ./test/setup.js test/**/*.test.js",
+    "test:watch":
+      "cross-env BABEL_ENV=test mochify --watch --extension=.jsx --transform=babelify ./test/setup.js test/**/*.test.js",
+    "test:jest": "jest --coverage --runInBand",
     "test:jest:watch": "jest --watch --coverage",
     "publish:cdn": "ccu",
     "release": "scripts/release.sh",
@@ -45,15 +40,16 @@
     "babel-plugin-transform-css-import-to-string": "0.0.2",
     "babel-plugin-version-inline": "^1.0.0",
     "babel-preset-es2015": "^6.22.0",
-    "babel-preset-react": "^6.16.0",
+    "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.3.13",
     "babelify": "^7.2.0",
     "bump-version": "^0.5.0",
     "component-cdn-uploader": "auth0/component-cdn-uploader#v1.3.0",
     "cross-env": "^3.1.4",
     "css-loader": "^0.26.1",
     "dotenv": "^4.0.0",
-    "enzyme": "2.7.0",
+    "enzyme": "^3.1.0",
+    "enzyme-adapter-react-16": "^1.0.1",
     "eslint": "^3.19.0",
     "eslint-config-prettier": "^1.7.0",
     "eslint-plugin-react": "^6.10.3",
@@ -68,14 +64,13 @@
     "grunt-exec": "^0.4.6",
     "grunt-webpack": "^2.0.1",
     "husky": "^0.13.3",
-    "jest": "19.0.0",
+    "jest": "^21.2.1",
     "json-beautify": "^1.0.1",
     "jsonwebtoken": "^7.3.0",
     "lint-staged": "^3.4.0",
-    "mochify": "^2.12.0",
+    "mochify": "^3.3.0",
     "prettier": "^1.2.2",
-    "react-addons-test-utils": "^15.6.0",
-    "react-test-renderer": "^15.6.1",
+    "react-test-renderer": "^16.0.0",
     "semver": "^5.3.0",
     "sinon": "^1.15.4",
     "stylus": "^0.54.5",
@@ -98,10 +93,10 @@
     "immutable": "^3.7.3",
     "jsonp": "^0.2.0",
     "password-sheriff": "^1.1.0",
-    "prop-types": "^15.5.10",
+    "prop-types": "^15.6.0",
     "react": "^15.6.1 || ^16.0.0",
     "react-dom": "^15.6.1 || ^16.0.0",
-    "react-transition-group": "^1.2.0",
+    "react-transition-group": "^2.2.1",
     "superagent": "^3.3.1",
     "trim": "0.0.1",
     "url-join": "^1.1.0"
@@ -114,32 +109,25 @@
     "localPath": "build"
   },
   "jest": {
-    "modulePaths": [
-      "<rootDir>/src/",
-      "<rootDir>/src/__tests__"
-    ],
+    "modulePaths": ["<rootDir>/src/", "<rootDir>/src/__tests__"],
+    "setupFiles": ["<rootDir>/src/__tests__/setup-tests.js"],
     "coveragePathIgnorePatterns": [
       "/node_modules/",
       "<rootDir>/test/",
       "<rootDir>/lib/",
-      "<rootDir>/src/__tests__/testUtils.js"
+      "<rootDir>/src/__tests__/testUtils.js",
+      "<rootDir>/src/__tests__/setup-tests.js"
     ],
     "testPathIgnorePatterns": [
       "/node_modules/",
       "<rootDir>/test/",
       "<rootDir>/lib/",
-      "<rootDir>/src/__tests__/testUtils.js"
+      "<rootDir>/src/__tests__/testUtils.js",
+      "<rootDir>/src/__tests__/setup-tests.js"
     ],
-    "coverageReporters": [
-      "lcov",
-      "text-summary"
-    ]
+    "coverageReporters": ["lcov", "text-summary"]
   },
   "lint-staged": {
-    "*.{js,jsx}": [
-      "npm run lint",
-      "prettier --write --print-width 100 --single-quote",
-      "git add"
-    ]
+    "*.{js,jsx}": ["npm run lint", "prettier --write --print-width 100 --single-quote", "git add"]
   }
 }

src/__tests__/core/__snapshots__/index.test.js.snap

@@ -6,9 +6,9 @@ exports[`setResolvedConnection sets the connection 1`] = `
 Array [
   "m",
   "resolvedConnection",
-  Object {
-    "name": "bar",
+  Immutable.Map {
     "type": "database",
+    "name": "bar",
   },
 ]
 `;

src/__tests__/field/__snapshots__/username.test.js.snap

@@ -9,7 +9,7 @@ Object {
 
 exports[`field/username setUsername() calls setField 1`] = `
 Array [
-  Object {
+  Immutable.Map {
     "validation": null,
   },
   "username",

src/__tests__/setup-tests.js

@@ -0,0 +1,12 @@
+// setup file
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+jest.mock('react-dom/node_modules/fbjs/lib/warning');
+
+configure({ adapter: new Adapter() });
+
+//jest polyfills
+global.requestAnimationFrame = function(callback) {
+  setTimeout(callback, 0);
+};

src/__tests__/ui/box/global_message.test.jsx

@@ -19,7 +19,7 @@ describe('GlobalMessage', () => {
     wrapper.getDOMNode().getBoundingClientRect = getBoundingClientRectSpy;
     wrapper.getDOMNode().scrollIntoView = scrollIntoViewSpy;
 
-    wrapper.getNode().componentDidMount();
+    wrapper.instance().componentDidMount();
 
     expect(getBoundingClientRectSpy).toHaveBeenCalled();
     expect(scrollIntoViewSpy).toHaveBeenCalledWith(true);
@@ -31,7 +31,7 @@ describe('GlobalMessage', () => {
     wrapper.getDOMNode().getBoundingClientRect = getBoundingClientRectSpy;
     wrapper.getDOMNode().scrollIntoView = scrollIntoViewSpy;
 
-    wrapper.getNode().componentDidMount();
+    wrapper.instance().componentDidMount();
 
     expect(getBoundingClientRectSpy).toHaveBeenCalled();
     expect(scrollIntoViewSpy).not.toHaveBeenCalled();
@@ -43,7 +43,7 @@ describe('GlobalMessage', () => {
     wrapper.getDOMNode().getBoundingClientRect = getBoundingClientRectSpy;
     wrapper.getDOMNode().scrollIntoView = scrollIntoViewSpy;
 
-    wrapper.getNode().componentDidMount();
+    wrapper.instance().componentDidMount();
 
     expect(getBoundingClientRectSpy).toHaveBeenCalled();
     expect(scrollIntoViewSpy).toHaveBeenCalledWith(true);
@@ -55,7 +55,7 @@ describe('GlobalMessage', () => {
     wrapper.getDOMNode().getBoundingClientRect = getBoundingClientRectSpy;
     wrapper.getDOMNode().scrollIntoView = scrollIntoViewSpy;
 
-    wrapper.getNode().componentDidMount();
+    wrapper.instance().componentDidMount();
 
     expect(scrollIntoViewSpy).not.toHaveBeenCalled();
   });

src/core.js

@@ -120,7 +120,7 @@ export default class Base extends EventEmitter {
           tabs: screen.renderTabs(m),
           terms: screen.renderTerms(m, i18nProp.html('signUpTerms')),
           title: getScreenTitle(m),
-          transitionName: screen.name === 'loading' ? 'fade' : 'horizontal-fade',
+          classNames: screen.name === 'loading' ? 'fade' : 'horizontal-fade',
           scrollGlobalMessagesIntoView: l.ui.scrollGlobalMessagesIntoView(m)
         };
         render(l.ui.containerID(m), props);