From 5979cf6b43cf7533328399bdccbcd17195d04cc0 Mon Sep 17 00:00:00 2001 From: Elias Nahum Date: Tue, 20 Oct 2020 08:58:35 -0300 Subject: [PATCH] MM-28688 Close sidebar when current channel is selected (#4897) (#4906) * MM-28688 Close sidebar when current channel is selected * Update snapshot * Apply suggestions from code review Co-authored-by: Joseph Baylon * Fix iOS select_channel e2e and feedback review Co-authored-by: Joseph Baylon Co-authored-by: Joseph Baylon --- .../main/drawer_swiper/drawer_swiper.js | 3 ++ .../sidebars/main/main_sidebar_base.js | 11 ++-- app/components/swiper.js | 3 ++ .../__snapshots__/channel_title.test.js.snap | 4 ++ .../channel_title/channel_title.js | 1 + detox/e2e/support/utils.js | 4 +- detox/e2e/test/autocomplete/at_mention.e2e.js | 7 ++- .../test/main_sidebar/select_channel.e2e.js | 52 +++++++++++++++++++ detox/e2e/test/smoke_test/login_email.e2e.js | 5 ++ 9 files changed, 81 insertions(+), 9 deletions(-) create mode 100644 detox/e2e/test/main_sidebar/select_channel.e2e.js diff --git a/app/components/sidebars/main/drawer_swiper/drawer_swiper.js b/app/components/sidebars/main/drawer_swiper/drawer_swiper.js index 67c8a93c8..4be4a0b41 100644 --- a/app/components/sidebars/main/drawer_swiper/drawer_swiper.js +++ b/app/components/sidebars/main/drawer_swiper/drawer_swiper.js @@ -14,6 +14,7 @@ export default class DrawerSwiper extends Component { drawerWidth: PropTypes.number.isRequired, onPageSelected: PropTypes.func, showTeams: PropTypes.bool.isRequired, + testID: PropTypes.string, theme: PropTypes.object.isRequired, }; @@ -70,6 +71,7 @@ export default class DrawerSwiper extends Component { children, drawerWidth, showTeams, + testID, theme, } = this.props; @@ -88,6 +90,7 @@ export default class DrawerSwiper extends Component { scrollEnabled={showTeams} showsPagination={showTeams} keyboardShouldPersistTaps={'always'} + testID={testID} > {children} diff --git a/app/components/sidebars/main/main_sidebar_base.js b/app/components/sidebars/main/main_sidebar_base.js index ab95f0669..01914d9e3 100644 --- a/app/components/sidebars/main/main_sidebar_base.js +++ b/app/components/sidebars/main/main_sidebar_base.js @@ -256,6 +256,7 @@ export default class MainSidebarBase extends Component { showTeams={showTeams} drawerOpened={this.state.drawerOpened} drawerWidth={drawerWidth - offset} + testID='main_sidebar' > {lists} @@ -266,6 +267,11 @@ export default class MainSidebarBase extends Component { selectChannel = (channel, currentChannelId, closeDrawer = true) => { const {logChannelSwitch, handleSelectChannel} = this.props.actions; + if (closeDrawer) { + telemetry.start(['channel:close_drawer']); + this.closeMainSidebar(); + } + if (channel.id === currentChannelId) { return; } @@ -274,11 +280,6 @@ export default class MainSidebarBase extends Component { tracker.channelSwitch = Date.now(); - if (closeDrawer) { - telemetry.start(['channel:close_drawer']); - this.closeMainSidebar(); - } - if (!channel) { const utils = require('app/utils/general'); const intl = this.getIntl(); diff --git a/app/components/swiper.js b/app/components/swiper.js index 642630974..57cef0d5a 100644 --- a/app/components/swiper.js +++ b/app/components/swiper.js @@ -32,6 +32,7 @@ export default class Swiper extends PureComponent { ]), width: PropTypes.number, onScrollBegin: PropTypes.func, + testID: PropTypes.string, }; static defaultProps = { @@ -251,6 +252,7 @@ export default class Swiper extends PureComponent { render() { const { children, + testID, width, } = this.props; @@ -270,6 +272,7 @@ export default class Swiper extends PureComponent { {this.renderScrollView(pages)} {this.renderPagination()} diff --git a/app/screens/channel/channel_nav_bar/channel_title/__snapshots__/channel_title.test.js.snap b/app/screens/channel/channel_nav_bar/channel_title/__snapshots__/channel_title.test.js.snap index a27a2e966..2bd060ae7 100644 --- a/app/screens/channel/channel_nav_bar/channel_title/__snapshots__/channel_title.test.js.snap +++ b/app/screens/channel/channel_nav_bar/channel_title/__snapshots__/channel_title.test.js.snap @@ -32,6 +32,7 @@ exports[`ChannelTitle should match snapshot 1`] = ` "textAlign": "center", } } + testID="channel.nav_bar.title" > My Channel @@ -81,6 +82,7 @@ exports[`ChannelTitle should match snapshot when is DM and has guests and the te "textAlign": "center", } } + testID="channel.nav_bar.title" > Other user @@ -155,6 +157,7 @@ exports[`ChannelTitle should match snapshot when is DM and has guests but the te "textAlign": "center", } } + testID="channel.nav_bar.title" > Other user @@ -204,6 +207,7 @@ exports[`ChannelTitle should match snapshot when isSelfDMChannel is true 1`] = ` "textAlign": "center", } } + testID="channel.nav_bar.title" > {channelDisplayName} diff --git a/detox/e2e/support/utils.js b/detox/e2e/support/utils.js index 5fd84f735..4218a0f6f 100644 --- a/detox/e2e/support/utils.js +++ b/detox/e2e/support/utils.js @@ -12,11 +12,11 @@ export const wait = async (ms) => { }; export const isAndroid = () => { - return !process.env.IOS; + return device.getPlatform() === 'android'; }; export const isIos = () => { - return process.env.IOS; + return device.getPlatform() === 'ios'; }; /** diff --git a/detox/e2e/test/autocomplete/at_mention.e2e.js b/detox/e2e/test/autocomplete/at_mention.e2e.js index 9f7582782..584261809 100644 --- a/detox/e2e/test/autocomplete/at_mention.e2e.js +++ b/detox/e2e/test/autocomplete/at_mention.e2e.js @@ -7,8 +7,7 @@ // - Use element testID when selecting an element. Create one if none. // ******************************************************************* -import {toChannelScreen} from '@support/ui/screen'; - +import {logoutUser, toChannelScreen} from '@support/ui/screen'; import {Setup} from '@support/server_api'; describe('Autocomplete', () => { @@ -29,6 +28,10 @@ describe('Autocomplete', () => { await postInput.tap(); }); + afterAll(async () => { + await logoutUser(); + }); + it('MM-T3409_1 should suggest user based on username', async () => { // # Type "@" to activate at mention autocomplete await expect(element(by.id('autocomplete.at_mention.list'))).not.toExist(); diff --git a/detox/e2e/test/main_sidebar/select_channel.e2e.js b/detox/e2e/test/main_sidebar/select_channel.e2e.js new file mode 100644 index 000000000..729e806a4 --- /dev/null +++ b/detox/e2e/test/main_sidebar/select_channel.e2e.js @@ -0,0 +1,52 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +// ******************************************************************* +// - [#] indicates a test step (e.g. # Go to a screen) +// - [*] indicates an assertion (e.g. * Check the title) +// - Use element testID when selecting an element. Create one if none. +// ******************************************************************* + +import {logoutUser, toChannelScreen} from '@support/ui/screen'; +import {isAndroid} from '@support/utils'; +import {Setup} from '@support/server_api'; + +describe('Select channel', () => { + let newChannel; + + beforeAll(async () => { + const {user, channel} = await Setup.apiInit(); + newChannel = channel; + + await toChannelScreen(user); + }); + + afterAll(async () => { + await logoutUser(); + }); + + it('MM-T3412 should close the sidebar menu when selecting the same channel', async () => { + // # Open channel drawer (with at least one unread channel) + await element(by.id('channel_drawer.button')).tap(); + + // * Main sidebar should be visible + await expect(element(by.id('main_sidebar'))).toBeVisible(); + + // # Tap a channel to view it + await element(by.text(newChannel.display_name).withAncestor(by.id('channels_list'))).tap(); + + // * Selected channel should be visible + await expect(element(by.id('channel.nav_bar.title'))).toHaveText(newChannel.display_name); + + // # Open channel drawer again and select the same channel + await element(by.id('channel_drawer.button')).tap(); + await element(by.text(newChannel.display_name).withAncestor(by.id('channels_list'))).tap(); + + // * Selected channel should remain the same + if (isAndroid()) { + // * drawer should not be visible on Android + await expect(element(by.id('main_sidebar'))).not.toBeVisible(); + } + await expect(element(by.id('channel.nav_bar.title'))).toHaveText(newChannel.display_name); + }); +}); diff --git a/detox/e2e/test/smoke_test/login_email.e2e.js b/detox/e2e/test/smoke_test/login_email.e2e.js index c39bad0f9..935b7b8db 100644 --- a/detox/e2e/test/smoke_test/login_email.e2e.js +++ b/detox/e2e/test/smoke_test/login_email.e2e.js @@ -2,9 +2,14 @@ // See LICENSE.txt for license information. import {Setup} from '@support/server_api'; +import {logoutUser} from '@support/ui/screen'; import {serverUrl} from '@support/test_config'; describe('Smoke Tests', () => { + afterAll(async () => { + await logoutUser(); + }); + it('MM-T3179 Log in - Email / password', async () => { const {user} = await Setup.apiInit();