From 9d28eb043c9fd04e85f2d821d1889ed71ba0451b Mon Sep 17 00:00:00 2001 From: Miguel Alatzar Date: Fri, 4 Oct 2019 15:20:37 -0700 Subject: [PATCH] Update total to reflect number of children (#3367) (#3369) --- .../__snapshots__/swiper.test.js.snap | 38 +++++++++++ .../drawer_swiper.js | 0 .../index.js | 0 app/components/sidebars/main/main_sidebar.js | 2 +- app/components/swiper.js | 12 +++- app/components/swiper.test.js | 67 +++++++++++++++++++ packager/moduleNames.js | 4 +- 7 files changed, 117 insertions(+), 6 deletions(-) create mode 100644 app/components/__snapshots__/swiper.test.js.snap rename app/components/sidebars/main/{drawer_swipper => drawer_swiper}/drawer_swiper.js (100%) rename app/components/sidebars/main/{drawer_swipper => drawer_swiper}/index.js (100%) create mode 100644 app/components/swiper.test.js 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',