Move /e2e -> /e2e-tests
Этот коммит содержится в:
Mario Vitale
@@ -0,0 +1,321 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
// ***************************************************************
|
||||
// - [#] indicates a test step (e.g. # Go to a page)
|
||||
// - [*] indicates an assertion (e.g. * Check the title)
|
||||
// - Use element ID when selecting an element. Create one if none.
|
||||
// ***************************************************************
|
||||
|
||||
// Stage: @prod
|
||||
// Group: @channels @enterprise @accessibility
|
||||
|
||||
import * as TIMEOUTS from '../../../../fixtures/timeouts';
|
||||
|
||||
describe('Verify Accessibility Support in different input fields', () => {
|
||||
let testTeam;
|
||||
let testChannel;
|
||||
|
||||
before(() => {
|
||||
// * Check if server has license for Guest Accounts
|
||||
cy.apiRequireLicenseForFeature('GuestAccounts');
|
||||
|
||||
cy.apiInitSetup().then(({team}) => {
|
||||
testTeam = team;
|
||||
});
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
cy.apiCreateChannel(testTeam.id, 'accessibility', 'accessibility').then(({channel}) => {
|
||||
testChannel = channel;
|
||||
cy.visit(`/${testTeam.name}/channels/${testChannel.name}`);
|
||||
});
|
||||
});
|
||||
|
||||
it('MM-T1456 Verify Accessibility Support in Input fields in Invite People Flow', () => {
|
||||
// # Open team menu and click 'Invite People'
|
||||
cy.uiOpenTeamMenu('Invite People');
|
||||
|
||||
// # Click invite members if needed
|
||||
cy.get('.InviteAs').findByTestId('inviteMembersLink').click();
|
||||
|
||||
cy.findByTestId('InviteView__copyInviteLink').then((el) => {
|
||||
const copyInviteLinkAriaLabel = el.attr('aria-label');
|
||||
expect(copyInviteLinkAriaLabel).to.match(/^team invite link/i);
|
||||
});
|
||||
|
||||
// * Verify Accessibility Support in Add or Invite People input field
|
||||
cy.get('.users-emails-input__control').should('be.visible').within(() => {
|
||||
cy.get('input').should('have.attr', 'aria-label', 'Add or Invite People').and('have.attr', 'aria-autocomplete', 'list');
|
||||
cy.get('.users-emails-input__placeholder').should('have.text', 'Enter a name or email address');
|
||||
});
|
||||
|
||||
// # Click on Invite Guests link
|
||||
cy.findByTestId('inviteGuestLink').should('be.visible').click();
|
||||
|
||||
// * Verify Accessibility Support in Invite People input field
|
||||
cy.get('.users-emails-input__control').should('be.visible').within(() => {
|
||||
cy.get('input').should('have.attr', 'aria-label', 'Add or Invite People').and('have.attr', 'aria-autocomplete', 'list');
|
||||
cy.get('.users-emails-input__placeholder').should('have.text', 'Enter a name or email address');
|
||||
});
|
||||
|
||||
// * Verify Accessibility Support in Search and Add Channels input field
|
||||
cy.get('.channels-input__control').should('be.visible').within(() => {
|
||||
cy.get('input').should('have.attr', 'aria-label', 'Search and Add Channels').and('have.attr', 'aria-autocomplete', 'list');
|
||||
cy.get('.channels-input__placeholder').should('have.text', `e.g. ${testChannel.display_name}`);
|
||||
});
|
||||
});
|
||||
|
||||
it('MM-T1457 Verify Accessibility Support in Search Autocomplete', () => {
|
||||
// # Adding at least five other users in the channel
|
||||
for (let i = 0; i < 5; i++) {
|
||||
cy.apiCreateUser().then(({user}) => { // eslint-disable-line
|
||||
cy.apiAddUserToTeam(testTeam.id, user.id).then(() => {
|
||||
cy.apiAddUserToChannel(testChannel.id, user.id);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// * Verify Accessibility support in search input
|
||||
cy.get('#searchBox').should('have.attr', 'aria-describedby', 'searchbar-help-popup').and('have.attr', 'aria-label', 'Search').focus();
|
||||
cy.get('#searchbar-help-popup').should('be.visible').and('have.attr', 'role', 'tooltip');
|
||||
|
||||
// # Ensure User list is cached once in UI
|
||||
cy.get('#searchBox').type('from:').wait(TIMEOUTS.FIVE_SEC);
|
||||
|
||||
// # Trigger the user autocomplete again
|
||||
cy.get('#searchBox').clear().type('from:').wait(TIMEOUTS.FIVE_SEC).type('{downarrow}{downarrow}');
|
||||
|
||||
// * Verify Accessibility Support in search autocomplete
|
||||
verifySearchAutocomplete(2);
|
||||
|
||||
// # Press Down arrow twice and verify if focus changes
|
||||
cy.focused().type('{downarrow}{downarrow}');
|
||||
verifySearchAutocomplete(4);
|
||||
|
||||
// # Press Up arrow and verify if focus changes
|
||||
cy.focused().type('{uparrow}');
|
||||
verifySearchAutocomplete(3);
|
||||
|
||||
// # Type the in: filter and ensure channel list is cached once
|
||||
cy.get('#searchBox').clear().type('in:').wait(TIMEOUTS.FIVE_SEC);
|
||||
|
||||
// # Trigger the channel autocomplete again
|
||||
cy.get('#searchBox').clear().type('in:').wait(TIMEOUTS.FIVE_SEC).type('{downarrow}{downarrow}');
|
||||
|
||||
// * Verify Accessibility Support in search autocomplete
|
||||
verifySearchAutocomplete(2, 'channel');
|
||||
|
||||
// # Press Up arrow and verify if focus changes
|
||||
cy.focused().type('{uparrow}{uparrow}');
|
||||
verifySearchAutocomplete(0, 'channel');
|
||||
});
|
||||
|
||||
it('MM-T1455 Verify Accessibility Support in Message Autocomplete', () => {
|
||||
// # Adding at least one other user in the channel
|
||||
cy.apiCreateUser().then(({user}) => {
|
||||
cy.apiAddUserToTeam(testTeam.id, user.id).then(() => {
|
||||
cy.apiAddUserToChannel(testChannel.id, user.id).then(() => {
|
||||
// * Verify Accessibility support in post input field
|
||||
cy.uiGetPostTextBox().should('have.attr', 'aria-label', `write to ${testChannel.display_name}`).clear().focus();
|
||||
|
||||
// # Ensure User list is cached once in UI
|
||||
cy.uiGetPostTextBox().type('@').wait(TIMEOUTS.FIVE_SEC);
|
||||
|
||||
// # Select the first user in the list
|
||||
cy.get('#suggestionList').find('.suggestion-list__item').eq(0).within((el) => {
|
||||
cy.get('.suggestion-list__main').invoke('text').then((text) => {
|
||||
cy.wrap(el).parents('body').find('#post_textbox').clear().type(text);
|
||||
});
|
||||
});
|
||||
|
||||
// # Trigger the user autocomplete again
|
||||
cy.uiGetPostTextBox().clear().type('@').wait(TIMEOUTS.FIVE_SEC).type('{uparrow}{uparrow}{downarrow}');
|
||||
|
||||
// * Verify Accessibility Support in message autocomplete
|
||||
verifyMessageAutocomplete(1);
|
||||
|
||||
// # Press Up arrow and verify if focus changes
|
||||
cy.focused().type('{downarrow}{uparrow}{uparrow}');
|
||||
|
||||
// * Verify Accessibility Support in message autocomplete
|
||||
verifyMessageAutocomplete(0);
|
||||
|
||||
// # Trigger the channel autocomplete filter and ensure channel list is cached once
|
||||
cy.uiGetPostTextBox().clear().type('~').wait(TIMEOUTS.FIVE_SEC);
|
||||
|
||||
// # Trigger the channel autocomplete again
|
||||
cy.uiGetPostTextBox().clear().type('~').wait(TIMEOUTS.FIVE_SEC).type('{downarrow}{downarrow}');
|
||||
|
||||
// * Verify Accessibility Support in message autocomplete
|
||||
verifyMessageAutocomplete(2, 'channel');
|
||||
|
||||
// # Press Up arrow and verify if focus changes
|
||||
cy.focused().type('{downarrow}{uparrow}{uparrow}');
|
||||
|
||||
// * Verify Accessibility Support in message autocomplete
|
||||
verifyMessageAutocomplete(1, 'channel');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('MM-T1458 Verify Accessibility Support in Main Post Input', () => {
|
||||
cy.get('#advancedTextEditorCell').within(() => {
|
||||
// * Verify Accessibility Support in Main Post input
|
||||
cy.uiGetPostTextBox().should('have.attr', 'aria-label', `write to ${testChannel.display_name}`).and('have.attr', 'role', 'textbox').clear().focus().type('test');
|
||||
|
||||
// # Set a11y focus on the textbox
|
||||
cy.get('#FormattingControl_bold').focus().tab({shift: true});
|
||||
|
||||
// * Verify if the focus is on the preview button
|
||||
cy.get('#PreviewInputTextButton').should('be.focused').and('have.attr', 'aria-label', 'preview').tab();
|
||||
|
||||
// * Verify if the focus is on the bold button
|
||||
cy.get('#FormattingControl_bold').should('be.focused').and('have.attr', 'aria-label', 'bold').tab();
|
||||
|
||||
// * Verify if the focus is on the italic button
|
||||
cy.get('#FormattingControl_italic').should('be.focused').and('have.attr', 'aria-label', 'italic').tab();
|
||||
|
||||
// * Verify if the focus is on the strike through button
|
||||
cy.get('#FormattingControl_strike').should('be.focused').and('have.attr', 'aria-label', 'strike through').tab();
|
||||
|
||||
// * Verify if the focus is on the heading button
|
||||
cy.get('#FormattingControl_heading').should('be.focused').and('have.attr', 'aria-label', 'heading').tab();
|
||||
|
||||
// * Verify if the focus is on the link button
|
||||
cy.get('#FormattingControl_link').should('be.focused').and('have.attr', 'aria-label', 'link').tab();
|
||||
|
||||
// * Verify if the focus is on the code block button
|
||||
cy.get('#FormattingControl_code').should('be.focused').and('have.attr', 'aria-label', 'code').tab();
|
||||
|
||||
// * Verify if the focus is on the preview button
|
||||
cy.get('#FormattingControl_quote').should('be.focused').and('have.attr', 'aria-label', 'quote').tab();
|
||||
|
||||
// * Verify if the focus is on the bulleted list button
|
||||
cy.get('#FormattingControl_ul').should('be.focused').and('have.attr', 'aria-label', 'bulleted list').tab();
|
||||
|
||||
// * Verify if the focus is on the numbered list button
|
||||
cy.get('#FormattingControl_ol').should('be.focused').and('have.attr', 'aria-label', 'numbered list').tab();
|
||||
|
||||
// * Verify if the focus is on the formatting options button
|
||||
cy.get('#toggleFormattingBarButton').should('be.focused').and('have.attr', 'aria-label', 'formatting').tab();
|
||||
|
||||
// * Verify if the focus is on the attachment icon
|
||||
cy.get('#fileUploadButton').should('be.focused').and('have.attr', 'aria-label', 'attachment').tab();
|
||||
|
||||
// * Verify if the focus is on the emoji picker
|
||||
cy.get('#emojiPickerButton').should('be.focused').and('have.attr', 'aria-label', 'select an emoji').tab();
|
||||
});
|
||||
|
||||
// * Verify if the focus is on the help link
|
||||
cy.findByTestId('SendMessageButton').should('be.focused');
|
||||
});
|
||||
|
||||
it('MM-T1490 Verify Accessibility Support in RHS Input', () => {
|
||||
// # Wait till page is loaded
|
||||
cy.uiGetPostTextBox().clear();
|
||||
|
||||
// # Post a message and open RHS
|
||||
const message = `hello${Date.now()}`;
|
||||
cy.postMessage(message);
|
||||
cy.getLastPostId().then((postId) => {
|
||||
// # Mouseover the post and click post comment icon.
|
||||
cy.clickPostCommentIcon(postId);
|
||||
});
|
||||
|
||||
cy.get('#rhsContainer').within(() => {
|
||||
// * Verify Accessibility Support in RHS input
|
||||
cy.uiGetReplyTextBox().should('have.attr', 'aria-label', 'reply to this thread...').and('have.attr', 'role', 'textbox').focus().type('test').tab({shift: true}).tab().tab();
|
||||
|
||||
// * Verify if the focus is on the preview button
|
||||
cy.get('#PreviewInputTextButton').should('be.focused').and('have.attr', 'aria-label', 'preview').tab();
|
||||
|
||||
// * Verify if the focus is on the bold button
|
||||
cy.get('#FormattingControl_bold').should('be.focused').and('have.attr', 'aria-label', 'bold').tab();
|
||||
|
||||
// * Verify if the focus is on the italic button
|
||||
cy.get('#FormattingControl_italic').should('be.focused').and('have.attr', 'aria-label', 'italic').tab();
|
||||
|
||||
// * Verify if the focus is on the strike through button
|
||||
cy.get('#FormattingControl_strike').should('be.focused').and('have.attr', 'aria-label', 'strike through').tab();
|
||||
|
||||
// * Verify if the focus is on the hidden controls button
|
||||
cy.get('#HiddenControlsButtonRHS_COMMENT').should('be.focused').and('have.attr', 'aria-label', 'show hidden formatting options').tab();
|
||||
|
||||
// * Verify if the focus is on the hidden heading button
|
||||
cy.get('#FormattingControl_heading').should('be.focused').and('have.attr', 'aria-label', 'heading').tab();
|
||||
|
||||
// * Verify if the focus is on the hidden link button
|
||||
cy.get('#FormattingControl_link').should('be.focused').and('have.attr', 'aria-label', 'link').tab();
|
||||
|
||||
// * Verify if the focus is on the hidden code button
|
||||
cy.get('#FormattingControl_code').should('be.focused').and('have.attr', 'aria-label', 'code').tab();
|
||||
|
||||
// * Verify if the focus is on the hidden quote button
|
||||
cy.get('#FormattingControl_quote').should('be.focused').and('have.attr', 'aria-label', 'quote').tab();
|
||||
|
||||
// * Verify if the focus is on the hidden bulleted list button
|
||||
cy.get('#FormattingControl_ul').should('be.focused').and('have.attr', 'aria-label', 'bulleted list').tab();
|
||||
|
||||
// * Verify if the focus is on the hidden numbered list button
|
||||
cy.get('#FormattingControl_ol').should('be.focused').and('have.attr', 'aria-label', 'numbered list').tab();
|
||||
|
||||
// * Verify if the focus is on the formatting options button
|
||||
cy.get('#toggleFormattingBarButton').should('be.focused').and('have.attr', 'aria-label', 'formatting').tab();
|
||||
|
||||
// * Verify if the focus is on the attachment icon
|
||||
cy.get('#fileUploadButton').should('be.focused').and('have.attr', 'aria-label', 'attachment').tab();
|
||||
|
||||
// * Verify if the focus is on the emoji picker
|
||||
cy.get('#emojiPickerButton').should('be.focused').and('have.attr', 'aria-label', 'select an emoji').tab();
|
||||
|
||||
// * Verify if the focus is on the Reply button
|
||||
cy.findByTestId('SendMessageButton').should('be.focused');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function getUserMentionAriaLabel(displayName) {
|
||||
return displayName.
|
||||
replace('(you)', '').
|
||||
replace(/[@()]/g, '').
|
||||
toLowerCase().
|
||||
trim();
|
||||
}
|
||||
|
||||
function verifySearchAutocomplete(index, type = 'user') {
|
||||
cy.get('#search-autocomplete__popover').find('.suggestion-list__item').eq(index).should('be.visible').and('have.class', 'suggestion--selected').within((el) => {
|
||||
if (type === 'user') {
|
||||
cy.get('.suggestion-list__ellipsis').invoke('text').then((text) => {
|
||||
const usernameLength = 12;
|
||||
const displayName = text.substring(1, usernameLength) + ' ' + text.substring(usernameLength, text.length);
|
||||
const userAriaLabel = getUserMentionAriaLabel(displayName);
|
||||
cy.wrap(el).parents('#searchFormContainer').find('.sr-only').should('have.attr', 'aria-live', 'polite').and('have.text', userAriaLabel);
|
||||
});
|
||||
} else if (type === 'channel') {
|
||||
cy.get('.suggestion-list__ellipsis').invoke('text').then((text) => {
|
||||
const channel = text.split('~')[1].toLowerCase().trim();
|
||||
cy.wrap(el).parents('#searchFormContainer').find('.sr-only').should('have.attr', 'aria-live', 'polite').and('have.text', channel);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function verifyMessageAutocomplete(index, type = 'user') {
|
||||
cy.get('#suggestionList').find('.suggestion-list__item').eq(index).should('be.visible').and('have.class', 'suggestion--selected').within((el) => {
|
||||
if (type === 'user') {
|
||||
cy.get('.suggestion-list__ellipsis').invoke('text').then((fullText) => {
|
||||
cy.get('.suggestion-list__main').invoke('text').then((username) => {
|
||||
const usernameFullNameNickName = getUserMentionAriaLabel(`${username} ${fullText.split(username)[1]}`);
|
||||
cy.wrap(el).parents('.textarea-wrapper').find('.sr-only').should('have.attr', 'aria-live', 'polite').and('have.text', usernameFullNameNickName);
|
||||
});
|
||||
});
|
||||
} else if (type === 'channel') {
|
||||
cy.wrap(el).invoke('text').then((text) => {
|
||||
const channel = text.split('~')[0].toLowerCase().trim();
|
||||
cy.wrap(el).parents('.textarea-wrapper').find('.sr-only').should('have.attr', 'aria-live', 'polite').and('have.text', channel);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
// ***************************************************************
|
||||
// - [#] indicates a test step (e.g. # Go to a page)
|
||||
// - [*] indicates an assertion (e.g. * Check the title)
|
||||
// - Use element ID when selecting an element. Create one if none.
|
||||
// ***************************************************************
|
||||
|
||||
// Group: @channels @enterprise @accessibility
|
||||
|
||||
import * as TIMEOUTS from '../../../../fixtures/timeouts';
|
||||
|
||||
describe('Verify Accessibility Support in Modals & Dialogs', () => {
|
||||
let testTeam;
|
||||
let testChannel;
|
||||
let testUser;
|
||||
|
||||
before(() => {
|
||||
// * Check if server has license for Guest Accounts
|
||||
cy.apiRequireLicenseForFeature('GuestAccounts');
|
||||
|
||||
cy.apiInitSetup({userPrefix: 'user000a'}).then(({team, channel, user}) => {
|
||||
testTeam = team;
|
||||
testChannel = channel;
|
||||
testUser = user;
|
||||
|
||||
cy.apiCreateUser().then(({user: newUser}) => {
|
||||
cy.apiAddUserToTeam(testTeam.id, newUser.id).then(() => {
|
||||
cy.apiAddUserToChannel(testChannel.id, newUser.id);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
// # Login as sysadmin and visit the town-square
|
||||
cy.apiAdminLogin();
|
||||
cy.visit(`/${testTeam.name}/channels/town-square`);
|
||||
});
|
||||
|
||||
it('MM-T1454 Accessibility Support in Different Modals and Dialog screen', () => {
|
||||
// * Verify the accessibility support in Profile Dialog
|
||||
verifyUserMenuModal('Profile');
|
||||
|
||||
// * Verify the accessibility support in Team Settings Dialog
|
||||
verifyMainMenuModal('Team Settings');
|
||||
|
||||
// * Verify the accessibility support in Manage Members Dialog
|
||||
verifyMainMenuModal('Manage Members', `${testTeam.display_name} Members`);
|
||||
|
||||
cy.visit(`/${testTeam.name}/channels/off-topic`);
|
||||
|
||||
// * Verify the accessibility support in Channel Edit Header Dialog
|
||||
verifyChannelMenuModal('Edit Channel Header', 'Edit Header for Off-Topic');
|
||||
|
||||
cy.wait(TIMEOUTS.TWO_SEC);
|
||||
|
||||
// * Verify the accessibility support in Channel Edit Purpose Dialog
|
||||
verifyChannelMenuModal('Edit Channel Purpose', 'Edit Purpose for Off-Topic');
|
||||
|
||||
// * Verify the accessibility support in Rename Channel Dialog
|
||||
verifyChannelMenuModal('Rename Channel');
|
||||
});
|
||||
|
||||
it('MM-T1487 Accessibility Support in Manage Channel Members Dialog screen', () => {
|
||||
// # Visit test team and channel
|
||||
cy.visit(`/${testTeam.name}/channels/off-topic`);
|
||||
|
||||
// # Open Channel Members Dialog
|
||||
cy.get('#channelHeaderDropdownIcon').click();
|
||||
cy.findByText('Manage Members').click().wait(TIMEOUTS.FIVE_SEC);
|
||||
|
||||
// * Verify the accessibility support in Manage Members Dialog
|
||||
cy.findByRole('dialog', {name: 'Off-Topic Members'}).within(() => {
|
||||
cy.findByRole('heading', {name: 'Off-Topic Members'});
|
||||
|
||||
// # Set focus on search input
|
||||
cy.findByPlaceholderText('Search users').
|
||||
focus().
|
||||
type(' {backspace}').
|
||||
wait(TIMEOUTS.HALF_SEC).
|
||||
tab({shift: true}).tab();
|
||||
cy.wait(TIMEOUTS.HALF_SEC);
|
||||
|
||||
// # Press tab and verify focus on first user's profile image
|
||||
cy.focused().tab();
|
||||
cy.findByAltText('sysadmin profile image').should('be.focused');
|
||||
|
||||
// # Press tab and verify focus on first user's username
|
||||
cy.focused().tab();
|
||||
cy.focused().should('have.text', '@sysadmin');
|
||||
|
||||
// # Press tab and verify focus on second user's profile image
|
||||
cy.focused().tab();
|
||||
cy.findByAltText(`${testUser.username} profile image`).should('be.focused');
|
||||
|
||||
// # Press tab and verify focus on second user's username
|
||||
cy.focused().tab();
|
||||
cy.focused().should('have.text', `@${testUser.username}`);
|
||||
|
||||
// # Press tab and verify focus on second user's dropdown option
|
||||
cy.focused().tab();
|
||||
cy.focused().should('have.class', 'dropdown-toggle').and('contain', 'Channel Member');
|
||||
|
||||
// * Verify accessibility support in search total results
|
||||
cy.get('#searchableUserListTotal').should('have.attr', 'aria-live', 'polite');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function verifyMainMenuModal(menuItem, modalName) {
|
||||
cy.uiGetLHSHeader().click();
|
||||
verifyModal(menuItem, modalName);
|
||||
}
|
||||
|
||||
function verifyChannelMenuModal(menuItem, modalName) {
|
||||
cy.get('#channelHeaderDropdownIcon').click();
|
||||
verifyModal(menuItem, modalName);
|
||||
}
|
||||
|
||||
function verifyUserMenuModal(menuItem) {
|
||||
cy.uiGetSetStatusButton().click();
|
||||
verifyModal(menuItem);
|
||||
}
|
||||
|
||||
function verifyModal(menuItem, modalName) {
|
||||
// * Verify that menu is open
|
||||
cy.findByRole('menu');
|
||||
|
||||
// # Click menu item
|
||||
cy.findByText(menuItem).click();
|
||||
|
||||
// * Verify the modal
|
||||
const name = modalName || menuItem;
|
||||
cy.findByRole('dialog', {name}).within(() => {
|
||||
cy.findByRole('heading', {name});
|
||||
cy.uiClose();
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,218 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
// ***************************************************************
|
||||
// - [#] indicates a test step (e.g. # Go to a page)
|
||||
// - [*] indicates an assertion (e.g. * Check the title)
|
||||
// - Use element ID when selecting an element. Create one if none.
|
||||
// ***************************************************************
|
||||
|
||||
// Stage: @prod
|
||||
// Group: @channels @enterprise @accessibility
|
||||
|
||||
import * as TIMEOUTS from '../../../../fixtures/timeouts';
|
||||
|
||||
describe('Verify Accessibility Support in Modals & Dialogs', () => {
|
||||
let testTeam;
|
||||
let testChannel;
|
||||
let testUser;
|
||||
let selectedRowText;
|
||||
|
||||
before(() => {
|
||||
// * Check if server has license for Guest Accounts
|
||||
cy.apiRequireLicenseForFeature('GuestAccounts');
|
||||
|
||||
cy.apiInitSetup({userPrefix: 'user000a'}).then(({team, channel, user}) => {
|
||||
testTeam = team;
|
||||
testChannel = channel;
|
||||
testUser = user;
|
||||
|
||||
cy.apiCreateUser().then(({user: newUser}) => {
|
||||
cy.apiAddUserToTeam(testTeam.id, newUser.id).then(() => {
|
||||
cy.apiAddUserToChannel(testChannel.id, newUser.id);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
// # Login as sysadmin and visit the town-square
|
||||
cy.apiAdminLogin();
|
||||
cy.visit(`/${testTeam.name}/channels/town-square`);
|
||||
});
|
||||
|
||||
it('MM-T1466 Accessibility Support in Direct Messages Dialog screen', () => {
|
||||
// * Verify the aria-label in create direct message button
|
||||
cy.uiAddDirectMessage().click();
|
||||
|
||||
// * Verify the accessibility support in Direct Messages Dialog
|
||||
cy.findAllByRole('dialog', 'Direct Messages').eq(0).within(() => {
|
||||
cy.findByRole('heading', 'Direct Messages');
|
||||
|
||||
// * Verify the accessibility support in search input
|
||||
cy.findByRole('textbox', {name: 'Search for people'}).
|
||||
should('have.attr', 'aria-autocomplete', 'list');
|
||||
|
||||
// # Search for a text and then check up and down arrow
|
||||
cy.findByRole('textbox', {name: 'Search for people'}).
|
||||
typeWithForce('s').
|
||||
wait(TIMEOUTS.HALF_SEC).
|
||||
typeWithForce('{downarrow}{downarrow}{downarrow}{uparrow}');
|
||||
cy.get('#multiSelectList').children().eq(2).should('have.class', 'more-modal__row--selected').within(() => {
|
||||
cy.get('.more-modal__name').invoke('text').then((user) => {
|
||||
selectedRowText = user.split(' - ')[0].replace('@', '');
|
||||
});
|
||||
|
||||
// * Verify image alt is displayed
|
||||
cy.get('img.Avatar').should('have.attr', 'alt', 'user profile image');
|
||||
});
|
||||
|
||||
// * Verify if the reader is able to read out the selected row
|
||||
cy.get('.filtered-user-list .sr-only').
|
||||
should('have.attr', 'aria-live', 'polite').
|
||||
and('have.attr', 'aria-atomic', 'true').
|
||||
invoke('text').then((text) => {
|
||||
expect(text).equal(selectedRowText);
|
||||
});
|
||||
|
||||
// # Search for an invalid text
|
||||
const additionalSearchTerm = 'somethingwhichdoesnotexist';
|
||||
cy.findByRole('textbox', {name: 'Search for people'}).clear().
|
||||
typeWithForce(additionalSearchTerm).
|
||||
wait(TIMEOUTS.HALF_SEC);
|
||||
|
||||
// * Check if reader can read no results
|
||||
cy.get('.multi-select__wrapper').should('have.attr', 'aria-live', 'polite').and('have.text', `No results found matching ${additionalSearchTerm}`);
|
||||
});
|
||||
});
|
||||
|
||||
it('MM-T1467 Accessibility Support in More Channels Dialog screen', () => {
|
||||
function getChannelAriaLabel(channel) {
|
||||
return channel.display_name.toLowerCase() + ', ' + channel.purpose.toLowerCase();
|
||||
}
|
||||
|
||||
// # Create atleast 2 channels
|
||||
let otherChannel;
|
||||
cy.apiCreateChannel(testTeam.id, 'z_accessibility', 'Z Accessibility', 'O', 'other purpose').then(({channel}) => {
|
||||
otherChannel = channel;
|
||||
});
|
||||
cy.apiCreateChannel(testTeam.id, 'accessibility', 'Accessibility', 'O', 'some purpose').then(({channel}) => {
|
||||
cy.apiLogin(testUser).then(() => {
|
||||
cy.reload();
|
||||
|
||||
// * Verify the aria-label in more public channels button
|
||||
cy.uiBrowseOrCreateChannel('Browse Channels').click();
|
||||
|
||||
// * Verify the accessibility support in More Channels Dialog
|
||||
cy.findByRole('dialog', {name: 'More Channels'}).within(() => {
|
||||
cy.findByRole('heading', {name: 'More Channels'});
|
||||
|
||||
// * Verify the accessibility support in search input
|
||||
cy.findByPlaceholderText('Search channels');
|
||||
|
||||
cy.waitUntil(() => cy.get('#moreChannelsList').then((el) => {
|
||||
return el[0].children.length === 2;
|
||||
}));
|
||||
|
||||
// # Focus on the Create Channel button and TAB twice
|
||||
cy.get('#createNewChannel').focus().tab().tab();
|
||||
|
||||
// * Verify channel name is highlighted and reader reads the channel name and channel description
|
||||
cy.get('#moreChannelsList').children().eq(0).within(() => {
|
||||
const selectedChannel = getChannelAriaLabel(channel);
|
||||
cy.findByLabelText(selectedChannel).should('be.focused');
|
||||
|
||||
// * Press Tab and verify if focus changes to Join button
|
||||
cy.focused().tab();
|
||||
cy.findByText('Join').parent().should('be.focused');
|
||||
|
||||
// * Verify previous button should no longer be focused
|
||||
cy.findByLabelText(selectedChannel).should('not.be.focused');
|
||||
});
|
||||
|
||||
// * Press Tab again and verify if focus changes to next row
|
||||
cy.focused().tab();
|
||||
cy.findByLabelText(getChannelAriaLabel(otherChannel)).should('be.focused');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('MM-T1468 Accessibility Support in Add people to Channel Dialog screen', () => {
|
||||
// # Add atleast 5 users
|
||||
for (let i = 0; i < 5; i++) {
|
||||
cy.apiCreateUser().then(({user}) => { // eslint-disable-line
|
||||
cy.apiAddUserToTeam(testTeam.id, user.id);
|
||||
});
|
||||
}
|
||||
|
||||
// # Visit the test channel
|
||||
cy.visit(`/${testTeam.name}/channels/${testChannel.name}`);
|
||||
|
||||
// # Open Add Members Dialog
|
||||
cy.get('#channelHeaderDropdownIcon').click();
|
||||
cy.findByText('Add Members').click();
|
||||
|
||||
// * Verify the accessibility support in Add people Dialog
|
||||
cy.findAllByRole('dialog').eq(0).within(() => {
|
||||
const modalName = `Add people to ${testChannel.display_name}`;
|
||||
cy.findByRole('heading', {name: modalName});
|
||||
|
||||
// * Verify the accessibility support in search input
|
||||
cy.findByRole('textbox', {name: 'Search for people'}).
|
||||
should('have.attr', 'aria-autocomplete', 'list');
|
||||
|
||||
// # Search for a text and then check up and down arrow
|
||||
cy.findByRole('textbox', {name: 'Search for people'}).
|
||||
typeWithForce('u').
|
||||
wait(TIMEOUTS.HALF_SEC).
|
||||
typeWithForce('{downarrow}{downarrow}{downarrow}{uparrow}');
|
||||
cy.get('#multiSelectList').
|
||||
children().eq(1).
|
||||
should('have.class', 'more-modal__row--selected').
|
||||
within(() => {
|
||||
cy.get('.more-modal__name').invoke('text').then((user) => {
|
||||
selectedRowText = user.split(' - ')[0].replace('@', '');
|
||||
});
|
||||
|
||||
// * Verify image alt is displayed
|
||||
cy.get('img.Avatar').should('have.attr', 'alt', 'user profile image');
|
||||
});
|
||||
|
||||
// * Verify if the reader is able to read out the selected row
|
||||
cy.get('.filtered-user-list .sr-only').
|
||||
should('have.attr', 'aria-live', 'polite').
|
||||
and('have.attr', 'aria-atomic', 'true').
|
||||
invoke('text').then((text) => {
|
||||
expect(text).equal(selectedRowText);
|
||||
});
|
||||
|
||||
// # Search for an invalid text and check if reader can read no results
|
||||
cy.findByRole('textbox', {name: 'Search for people'}).
|
||||
typeWithForce('somethingwhichdoesnotexist').
|
||||
wait(TIMEOUTS.HALF_SEC);
|
||||
|
||||
// * Check if reader can read no results
|
||||
cy.get('.custom-no-options-message').
|
||||
should('be.visible').
|
||||
and('contain', 'No matches found - Invite them to the team');
|
||||
});
|
||||
});
|
||||
|
||||
it('MM-T1515 Verify Accessibility Support in Invite People Flow', () => {
|
||||
// # Open Invite People
|
||||
cy.uiGetLHSHeader().click();
|
||||
cy.get('#invitePeople').should('be.visible').click();
|
||||
|
||||
// * Verify accessibility support in Invite People Dialog
|
||||
cy.get('.InvitationModal').should('have.attr', 'aria-modal', 'true').and('have.attr', 'aria-labelledby', 'invitation_modal_title').and('have.attr', 'role', 'dialog');
|
||||
cy.get('#invitation_modal_title').should('be.visible').and('contain.text', 'Invite people to');
|
||||
|
||||
// # Press tab
|
||||
cy.get('button.icon-close').focus().tab({shift: true}).tab();
|
||||
|
||||
// * Verify tab focuses on close button
|
||||
cy.get('button.icon-close').should('have.attr', 'aria-label', 'Close').and('be.focused');
|
||||
});
|
||||
});
|
||||
|
||||
Ссылка в новой задаче
Block a user