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

UI component library of Eureca's user and admin apps

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

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

import { MobileCard } from '..';

const icon = <FiThumbsUp />;

const data = {
  completed: false,
  title: 'Informações Gerais',
  disabled: false,
  step: 1,
};

const mockOnClick = jest.fn();

function renderMobileCard({ icon, onClick, data }) {
  return render(<MobileCard icon={icon} onClick={onClick} {...data} />);
}

describe('MobileCard component', () => {
  it('shows the correct title', async () => {
    const { getByText } = renderMobileCard({ icon: icon, onClick: mockOnClick, data: data });

    const componentTitle = getByText(data.title);
    expect(componentTitle).toBeTruthy();
  });

  it('shows the correct step', async () => {
    const { getByText } = renderMobileCard({ icon: icon, onClick: mockOnClick, data: data });

    const componentStep = getByText(/1/);
    expect(componentStep.textContent).toContain(`Passo ${data.step}`);
  });

  it('has the correct style when completed is true', async () => {
    const { getByTestId } = renderMobileCard({
      icon: icon,
      onClick: mockOnClick,
      data: { ...data, completed: true },
    });

    const componentIcon = getByTestId('left-icon');
    expect(componentIcon).toHaveStyle('color: #FFF');
  });
});