@eureca/eureca-ui/src/components/Switch/__tests__/switch-button.test.js

UI component library of Eureca's user and admin apps

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

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

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

const options = [
  { name: 'Chihiro', value: '1st' },
  { name: 'Howl', value: '2nd' },
];
const mockFn = jest.fn().mockImplementation(v => v);

describe('Switch Button component', () => {
  it('has the first option default selected', () => {
    const { getByText } = render(<SwitchButton options={options} />);
    const firstOption = getByText('Chihiro');
    const { color } = getComputedStyle(firstOption);
    expect(color).toBe(Color(colors.white).toString());
  });

  it('can switch between options', () => {
    const { getByText } = render(<SwitchButton options={options} onChange={mockFn} />);
    const firstOption = getByText('Chihiro');
    const secondOption = getByText('Howl');
    expect(getComputedStyle(firstOption).color).toBe(Color(colors.white).toString());
    expect(getComputedStyle(secondOption).color).toBe(Color(colors.gray3).toString());
    fireEvent.click(secondOption);
    expect(mockFn).toReturnWith('2nd');
    expect(getComputedStyle(firstOption).color).toBe(Color(colors.gray3).toString());
    expect(getComputedStyle(secondOption).color).toBe(Color(colors.white).toString());
  });
});