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

UI component library of Eureca's user and admin apps

import React from 'react';

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

import { TrackInfoCard } from '../track-info';

const mock = { track: 'Mock', opportunities: 10300, modules: 0, solutions: 400 };

const locale = 'pt-br';

function renderCard({ track, opportunities, modules, solutions }) {
  return render(
    <TrackInfoCard
      track={track}
      opportunities={opportunities}
      modules={modules}
      solutions={solutions}
    />
  );
}

describe('Track info card component', () => {
  it('has a track name', () => {
    const { getByText } = renderCard(mock);
    const trackName = getByText(`Trilha: ${mock.track}`);
    expect(trackName).toBeDefined();
  });

  it('format the number to locale string', () => {
    const { getByText } = renderCard(mock);
    const opportunitiesTitle = getByText('Vagas');
    const formatedOpportunities = opportunitiesTitle.parentNode.previousSibling;
    expect(formatedOpportunities.textContent).toBe((10300).toLocaleString(locale));
  });

  it('transform no value/undefined/null to 0', () => {
    const { getByText } = renderCard(mock);
    const modulesTitle = getByText('Módulos');
    const formatedModules = modulesTitle.parentNode.previousSibling;
    expect(formatedModules.textContent).toBe('0');
  });

  it('rendered all three items', () => {
    const { getByText } = renderCard(mock);
    const opportunitiesTitle = getByText('Vagas');
    const modulesTitle = getByText('Módulos');
    const solutionsTitle = getByText('Total de soluções');

    const formatedOpportunities = opportunitiesTitle.parentNode.previousSibling;
    const formatedModules = modulesTitle.parentNode.previousSibling;
    const formatedSolutions = solutionsTitle.parentNode.previousSibling;
    expect(formatedOpportunities.textContent).toBe((10300).toLocaleString(locale));
    expect(formatedModules.textContent).toBe('0');
    expect(formatedSolutions.textContent).toBe('400');
  });
});