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

UI component library of Eureca's user and admin apps

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

import { Card } from '../card';
import { render } from '@testing-library/react';

function renderCard({ children }) {
  return render(<Card data-testid="card-testid">{children}</Card>);
}

describe('Card component', () => {
  it('renders default card', () => {
    const { getByTestId } = renderCard({});
    const card = getByTestId('card-testid');
    const { backgroundColor, borderRadius } = window.getComputedStyle(card);
    expect(backgroundColor).toBe(Color('#ffffff').toString());
    expect(borderRadius).toBe('4px');
  });

  it('renders with a text children', () => {
    const { getByTestId } = renderCard({ children: 'Teste' });
    const card = getByTestId('card-testid');
    const cardChildren = card.firstChild;
    expect(cardChildren.textContent).toBe('Teste');
  });

  it('renders with a html element children', () => {
    const { getByTestId } = renderCard({ children: <div data-testid="children-id">Teste</div> });
    const children = getByTestId('children-id');
    expect(children).not.toBeNull();
    expect(children).toBeInstanceOf(HTMLElement);
    expect(children.textContent).toBe('Teste');
  });
});