MM-28688 Close sidebar when current channel is selected (#4897)

* MM-28688 Close sidebar when current channel is selected

* Update snapshot

* Apply suggestions from code review

Co-authored-by: Joseph Baylon <joseph.baylon@mattermost.com>

* Fix iOS select_channel e2e and feedback review

Co-authored-by: Joseph Baylon <joseph.baylon@mattermost.com>
This commit is contained in:
Elias Nahum
2020-10-20 00:32:34 -03:00
committed by GitHub
parent d8792fbdf0
commit 8c8f93b589
11 changed files with 91 additions and 10 deletions

View File

@@ -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}
</Swiper>

View File

@@ -256,6 +256,7 @@ export default class MainSidebarBase extends Component {
showTeams={showTeams}
drawerOpened={this.state.drawerOpened}
drawerWidth={drawerWidth - offset}
testID='main_sidebar'
>
{lists}
</DrawerSwiper>
@@ -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();

View File

@@ -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 {
<View
style={[styles.container]}
onLayout={this.onLayout}
testID={testID}
>
{this.renderScrollView(pages)}
{this.renderPagination()}

View File

@@ -33,6 +33,7 @@ exports[`ChannelTitle should match snapshot 1`] = `
"textAlign": "center",
}
}
testID="channel.nav_bar.title"
>
My Channel
</Text>
@@ -83,6 +84,7 @@ exports[`ChannelTitle should match snapshot when is DM and has guests and the te
"textAlign": "center",
}
}
testID="channel.nav_bar.title"
>
Other user
</Text>
@@ -158,6 +160,7 @@ exports[`ChannelTitle should match snapshot when is DM and has guests but the te
"textAlign": "center",
}
}
testID="channel.nav_bar.title"
>
Other user
</Text>
@@ -208,6 +211,7 @@ exports[`ChannelTitle should match snapshot when isSelfDMChannel is true 1`] = `
"textAlign": "center",
}
}
testID="channel.nav_bar.title"
>
<FormattedText
defaultMessage="{displayname} (you)"

View File

@@ -162,6 +162,7 @@ export default class ChannelTitle extends PureComponent {
ellipsizeMode='tail'
numberOfLines={1}
style={style.text}
testID='channel.nav_bar.title'
>
{channelDisplayName}
</Text>

View File

@@ -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';
};
/**

View File

@@ -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();

View File

@@ -7,7 +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 jestExpect from 'expect';
import {Setup} from '@support/server_api';
@@ -19,6 +19,10 @@ describe('Channels', () => {
await toChannelScreen(user);
});
afterAll(async () => {
await logoutUser();
});
it('MM-T3201 Create public channel', async () => {
// # Go to channel sidebar list
await element(by.id('channel_drawer.button')).tap();

View File

@@ -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);
});
});

View File

@@ -8,9 +8,14 @@
// *******************************************************************
import {Setup, System} 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 {config} = await System.apiGetConfig();
const {user} = await Setup.apiInit();

View File

@@ -8,6 +8,7 @@
// *******************************************************************
import {Ldap, Setup, System, Team, User} from '@support/server_api';
import {logoutUser} from '@support/ui/screen';
import {serverUrl} from '@support/test_config';
import ldapUsers from '@support/fixtures/ldap_users.json';
@@ -28,6 +29,10 @@ describe('Smoke Tests', () => {
await ensureUserHasTeam(testOne);
});
afterAll(async () => {
await logoutUser();
});
it('MM-T3180 Log in - LDAP', async () => {
// * Verify that it starts with the Select Server screen
await expect(element(by.id('select_server_screen'))).toBeVisible();