@enact/sandstone/KeyGuide/tests/KeyGuide-specs.js

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

"use strict";

var _FloatingLayer = require("@enact/ui/FloatingLayer");
require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _KeyGuide = _interopRequireDefault(require("../KeyGuide"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var FloatingLayerController = (0, _FloatingLayer.FloatingLayerDecorator)('div');
describe('KeyGuide Specs', function () {
  test('should not error with undefined children', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyGuide["default"], {
        open: true
      })
    }));
    var keyGuide = _react.screen.queryByRole('list');
    expect(keyGuide).toBeNull();
  });
  test('should not render open floating layer if open with no children', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyGuide["default"], {
        open: true,
        children: []
      })
    }));
    var keyGuide = _react.screen.queryByRole('list');
    expect(keyGuide).toBeNull();
  });
  test('should not render open floating layer if not open with children', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyGuide["default"], {
        children: [{
          icon: 'red',
          children: 'a',
          key: 'a'
        }]
      })
    }));
    var keyGuide = _react.screen.queryByRole('list');
    expect(keyGuide).toBeNull();
  });
  test('should render open floating layer if open with children', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyGuide["default"], {
        open: true,
        children: [{
          icon: 'red',
          children: 'a',
          key: 'a'
        }]
      })
    }));
    var keyGuide = _react.screen.getByRole('list');
    var expected = 'keyGuide';
    expect(keyGuide).toBeInTheDocument();
    expect(keyGuide).toHaveClass(expected);
  });
  test('should apply color class if a color key is in the icon slot', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyGuide["default"], {
        open: true,
        children: [{
          icon: 'red',
          children: 'a',
          key: 'a'
        }]
      })
    }));
    var item = _react.screen.getByRole('list').children.item(0);
    var expected = 'red';
    var actual = item.children.item(1).children.item(0);
    expect(actual).toHaveClass(expected);
  });
  test('should create an icon if asked to', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyGuide["default"], {
        open: true,
        children: [{
          icon: 'plus',
          children: 'a',
          key: 'a'
        }]
      })
    }));
    var icon = _react.screen.getByText('+');
    var expected = 'icon';
    expect(icon).toHaveClass(expected);
  });
  test('should not create an icon if a color is specified', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyGuide["default"], {
        open: true,
        children: [{
          icon: 'green',
          children: 'a',
          key: 'a'
        }]
      })
    }));
    var item = _react.screen.getByRole('list').children.item(0);
    var expected = 'icon';
    var actual = item.children.item(1).children.item(0);
    expect(actual).not.toHaveClass(expected);
  });
});