import React from 'react';
import { shallow } from 'enzyme';
import Toggle from './Toggle';

describe('Toggle', () => {
  it('should match a snapshot', () => {
    const props = {
      label: 'Test label',
      sublabel: 'Test sublabel',
      className: null,
      variant: 'dark',
      disabled: false,
    };

    const component = shallow(<Toggle {...props} />);

    expect(component).toMatchSnapshot();
  });

  it('should be disabled if prop is present', () => {
    const component = shallow(<Toggle disabled />);

    expect(component.find('input').props().disabled).toBe(true);
  });

  it('should show label if prop is present', () => {
    const component = shallow(<Toggle label="test label" />);

    expect(component.find('.Toggle-label--text').exists()).toBe(true);
  });

  it('should show sublabel if prop is present', () => {
    const component = shallow(<Toggle label="test label" sublabel="test sublable" />);

    expect(component.find('.Toggle-label--subtext').exists()).toBe(true);
  });

  it('should contain dark variant', () => {
    const component = shallow(<Toggle variant="dark" />);

    expect(component.hasClass('Toggle--dark')).toBe(true);
  });

  it('should contain light variant', () => {
    const component = shallow(<Toggle variant="light" />);

    expect(component.hasClass('Toggle--light')).toBe(true);
  });
});