@enact/sandstone/Panels/tests/Header-specs.js

Large-screen/TV support library for Enact, containing a variety of UI components.

"use strict";

require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _Header = _interopRequireDefault(require("../Header"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
describe('Header Specs', function () {
  test('should render with title text without changing case', function () {
    var expected = 'cRaZy-cased super Header';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
        children: expected
      })
    }));
    var header = _react.screen.getByText(expected);
    expect(header).toBeInTheDocument();
  });
  test('should support "wizard" type', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {
      "data-testid": "header",
      type: "wizard",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
        children: "Wizard Header"
      })
    }));
    var expected = 'wizard';
    var header = _react.screen.getByTestId('header');
    expect(header).toHaveClass(expected);
  });
  test('should support "compact" type', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {
      "data-testid": "header",
      type: "compact",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
        children: "Compact Header"
      })
    }));
    var expected = 'compact';
    var header = _react.screen.getByTestId('header');
    expect(header).toHaveClass(expected);
  });
  test('should have centered class applied when the centered prop is true', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {
      "data-testid": "header",
      centered: true,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
        children: "Centered Header"
      })
    }));
    var expected = 'centered';
    var header = _react.screen.getByTestId('header');
    expect(header).toHaveClass(expected);
  });
  test('should support `slotAbove`', function () {
    var expected = 'slot above';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Header["default"], {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("slotAbove", {
        children: expected
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
        children: "Slotted Header"
      })]
    }));
    var slotAbove = _react.screen.getByText(expected);
    var expectedClass = 'slotAbove';
    expect(slotAbove).toHaveClass(expectedClass);
  });
  test('should support `slotBefore`', function () {
    var expected = 'slot before';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Header["default"], {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("slotBefore", {
        children: expected
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
        children: "Slotted Header"
      })]
    }));
    var slotBefore = _react.screen.getByText(expected).parentElement;
    var expectedClass = 'slotBefore';
    expect(slotBefore).toHaveClass(expectedClass);
  });
  test('should support `slotAfter`', function () {
    var expected = 'slot after';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Header["default"], {
      noCloseButton: true,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
        children: "Slotted Header"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("slotAfter", {
        children: expected
      })]
    }));
    var slotAfter = _react.screen.getByText(expected).parentElement;
    var expectedClass = 'slotAfter';
    expect(slotAfter).toHaveClass(expectedClass);
  });
  test('should not render back button', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {}));
    var backButton = _react.screen.queryByLabelText('go to previous');
    expect(backButton).toBeNull();
  });
  test('should render close button when \'noCloseButton\' is not specified', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {}));
    var closeButton = _react.screen.getByLabelText('Exit app');
    expect(closeButton).toBeInTheDocument();
  });
  test('should not render close button when \'noCloseButton\' is set to true', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {
      noCloseButton: true
    }));
    var closeButton = _react.screen.queryByLabelText('Exit app');
    expect(closeButton).toBeNull();
  });
  test('should call onClose when close button is clicked', /*#__PURE__*/_asyncToGenerator(function* () {
    var handleClose = jest.fn();
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {
      onClose: handleClose
    }));
    _react.fireEvent.click(_react.screen.getByRole('button'));
    expect(handleClose).toHaveBeenCalled();
    yield (0, _react.waitFor)(function () {
      expect(handleClose).toHaveBeenCalledTimes(1);
    });
  }));
  test('should set close button "aria-label" to closeButtonAriaLabel', function () {
    var label = 'custom close button label';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {
      closeButtonAriaLabel: label
    }));
    var closeButtonAriaLabel = _react.screen.getByLabelText(label);
    var slotAfter = closeButtonAriaLabel.parentElement.parentElement;
    expect(closeButtonAriaLabel).toBeInTheDocument();
    expect(slotAfter).toHaveClass('slotAfter');
  });
  test('should set close button `shadowed` to true when `shadowed` is set to true', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {
      shadowed: true,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
        children: "title"
      })
    }));
    var button = _react.screen.getByRole('button');
    var expected = 'button shadowed';
    expect(button).toHaveClass(expected);
  });
});