Tabs pointer not being updated (#1224) (#1325)

* Fixes #1224

* add jest setup file to mock requestAnimationFrame

* fix duplicated jest config

components/tabs/Tabs.js

@@ -51,8 +51,13 @@ const factory = (Tab, TabContent, FontIcon) => {
       this.handleResize();
     }
 
-    componentWillReceiveProps(nextProps) {
-      this.updatePointer(nextProps.index);
+    componentDidUpdate(prevProps) {
+      const { index, children } = this.props;
+      const { index: prevIndex, children: prevChildren } = prevProps;
+
+      if (index !== prevIndex || children !== prevChildren) {
+        this.updatePointer(index);
+      }
     }
 
     componentWillUnmount() {
@@ -76,15 +81,17 @@ const factory = (Tab, TabContent, FontIcon) => {
 
     updatePointer = (idx) => {
       if (this.navigationNode && this.navigationNode.children[idx]) {
-        const nav = this.navigationNode.getBoundingClientRect();
-        const label = this.navigationNode.children[idx].getBoundingClientRect();
-        const scrollLeft = this.navigationNode.scrollLeft;
-        this.setState({
-          pointer: {
-            top: `${nav.height}px`,
-            left: `${label.left - (nav.left + scrollLeft)}px`,
-            width: `${label.width}px`,
-          },
+        requestAnimationFrame(() => {
+          const nav = this.navigationNode.getBoundingClientRect();
+          const label = this.navigationNode.children[idx].getBoundingClientRect();
+          const scrollLeft = this.navigationNode.scrollLeft;
+          this.setState({
+            pointer: {
+              top: `${nav.height}px`,
+              left: `${(label.left + scrollLeft) - nav.left}px`,
+              width: `${label.width}px`,
+            },
+          });
         });
       }
     }

jest.config.js

@@ -0,0 +1 @@
+Object.defineProperty(window, 'requestAnimationFrame', { value: fn => fn() });

package.json

@@ -112,14 +112,17 @@
   },
   "license": "MIT",
   "jest": {
+    "modulePaths": [
+      "<rootDir>"
+    ],
     "moduleDirectories": [
       "node_modules"
     ],
     "moduleNameMapper": {
       "(\\.css$)|(normalize.css/normalize)|(^exports-loader)": "identity-obj-proxy"
     },
-    "modulePaths": [
-      "<rootDir>"
+    "setupFiles": [
+      "./jest.config.js"
     ],
     "snapshotSerializers": [
       "enzyme-to-json/serializer"