Merge pull request mui#41 from material-next/tabs-fix-ssr

[Tabs] Fix SSR regression
oliviertassinari · Dec 3, 2017 · 545cfb8 · 545cfb8
2 parents 75db08c + 8a1b92f
commit 545cfb8
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git a/src/Tabs/TabIndicator.js b/src/Tabs/TabIndicator.js
@@ -23,8 +23,8 @@ export const styles = (theme: Object) => ({
 });
 
 export type IndicatorStyle = {
-  left: number,
-  width: number,
+  left?: number,
+  width?: number,
 };
 
 export type ProvidedProps = {

diff --git a/src/Tabs/Tabs.js b/src/Tabs/Tabs.js
@@ -161,10 +161,7 @@ class Tabs extends React.Component<ProvidedProps & Props, State> {
   };
 
   state = {
-    indicatorStyle: {
-      left: 0,
-      width: 0,
-    },
+    indicatorStyle: {},
     scrollerStyle: {
       marginBottom: 0,
     },

diff --git a/src/Tabs/Tabs.spec.js b/src/Tabs/Tabs.spec.js
@@ -4,6 +4,7 @@ import React from 'react';
 import { assert } from 'chai';
 import { spy, stub, useFakeTimers } from 'sinon';
 import scroll from 'scroll';
+import { ShallowWrapper } from 'enzyme';
 import { createShallow, createMount, getClasses, unwrap } from '../test-utils';
 import consoleErrorMock from '../../test/utils/consoleErrorMock';
 import Tabs from './Tabs';
@@ -162,6 +163,24 @@ describe('<Tabs />', () => {
         assert.strictEqual(wrapper2.find(TabIndicator).props().style.width, 0);
       });
 
+      it('should work server-side', () => {
+        const wrapper2 = shallow(
+          <Tabs width="md" onChange={noop} value={1}>
+            <Tab />
+            <Tab />
+          </Tabs>,
+          { disableLifecycleMethods: true },
+        );
+        const indicator = new ShallowWrapper(
+          wrapper2
+            .find(Tab)
+            .at(1)
+            .props().indicator,
+          wrapper2,
+        );
+        assert.deepEqual(indicator.props().style, {});
+      });
+
       it('should let the selected <Tab /> render the indicator', () => {
         const wrapper2 = shallow(
           <Tabs width="md" onChange={noop} value={1}>
@@ -246,7 +265,7 @@ describe('<Tabs />', () => {
           <Tab />
         </Tabs>,
       );
-      assert.strictEqual(consoleErrorMock.callCount(), 2);
+      assert.strictEqual(consoleErrorMock.callCount(), 3);
       assert.strictEqual(
         consoleErrorMock.args()[0][0],
         'Warning: Material-Next: the value provided `2` is invalid',