team/e2e-tests/cypress/tests/integration/channels/scroll/channel_scroll_spec.js

// 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 @scroll

import * as MESSAGES from '@/fixtures/messages';
import * as TIMEOUTS from '@/fixtures/timeouts';

describe('Scroll', () => {
    let testTeam;
    let testChannel;
    let otherUser;

    beforeEach(() => {
        // # Create new team and new user and visit Town Square channel
        cy.apiInitSetup().then(({team, channel}) => {
            testTeam = team;
            testChannel = channel;

            cy.apiCreateUser().then(({user: user2}) => {
                otherUser = user2;

                cy.apiAddUserToTeam(testTeam.id, otherUser.id).then(() => {
                    cy.apiAddUserToChannel(testChannel.id, otherUser.id);
                });
            });

            cy.visit(`/${testTeam.name}/channels/${channel.name}`);
        });
    });

    it('MM-T2378 Channel with only a few posts opens at the bottom', () => {
        // # Post a starting message with user 1
        cy.postMessage('This is the first post');

        // # Post as few as messages so that scroll bar appears as channel name scroll hidden
        Cypress._.times(20, (postIndex) => {
            cy.postMessage(`p-${postIndex + 1}`);
        });

        // # Post the last message
        cy.postMessage('This is the last post');

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

        // * Verify that the top of the channel is scrolled past hidden
        cy.findByText(`Beginning of ${testChannel.display_name}`).should('exist').and('not.be.visible');

        // * Verify that the last message is visible implying that channel scrolled to bottom on reload
        cy.findByText('This is the last post').should('exist').and('be.visible');
    });

    it('MM-T2382 Center channel scroll', () => {
        // # Post a starting message with user 1
        cy.postMessage('This is the first post');

        // # Make enough posts so that first post is scrolled past hidden
        Cypress._.times(30, (postIndex) => {
            cy.postMessage(`p-${postIndex + 1}`);
        });

        // * Verify that we are the bottom of the channel
        cy.findByText('This is the first post').should('exist').and('not.be.visible');

        // * Make post from another user and verify that channel is scrolled down as post appear
        Cypress._.times(3, (postIndex) => {
            postMessageAndcheckIfTopMessagesAreScrolled(postIndex + 1, otherUser, testChannel.id);
        });
    });

    it('MM-T2367 Compact view', () => {
        const message = 'This is the first post';

        // # Set display mode to standard
        cy.apiSaveMessageDisplayPreference('clean');

        // # Post a starting message with user 1
        Cypress._.times(2, () => {
            cy.postMessage(message);
        });

        // * Verify that messages do no have user's name in post
        cy.getLastPostId().then((parentMessageId) => {
            cy.get(`#${parentMessageId}_message`).invoke('text').then((text) => {
                expect(text).to.equal(message);
                expect(text).to.not.have.string('sysadmin');
            });
        });

        // # Set display mode to compact
        cy.apiSaveMessageDisplayPreference('compact');
        cy.visit(`/${testTeam.name}/channels/${testChannel.name}`);

        // * Verify that messages have user's name in post
        cy.getLastPostId().then((parentMessageId) => {
            cy.get(`#${parentMessageId}_message`).parent().invoke('text').then((text) => {
                expect(text).to.contain('sysadmin');
                expect(text).to.contain(message);
            });
        });
    });

    // https://automation-test-cases.vercel.app/test/MM-T2374
    it('MM-T2374 System Messages', () => {
        const firstPost = '<< This is the first post><';
        const lastPost = '<< This is the last post><';

        // # Make an opening first post
        cy.postMessage(firstPost);

        // # Make enough post so the channel can scroll sufficiently
        Cypress._.times(6, () => {
            cy.uiPostMessageQuickly(MESSAGES.LARGE);
            cy.uiPostMessageQuickly(MESSAGES.MEDIUM);
        });

        // # Make a final post
        cy.postMessage(lastPost);

        // # Scroll to top
        cy.get('div.post-list__dynamic').should('be.visible').scrollTo('top', {duration: TIMEOUTS.ONE_SEC}).wait(TIMEOUTS.ONE_SEC);

        // * Verify we are on the top of the channel
        cy.findByText(firstPost).should('exist').and('be.visible');
        cy.findByText(lastPost).should('exist').and('not.be.visible');

        // # Add few users to the same channel
        cy.apiCreateUser().then(({user: userAddRemove1}) => {
            cy.apiAddUserToTeam(testTeam.id, userAddRemove1.id).then(() => {
                cy.apiAddUserToChannel(testChannel.id, userAddRemove1.id);

                cy.wait(TIMEOUTS.THREE_SEC);

                cy.apiCreateUser().then(({user: userAddRemove2}) => {
                    cy.apiAddUserToTeam(testTeam.id, userAddRemove2.id).then(() => {
                        cy.apiAddUserToChannel(testChannel.id, userAddRemove2.id);

                        cy.wait(TIMEOUTS.THREE_SEC);

                        cy.apiCreateUser().then(({user: userAddRemove3}) => {
                            cy.apiAddUserToTeam(testTeam.id, userAddRemove3.id).then(() => {
                                cy.apiAddUserToChannel(testChannel.id, userAddRemove3.id);

                                // # Wait a little before we can start removing
                                cy.wait(TIMEOUTS.FIVE_SEC);

                                // # Remove few users from the same channel
                                cy.removeUserFromChannel(testChannel.id, userAddRemove1.id);

                                cy.wait(TIMEOUTS.THREE_SEC);

                                cy.removeUserFromChannel(testChannel.id, userAddRemove2.id);

                                // # Wait a little after we removed the users
                                cy.wait(TIMEOUTS.FIVE_SEC);
                            });
                        });
                    });
                });
            });
        });

        // * Verify we are still on the top of the channel and no scrolling occured
        cy.findByText(firstPost).should('exist').and('be.visible');
        cy.findByText(lastPost).should('exist').and('not.be.visible');
    });
});

function postMessageAndcheckIfTopMessagesAreScrolled(postIndex, sender, channelId) {
    // # Make posts from other user
    cy.postMessageAs({sender, message: `Other users p-${postIndex}`, channelId});

    cy.get('#post-list').should('exist').within(() => {
        // * Verify that top post are hidden behind scroll
        cy.findByText(`p-${postIndex}`).should('exist').and('not.be.visible');
        cy.findByText(`p-${postIndex + 1}`).should('exist').and('not.be.visible');

        // * Also verify that latest messages from the other user are visible
        cy.findByText(`Other users p-${postIndex}`).should('exist').and('be.visible');
    });
}