@eureca/eureca-ui/src/components/Board/__tests__/card.test.js

UI component library of Eureca's user and admin apps

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Color from 'color';

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

import { Card } from '../card';
import { colors } from '../../../theme/colors';

const renderFlex = props => render(<Card {...props} />);

const setup = props => {
  const utils = renderFlex(props);
  const card = utils.getByTestId('card-test');
  return { card, ...utils };
};

test('renders a card with title, subtitle, and icon', () => {
  const { getByText, container } = setup({
    id: 0,
    title: 'Test card',
    subtitle: 'subtitle',
    icon: <FiEdit />,
  });

  getByText(/test card/i);
  getByText(/subtitle/i);

  const icon = container.querySelector('svg');
  expect(icon).not.toBeNull();
});

test('allow the card icon color to be set via props', () => {
  const { getByTestId } = setup({ id: 0, title: 'Test card', icon: <FiEdit />, iconColor: 'red' });

  const icon = getByTestId('icon-id');
  expect(icon).toHaveStyle('color: red');
});

test('allow title and subtitle to have colors set via props', () => {
  const { getByText } = setup({
    id: 0,
    title: 'test card',
    subtitle: 'subtitle',
    icon: <FiEdit />,
    titleColor: colors.green1,
    subtitleColor: colors.gray4,
  });

  const title = getByText(/test card/i);
  const titleStyles = window.getComputedStyle(title);
  // since chai-jquery returns rgb colors, we have to use the color lib to convert hex to rgb
  expect(titleStyles.color).toBe(Color(colors.green1).string());

  const subtitle = getByText(/subtitle/i);
  const subtitleStyles = window.getComputedStyle(subtitle);
  expect(subtitleStyles.color).toBe(Color(colors.gray4).string());
});

test('hover triggers the edit menu to appear', () => {
  const { getByText, getByTestId } = setup({
    id: 0,
    title: 'test card',
    icon: <FiEdit />,
    titleColor: 'blue',
    subtitleColor: 'green',
    showAction: true,
  });

  const title = getByText(/test card/i);
  fireEvent.mouseOver(title);

  const editMenu = getByTestId('edit-menu');
  expect(editMenu).toBeTruthy();
});