@eureca/eureca-ui/src/components/Messages/__tests__/messages.test.js

UI component library of Eureca's user and admin apps

import React from 'react';
import { render, fireEvent } from '@testing-library/react';

import { Messages } from '..';

function renderMessages({ data }) {
  return render(<Messages data={data} data-testid="messagesTest" />);
}

const setup = props => {
  const utils = renderMessages(props);
  const messages = utils.getByTestId('messagesTest');
  return { messages, ...utils };
};

const messageData = [
  {
    id: 39320,
    title: 'Atualize seu perfil',
    sender: {
      id: 1302,
      name: 'Carla Lopes',
      email: 'carla.lopes@eureca.me',
      avatar: 'https://www.lewesac.co.uk/wp-content/uploads/2017/12/default-avatar.jpg',
    },
    date: new Date(2019, 6, 17, 3, 24, 0),
    body: (
      <span>
        Hey, Fê!
        <br />
        Que alegria ter você em nossa comunidade!
        <br />
        <br />
        Aqui, na Eureca, acreditamos que você tem o potencial necessário para{' '}
        <b>empreender as transformações que o mundo precisa</b>, e como não temos tempo a perder,
        nada melhor do que fazer isso por meio do desenvolvimento e intraempreendedorismo.
        <br />
        <br />
        Um beijo, Carlinha.
      </span>
    ),
  },
  {
    id: 32030,
    title: 'Atualize seu perfil',
    sender: {
      id: 1302,
      name: 'Carla Lopes',
      email: 'carla.lopes@eureca.me',
      avatar: 'https://www.lewesac.co.uk/wp-content/uploads/2017/12/default-avatar.jpg',
    },
    date: new Date(),
    body: <span>Hey, Gi!</span>,
  },
];

test('Render component with title', () => {
  const { getAllByText } = setup({
    data: messageData,
  });

  expect(getAllByText('Atualize seu perfil')).not.toBeNull();
});

test('Check if clicking message opens panel', () => {
  const { messages, getByText } = setup({
    data: messageData,
  });

  const messageHeader = messages.children[0].children[0];

  fireEvent.click(messageHeader);

  expect(getByText('Carla Lopes')).not.toBeNull();
});

test('Check if clicking message changes background color', () => {
  const { messages } = setup({
    data: messageData,
  });

  const messageHeader = messages.children[0].children[1];

  expect(window.getComputedStyle(messageHeader).backgroundColor).toBe('rgb(235, 235, 235)');

  fireEvent.click(messageHeader);

  expect(window.getComputedStyle(messageHeader).backgroundColor).toBe('rgb(255, 255, 255)');
});