@eureca/eureca-ui/src/components/Rating/__tests__/rating.test.js

UI component library of Eureca's user and admin apps

import React from 'react';

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

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

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

function renderRating(props) {
  return render(<Rating {...props} />);
}

describe('Rating component', () => {
  it('return the rating of a clicked star', () => {
    const { container } = renderRating({ onChange: mockFn });
    const {
      firstChild: { childNodes },
    } = container;
    fireEvent.click(childNodes[3].firstChild);
    expect(mockFn).toBeCalled();
    expect(mockFn).toReturnWith(4);
  });
  it('highlight the range of stars that are selected', () => {
    const { container } = renderRating({ selected: 2 });
    const {
      firstChild: { childNodes },
    } = container;

    const getColor = index => childNodes[index].firstChild.getAttribute('color');

    expect(getColor(0)).toBe(colors.green1);
    expect(getColor(1)).toBe(colors.green1);
    expect(getColor(2)).toBe(colors.gray3);
    expect(getColor(3)).toBe(colors.gray3);
    expect(getColor(4)).toBe(colors.gray3);
  });
  it('has a custom max range', () => {
    const { container } = renderRating({ maxRating });
    expect(container.firstChild.childElementCount).toBe(maxRating);
  });
});