Commit 0aab376d authored by Saturnino Abril's avatar Saturnino Abril Committed by Sudheer

add E2E to hide/show channel switcher button in LHS (#2058)

parent b6196ad2
......@@ -6,6 +6,7 @@ exports[`components/SettingItemMin should match snapshot 1`] = `
>
<li
className="col-sm-12 section-title"
id="settingTitle"
>
title
</li>
......@@ -56,6 +57,7 @@ exports[`components/SettingItemMin should match snapshot, on clientError 1`] = `
>
<li
className="col-sm-12 section-title"
id="settingTitle"
>
title
</li>
......@@ -116,6 +118,7 @@ exports[`components/SettingItemMin should match snapshot, on serverError 1`] = `
>
<li
className="col-sm-12 section-title"
id="settingTitle"
>
title
</li>
......@@ -176,6 +179,7 @@ exports[`components/SettingItemMin should match snapshot, with new saveTextButto
>
<li
className="col-sm-12 section-title"
id="settingTitle"
>
title
</li>
......@@ -226,6 +230,7 @@ exports[`components/SettingItemMin should match snapshot, without submit 1`] = `
>
<li
className="col-sm-12 section-title"
id="settingTitle"
>
title
</li>
......
......@@ -203,7 +203,14 @@ export default class SettingItemMax extends React.PureComponent {
let title;
if (this.props.title) {
title = <li className='col-sm-12 section-title'>{this.props.title}</li>;
title = (
<li
id='settingTitle'
className='col-sm-12 section-title'
>
{this.props.title}
</li>
);
}
let listContent = (
......
......@@ -122,6 +122,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
>
<li
className="col-sm-12 section-title"
id="settingTitle"
>
Email notifications
</li>
......@@ -486,6 +487,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
>
<li
className="col-sm-12 section-title"
id="settingTitle"
>
Email notifications
</li>
......
......@@ -89,6 +89,7 @@ exports[`components/user_settings/notifications/ManageAutoResponder should match
>
<li
className="col-sm-12 section-title"
id="settingTitle"
>
<FormattedMessage
defaultMessage="Automatic Direct Message Replies"
......@@ -308,6 +309,7 @@ exports[`components/user_settings/notifications/ManageAutoResponder should match
>
<li
className="col-sm-12 section-title"
id="settingTitle"
>
<FormattedMessage
defaultMessage="Automatic Direct Message Replies"
......
......@@ -40,6 +40,7 @@ exports[`components/user_settings/sidebar/UserSettingsSidebar should match snaps
</div>
<div
className="user-settings"
id="sidebarTitle"
>
<h3
className="tab-header"
......
......@@ -616,7 +616,10 @@ export default class UserSettingsSidebar extends React.Component {
}
inputs={[
<div key='channelSwitcherSectionSetting'>
<div className='radio'>
<div
id='channelSwitcherRadioOn'
className='radio'
>
<label>
<input
id='channelSwitcherSectionEnabled'
......@@ -632,7 +635,10 @@ export default class UserSettingsSidebar extends React.Component {
</label>
<br/>
</div>
<div className='radio'>
<div
id='channelSwitcherRadioOff'
className='radio'
>
<label>
<input
id='channelSwitcherSectionOff'
......@@ -648,7 +654,7 @@ export default class UserSettingsSidebar extends React.Component {
</label>
<br/>
</div>
<div>
<div id='channelSwitcherHelpText'>
<br/>
{helpChannelSwitcherText}
</div>
......@@ -715,7 +721,10 @@ export default class UserSettingsSidebar extends React.Component {
/>
</h4>
</div>
<div className='user-settings'>
<div
id='sidebarTitle'
className='user-settings'
>
<h3 className='tab-header'>
<FormattedMessage
id='user.settings.sidebar.title'
......
......@@ -4,7 +4,7 @@
"password": "sysadmin",
"email": "sysadmin@sample.mattermost.com"
},
"user1": {
"user-1": {
"username": "user-1",
"password": "user-1",
"email": "user-1@sample.mattermost.com"
......
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
// ***************************************************************
// - [number] indicates a test step (e.g. 1. Go to a page)
// - [*] indicates an assertion (e.g. * Check the title)
// - Use element ID when selecting an element. Create one if none.
// ***************************************************************
describe('Account Settings > Sidebar > Channel Switcher', () => {
before(() => {
// 1. Go to Account Settings with "user-1"
cy.toAccountSettingsModal('user-1');
});
it('should render in min setting view', () => {
// * Check that the Sidebar tab is loaded
cy.get('#sidebarButton').should('be.visible');
// 2. Click the sidebar tab
cy.get('#sidebarButton').click();
// * Check that it changed into the Sidebar section
// * Check the min setting view if each element is present and contains expected text values
cy.get('#sidebarTitle').should('be.visible').should('contain', 'Sidebar Settings');
cy.get('#channelSwitcherTitle').should('be.visible').should('contain', 'Channel Switcher');
cy.get('#channelSwitcherDesc').should('be.visible').should('contain', 'On');
cy.get('#channelSwitcherEdit').should('be.visible').should('contain', 'Edit');
cy.get('#accountSettingsHeader > .close').should('be.visible');
});
it('should render in max setting view', () => {
// 3. Click "Edit" to the right of "Channel Switcher"
cy.get('#channelSwitcherEdit').click();
// * Check that it changed into the Sidebar section
// * Check the max setting view if each element is present and contains expected text values
cy.get('#sidebarTitle').should('be.visible').should('contain', 'Sidebar Settings');
cy.get('#settingTitle').should('be.visible').should('contain', 'Channel Switcher');
cy.get('#channelSwitcherRadioOn').should('be.visible').should('contain', 'On');
cy.get('#channelSwitcherSectionEnabled').should('be.visible');
cy.get('#channelSwitcherRadioOff').should('be.visible').should('contain', 'Off');
cy.get('#channelSwitcherSectionOff').should('be.visible');
cy.get('#channelSwitcherHelpText').should('be.visible').should('contain', 'The channel switcher is shown at the bottom of the sidebar and is used to jump between channels quickly. It can also be accessed using');
cy.get('#saveSetting').should('be.visible').should('contain', 'Save');
cy.get('#cancelSetting').should('be.visible').should('contain', 'Cancel');
cy.get('#accountSettingsHeader > .close').should('be.visible');
});
it('change channel setting to Off', () => {
// 4. Click the radio button for "Off"
cy.get('#channelSwitcherSectionOff').click();
// 5. Click "Save"
cy.get('#saveSetting').click();
// * Check that it changed into min setting view
// * Check if element is present and contains expected text values
cy.get('#channelSwitcherDesc').should('be.visible').should('contain', 'Off');
// 6. Click "x" button to close Account Settings modal
cy.get('#accountSettingsHeader > .close').click();
// * Channel Switcher button should disappear from the bottom of the left-hand-side bar
cy.get('#sidebarSwitcherButton').should('be.not.visible');
});
it('change channel setting to On', () => {
// 1. Return to Account Settings modal
cy.toAccountSettingsModal('user-1', true);
// * Check that the Sidebar tab is loaded
cy.get('#sidebarButton').should('be.visible');
// 2. Click the sidebar tab
cy.get('#sidebarButton').click();
// 3. Click "Edit" to the right of "Channel Switcher"
cy.get('#channelSwitcherEdit').click();
// 4. Click the radio button for "On"
cy.get('#channelSwitcherSectionEnabled').click();
// 5. Click "Save"
cy.get('#saveSetting').click();
// * Check that it changed into min setting view
// * Check if element is present and contains expected text values
cy.get('#channelSwitcherDesc').should('be.visible').should('contain', 'On');
// 6. Click "x" button to close Account Settings modal
cy.get('#accountSettingsHeader > .close').click();
// * Channel Switcher button should appear at the bottom of the left-hand-side bar
cy.get('#sidebarSwitcherButton').should('be.visible');
});
});
......@@ -7,11 +7,11 @@ import users from '../fixtures/users.json';
// Read more: https://on.cypress.io/custom-commands
// ***********************************************************
Cypress.Commands.add('login', (userType, {username, password, url}) => {
const user = users[userType];
const usernameParam = user && user.username ? user.username : username;
const passwordParam = user && user.password ? user.password : password;
const urlParam = url ? `${url}/api/v4/users/login` : '/api/v4/users/login';
Cypress.Commands.add('login', (username, {otherUsername, otherPassword, otherURL} = {}) => {
const user = users[username];
const usernameParam = user && user.username ? user.username : otherUsername;
const passwordParam = user && user.password ? user.password : otherPassword;
const urlParam = otherURL ? `${otherURL}/api/v4/users/login` : '/api/v4/users/login';
cy.request({
url: urlParam,
......@@ -20,3 +20,14 @@ Cypress.Commands.add('login', (userType, {username, password, url}) => {
});
});
Cypress.Commands.add('toAccountSettingsModal', (username, isLoggedInAlready = false, {otherUsername, otherPassword, otherURL} = {}) => {
if (!isLoggedInAlready) {
cy.login('user-1', {otherUsername, otherPassword, otherURL});
cy.visit('/');
}
cy.get('#channel_view').should('be.visible');
cy.get('#sidebarHeaderDropdownButton').should('be.visible').click();
cy.get('#accountSettings').should('be.visible').click();
cy.get('#accountSettingsModal').should('be.visible');
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment