import React from 'react';
import '@testing-library/jest-dom/extend-expect';
import { render } from '@testing-library/react';
import { DescriptionList, DescriptionListItem } from '.';
describe('DescriptionList', function () {
  var wrapper;
  describe('default props', function () {
    beforeEach(function () {
      wrapper = render( /*#__PURE__*/React.createElement(DescriptionList, {
        "data-arbitrary": "arbitrary",
        description: "description"
      }, /*#__PURE__*/React.createElement(DescriptionListItem, {
        "data-arbitrary": "arbitrary-item",
        title: "One"
      }, "1"), /*#__PURE__*/React.createElement(DescriptionListItem, {
        title: "Two"
      }, "2"), /*#__PURE__*/React.createElement(DescriptionListItem, {
        title: "Three"
      }, "3")));
    });
    it('should spread arbitrary props to the description list', function () {
      expect(wrapper.getByTestId('description-list')).toHaveAttribute('data-arbitrary', 'arbitrary');
    });
    it('should spread arbitrary props to the description list items', function () {
      expect(wrapper.getAllByTestId('description-list-item')[0]).toHaveAttribute('data-arbitrary', 'arbitrary-item');
    });
    it('should not set `aria-expanded` on the button', function () {
      expect(wrapper.getByTestId('description-list-header')).not.toHaveAttribute('aria-expanded');
    });
    it('should not set `aria-label` on the button', function () {
      expect(wrapper.getByTestId('description-list-header')).not.toHaveAttribute('aria-label');
    });
    it('should not set `aria-owns` on the button', function () {
      expect(wrapper.getByTestId('description-list-header')).not.toHaveAttribute('aria-owns');
    });
    it('should render the description', function () {
      expect(wrapper.queryByText('description')).toBeInTheDocument();
    });
    it('should not render the badge', function () {
      expect(wrapper.queryAllByTestId('badge')).toHaveLength(0);
    });
    it('should render a list of items', function () {
      var linkElements = wrapper.queryAllByTestId('description-list-item');
      expect(linkElements).toHaveLength(3);
    });
  });
  describe('when collapsible', function () {
    beforeEach(function () {
      wrapper = render( /*#__PURE__*/React.createElement(DescriptionList, {
        description: "title",
        isCollapsible: true
      }, /*#__PURE__*/React.createElement(DescriptionListItem, {
        title: "One"
      }, "1"), /*#__PURE__*/React.createElement(DescriptionListItem, {
        title: "Two"
      }, "2"), /*#__PURE__*/React.createElement(DescriptionListItem, {
        title: "Three"
      }, "3")));
    });
    it('should set `aria-expanded` on the button to `false`', function () {
      expect(wrapper.getByTestId('description-list-header')).toHaveAttribute('aria-expanded', 'false');
    });
    it('should set `aria-label` on the button to `Show data`', function () {
      expect(wrapper.getByTestId('description-list-header')).toHaveAttribute('aria-label', 'Show data');
    });
    it('should set `aria-owns` on the button to the ID of the sheet', function () {
      var sheetId = wrapper.getByTestId('description-list-sheet').getAttribute('id');
      expect(wrapper.getByTestId('description-list-header')).toHaveAttribute('aria-owns', sheetId);
    });
    it('should hide the items', function () {
      expect(wrapper.getAllByTestId('description-list-item')[0]).toBeVisible();
    });
    it('should render the badge', function () {
      expect(wrapper.queryByTestId('badge')).toHaveTextContent('3');
    });
    it('should set the `aria-hidden` attribute on the icon to `true`', function () {
      expect(wrapper.queryByTestId('arrow-down-icon')).toHaveAttribute('aria-hidden', 'true');
    });
    describe('when the header is clicked', function () {
      var initialSheetId;
      beforeEach(function () {
        initialSheetId = wrapper.getByTestId('description-list-sheet').id;
        wrapper.getByTestId('description-list-header').click();
      });
      it('does not generate a new sheet `id`', function () {
        expect(wrapper.getByTestId('description-list-sheet')).toHaveAttribute('id', initialSheetId);
      });
      it('should set `aria-expanded` on the button to `true`', function () {
        expect(wrapper.getByTestId('description-list-header')).toHaveAttribute('aria-expanded', 'true');
      });
      it('should set `aria-label` on the button to `Hide data`', function () {
        expect(wrapper.getByTestId('description-list-header')).toHaveAttribute('aria-label', 'Hide data');
      });
      it('should show the items', function () {
        expect(wrapper.getAllByTestId('description-list-item')[0]).toBeVisible();
      });
    });
  });
  describe('when collapsible and `isOpen` prop is set', function () {
    beforeEach(function () {
      wrapper = render( /*#__PURE__*/React.createElement(DescriptionList, {
        description: "title",
        isCollapsible: true,
        isOpen: true
      }, /*#__PURE__*/React.createElement(DescriptionListItem, {
        title: "One"
      }, "1"), /*#__PURE__*/React.createElement(DescriptionListItem, {
        title: "Two"
      }, "2"), /*#__PURE__*/React.createElement(DescriptionListItem, {
        title: "Three"
      }, "3")));
    });
    it('should set `aria-expanded` on the button to `true`', function () {
      expect(wrapper.getByTestId('description-list-header')).toHaveAttribute('aria-expanded', 'true');
    });
    it('should set `aria-label` on the button to `Hide data`', function () {
      expect(wrapper.getByTestId('description-list-header')).toHaveAttribute('aria-label', 'Hide data');
    });
    it('should show the items', function () {
      expect(wrapper.getAllByTestId('description-list-item')[0]).toBeVisible();
    });
    describe('when the header is clicked', function () {
      it('should hide the items', function () {
        expect(wrapper.getAllByTestId('description-list-item')[0]).toBeVisible();
      });
    });
  });
});