import { getMinimalMe } from '../../../support/helpers';

describe('Article page', () => {
  const slug = 'this-article-has-a-slug';
  const roomEntry = {
    slug,
    id: 'room-entry-id',
    title: 'Some Room Entry, yay!',
    comments: [],
    contents: [
      {
        type: 'text_block',
        value: {
          text: 'Ein Text',
        },
      },
      {
        type: 'subtitle',
        value: {
          text: 'Ein Untertitel',
        },
      },
    ],
  };

  const operations = {
    MeQuery: getMinimalMe({}),
    RoomEntryQuery: {
      roomEntry,
    },
    AddComment({ input }) {
      return {
        addComment: {
          success: true,
          comment: {
            text: input.comment,
            roomEntry: roomEntry,
            owner: {
              firstName: 'Matt',
              lastName: 'Damon',
            },
          },
        },
      };
    },
  };

  beforeEach(() => {
    cy.setup();
  });

  it('shows the article with contents', () => {
    cy.mockGraphqlOps({
      operations,
    });

    cy.visit(`/article/${slug}`);
    cy.getByDataCy('text-block').should('contain.text', 'Ein Text');
    cy.getByDataCy('subtitle-block').should('contain.text', 'Ein Untertitel');
  });

  it('goes to article and leaves a comment', () => {
    cy.mockGraphqlOps({
      operations,
    });

    const commentText = 'First! ';
    const emoji = '🖐';
    cy.visit(`/article/${slug}`);
    cy.getByDataCy('comment-textarea').type(commentText);
    cy.getByDataCy('emoji-button').should('have.length', 9).first().click();
    cy.getByDataCy('submit-comment').should('contain', 'Kommentar teilen').click();
    cy.getByDataCy('comment')
      .first()
      .should('contain', commentText + emoji);
  });

  it('does not show input field on mobile', () => {
    cy.mockGraphqlOps({
      operations,
    });
    cy.viewport('iphone-8');
    cy.visit(`/article/${slug}`);
    cy.getByDataCy('article-title').should('exist');
    cy.getByDataCy('comment-textarea').should('not.be.visible');
  });
});