team/e2e-tests/cypress/tests/support/ui/post.ts

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import type {ChainableT} from '../../types';

function uiGetPostTextBox(option = {exist: true}): ChainableT<JQuery> {
    if (option.exist) {
        return cy.get('#post_textbox').should('be.visible');
    }

    return cy.get('#post_textbox').should('not.exist');
}
Cypress.Commands.add('uiGetPostTextBox', uiGetPostTextBox);

function uiGetReplyTextBox(option = {exist: true}): ChainableT<JQuery> {
    if (option.exist) {
        return cy.get('#reply_textbox').should('be.visible');
    }

    return cy.get('#reply_textbox').should('not.exist');
}
Cypress.Commands.add('uiGetReplyTextBox', uiGetReplyTextBox);

function uiGetPostProfileImage(postId: string): ChainableT<JQuery> {
    return getPost(postId).within(() => {
        return cy.get('.post__img').should('be.visible');
    });
}
Cypress.Commands.add('uiGetPostProfileImage', uiGetPostProfileImage);

function uiGetPostHeader(postId: string): ChainableT<JQuery> {
    return getPost(postId).within(() => {
        return cy.get('.post__header').should('be.visible');
    });
}
Cypress.Commands.add('uiGetPostHeader', uiGetPostHeader);

function uiGetPostBody(postId: string): ChainableT<JQuery> {
    return getPost(postId).within(() => {
        return cy.get('.post__body').should('be.visible');
    });
}
Cypress.Commands.add('uiGetPostBody', uiGetPostBody);

function uiGetPostThreadFooter(postId: string): ChainableT<JQuery> {
    return getPost(postId).find('.ThreadFooter');
}
Cypress.Commands.add('uiGetPostThreadFooter', uiGetPostThreadFooter);

function uiGetPostEmbedContainer(postId: string): ChainableT<JQuery> {
    return cy.uiGetPostBody(postId).
        find('.file-preview__button').
        should('be.visible');
}
Cypress.Commands.add('uiGetPostEmbedContainer', uiGetPostEmbedContainer);

function getCenterPostById(postId: string): ChainableT<JQuery> {
    // Prefer postView rows: virtualized lists may detach #post_<id> from a bare cy.get() query.
    return cy.findAllByTestId('postView', {timeout: 20000}).
        filter(`#post_${postId}`).
        should('have.length.at.least', 1).
        first().
        scrollIntoView().
        should('be.visible');
}

function getPost(postId: string): ChainableT<JQuery> {
    if (postId) {
        return getCenterPostById(postId);
    }

    return cy.getLastPost();
}
Cypress.Commands.add('getPost', getPost);

function getPostMmBlocks(postId: string): ChainableT<JQuery> {
    return getCenterPostById(postId).find('.mm-blocks').should('exist');
}
Cypress.Commands.add('getPostMmBlocks', getPostMmBlocks);

function getRhsPostMmBlocks(postId: string): ChainableT<JQuery> {
    return cy.findAllByTestId('rhsPostView', {timeout: 20000}).
        filter(`#rhsPost_${postId}`).
        should('have.length.at.least', 1).
        first().
        find('.mm-blocks').
        should('exist');
}
Cypress.Commands.add('getRhsPostMmBlocks', getRhsPostMmBlocks);

function editLastPostWithNewMessage(message: string) {
    cy.uiGetPostTextBox().type('{uparrow}');

    // * Edit Post Input should appear
    cy.get('#edit_textbox').should('be.visible');

    // # Update the post message and click Save
    cy.get('#edit_textbox').clear().type(message);
    cy.get('#create_post').findByText('Save').scrollIntoView().click();
}
Cypress.Commands.add('editLastPostWithNewMessage', editLastPostWithNewMessage);

export function verifySavedPost(postId: string, message: string) {
    // * Check that the center save icon has been updated correctly
    cy.get(`#post_${postId}`).trigger('mouseover', {force: true});
    cy.get(`#CENTER_flagIcon_${postId}`).
        should('have.class', 'post-menu__item').
        and('have.attr', 'aria-label', 'remove from saved');

    // # Open the post-dotmenu
    cy.clickPostDotMenu(postId, 'CENTER');

    // * Check that the dotmenu item is changed accordingly
    cy.findAllByTestId(`post-menu-${postId}`).eq(0).should('be.visible');
    cy.findByText('Remove from Saved').scrollIntoView().should('be.visible');
    cy.get('body').type('{esc}');

    cy.get('#postListContent').within(() => {
        // * Check that the post is highlighted
        cy.get(`#post_${postId}`).should('have.class', 'post--pinned-or-flagged');

        // * Check that the post pre-header is visible
        cy.get('div.post-pre-header').should('be.visible');

        // * Check that the post pre-header has the saved icon
        cy.get('span.icon--post-pre-header').
            should('be.visible').
            within(() => {
                cy.get('svg').should('have.attr', 'aria-label', 'Saved Icon');
            });

        // * Check that the post pre-header has the saved post link
        cy.get('div.post-pre-header__text-container').
            should('be.visible').
            and('have.text', 'Saved').
            within(() => {
                cy.get('a').as('savedLink').should('be.visible');
            });
    });

    // * Check that the saved posts list is not open in RHS before clicking the link in the post pre-header
    cy.get('#searchContainer').should('not.exist');

    // # Click the link
    cy.get('@savedLink').click();

    // * Check that the saved posts list is open in RHS
    cy.get('#searchContainer').should('be.visible').within(() => {
        cy.get('.sidebar--right__title').
            should('be.visible').
            and('have.text', 'Saved messages');

        // * Check that the post pre-header is not shown for the saved message in RHS
        cy.get(`#searchResult_${postId}`).within(() => {
            cy.get(`#rhsPostMessageText_${postId}`).contains(message);
            cy.get('div.post-pre-header').should('not.exist');
        });
    });

    // # Close the RHS
    cy.get('#searchResultsCloseButton').should('be.visible').click();
}

