@eureca/eureca-ui/src/components/Cards/__tests__/user-home.test.js

UI component library of Eureca's user and admin apps

import React from 'react';
import Color from 'color';

import { FiHome } from 'react-icons/fi';

import { UserHomeCard } from '../user-home';

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

const mockFn = jest.fn();

function renderCard({ icon, title, color, onClick }) {
  return render(
    <UserHomeCard
      icon={<FiHome />}
      title={title}
      color={color}
      onClick={onClick}
      data-testid="card-testid"
    >
      Children
    </UserHomeCard>
  );
}

describe('User Home card', () => {
  it('renders with a title and children', () => {
    const { getByText, getByTestId } = renderCard({ title: 'título' });
    const title = getByText('título');
    const card = getByTestId('card-testid');
    const children = getByText('Children');
    expect(title.textContent).toBe('título');
    expect(card.lastChild.lastChild.lastChild.textContent).toBe(children.textContent);
  });

  it('spread the color to container background and text color', () => {
    const { getByText, getByTestId } = renderCard({ title: 'título', color: '#0ff' });
    const card = getByTestId('card-testid');
    const { background } = window.getComputedStyle(card.firstChild.firstChild);
    const { color } = window.getComputedStyle(getByText('título'));
    expect(background).toBe(Color('#0ff').toString());
    expect(color).toBe(Color('#0ff').toString());
  });

  it('triggers onClick', () => {
    const { getByTestId } = renderCard({ onClick: mockFn });
    const card = getByTestId('card-testid');
    fireEvent.click(card);
    expect(mockFn).toHaveBeenCalled();
  });
});