From c01f212f60e41686f1dea468c74a6f8ac839b828 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pablo=20V=C3=A9lez?= Date: Tue, 14 Jan 2025 08:04:08 -0500 Subject: [PATCH] MM-62288 - add e2e to RHS focus functionality (#29655) * MM-62288 - add e2e to RHS focus functionality * remove describe only * Use existence check before closing RHS * modify close rhs function to not fail when rhs is not opened * avoid body to not get found --------- Co-authored-by: Mattermost Build --- .../accessibility_sidebar_spec.ts | 75 +++++++++++++++++++ .../messaging/message_reply_bot_post_spec.js | 2 +- .../cypress/tests/support/ui/sidebar_right.js | 7 +- .../sidebar_right/sidebar_right.tsx | 8 +- 4 files changed, 86 insertions(+), 6 deletions(-) diff --git a/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_sidebar_spec.ts b/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_sidebar_spec.ts index 36d179cef8..c4096510cc 100644 --- a/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_sidebar_spec.ts +++ b/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_sidebar_spec.ts @@ -165,6 +165,81 @@ describe('Verify Accessibility Support in Channel Sidebar Navigation', () => { }); }); +describe('Accessibility tests for RHS getting focus after buttons actions', () => { + let testUser; + + before(() => { + cy.apiInitSetup().then(({team, user}) => { + testUser = user; + + // # Login as the test user and visit the town-square channel + cy.apiLogin(testUser); + cy.visit(`/${team.name}/channels/town-square`); + cy.get('#postListContent').should('be.visible'); + }); + }); + + beforeEach(() => { + // # Close the RHS + cy.uiCloseRHS(); + cy.get('#sidebar-right').should('not.exist'); + }); + + afterEach(() => { + // # Close the RHS + cy.uiCloseRHS(); + cy.get('#sidebar-right').should('not.exist'); + }); + + it('Focus should be on RHS when opening Recent Mentions', () => { + // # Click the Recent Mentions button + cy.findByRole('button', {name: /Recent mentions/i}).click(); + + // * Verify RHS is open + cy.get('#sidebar-right').should('be.visible'); + + // * Check that the RHS container is focused + cy.get('.sidebar-right-container').should('be.focused'); + }); + + it('Focus should be on RHS when opening Saved Messages', () => { + // # Click the Saved Messages button + cy.findByRole('button', {name: /Saved messages/i}).click(); + + // * Verify RHS is open + cy.get('#sidebar-right').should('be.visible'); + + // * Check that the RHS container is focused + cy.get('.sidebar-right-container').should('be.focused'); + }); + + it('Focus should be on RHS when opening Members', () => { + cy.get('#channelHeaderInfo').should('exist'); + + // # Click the Members button + cy.get('#member_rhs'). + should('be.visible'). + click(); + + // * Verify RHS is open + cy.get('#sidebar-right').should('be.visible'); + + // * Check that the RHS container is focused + cy.get('.sidebar-right-container').should('be.focused'); + }); + + it('Focus should be on RHS when opening Channel files', () => { + // # Click the Channel files button + cy.findByRole('button', {name: /Channel files/i}).click(); + + // * Verify RHS is open + cy.get('#sidebar-right').should('be.visible'); + + // * Check that the RHS container is focused + cy.get('.sidebar-right-container').should('be.focused'); + }); +}); + function markAsFavorite(channelName) { // # Visit the channel cy.get(`#sidebarItem_${channelName}`).click(); diff --git a/e2e-tests/cypress/tests/integration/channels/messaging/message_reply_bot_post_spec.js b/e2e-tests/cypress/tests/integration/channels/messaging/message_reply_bot_post_spec.js index 4879652aa7..7311cbba3d 100644 --- a/e2e-tests/cypress/tests/integration/channels/messaging/message_reply_bot_post_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/messaging/message_reply_bot_post_spec.js @@ -88,7 +88,7 @@ describe('Messaging', () => { }); }); - it.skip('MM-T91 Replying to an older post by a user that has no content (only file attachments)', () => { + it('MM-T91 Replying to an older post by a user that has no content (only file attachments)', () => { // # Get yesterdays date in UTC const yesterdaysDate = Cypress.dayjs().subtract(1, 'days').valueOf(); diff --git a/e2e-tests/cypress/tests/support/ui/sidebar_right.js b/e2e-tests/cypress/tests/support/ui/sidebar_right.js index 9ba60991a9..599e8d8af2 100644 --- a/e2e-tests/cypress/tests/support/ui/sidebar_right.js +++ b/e2e-tests/cypress/tests/support/ui/sidebar_right.js @@ -10,7 +10,12 @@ Cypress.Commands.add('uiGetRHS', (options = {visible: true}) => { }); Cypress.Commands.add('uiCloseRHS', () => { - cy.findByLabelText('Close Sidebar Icon').click(); + cy.document().then((doc) => { + const closeButton = doc.querySelector('[aria-label="Close Sidebar Icon"]'); + if (closeButton) { + closeButton.click(); + } + }); }); Cypress.Commands.add('uiExpandRHS', () => { diff --git a/webapp/channels/src/components/sidebar_right/sidebar_right.tsx b/webapp/channels/src/components/sidebar_right/sidebar_right.tsx index 794beae433..47812b2c84 100644 --- a/webapp/channels/src/components/sidebar_right/sidebar_right.tsx +++ b/webapp/channels/src/components/sidebar_right/sidebar_right.tsx @@ -157,7 +157,7 @@ export default class SidebarRight extends React.PureComponent { if (this.props.isOpen && (contentChanged || (!wasOpen && isOpen))) { this.previousActiveElement = document.activeElement as HTMLElement; - requestAnimationFrame(() => { + setTimeout(() => { if (this.sidebarRight.current) { document.dispatchEvent( new CustomEvent(A11yCustomEventTypes.FOCUS, { @@ -168,14 +168,14 @@ export default class SidebarRight extends React.PureComponent { }), ); } - }); + }, 0); } else if (!this.props.isOpen && wasOpen) { // RHS just was closed, restore focus to the previous element had it // this will have to change for upcoming work specially for search and probalby plugins if (a11yController.originElement) { a11yController.restoreOriginFocus(); } else { - requestAnimationFrame(() => { + setTimeout(() => { if (this.previousActiveElement) { document.dispatchEvent( new CustomEvent(A11yCustomEventTypes.FOCUS, { @@ -187,7 +187,7 @@ export default class SidebarRight extends React.PureComponent { ); this.previousActiveElement = null; } - }); + }, 0); } } }