export function verifyUnsavedPost(postId: string) {
    // * Check that the center save icon has been updated correctly
    cy.get(`#post_${postId}`).trigger('mouseover', {force: true});
    cy.get(`#CENTER_flagIcon_${postId}`).
        should('have.class', 'post-menu__item').
        and('have.attr', 'aria-label', 'save message');

    // # Open the post-dotmenu
    cy.clickPostDotMenu(postId, 'CENTER');

    // * Check that the dotmenu item is changed accordingly
    cy.findAllByTestId(`post-menu-${postId}`).eq(0).should('be.visible');
    cy.findByText('Save Message').scrollIntoView().should('be.visible');
    cy.get('body').type('{esc}');

    cy.get('#postListContent').within(() => {
        // * Check that the post is not highlighted
        cy.get(`#post_${postId}`).should('not.have.class', 'post--pinned-or-flagged');

        // * Check that the post pre-header is not visible
        cy.get('div.post-pre-header').should('not.exist');

        // * Check that the post pre-header does not have the saved icon
        cy.get('span.icon--post-pre-header').
            should('not.exist');

        // * Check that the post pre-header does not have the saved post link
        cy.get('div.post-pre-header__text-container').
            should('not.exist');
    });

    // * Check that the saved posts list is not open in RHS before clicking the link in the post pre-header
    cy.get('#searchContainer').should('not.exist');

    // # Click the link
    cy.uiGetSavedPostButton().click();

    // * Check that the saved posts list is open in RHS
    cy.get('#searchContainer').should('be.visible').within(() => {
        cy.get('.sidebar--right__title').
            should('be.visible').
            and('have.text', 'Saved messages');

        // * Check that the post pre-header is not shown for the saved message in RHS
        cy.get('#search-items-container').within(() => {
            cy.get(`#rhsPostMessageText_${postId}`).should('not.exist');
        });
    });

    // # Close the RHS
    cy.get('#searchResultsCloseButton').should('be.visible').click();
}

declare global {
    // eslint-disable-next-line @typescript-eslint/no-namespace
    namespace Cypress {
        interface Chainable {

            /**
             * Edit last post with a new message
             *
             * @param {string} - message
             *
             * @example
             *   cy.editLastPostWithNewMessage('new message');
             */
            editLastPostWithNewMessage: typeof editLastPostWithNewMessage;

            /**
             * Get post profile image of a given post ID or the last post if post ID is not given
             *
             * @param {string} - postId (optional)
             *
             * @example
             *   cy.uiGetPostProfileImage();
             */
            uiGetPostProfileImage: typeof uiGetPostProfileImage;

            /**
             * Get post header of a given post ID or the last post if post ID is not given
             *
             * @param {string} - postId (optional)
             *
             * @example
             *   cy.uiGetPostHeader();
             */
            uiGetPostHeader: typeof uiGetPostHeader;

            /**
             * Get post body of a given post ID or the last post if post ID is not given
             *
             * @param {string} - postId (optional)
             *
             * @example
             *   cy.uiGetPostBody();
             */
            uiGetPostBody: typeof uiGetPostBody;

            /**
             * Get post thread footer of a given post ID or the last post if post ID is not given
             *
             * @param {string} - postId (optional)
             *
             * @example
             *   cy.uiGetPostThreadFooter();
             */
            uiGetPostThreadFooter: typeof uiGetPostThreadFooter;

            /**
             * Get post embed container of a given post ID or the last post if post ID is not given
             *
             * @param {string} - postId (optional)
             *
             * @example
             *   cy.uiGetPostEmbedContainer();
             */
            uiGetPostEmbedContainer: typeof uiGetPostEmbedContainer;

            /**
             * Get post textbox
             *
             * @param {bool} option.exist - Set to false to check whether element should not exist. Otherwise, true (default) to check visibility.
             *
             * @example
             *   cy.uiGetPostTextBox();
             */
            uiGetPostTextBox: typeof uiGetPostTextBox;

            /**
             * Get reply textbox
             *
             * @param {bool} option.exist - Set to false to check whether element should not exist. Otherwise, true (default) to check visibility.
             *
             * @example
             *   cy.uiGetReplyTextBox();
             */
            uiGetReplyTextBox: typeof uiGetReplyTextBox;

            getPost: typeof getPost;

            /**
             * Get mm_blocks root within a center-channel post.
             *
             * @param {string} postId
             *
             * @example
             *   cy.getPostMmBlocks(postId).within(() => { ... });
             */
            getPostMmBlocks: typeof getPostMmBlocks;

            /**
             * Get mm_blocks root within an RHS/thread post row.
             *
             * @param {string} postId
             *
             * @example
             *   cy.getRhsPostMmBlocks(postId).within(() => { ... });
             */
            getRhsPostMmBlocks: typeof getRhsPostMmBlocks;
        }
    }
}