diff --git a/e2e-tests/cypress/tests/integration/channels/collapsed_reply_threads/global_threads_spec.js b/e2e-tests/cypress/tests/integration/channels/collapsed_reply_threads/global_threads_spec.js index ad733a668a0..5ae22687d7e 100644 --- a/e2e-tests/cypress/tests/integration/channels/collapsed_reply_threads/global_threads_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/collapsed_reply_threads/global_threads_spec.js @@ -7,6 +7,7 @@ // - Use element ID when selecting an element. Create one if none. // *************************************************************** +// Stage: @prod // Group: @channels @collapsed_reply_threads describe('Collapsed Reply Threads', () => { @@ -412,4 +413,102 @@ describe('Collapsed Reply Threads', () => { // # Cleanup for next test cy.apiDeletePost(rootPost.id); }); + + it('CRT - Threads list keyboard navigation', () => { + // # Post a few messages as another user and then reply to each one as the current user to follow them + let firstRoot; + let firstReply; + let secondRoot; + let secondReply; + let thirdRoot; + let thirdReply; + + cy.postMessageAs({sender: user1, message: messages.ROOT + '1', channelId: testChannel.id}).then((post) => { + firstRoot = post; + + cy.postMessageAs({sender: user2, message: messages.REPLY1 + '1', channelId: testChannel.id, rootId: firstRoot.id}).then((reply) => { + firstReply = reply; + }); + }).then(() => { + cy.postMessageAs({sender: user1, message: messages.ROOT + '1', channelId: testChannel.id}).then((post) => { + secondRoot = post; + + cy.postMessageAs({sender: user2, message: messages.REPLY1 + '1', channelId: testChannel.id, rootId: secondRoot.id}).then((reply) => { + secondReply = reply; + }); + }); + }).then(() => { + cy.postMessageAs({sender: user1, message: messages.ROOT + '1', channelId: testChannel.id}).then((post) => { + thirdRoot = post; + + cy.postMessageAs({sender: user2, message: messages.REPLY1 + '1', channelId: testChannel.id, rootId: thirdRoot.id}).then((reply) => { + thirdReply = reply; + }); + }); + }).then(() => { + // # Click on the Threads item in the LHS + cy.get('a').contains('Threads').click(); + + // * There should be a three threads in the threads list + cy.get('article.ThreadItem').should('have.lengthOf', 3); + + // * No thread should be selected at first + cy.contains('Catch up on your threads').should('be.visible'); + + // # Press the down arrow + cy.get('body').type('{downArrow}'); + + // * The third thread should be visible since it's the most recent one + cy.contains('Catch up on your threads').should('not.exist'); + cy.get(`#rhsPost_${thirdRoot.id}`).should('be.visible'); + cy.get(`#rhsPost_${thirdReply.id}`).should('be.visible'); + + // * The comment box should not be focused + cy.focused().should('not.have.id', 'reply_textbox'); + + // # Press the down arrow again + cy.get('body').type('{downArrow}'); + + // * The second thread should be visible + cy.get(`#rhsPost_${secondRoot.id}`).should('be.visible'); + cy.get(`#rhsPost_${secondReply.id}`).should('be.visible'); + + // * The comment box should still not be focused + cy.focused().should('not.have.id', 'reply_textbox'); + + // # Press the down arrow again + cy.get('body').type('{downArrow}'); + + // * The first thread should be visible + cy.get(`#rhsPost_${firstRoot.id}`).should('be.visible'); + cy.get(`#rhsPost_${firstReply.id}`).should('be.visible'); + + // * The comment box should still not be focused + cy.focused().should('not.have.id', 'reply_textbox'); + + // # Press the up arrow + cy.get('body').type('{upArrow}'); + + // * The second thread should be visible + cy.get(`#rhsPost_${secondRoot.id}`).should('be.visible'); + cy.get(`#rhsPost_${secondReply.id}`).should('be.visible'); + + // * The comment box should still not be focused + cy.focused().should('not.have.id', 'reply_textbox'); + + // # Type something + cy.get('body').type('something'); + + // * The comment box should be focused and have received that input + cy.focused().should('have.id', 'reply_textbox'). + should('contain.text', 'something'); + + // # Press the up arrow again + cy.get('body').type('{upArrow}'); + + // * The second thread should still be visible because focus is now in the comment box + cy.get(`#rhsPost_${secondRoot.id}`).should('be.visible'); + cy.get(`#rhsPost_${secondReply.id}`).should('be.visible'); + }); + }); });