"use strict";

require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _BreadcrumbDecorator = _interopRequireDefault(require("../BreadcrumbDecorator"));
var _Panels = _interopRequireDefault(require("../Panels"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
describe('BreadcrumbDecorator Specs', function () {
  var Panel = function Panel() {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {});
  };
  test('should wrap primitive breadcrumbs with Breadcrumb', function () {
    var SingleBreadcrumbPanels = (0, _BreadcrumbDecorator["default"])({
      max: 1
    }, _Panels["default"]);
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(SingleBreadcrumbPanels, {
      index: 2,
      breadcrumbs: ['1st', '2nd', '3rd'],
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {})]
    }));
    var actual = _react.screen.getByText('2nd');
    expect(actual).toBeInTheDocument();
  });
  test('should generate {config.max} breadcrumbs', function () {
    var ThreeBreadcrumbPanels = (0, _BreadcrumbDecorator["default"])({
      max: 3
    }, _Panels["default"]);
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(ThreeBreadcrumbPanels, {
      index: 3,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {})]
    }));
    var firstBreadcrumb = _react.screen.getAllByLabelText('GO TO PREVIOUS')[0];
    var secondBreadcrumb = _react.screen.getAllByLabelText('GO TO PREVIOUS')[1];
    var thirdBreadcrumb = _react.screen.getAllByLabelText('GO TO PREVIOUS')[2];
    expect(firstBreadcrumb).toBeInTheDocument();
    expect(secondBreadcrumb).toBeInTheDocument();
    expect(thirdBreadcrumb).toBeInTheDocument();

    // Check that there are only 3 breadcrumbs displayed, even if we passed 4 panels above
    var allBreadcrumbs = _react.screen.getAllByLabelText('GO TO PREVIOUS');
    expect(allBreadcrumbs).toHaveLength(3);
  });
  test('should add {config.className} to the root node', function () {
    var className = 'root-node';
    var StyledBreadcrumbPanels = (0, _BreadcrumbDecorator["default"])({
      className: className
    }, _Panels["default"]);
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledBreadcrumbPanels, {
      "data-testid": "breadcrumb",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {})
    }));
    var expected = className;
    var rootNode = _react.screen.getByTestId('breadcrumb').parentElement;
    expect(rootNode).toHaveClass(expected);
  });
  test('should not set aria-owns when no breadcrumbs are needed', function () {
    var ThreeBreadcrumbPanels = (0, _BreadcrumbDecorator["default"])({
      max: 3
    }, _Panels["default"]);
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(ThreeBreadcrumbPanels, {
      index: 0,
      noCloseButton: true,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {})]
    }));

    // aria-owns is not visible in the DOM, so aria-label is used instead
    var actual = _react.screen.queryByLabelText('aria-label');
    expect(actual).toBeNull();
  });
  test('should set aria-owns on each Panel for the breadcrumbs', function () {
    var ThreeBreadcrumbPanels = (0, _BreadcrumbDecorator["default"])({
      max: 3
    }, _Panels["default"]);
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(ThreeBreadcrumbPanels, {
      index: 3,
      noCloseButton: true,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {})]
    }));
    var firstPanel = _react.screen.getAllByLabelText('GO TO PREVIOUS')[0];
    var secondPanel = _react.screen.getAllByLabelText('GO TO PREVIOUS')[1];
    var thirdPanel = _react.screen.getAllByLabelText('GO TO PREVIOUS')[2];

    // aria-owns is not visible in the DOM, so aria-label is used instead
    expect(firstPanel).toHaveAttribute('aria-label', 'GO TO PREVIOUS');
    expect(secondPanel).toHaveAttribute('aria-label', 'GO TO PREVIOUS');
    expect(thirdPanel).toHaveAttribute('aria-label', 'GO TO PREVIOUS');
  });
  test('should set aria-owns on each Panel for the `max` breadcrumbs', function () {
    var ThreeBreadcrumbPanels = (0, _BreadcrumbDecorator["default"])({
      max: 1
    }, _Panels["default"]);
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(ThreeBreadcrumbPanels, {
      id: "test",
      index: 3,
      noCloseButton: true,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {})]
    }));

    // tests for truncated {config.max} aria-owns entries in the format ${id}_bc_{$index}
    var expected = 'test_bc_2';
    var actual = _react.screen.getByLabelText('GO TO PREVIOUS');

    // aria-owns is not visible in the DOM, so the id is used instead
    expect(actual).toHaveAttribute('id', expected);
  });
});