mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

[MM-55274] User account menu doesn't follow standard accessible keyboard behavior (#29173)

Просмотр исходного кода
Этот коммит содержится в:
M-ZubairAhmed
2025-01-15 00:55:38 +05:30
коммит произвёл GitHub
родитель 3f9aa4a212
Коммит 4b6216f5a4
75 изменённых файлов: 2020 добавлений и 4305 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

26
e2e-tests/cypress/tests/integration/channels/custom_status/custom_status_2_spec.ts
Просмотреть файл

@@ -28,15 +28,23 @@ describe('Custom Status - Setting a Custom Status', () => {
it('MM-T3836_1 should open status dropdown', () => {
// # Click on the sidebar header to open status dropdown
cy.get('.MenuWrapper .status-wrapper').click();
cy.uiGetSetStatusButton().click();
// * Check if the status dropdown opens
cy.get('#statusDropdownMenu').should('exist');
cy.uiGetStatusMenuContainer();
// # Close the status dropdown
cy.get('body').type('{esc}');
});
it('MM-T3836_2 Custom status modal opens with 5 default statuses listed', () => {
// # Click on the sidebar header to open status dropdown
cy.uiGetSetStatusButton().click();
// * Check if the status dropdown opens
cy.uiGetStatusMenuContainer().findByText('Set custom status').click();
// # Open custom status modal
cy.get('#statusDropdownMenu li#status-menu-custom-status').click();
cy.get('#custom_status_modal').should('exist');
// * Check if all the default suggestions exist
@@ -111,13 +119,15 @@ describe('Custom Status - Setting a Custom Status', () => {
trigger('mouseover');
// * Custom status tooltip should be visible
cy.get('#custom-status-tooltip').should('exist');
cy.get('#custom-status-tooltip').should('exist').and('be.visible');
// * Tooltip should contain the correct custom status emoji
cy.get('#custom-status-tooltip .custom-status span.emoticon').invoke('attr', 'data-emoticon').should('contain', customStatus.emoji);
cy.get('#custom-status-tooltip').within(() => {
// * Tooltip should contain the correct custom status emoji
cy.get(`span[data-emoticon="${customStatus.emoji}"]`).should('exist');
// * Tooltip should contain the correct custom status text
cy.get('#custom-status-tooltip .custom-status span.custom-status-text').should('have.text', customStatus.text);
// * Tooltip should contain the correct custom status text
cy.findByText(customStatus.text).should('exist');
});
});
it('MM-T3836_8 should open custom status modal when emoji in LHS header is clicked', () => {

28
e2e-tests/cypress/tests/integration/channels/custom_status/custom_status_3_spec.ts
Просмотреть файл

@@ -27,7 +27,7 @@ describe('Custom Status - Setting Your Own Custom Status', () => {
it('MM-T3846_1 should change the emoji to speech balloon when typed in the input', () => {
// # Open the custom status modal
cy.uiOpenUserMenu('Set a custom status');
cy.uiOpenUserMenu('Set custom status');
// * Default emoji is currently visible in the custom status input
cy.get('#custom_status_modal .StatusModal__emoji-button span').should('have.class', 'icon--emoji');
@@ -72,20 +72,26 @@ describe('Custom Status - Setting Your Own Custom Status', () => {
cy.uiGetProfileHeader().
find('.emoticon').
should('have.attr', 'data-emoticon', customStatus.emoji);
cy.get('body').type('{esc}');
});
it('MM-T3846_5 should show custom status with emoji in the status dropdown', () => {
// # Open user menu
cy.uiOpenUserMenu();
cy.uiOpenUserMenu().within(() => {
// * Correct custom status text and emoji should be displayed in the status dropdown
cy.findByText(customStatus.text).should('exist');
cy.get(`span[data-emoticon="${customStatus.emoji}"]`).should('exist');
});
// * Correct custom status text and emoji should be displayed in the status dropdown
cy.get('.status-dropdown-menu .custom_status__container').should('have.text', customStatus.text);
cy.get('.status-dropdown-menu .custom_status__row span.emoticon').invoke('attr', 'data-emoticon').should('contain', customStatus.emoji);
cy.get('body').type('{esc}');
});
it('MM-T3846_6 should show previosly set status in the first position in Recents list', () => {
it('MM-T3846_6 should show previously set status in the first position in Recents list', () => {
// # Click on the "Set a Custom Status" option in the status dropdown
cy.get('.status-dropdown-menu li#status-menu-custom-status').click();
cy.uiOpenUserMenu().within(() => {
cy.findByText(customStatus.text).should('exist').click({force: true});
});
// * Custom status modal should open
cy.get('#custom_status_modal').should('exist');
@@ -118,9 +124,9 @@ describe('Custom Status - Setting Your Own Custom Status', () => {
cy.findByText('Clear Status').click();
// # Open user menu
cy.uiOpenUserMenu();
// * Custom status text should not be displayed in the status dropdown
cy.get('.status-dropdown-menu .custom_status__row').should('not.have.text', customStatus.text);
cy.uiOpenUserMenu().within(() => {
// * Custom status text should not be displayed in the status dropdown
cy.findByText(customStatus.text).should('not.exist');
});
});
});

2
e2e-tests/cypress/tests/integration/channels/custom_status/custom_status_4_spec.ts
Просмотреть файл

@@ -32,7 +32,7 @@ describe('Custom Status - Recent Statuses', () => {
it('MM-T3847_1 set a status', () => {
// # Open the custom status modal
cy.uiOpenUserMenu('Set a custom status');
cy.uiOpenUserMenu('Set custom status');
// # Type the custom status text in the custom status modal input
cy.get('#custom_status_modal .StatusModal__input input').typeWithForce(customStatus.text);

2
e2e-tests/cypress/tests/integration/channels/custom_status/custom_status_5_spec.ts
Просмотреть файл

@@ -27,7 +27,7 @@ describe('Custom Status - Verifying Where Custom Status Appears', () => {
});
it('MM-T3850_1 set a status', () => {
cy.uiOpenUserMenu('Set a Custom Status');
cy.uiOpenUserMenu('Set custom status');
// # Type the custom status text in the custom status modal input
cy.findByPlaceholderText('Set a status').type(customStatus.text, {force: true});

55
e2e-tests/cypress/tests/integration/channels/custom_status/custom_status_expiry/custom_status_expiry_1_spec.ts
Просмотреть файл

@@ -25,6 +25,7 @@ describe('MM-T4063 Custom status expiry', () => {
const defaultCustomStatuses = ['In a meeting', 'Out for lunch', 'Out sick', 'Working from home', 'On a vacation'];
const customStatus = {
emoji: 'hamburger',
emojiAriaLabel: ':hamburger:',
text: 'Out for lunch',
duration: '30 minutes',
};
@@ -36,19 +37,25 @@ describe('MM-T4063 Custom status expiry', () => {
const expiryTimeFormat = 'h:mm A';
it('MM-T4063_1 should open status dropdown', () => {
// # Click on the sidebar header to open status dropdown
cy.get('.MenuWrapper .status-wrapper').click();
cy.uiGetSetStatusButton().click();
// * Check if the status dropdown opens
cy.get('#statusDropdownMenu').should('exist');
cy.uiGetStatusMenu();
// # Close the status dropdown
cy.get('body').click();
});
it('MM-T4063_2 Custom status modal opens with 5 default statuses listed', () => {
// # Open custom status modal
cy.get('#statusDropdownMenu li#status-menu-custom-status').click();
cy.get('#custom_status_modal').should('exist');
cy.uiOpenUserMenu('Set custom status');
// * Check if all the default suggestions exist
defaultCustomStatuses.map((statusText) => cy.get('#custom_status_modal .statusSuggestion__content').contains('span', statusText));
cy.findByRole('dialog', {name: 'Set a status'}).should('exist').within(() => {
// * Check if all the default suggestions exist
defaultCustomStatuses.forEach((statusText) => {
cy.findByText(statusText).should('exist');
});
});
});
it('MM-T4063_3 Correct custom status is selected with the correct emoji and correct duration', () => {
@@ -94,17 +101,17 @@ describe('MM-T4063 Custom status expiry', () => {
it('MM-T4063_5 should show the set custom status with expiry when status dropdown is opened', () => {
// # Click on the sidebar header to open status dropdown
cy.get('.MenuWrapper .status-wrapper').click();
cy.uiGetSetStatusButton().click();
// * Check if the status dropdown opens
cy.get('#statusDropdownMenu').should('exist');
cy.uiGetStatusMenu().within(() => {
// * Correct custom status text and emoji should be displayed in the status dropdown
cy.findByText(customStatus.text).should('exist');
cy.findByLabelText(customStatus.emojiAriaLabel).should('exist');
// * Correct custom status text and emoji should be displayed in the status dropdown
cy.get('.status-dropdown-menu .custom_status__container').should('have.text', customStatus.text);
cy.get('.status-dropdown-menu .custom_status__row span.emoticon').invoke('attr', 'data-emoticon').should('contain', customStatus.emoji);
// * Correct clear time should be displayed in the status dropdown
cy.get('.status-dropdown-menu .custom_status__expiry time').invoke('text').should('match', expiresAtRegexp);
// * Correct clear time should be displayed in the status dropdown
cy.findByText(expiresAtRegexp).should('exist');
});
});
it('MM-T4063_6 custom status should be cleared after duration of set custom status', () => {
@@ -118,8 +125,7 @@ describe('MM-T4063 Custom status expiry', () => {
it('MM-T4063_7 current custom status should display expiry time in custom status modal', () => {
// # Open custom status modal
cy.get('#statusDropdownMenu li#status-menu-custom-status').click();
cy.get('#custom_status_modal').should('exist');
cy.get('.userAccountMenu_customStatusMenuItem').should('be.visible').click();
// * Should show expiry time of status when current status is selected
cy.get('#custom_status_modal .statusSuggestion__content').contains('span', customStatus.text).click();
@@ -132,15 +138,12 @@ describe('MM-T4063 Custom status expiry', () => {
it('MM-T4063_8 previous custom status duration should be reset if custom status is expired', () => {
// # Forwarding the time by the duration of custom status
cy.clock(Date.now());
cy.tick(waitingTime * 60 * 1000);
// # Open custom status modal
cy.get('.status-dropdown-menu').click();
cy.get('#statusDropdownMenu li#status-menu-custom-status').click();
cy.get('#custom_status_modal').should('exist');
// * Should show duration of previous status when previous status is selected
cy.get('#custom_status_modal .statusSuggestion__content').contains('span', customStatus.text).click();
cy.get('#custom_status_modal .expiry-value').should('have.text', customStatus.duration);
cy.tick(waitingTime * 60 * 1000).then(() => {
// # Open custom status modal
cy.uiOpenUserMenu().within(() => {
// * Verify that there is no custom status in the dropdown
cy.findByText('Set custom status').should('exist').and('be.visible');
});
});
});
});

78
e2e-tests/cypress/tests/integration/channels/custom_status/custom_status_expiry/custom_status_expiry_2_spec.ts
Просмотреть файл

@@ -21,86 +21,30 @@ describe('MM-T4064 Status expiry visibility', () => {
cy.visit(channelUrl);
});
});
const defaultCustomStatuses = ['In a meeting', 'Out for lunch', 'Out sick', 'Working from home', 'On a vacation'];
const customStatus = {
emoji: 'calendar',
text: 'In a meeting',
duration: '1 hour',
};
const waitingTime = 60; //minutes
let expiresAt = dayjs();
const expiryTimeFormat = 'h:mm A';
it('MM-T4064_1 should open status dropdown', () => {
// # Click on the sidebar header to open status dropdown
cy.get('.MenuWrapper .status-wrapper').click();
// * Check if the status dropdown opens
cy.get('#statusDropdownMenu').should('exist');
});
it('MM-T4064_6 should show expiry time in the tooltip of custom status emoji in the post header', () => {
// # Open the user account menu
cy.uiOpenUserMenu('Set custom status');
it('MM-T4064_2 Custom status modal opens with 5 default statuses listed', () => {
// # Open custom status modal
cy.get('#statusDropdownMenu li#status-menu-custom-status').click();
cy.get('#custom_status_modal').should('exist');
// * Verify that the custom status modal opens
cy.findByRole('dialog', {name: 'Set a status'}).should('exist').within(() => {
// # Select a custom status from the suggestions
cy.get('.statusSuggestion__row').first().click();
// * Check if all the default suggestions exist
defaultCustomStatuses.map((statusText) => cy.get('#custom_status_modal .statusSuggestion__content').contains('span', statusText));
});
it('MM-T4064_3 Correct custom status is selected with the correct emoji and correct duration', () => {
// * Default emoji is currently visible in the custom status input
cy.get('#custom_status_modal .StatusModal__emoji-button span').should('have.class', 'icon--emoji');
// * Input should be empty
cy.get('#custom_status_modal input.form-control').should('have.value', '');
// # Select a custom status from the suggestions
cy.get('#custom_status_modal .statusSuggestion__content').contains('span', customStatus.text).click();
// * Emoji in the custom status input should be changed
cy.get('#custom_status_modal .StatusModal__emoji-button span').invoke('attr', 'data-emoticon').should('contain', customStatus.emoji);
// * Selected custom status text should be in the input
cy.get('#custom_status_modal input.form-control').should('have.value', customStatus.text);
// * Selected custom status duration should be displayed in the Clear after section
cy.get('#custom_status_modal .expiry-wrapper .expiry-value').should('have.text', customStatus.duration);
});
it('MM-T4064_4 should set custom status when click on Set Status', () => {
// # Click on the Set Status button
cy.get('#custom_status_modal .GenericModal__button.confirm').click();
// # Click on the Set Status button
cy.findByText('Set Status').click();
});
// * Modal should be closed
cy.get('#custom_status_modal').should('not.exist');
// # Setting the time at which the custom status should be expired
// # Note that we need to be flexible around accepted values, as this calculation and the server-side one may differ slightly
expiresAt = dayjs().add(waitingTime, 'minute');
// * Status should be set and the emoji should be visible in the sidebar header
cy.uiGetProfileHeader().
find('.emoticon').
should('have.attr', 'data-emoticon', customStatus.emoji);
});
it('MM-T4064_5 should show the set custom status with expiry when status dropdown is opened', () => {
// # Click on the sidebar header to open status dropdown
cy.get('.MenuWrapper .status-wrapper').click();
// * Check if the status dropdown opens
cy.get('#statusDropdownMenu').should('exist');
// * Correct custom status text and emoji should be displayed in the status dropdown
cy.get('.status-dropdown-menu .custom_status__container').should('have.text', customStatus.text);
cy.get('.status-dropdown-menu .custom_status__row span.emoticon').invoke('attr', 'data-emoticon').should('contain', customStatus.emoji);
// * Correct clear time should be displayed in the status dropdown
cy.get('.status-dropdown-menu .custom_status__expiry time').should('have.text', expiresAt.format(expiryTimeFormat));
});
it('MM-T4064_6 should show expiry time in the tooltip of custom status emoji in the post header', () => {
// # Post a message in the channel
cy.postMessage('Hello World!');

6
e2e-tests/cypress/tests/integration/channels/custom_status/custom_status_expiry/custom_status_expiry_3_spec.ts
Просмотреть файл

@@ -39,15 +39,15 @@ describe('MM-T4065 Setting manual status clear time less than 7 days away', () =
it('MM-T4065_1 should open status dropdown', () => {
// # Click on the sidebar header to open status dropdown
cy.get('.MenuWrapper .status-wrapper').click();
cy.uiGetSetStatusButton().click();
// * Check if the status dropdown opens
cy.get('#statusDropdownMenu').should('exist');
cy.get('#userAccountMenu').should('exist');
});
it('MM-T4065_2 Custom status modal opens with 5 default statuses listed', () => {
// # Open custom status modal
cy.get('#statusDropdownMenu li#status-menu-custom-status').click();
cy.get('.userAccountMenu_setCustomStatusMenuItem').click();
cy.get('#custom_status_modal').should('exist');
// * Check if all the default suggestions exist

6
e2e-tests/cypress/tests/integration/channels/custom_status/custom_status_expiry/custom_status_expiry_4_spec.ts
Просмотреть файл

@@ -38,15 +38,15 @@ describe('MM-T4066 Setting manual status clear time more than 7 days away', () =
const months = dateToBeSelected.get('month') - today.get('month');
it('MM-T4066_1 should open status dropdown', () => {
// # Click on the sidebar header to open status dropdown
cy.get('.MenuWrapper .status-wrapper').click();
cy.uiGetSetStatusButton().click();
// * Check if the status dropdown opens
cy.get('#statusDropdownMenu').should('exist');
cy.get('#userAccountMenu').should('exist');
});
it('MM-T4066_2 Custom status modal opens with 5 default statuses listed', () => {
// # Open custom status modal
cy.get('#statusDropdownMenu li#status-menu-custom-status').click();
cy.get('.userAccountMenu_setCustomStatusMenuItem').click();
cy.get('#custom_status_modal').should('exist');
// * Check if all the default suggestions exist