import React from 'react';
import '@testing-library/jest-dom/extend-expect';
import { render } from '@testing-library/react';
import { selectors } from '@defencedigital/design-tokens';
import { Switch, SwitchOption } from '.';
var color = selectors.color;
describe('Switch', function () {
  var wrapper;
  var onChangeSpy;
  describe('when all props are specified', function () {
    beforeEach(function () {
      onChangeSpy = jest.fn();
      wrapper = render( /*#__PURE__*/React.createElement(Switch, {
        className: "custom-class",
        "data-arbitrary": "arbitrary",
        label: "Switch label",
        name: "switch-name",
        onChange: onChangeSpy,
        value: "3"
      }, /*#__PURE__*/React.createElement(SwitchOption, {
        label: "Option 1",
        value: "1"
      }), /*#__PURE__*/React.createElement(SwitchOption, {
        label: "Option 2",
        value: "2"
      }), /*#__PURE__*/React.createElement(SwitchOption, {
        label: "Option 3",
        value: "3"
      })));
    });
    it('should spread arbitrary props', function () {
      expect(wrapper.getByTestId('switch')).toHaveAttribute('data-arbitrary', 'arbitrary');
    });
    it('should drill the custom CSS class', function () {
      expect(wrapper.getByTestId('switch').classList).toContain('custom-class');
    });
    it('should render the label', function () {
      expect(wrapper.getByText('Switch label')).toBeInTheDocument();
    });
    it('should set the name', function () {
      var switchInputs = wrapper.getAllByTestId('switch-input');
      expect(switchInputs[0].getAttribute('name')).toEqual('switch-name');
      expect(switchInputs[1].getAttribute('name')).toEqual('switch-name');
      expect(switchInputs[2].getAttribute('name')).toEqual('switch-name');
    });
    it('should render 3 options', function () {
      expect(wrapper.getByText('Option 1')).toBeInTheDocument();
      expect(wrapper.getByText('Option 2')).toBeInTheDocument();
      expect(wrapper.getByText('Option 3')).toBeInTheDocument();
      expect(wrapper.getAllByTestId('switch-input')).toHaveLength(3);
    });
    it('should set the value', function () {
      expect(wrapper.getByText('Option 3')).toHaveStyleRule('background-color', color('action', '600'));
    });
    describe('when the selected option is changed', function () {
      beforeEach(function () {
        wrapper.getByText('Option 1').click();
      });
      it('should set the value', function () {
        expect(wrapper.getByText('Option 1')).toHaveStyleRule('background-color', color('action', '600'));
      });
      it('should call the onClick callback', function () {
        expect(onChangeSpy).toHaveBeenCalledTimes(1);
      });
    });
  });
  describe('when minimal props are specified', function () {
    beforeEach(function () {
      wrapper = render( /*#__PURE__*/React.createElement(Switch, {
        name: "switch-name"
      }, /*#__PURE__*/React.createElement(SwitchOption, {
        label: "Option 1",
        value: "1"
      }), /*#__PURE__*/React.createElement(SwitchOption, {
        label: "Option 2",
        value: "2"
      }), /*#__PURE__*/React.createElement(SwitchOption, {
        label: "Option 3",
        value: "3"
      })));
    });
    it('should not render the label', function () {
      expect(wrapper.queryAllByTestId('switch-legend')).toHaveLength(0);
    });
  });
  describe('when the component is disabled', function () {
    beforeEach(function () {
      onChangeSpy = jest.fn();
      wrapper = render( /*#__PURE__*/React.createElement(Switch, {
        name: "switch-name",
        isDisabled: true,
        onChange: onChangeSpy
      }, /*#__PURE__*/React.createElement(SwitchOption, {
        label: "Option 1",
        value: "1"
      }), /*#__PURE__*/React.createElement(SwitchOption, {
        label: "Option 2",
        value: "2"
      }), /*#__PURE__*/React.createElement(SwitchOption, {
        label: "Option 3",
        value: "3"
      })));
    });
    it('should not invoke the onChange handler when an option is clicked', function () {
      wrapper.getByText('Option 1').click();
      expect(onChangeSpy).not.toHaveBeenCalled();
    });
  });
  describe('when the component has a falsey child', function () {
    beforeEach(function () {
      var showThird = false;
      wrapper = render( /*#__PURE__*/React.createElement(Switch, {
        name: "switch-name"
      }, /*#__PURE__*/React.createElement(SwitchOption, {
        label: "Option 1",
        value: "1"
      }), /*#__PURE__*/React.createElement(SwitchOption, {
        label: "Option 2",
        value: "2"
      }), showThird && /*#__PURE__*/React.createElement(SwitchOption, {
        label: "Option 3",
        value: "3"
      })));
    });
    it('should not render the third option', function () {
      expect(wrapper.queryByText('Option 3')).not.toBeInTheDocument();
    });
  });
});