import {getRandomInt} from '../../utils';

describe('Recent Emoji', () => {
    before(() => {
        // 1. Login and go to /
        cy.login('user-1');
        cy.visit('/');
    });

    it('M14014 Recently used emojis are shown 1st', async () => {
        // 2. Select first emoji and submit as a post
        const firstEmoji = getRandomInt(400);
        cy.get('#emojiPickerButton').should('be.visible').click();
        cy.get('.emoji-picker__item').eq(firstEmoji).click();
        cy.get('#create_post').submit();

        // 3. Select seond emoji as reaction to the last post
        const secondEmoji = getRandomInt(400);
        cy.clickPostReactionIcon();
        cy.get('.emoji-picker__item').eq(secondEmoji).click();

        // 4. Wait for some time to make sure that post emoji or reaction is saved in the server
        cy.wait(500); // eslint-disable-line

        // 11. Open emoji list
        cy.get('#emojiPickerButton').click();

        // * Assert first emoji to be listed as second to the recent emoji
        cy.get('.emoji-picker__item').eq(firstEmoji).find('img').then(($el) => {
            cy.get('.emoji-picker__item').eq(1).find('img').should('have.attr', 'src', $el.attr('src'));
        });

        // * Assert recent emoji should equal with last post emoji
        // * Assert second emoji to be listed as first to the recent emoji
        cy.get('.emoji-picker__item').eq(secondEmoji).find('img').then(($el) => {
            cy.get('.emoji-picker__item').eq(0).find('img').should('have.attr', 'src', $el.attr('src'));
        });
    });
});