feature: Update MDC Web dependencies to v0.35.1 (#52)

material-components · May 22, 2018 · 203cf34 · 203cf34
1 parent a45c75a
commit 203cf34
Show file tree

Hide file tree

Showing 13 changed files with 47 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "babel-plugin-istanbul": "^4.1.5",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-polyfill": "^6.26.0",
     "babel-preset-airbnb": "^2.4.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",

diff --git a/packages/button/package.json b/packages/button/package.json
@@ -15,7 +15,7 @@
     "url": "https://github.com/material-components/material-components-web-react.git"
   },
   "dependencies": {
-    "@material/button": "^0.34.1",
+    "@material/button": "^0.35.0",
     "@material/react-ripple": "^0.1.0",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.1",

diff --git a/packages/card/package.json b/packages/card/package.json
@@ -15,7 +15,7 @@
     "url": "https://github.com/material-components/material-components-web-react.git"
   },
   "dependencies": {
-    "@material/card": "^0.34.1",
+    "@material/card": "^0.35.0",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.1",
     "react": "^16.3.2"

diff --git a/packages/fab/package.json b/packages/fab/package.json
@@ -15,7 +15,7 @@
     "url": "https://github.com/material-components/material-components-web-react.git"
   },
   "dependencies": {
-    "@material/fab": "^0.34.1",
+    "@material/fab": "^0.35.0",
     "@material/react-ripple": "^0.1.0",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.1",

diff --git a/packages/floating-label/package.json b/packages/floating-label/package.json
@@ -16,7 +16,7 @@
     "url": "https://github.com/material-components/material-components-web-react.git"
   },
   "dependencies": {
-    "@material/floating-label": "^0.34.0",
+    "@material/floating-label": "^0.35.0",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.1",
     "react": "^16.3.0"

diff --git a/packages/line-ripple/package.json b/packages/line-ripple/package.json
@@ -15,7 +15,7 @@
     "url": "https://github.com/material-components/material-components-web-react.git"
   },
   "dependencies": {
-    "@material/line-ripple": "^0.34.0",
+    "@material/line-ripple": "^0.35.0",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.1",
     "react": "^16.3.2"

diff --git a/packages/ripple/index.js b/packages/ripple/index.js
@@ -88,7 +88,9 @@ const withRipple = (WrappedComponent) => {
     activateRipple = (e) => {
       // https://reactjs.org/docs/events.html#event-pooling
       e.persist();
-      this.foundation_.activate(e);
+      requestAnimationFrame(() => {
+        this.foundation_.activate(e);
+      });
     }
 
     updateCssVariable = (varName, value) => {

diff --git a/packages/ripple/package.json b/packages/ripple/package.json
@@ -14,7 +14,7 @@
     "url": "https://github.com/material-components/material-components-web-react.git"
   },
   "dependencies": {
-    "@material/ripple": "^0.34.1",
+    "@material/ripple": "^0.35.0",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.1",
     "react": "^16.3.2"

diff --git a/packages/text-field/package.json b/packages/text-field/package.json
@@ -18,7 +18,7 @@
     "@material/react-floating-label": "^0.1.0",
     "@material/react-line-ripple": "^0.1.0",
     "@material/react-notched-outline": "^0.1.0",
-    "@material/textfield": "^0.34.1",
+    "@material/textfield": "^0.35.0",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.1",
     "react": "^16.3.2"

diff --git a/packages/top-app-bar/package.json b/packages/top-app-bar/package.json
@@ -11,7 +11,7 @@
     "topappbar"
   ],
   "dependencies": {
-    "@material/top-app-bar": "^0.34.1",
+    "@material/top-app-bar": "^0.35.0",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.1",
     "react": "^16.3.2"

diff --git a/test/screenshot/webpack-bundles.js b/test/screenshot/webpack-bundles.js
@@ -3,7 +3,7 @@ const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
 module.exports.bundle = function(testPath, outputPath) {
   return {
-    entry: './test/screenshot/' + testPath,
+    entry: ['babel-polyfill', `./test/screenshot/${testPath}`],
     output: {
       filename: outputPath + '.js',
     },

diff --git a/test/unit/ripple/index.test.js b/test/unit/ripple/index.test.js
@@ -39,13 +39,16 @@ test('classNames adds classes', () => {
 });
 
 test('mouseDown event triggers activateRipple', () => {
+  const mockRaf = createMockRaf();
   const mouseDownHandler = td.func();
   const wrapper = mount(<DivRipple onMouseDown={mouseDownHandler}/>);
   const foundation = wrapper.instance().foundation_;
   foundation.activate = td.func();
   wrapper.simulate('mouseDown');
+  mockRaf.flush();
   td.verify(foundation.activate(td.matchers.isA(Object)), {times: 1});
   td.verify(mouseDownHandler(td.matchers.isA(Object)), {times: 1});
+  mockRaf.restore();
 });
 
 test('mouseUp event does not trigger activateRipple', () => {
@@ -59,39 +62,51 @@ test('mouseUp event does not trigger activateRipple', () => {
 });
 
 test('touchStart event triggers activateRipple', () => {
+  const mockRaf = createMockRaf();
   const touchStartHandler = td.func();
   const wrapper = mount(<DivRipple onTouchStart={touchStartHandler}/>);
   const foundation = wrapper.instance().foundation_;
   foundation.activate = td.func();
   wrapper.simulate('touchStart');
+  mockRaf.flush();
   td.verify(foundation.activate(td.matchers.isA(Object)), {times: 1});
   td.verify(touchStartHandler(td.matchers.isA(Object)), {times: 1});
+  mockRaf.restore();
 });
 
 test('touchStart event triggers activateRipple with no onTouchStart handler', () => {
+  const mockRaf = createMockRaf();
   const wrapper = mount(<DivRipple />);
   const foundation = wrapper.instance().foundation_;
   foundation.activate = td.func();
   wrapper.simulate('touchStart');
+  mockRaf.flush();
   td.verify(foundation.activate(td.matchers.isA(Object)), {times: 1});
+  mockRaf.restore();
 });
 
 test('keyDown event triggers activateRipple', () => {
+  const mockRaf = createMockRaf();
   const keyDownHandler = td.func();
   const wrapper = mount(<DivRipple onKeyDown={keyDownHandler}/>);
   const foundation = wrapper.instance().foundation_;
   foundation.activate = td.func();
   wrapper.simulate('keyDown');
+  mockRaf.flush();
   td.verify(foundation.activate(td.matchers.isA(Object)), {times: 1});
   td.verify(keyDownHandler(td.matchers.isA(Object)), {times: 1});
+  mockRaf.restore();
 });
 
 test('keyDown event triggers activateRipple with no onKeyDown handler', () => {
+  const mockRaf = createMockRaf();
   const wrapper = mount(<DivRipple />);
   const foundation = wrapper.instance().foundation_;
   foundation.activate = td.func();
   wrapper.simulate('keyDown');
+  mockRaf.flush();
   td.verify(foundation.activate(td.matchers.isA(Object)), {times: 1});
+  mockRaf.restore();
 });
 
 test('#adapter.isUnbounded returns true is prop is set', () => {