fix(line-ripple): stop calling foundation.setRippleCenter when argume…

…nt is NaN (#287)

package.json

@@ -19,7 +19,7 @@
     "test:unit": "npm run clean && NODE_ENV=test karma start karma.local.js --single-run",
     "test:unit-ci": "karma start karma.ci.js --single-run",
     "test:image-diff": "MDC_COMMIT_HASH=$(git rev-parse --short HEAD) MDC_BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD) mocha --compilers js:babel-core/register --ui tdd --timeout 10000 test/screenshot/diff-suite.js",
-    "test:screenshots": "docker run -it --rm --cap-add=SYS_ADMIN -e MDC_GCLOUD_SERVICE_ACCOUNT_KEY=\"${MDC_GCLOUD_SERVICE_ACCOUNT_KEY}\" mdcreact/screenshots /bin/sh -c 'git checkout master; git pull; npm i; /home/pptruser/material-components-web-react/test/screenshot/start.sh; sleep 200s; npm run test:image-diff'",
+    "test:screenshots": "docker run -it --rm --cap-add=SYS_ADMIN -e MDC_GCLOUD_SERVICE_ACCOUNT_KEY=\"${MDC_GCLOUD_SERVICE_ACCOUNT_KEY}\" mdcreact/screenshots /bin/sh -c 'git checkout master; git pull; npm i; /home/pptruser/material-components-web-react/test/screenshot/start.sh; sleep 30s; npm run test:image-diff'",
     "upload:screenshots": "node ./test/screenshot/upload-screenshots.js"
   },
   "config": {

packages/line-ripple/index.js

@@ -50,7 +50,10 @@ export default class LineRipple extends Component {
         this.foundation_.deactivate();
       }
     }
-    if (this.props.rippleCenter !== prevProps.rippleCenter) {
+    // isNaN checks are a temporary fix until MDC Web has fix
+    // https://github.com/material-components/material-components-web-react/issues/275
+    // https://github.com/material-components/material-components-web/issues/3643
+    if (this.props.rippleCenter !== prevProps.rippleCenter && !isNaN(this.props.rippleCenter)) {
       this.foundation_.setRippleCenter(this.props.rippleCenter);
     }
   }

test/screenshot/text-field/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import TextField, {Input, HelperText} from '../../../packages/text-field';
+import TextField, {Input, HelperText} from '../../../packages/text-field/index';
 import MaterialIcon from '../../../packages/material-icon/index';
 
 import '../../../packages/floating-label/index.scss';

test/unit/line-ripple/index.test.js

@@ -54,6 +54,13 @@ test('#componentDidUpdate when rippleCenter updates it calls ' +
   td.verify(wrapper.instance().foundation_.setRippleCenter(10), {times: 1});
 });
 
+test('does not call #foundation.setRippleCenter when props.rippleCenter is NaN', () => {
+  const wrapper = shallow(<LineRipple />);
+  wrapper.instance().foundation_.setRippleCenter = td.func();
+  wrapper.setProps({rippleCenter: NaN});
+  td.verify(wrapper.instance().foundation_.setRippleCenter(td.matchers.anything()), {times: 0});
+});
+
 test('#adapter.addClass updates state.classList', () => {
   const wrapper = shallow(<LineRipple />);
   wrapper.instance().foundation_.adapter_.addClass('test-color-class');