function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React, { useState } from 'react';
import '@testing-library/jest-dom/extend-expect';
import 'jest-styled-components';
import { ColorNeutral200, ColorAction000, ColorNeutralWhite } from '@defencedigital/design-tokens';
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Radio } from '.';
import { CHECKBOX_RADIO_VARIANT } from '../CheckboxRadioBase';
describe('Radio', function () {
  var field;
  var label;
  var radio;
  beforeEach(function () {
    label = '';
    field = {
      name: 'colour',
      value: '',
      onChange: jest.fn(),
      onBlur: jest.fn()
    };
  });
  describe('when the field has no errors, a label and a value', function () {
    var input;
    beforeEach(function () {
      label = 'My Label 1';
      field.value = 'option1';
      radio = render( /*#__PURE__*/React.createElement(Radio, {
        name: field.name,
        value: field.value,
        onChange: field.onChange,
        label: label
      }));
      input = radio.getByTestId('radio-input');
    });
    it('should render a container', function () {
      expect(radio.getByTestId('radio')).toHaveStyleRule('border', "1px solid ".concat(ColorNeutral200));
      expect(radio.getByTestId('radio')).toHaveStyleRule('border-radius', '15px');
      expect(radio.getByTestId('radio')).toHaveStyleRule('background', ColorNeutralWhite);
    });
    it('should render a field with a label', function () {
      expect(radio.getByTestId('radio-label')).toHaveTextContent('My Label 1');
    });
    it('should not render a description', function () {
      expect(radio.queryAllByTestId('radio-description')).toHaveLength(0);
    });
    it('should populate the field value', function () {
      expect(input).toHaveAttribute('value', 'option1');
    });
    describe('and tab is pressed', function () {
      beforeEach(function () {
        return userEvent.tab();
      });
      it('focuses the input', function () {
        expect(input).toHaveFocus();
      });
      describe('and space is pressed', function () {
        beforeEach(function () {
          return userEvent.keyboard('[Space]');
        });
        it('checks the input', function () {
          expect(input).toBeChecked();
        });
        it('calls onChange once', function () {
          expect(field.onChange).toHaveBeenCalledTimes(1);
        });
        it('styles the container as active', function () {
          expect(radio.getByTestId('radio')).toHaveStyleRule('background', ColorAction000);
        });
      });
    });
  });
  describe('when an additional class is provided', function () {
    beforeEach(function () {
      radio = render( /*#__PURE__*/React.createElement(Radio, {
        className: "test",
        name: field.name,
        value: field.value,
        onChange: field.onChange,
        label: label
      }));
    });
    it('should attach the class to the wrapper', function () {
      expect(radio.queryByTestId('radio')).toHaveClass('test');
    });
  });
  describe('when an id is provided', function () {
    beforeEach(function () {
      radio = render( /*#__PURE__*/React.createElement(Radio, {
        id: "test",
        name: field.name,
        value: field.value,
        onChange: field.onChange,
        label: label
      }));
    });
    it('should attach the id to the field', function () {
      expect(radio.queryByTestId('radio-input')).toHaveAttribute('id', 'test');
    });
    it('should associate the label to the field with the custom id', function () {
      expect(radio.queryByTestId('radio-label')).toHaveAttribute('for', 'test');
    });
  });
  describe('when arbitrary props are provided', function () {
    beforeEach(function () {
      radio = render( /*#__PURE__*/React.createElement(Radio, {
        "data-arbitrary": "arbitrary",
        name: field.name,
        value: field.value,
        onChange: field.onChange,
        label: label
      }));
    });
    it('should spread arbitrary props', function () {
      expect(radio.getByTestId('radio-input')).toHaveAttribute('data-arbitrary', 'arbitrary');
    });
  });
  describe('when a field has a description', function () {
    beforeEach(function () {
      radio = render( /*#__PURE__*/React.createElement(Radio, {
        description: "Description",
        label: "Label",
        name: field.name
      }));
    });
    it('should render a description', function () {
      expect(radio.getByTestId('radio-description')).toHaveTextContent('Description');
    });
  });
  describe('when a field has a description that is arbitrary JSX', function () {
    beforeEach(function () {
      radio = render( /*#__PURE__*/React.createElement(Radio, {
        description: /*#__PURE__*/React.createElement("div", null, "Arbitrary content"),
        label: "Label",
        name: field.name
      }));
    });
    it('should render a arbitrary description', function () {
      expect(radio.getByText('Arbitrary content')).toBeInTheDocument();
    });
  });
  describe('when a field does not have a container', function () {
    beforeEach(function () {
      radio = render( /*#__PURE__*/React.createElement(Radio, {
        label: "Label",
        name: field.name,
        variant: CHECKBOX_RADIO_VARIANT.NO_CONTAINER
      }));
    });
    it('should not render a container', function () {
      expect(radio.getByTestId('radio')).not.toHaveStyleRule('border', "1px solid ".concat(ColorNeutral200));
      expect(radio.getByTestId('radio')).not.toHaveStyleRule('border-radius', '15px');
    });
  });
  describe('when the default `id` is used and input is toggled', function () {
    var initialId;
    beforeEach(function () {
      radio = render( /*#__PURE__*/React.createElement(Radio, {
        label: "label",
        name: "name"
      }));
      var input = radio.getByTestId('radio-input');
      initialId = input.id;
      return userEvent.click(radio.getByTestId('radio'));
    });
    it('does not generate a new `id`', function () {
      expect(radio.getByTestId('radio-input')).toHaveAttribute('id', initialId);
    });
  });
  describe('when a field has `defaultChecked` prop set', function () {
    beforeEach(function () {
      label = 'My Label 1';
      field.value = 'false';
      radio = render( /*#__PURE__*/React.createElement(Radio, {
        name: field.name,
        value: field.value,
        label: label,
        onChange: field.onChange,
        defaultChecked: true
      }));
    });
    it('should initially render as checked', function () {
      expect(radio.getByTestId('radio-input')).toBeChecked();
    });
  });
  describe('when a field has `checked` prop set', function () {
    beforeEach(function () {
      label = 'My Label 1';
      field.value = 'false';
      var StateWrapper = function StateWrapper() {
        var _useState = useState(true),
          _useState2 = _slicedToArray(_useState, 2),
          isChecked = _useState2[0],
          setIsChecked = _useState2[1];
        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Radio, {
          name: field.name,
          value: field.value,
          label: label,
          onChange: field.onChange,
          checked: isChecked
        }), /*#__PURE__*/React.createElement("button", {
          onClick: function onClick(_) {
            return setIsChecked(false);
          }
        }, "Click Me!"));
      };
      radio = render( /*#__PURE__*/React.createElement(StateWrapper, null));
    });
    it('should initially render as checked', function () {
      expect(radio.getByTestId('radio-input')).toBeChecked();
    });
    describe('and the button is clicked, changing the `isChecked` state', function () {
      beforeEach(function () {
        return userEvent.click(radio.getByTestId('change-checked-state'));
      });
      it('should uncheck the radio', function () {
        expect(radio.getByTestId('radio-input')).not.toBeChecked();
      });
    });
  });
});