// @flow
import React from 'react';
import {
  currentTheme,
  mountWrappedComponent,
  renderSnapshot,
} from '../../../../utils/tests';

import type { CheckboxProps } from './checkbox.proptypes';
import { Checkbox } from './index';
import { Selected, NotSelected } from './selected';

const DEFAULT_PROPS: CheckboxProps = {
  selected: false,
  id: 'id',
  className: 'className',
};

const DEFAULT_CHECKBOX_PROPS = {
  theme: currentTheme,
};

describe('Checkbox', () => {
  describe('snapshot', () => {
    it('matches the previous snapshot', () => {
      const checkbox = renderSnapshot(<Checkbox {...DEFAULT_PROPS} />);
      expect(checkbox).toMatchSnapshot();
    });

    describe('Selected', () => {
      it('matches the previous snapshot', () => {
        const selected = renderSnapshot(
          <svg>
            <Selected {...DEFAULT_CHECKBOX_PROPS} />
          </svg>,
        );
        expect(selected).toMatchSnapshot();
      });
    });

    describe('NotSelected', () => {
      it('matches the previous snapshot', () => {
        const notSelected = renderSnapshot(
          <svg>
            <NotSelected {...DEFAULT_CHECKBOX_PROPS} />
          </svg>,
        );
        expect(notSelected).toMatchSnapshot();
      });
    });
  });

  describe('behaviour', () => {
    it('displays the Selected svg if selected', () => {
      const checkbox = mountWrappedComponent(
        <Checkbox {...DEFAULT_PROPS} selected />,
      );

      expect(checkbox.find(Selected).exists()).toBe(true);
      expect(checkbox.find(NotSelected).exists()).toBe(false);
    });

    it('displays the NotSelected svg if not selected', () => {
      const checkbox = mountWrappedComponent(
        <Checkbox {...DEFAULT_PROPS} selected={false} />,
      );

      expect(checkbox.find(Selected).exists()).toBe(false);
      expect(checkbox.find(NotSelected).exists()).toBe(true);
    });
  });
});
