Skip to content

Commit

Permalink
update writing test step guide for E2E (mattermost#2829)
Browse files Browse the repository at this point in the history
  • Loading branch information
@saturninoabril @sudheerDev
saturninoabril authored and sudheerDev committed May 24, 2019
1 parent 804e13c commit 5feffaa
Show file tree
Hide file tree
Showing 35 changed files with 224 additions and 224 deletions.
38 changes: 19 additions & 19 deletions cypress/integration/account_settings/display/channel_display_mode_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// See LICENSE.txt for license information.

// ***************************************************************
// - [number] indicates a test step (e.g. 1. Go to a page)
// - [#] 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.
// ***************************************************************
Expand All @@ -11,7 +11,7 @@ describe('Account Settings > Display > Channel Display Mode', () => {
before(() => {
cy.apiLogin('user-1');

// 1. Set default preference of a user on channel and message display
// # Set default preference of a user on channel and message display
cy.apiSaveChannelDisplayModePreference('centered');
cy.apiSaveMessageDisplayPreference();

Expand All @@ -25,19 +25,19 @@ describe('Account Settings > Display > Channel Display Mode', () => {
});

it('should render in min setting view', () => {
// 1. Go to Account Settings with "user-1"
// # Go to Account Settings with "user-1"
cy.toAccountSettingsModal('user-1');

// * Check that the Display tab is loaded
cy.get('#displayButton').should('be.visible');

// 2. Click the Display tab
// # Click the Display tab
cy.get('#displayButton').click();

// * Check that it changed into the Display section
cy.get('#displaySettingsTitle').should('be.visible').should('contain', 'Display Settings');

// 3. Scroll up to bring Channel Display setting in viewable area.
// # Scroll up to bring Channel Display setting in viewable area.
cy.get('#channel_display_modeTitle').scrollIntoView();

// * Check the min setting view if each element is present and contains expected text values
Expand All @@ -48,10 +48,10 @@ describe('Account Settings > Display > Channel Display Mode', () => {
});

it('should render in max setting view', () => {
// 3. Click "Edit" to the right of "Channel Display"
// # Click "Edit" to the right of "Channel Display"
cy.get('#channel_display_modeEdit').click();

// 4. Scroll a bit to show the "Save" button
// # Scroll a bit to show the "Save" button
cy.get('.section-max').scrollIntoView();

// * Check that it changed into the Channel Display section
Expand All @@ -64,20 +64,20 @@ describe('Account Settings > Display > Channel Display Mode', () => {
});

it('change channel display mode setting to "Full width"', () => {
// 5. Click the radio button for "Full width"
// # Click the radio button for "Full width"
cy.get('#channel_display_modeFormatA').click();

// 6. Click "Save"
// # 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('#channel_display_modeDesc').should('be.visible').should('contain', 'Full width');

// 7. Click "x" button to close Account Settings modal
// # Click "x" button to close Account Settings modal
cy.get('#accountSettingsHeader > .close').click();

// 8. Go to channel which has any posts
// # Go to channel which has any posts
cy.get('#sidebarItem_town-square').click();

// * Validate if the post content in center channel is full width
Expand All @@ -86,35 +86,35 @@ describe('Account Settings > Display > Channel Display Mode', () => {
});

it('AS13225 Channel display mode setting to "Fixed width, centered"', () => {
// 1. Return to Account Settings modal
// # Return to Account Settings modal
cy.toAccountSettingsModal('user-1', true);

// * Check that the Sidebar tab is loaded
cy.get('#displayButton').should('be.visible');

// 2. Click the display tab
// # Click the display tab
cy.get('#displayButton').click();

// 3. Click "Edit" to the right of "Channel Display"
// # Click "Edit" to the right of "Channel Display"
cy.get('#channel_display_modeEdit').click();

// 4. Scroll a bit to show the "Save" button
// # Scroll a bit to show the "Save" button
cy.get('.section-max').scrollIntoView();

// 5. Click the radio button for "Fixed width, centered"
// # Click the radio button for "Fixed width, centered"
cy.get('#channel_display_modeFormatB').click();

// 6. Click "Save"
// # 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('#channel_display_modeDesc').should('be.visible').should('contain', 'Fixed width');

// 7. Click "x" button to close Account Settings modal
// # Click "x" button to close Account Settings modal
cy.get('#accountSettingsHeader > .close').click();

// 8. Go to channel which has any posts
// # Go to channel which has any posts
cy.get('#sidebarItem_town-square').click();

// * Validate if the post content in center channel is fixed and centered
Expand Down
24 changes: 12 additions & 12 deletions cypress/integration/account_settings/display/code_theme_colors_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// See LICENSE.txt for license information.

// ***************************************************************
// - [number] indicates a test step (e.g. 1. Go to a page)
// - [#] 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.
// ***************************************************************
Expand Down Expand Up @@ -40,54 +40,54 @@ function navigateToThemeSettings() {

describe('AS14319 Theme Colors - Code', () => {
before(() => {
// 1. Login and navigate to the app
// # Login and navigate to the app
cy.apiLogin('user-1');
cy.visit('/');

// 2. Enter in code block for message
// # Enter in code block for message
cy.get('#post_textbox').type('```\ncode\n```{enter}');
});

// reset settings to default mattermost theme
after(() => {
navigateToThemeSettings();

// 1. Select the Theme Colors radio
// # Select the Theme Colors radio
cy.get('#standardThemes').check().should('be.checked');

// 2. Select the Mattermost pre-made theme
// # Select the Mattermost pre-made theme
cy.get('#premadeThemeMattermost').first().click();

// 3. Save and close settings modal
// # Save and close settings modal
cy.get('#saveSetting').click();
cy.get('#accountSettingsHeader > .close').click();
});

THEMES.forEach((THEME) => {
it(`${THEME.name} theme renders correctly`, () => {
// 1. Navigate to the theme settings
// # Navigate to the theme settings
navigateToThemeSettings();

// 2. Check Custom Themes
// # Check Custom Themes
cy.get('#customThemes').check().should('be.checked');

// 3. Open Center Channel Styles section
// # Open Center Channel Styles section
cy.get('#centerChannelStyles').click();

// 4. Select custom code theme
// # Select custom code theme
cy.get('#codeThemeSelect').scrollIntoView().should('be.visible').select(THEME.name);

// * Verify that the setting changes in the background?
verifyLastPostStyle(THEME);

// 5. Save and close settings modal
// # Save and close settings modal
cy.get('#saveSetting').click();
cy.get('#accountSettingsHeader > .close').click();

// * Verify that the styles remain after saving and closing modal
verifyLastPostStyle(THEME);

// 6. Reload the browser
// # Reload the browser
cy.reload();

// * Verify the styles are still intact
Expand Down
16 changes: 8 additions & 8 deletions cypress/integration/account_settings/display/message_display_mode_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// See LICENSE.txt for license information.

// ***************************************************************
// - [number] indicates a test step (e.g. 1. Go to a page)
// - [#] 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.
// ***************************************************************
Expand All @@ -11,7 +11,7 @@

describe('Account Settings > Display > Message Display', () => {
before(() => {
// 1. Change message display setting to compact
// # Change message display setting to compact
cy.changeMessageDisplaySetting('COMPACT');
});

Expand All @@ -21,29 +21,29 @@ describe('Account Settings > Display > Message Display', () => {
});

it('M14283 Compact view: Line breaks remain intact after editing', () => {
// 2. Enter in text
// # Enter in text
cy.get('#post_textbox').
type('First line').
type('{shift}{enter}{enter}').
type('Text after{enter}');

// 3. Get last postId
// # Get last postId
cy.getLastPostId().then((postId) => {
const postMessageTextId = `#postMessageText_${postId}`;

// * Verify HTML still includes new line
cy.get(postMessageTextId).should('have.html', '<p>First line</p>\n<p>Text after</p>');

// 4. click dot menu button
// # click dot menu button
cy.clickPostDotMenu();

// 5. click edit post
// # click edit post
cy.get(`#edit_post_${postId}`).click();

// 6. Add ",edited" to the text
// # Add ",edited" to the text
cy.get('#edit_textbox').type(',edited');

// 7. Save
// # Save
cy.get('#editButton').click();

// * Verify HTML includes newline and the edit
Expand Down
26 changes: 13 additions & 13 deletions cypress/integration/account_settings/general/nickname.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@
// See LICENSE.txt for license information.

// ***************************************************************
// - [number] indicates a test step (e.g. 1. Go to a page)
// - [#] 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 > General', () => {
before(() => {
// 1. Go to Account Settings with "user-1"
// # Go to Account Settings with "user-1"
cy.toAccountSettingsModal('user-1');
});

it('Nickname should render in before clicking edit', () => {
// 2. Check that the General tab is loaded and click it
// # Check that the General tab is loaded and click it
cy.get('#generalButton').should('be.visible');
cy.get('#generalButton').click();

Expand All @@ -27,7 +27,7 @@ describe('Account Settings > Sidebar > General', () => {
});

it('Nickname should render after clicking edit', () => {
// 3. Click "Edit" to the right of "Nickname"
// # Click "Edit" to the right of "Nickname"
cy.get('#nicknameEdit').click();

// * Check elements after clicking 'Edit'
Expand All @@ -40,35 +40,35 @@ describe('Account Settings > Sidebar > General', () => {
});

it('No nickname is present', () => {
// 4. Clear the nickname text field contents
// # Clear the nickname text field contents
cy.get('#nickname').clear();
cy.get('#saveSetting').click();

cy.get('#nicknameDesc').should('be.visible').should('contain', "Click 'Edit' to add a nickname");

// 5. Open manage/view members
// # Open manage/view members
cy.toAccountSettingsModal('user-1');
cy.get('#accountSettingsHeader > .close').click();
cy.get('#sidebarHeaderDropdownButton').click();

cy.get('#manageMembers').should('be.visible');
cy.get('#manageMembers').click();

// 6. Search for username and check that no nickname is present
// # Search for username and check that no nickname is present
cy.get('.modal-title').should('be.visible');
cy.get('#searchUsersInput').should('be.visible').type('Victor Welch');
cy.get('.more-modal__details > .more-modal__name').should('be.visible').should('contain', '@user-1 - Victor Welch');
});

it('AS13279 Account Settings > Add Nickname', () => {
// 1. Go to Account Settings view
// # Go to Account Settings view
cy.toAccountSettingsModal('user-1');

// 2. Click the General tab
// # Click the General tab
cy.get('#generalButton').should('be.visible');
cy.get('#generalButton').click();

// 3. Add the nickname to textfield contents
// # Add the nickname to textfield contents
cy.get('#nicknameEdit').click();
cy.get('#nickname').clear();
cy.get('#nickname').type('victor_nick');
Expand All @@ -77,22 +77,22 @@ describe('Account Settings > Sidebar > General', () => {
// * Check if element is present and contains expected text values
cy.get('#nicknameDesc').should('be.visible').should('contain', 'victor_nick');

// 4. Open manage memebers
// # Open manage memebers
cy.toAccountSettingsModal('user-1');
cy.get('#accountSettingsHeader > .close').click();
cy.get('#sidebarHeaderDropdownButton').click();

cy.get('#manageMembers').should('be.visible');
cy.get('#manageMembers').click();

// 5. Search for username and check that expected nickname is present
// # Search for username and check that expected nickname is present
cy.get('.modal-title').should('be.visible');
cy.get('#searchUsersInput').should('be.visible').type('Victor Welch');
cy.get('.more-modal__details > .more-modal__name').should('be.visible').should('contain', '@user-1 - Victor Welch (victor_nick)');
});

it('Clear the nickname', () => {
// 1. Clear the set nickname
// # Clear the set nickname
cy.toAccountSettingsModal('user-1');

cy.get('#generalButton').should('be.visible');
Expand Down
Loading

0 comments on commit 5feffaa

Please sign in to comment.