Update total to reflect number of children (#3367) (#3369)

app/components/__snapshots__/swiper.test.js.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Swiper should match snapshot 1`] = `
+<View
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {
+        "backgroundColor": "transparent",
+        "flex": 1,
+        "position": "relative",
+      },
+    ]
+  }
+>
+  <ScrollViewMock
+    automaticallyAdjustContentInsets={true}
+    bounces={false}
+    contentContainerStyle={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+        },
+        undefined,
+      ]
+    }
+    horizontal={true}
+    keyboardShouldPersistTaps="handled"
+    onMomentumScrollEnd={[Function]}
+    onScrollBeginDrag={[Function]}
+    pagingEnabled={true}
+    removeClippedSubviews={true}
+    scrollEnabled={true}
+    showsHorizontalScrollIndicator={false}
+    showsVerticalScrollIndicator={false}
+  />
+</View>
+`;

app/components/sidebars/main/main_sidebar.js

@@ -24,7 +24,7 @@ import tracker from 'app/utils/time_tracker';
 import {t} from 'app/utils/i18n';
 
 import ChannelsList from './channels_list';
-import DrawerSwiper from './drawer_swipper';
+import DrawerSwiper from './drawer_swiper';
 import TeamsList from './teams_list';
 
 import telemetry from 'app/telemetry';

app/components/swiper.js

@@ -52,10 +52,12 @@ export default class Swiper extends PureComponent {
         this.state = this.initialState(props);
     }
 
-    componentWillReceiveProps(nextProps) {
-        if (this.props.width !== nextProps.width) {
-            this.scrollByWidth(nextProps.width);
+    static getDerivedStateFromProps(props, state) {
+        const total = React.Children.count(props.children);
+        if (total !== state.total) {
+            return {total};
         }
+        return null;
     }
 
     componentDidUpdate(prevProps, prevState) {
@@ -63,6 +65,10 @@ export default class Swiper extends PureComponent {
         if (this.state.index !== prevState.index) {
             this.props.onIndexChanged(this.state.index);
         }
+
+        if (this.props.width !== prevProps.width) {
+            this.scrollByWidth(this.props.width);
+        }
     }
 
     initialState = (props) => {

app/components/swiper.test.js

@@ -0,0 +1,67 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import Swiper from './swiper.js';
+
+describe('Swiper', () => {
+    const baseProps = {
+        children: [],
+    };
+
+    test('should match snapshot', async () => {
+        const wrapper = shallow(
+            <Swiper {...baseProps}/>,
+        );
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+
+    test('should not call scrollView.scrollTo and updateIndex when children < 2', () => {
+        const children = [];
+        while (children.length < 2) {
+            const props = {...baseProps, children};
+            const wrapper = shallow(
+                <Swiper {...props}/>,
+            );
+
+            const instance = wrapper.instance();
+            instance.updateIndex = jest.fn();
+            instance.refScrollView({
+                scrollTo: jest.fn(),
+            });
+
+            instance.scrollToIndex(1, false);
+            expect(instance.scrollView.scrollTo).not.toHaveBeenCalled();
+            expect(instance.updateIndex).not.toHaveBeenCalled();
+
+            children.push('test');
+        }
+
+        expect(children.length).toBe(2);
+    });
+
+    test('should call scrollView.scrollTo and updateIndex when children >= 2', () => {
+        const children = [1, 2, 3];
+        while (children.length >= 2) {
+            const props = {...baseProps, children};
+            const wrapper = shallow(
+                <Swiper {...props}/>,
+            );
+
+            const instance = wrapper.instance();
+            instance.updateIndex = jest.fn();
+            instance.refScrollView({
+                scrollTo: jest.fn(),
+            });
+
+            instance.scrollToIndex(1, false);
+            expect(instance.scrollView.scrollTo).toHaveBeenCalled();
+            expect(instance.updateIndex).toHaveBeenCalled();
+
+            children.pop();
+        }
+
+        expect(children.length).toBe(1);
+    });
+});

packager/moduleNames.js

@@ -153,8 +153,8 @@ module.exports = [
     'app/components/sidebars/main/channels_list/list/list.js',
     'app/components/sidebars/main/channels_list/switch_teams_button/index.js',
     'app/components/sidebars/main/channels_list/switch_teams_button/switch_teams_button.js',
-    'app/components/sidebars/main/drawer_swipper/drawer_swiper.js',
-    'app/components/sidebars/main/drawer_swipper/index.js',
+    'app/components/sidebars/main/drawer_swiper/drawer_swiper.js',
+    'app/components/sidebars/main/drawer_swiper/index.js',
     'app/components/sidebars/main/index.js',
     'app/components/sidebars/main/main_sidebar.js',
     'app/components/sidebars/main/teams_list/index.js',