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

UI component library of Eureca's user and admin apps

import React from 'react';
import { addDays, subDays } from 'date-fns';

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

import { ProgressCard } from '..';

const mockFn = jest.fn().mockImplementation(v => v);
const randomNumber = Math.floor(Math.random() * 10);

const commonMockData = {
  title: 'Online',
  progress: randomNumber,
  status: 'confirmation',
};

const unavailableData = { date: '', ...commonMockData };

const dataWithFinishedDate = { date: subDays(new Date(), 20), ...commonMockData };

const dataWithDate = { date: addDays(new Date(), 25), ...commonMockData };

function renderProgressCard(props) {
  return render(<ProgressCard {...props} />);
}

describe('Progress Card component', () => {
  it('renders and trigger onClick', () => {
    const { container } = renderProgressCard({
      ...unavailableData,
      active: true,
      onClick: mockFn,
    });
    fireEvent.click(container.firstChild);
    expect(mockFn).toBeCalledTimes(1);
  });

  it('decodes a status string', () => {
    const { getByText } = renderProgressCard({
      ...unavailableData,
      active: true,
      onClick: mockFn,
    });
    const translated = getByText('Indisponível');
    expect(translated).toBeDefined();
  });

  it('decodes a date', () => {
    const { getByText } = renderProgressCard({ ...dataWithDate, active: true, onClick: mockFn });
    const translated = getByText('Faltam 24 dias para encerrar essa fase');
    expect(translated).toBeDefined();
  });

  it('decodes a past date', () => {
    const { getByText } = renderProgressCard({
      ...dataWithFinishedDate,
      active: true,
      onClick: mockFn,
    });
    const translated = getByText('Encerrada');
    expect(translated).toBeDefined();
  });

  it('has a progress rendered', () => {
    const { getByText } = renderProgressCard({
      ...dataWithFinishedDate,
      active: true,
      onClick: mockFn,
    });
    const { nextSibling } = getByText('Progresso:');
    expect(nextSibling.textContent).toBe(`${randomNumber}%`);
  });
});