@eureca/eureca-ui/src/components/EvaluationHeader/__tests__/evaluation-header.test.js

UI component library of Eureca's user and admin apps

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

import { EvaluationHeader } from '..';

const type = 'pdf';
const status = 'completed';
const title = 'Title';
const name = 'Name';

const color = '#2ECAAF';

function renderEvaluationHeader({ type, status, title, name }) {
  return render(<EvaluationHeader type={type} status={status} title={title} name={name} />);
}

describe('Evaluation Header component', () => {
  it('display the correct title', async () => {
    const { getByText } = renderEvaluationHeader({
      type: type,
      status: status,
      title: title,
      name: name,
    });

    const headerTitle = getByText(title);
    expect(headerTitle).toHaveTextContent(title);
    expect(headerTitle).toHaveStyle('font-weight: 400');
  });

  it('display the correct name', async () => {
    const { getByText } = renderEvaluationHeader({
      type: type,
      status: status,
      title: title,
      name: name,
    });

    const headerName = getByText(name);
    expect(headerName).toHaveTextContent(name);
  });

  it('has the correct header color', async () => {
    const { getByTestId } = renderEvaluationHeader({
      type: type,
      status: status,
      title: title,
      name: name,
    });

    const headerContainer = getByTestId('evaluation-header-container');
    expect(headerContainer).toHaveStyle(`background-color: ${color}`);
  });
});