@eureca/eureca-ui/src/components/Accordion/__tests__/accordion.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, fireEvent, waitForElement } from '@testing-library/react';

import { Accordion } from '..';

import { colors } from '../../../theme/colors';

const accordionTitle = 'Pergunta';
const accordionDescription = 'Para quem é a pergunta';
const accordionValidIconId = 'acc-icon';
const accordionKnobId = 'accordion-knob';
const accordionExpandedDivId = 'accordion-expanded';

function renderAccordion({ title, description, iconColor, div }) {
  return render(
    <Accordion title={title} description={description} iconColor={iconColor}>
      {div}
    </Accordion>
  );
}

describe('Accordion component', () => {
  it('has a title', async () => {
    const { getByText } = renderAccordion({ title: accordionTitle });
    const title = getByText(accordionTitle);
    expect(title).toHaveTextContent(accordionTitle);
  });

  it('has a description', async () => {
    const { getByText } = renderAccordion({
      title: accordionTitle,
      description: accordionDescription,
    });
    const description = getByText(accordionDescription);
    expect(description).toHaveTextContent(accordionDescription);
  });

  it('has a knob', async () => {
    const { getByTestId } = renderAccordion({
      title: accordionTitle,
      description: accordionDescription,
      iconColor: colors.gray4,
    });
    const knob = await waitForElement(() => getByTestId(accordionKnobId));
    expect(knob).not.toBeNull();
  });

  it('has an icon', async () => {
    const { getByTestId } = renderAccordion({
      title: accordionTitle,
      description: accordionDescription,
      iconColor: colors.gray4,
    });
    const icon = await waitForElement(() => getByTestId(accordionValidIconId));
    expect(icon).not.toBeNull();
  });

  it('rotates the knob when open', async () => {
    const { getByTestId } = renderAccordion({
      title: accordionTitle,
      description: accordionDescription,
      iconColor: colors.gray4,
    });
    fireEvent.click(getByTestId(accordionKnobId));
    const knob = getByTestId(accordionKnobId);
    expect(knob).toHaveStyle('transform: rotate(-180deg)');
  });

  it('opens the container when clicked', async () => {
    const divHeight300 = <div style={{ height: 300 }}>OK!</div>;

    const { getByTestId } = renderAccordion({
      title: accordionTitle,
      description: accordionDescription,
      iconColor: colors.gray4,
      div: divHeight300,
    });

    const innerContainer = getByTestId(accordionExpandedDivId);
    expect(innerContainer).toHaveAttribute('aria-expanded', 'false');
    fireEvent.click(getByTestId(accordionKnobId));
    expect(innerContainer).toHaveAttribute('aria-expanded', 'true');
  });
});