diff --git a/app/components/__snapshots__/swiper.test.js.snap b/app/components/__snapshots__/swiper.test.js.snap
new file mode 100644
index 000000000..cc5bad0f4
--- /dev/null
+++ b/app/components/__snapshots__/swiper.test.js.snap
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Swiper should match snapshot 1`] = `
+
+
+
+`;
diff --git a/app/components/sidebars/main/drawer_swipper/drawer_swiper.js b/app/components/sidebars/main/drawer_swiper/drawer_swiper.js
similarity index 100%
rename from app/components/sidebars/main/drawer_swipper/drawer_swiper.js
rename to app/components/sidebars/main/drawer_swiper/drawer_swiper.js
diff --git a/app/components/sidebars/main/drawer_swipper/index.js b/app/components/sidebars/main/drawer_swiper/index.js
similarity index 100%
rename from app/components/sidebars/main/drawer_swipper/index.js
rename to app/components/sidebars/main/drawer_swiper/index.js
diff --git a/app/components/sidebars/main/main_sidebar.js b/app/components/sidebars/main/main_sidebar.js
index 47fb4c493..58ae8d77a 100644
--- a/app/components/sidebars/main/main_sidebar.js
+++ b/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';
diff --git a/app/components/swiper.js b/app/components/swiper.js
index 22dbcdfb9..642630974 100644
--- a/app/components/swiper.js
+++ b/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) => {
diff --git a/app/components/swiper.test.js b/app/components/swiper.test.js
new file mode 100644
index 000000000..0e44baa9b
--- /dev/null
+++ b/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(
+ ,
+ );
+ 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(
+ ,
+ );
+
+ 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(
+ ,
+ );
+
+ 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);
+ });
+});
diff --git a/packager/moduleNames.js b/packager/moduleNames.js
index aa799b51d..9a92fb941 100644
--- a/packager/moduleNames.js
+++ b/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',