@eureca/eureca-ui/src/components/ProfileStrength/__tests__/profile-strength.test.js

UI component library of Eureca's user and admin apps

import React from 'react';
import Color from 'color';

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

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

function renderProfileStrength(props) {
  return render(<ProfileStrength {...props} />);
}

const gray = Color(colors.gray4).toString();

describe('Profile Strength component', () => {
  it('render 7 pills', () => {
    const { getAllByTestId } = renderProfileStrength({ value: 3 });
    const pills = getAllByTestId('pill-testid');
    expect(pills.length).toBe(7);
  });

  it('colorize pills by value', () => {
    const { getAllByTestId } = renderProfileStrength({ value: 5 });
    const pills = getAllByTestId('pill-testid');
    function getBgColor(index) {
      return window.getComputedStyle(pills[index]).backgroundColor;
    }
    expect(getBgColor(0)).not.toBe(gray);
    expect(getBgColor(1)).not.toBe(gray);
    expect(getBgColor(2)).not.toBe(gray);
    expect(getBgColor(3)).not.toBe(gray);
    expect(getBgColor(4)).not.toBe(gray);
    expect(getBgColor(5)).toBe(gray);
    expect(getBgColor(6)).toBe(gray);
  });
});