@enact/ui/Slottable/tests/useSlots-specs.js

A collection of simplified unstyled cross-platform UI components for Enact

"use strict";

require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _useSlots = _interopRequireDefault(require("../useSlots"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
/* eslint no-console: ["error", { allow: ["warn", "error"] }] */

describe('useSlots', function () {
  test('should distribute children with a \'slot\' property', function () {
    function Component(_ref) {
      var a = _ref.a,
        b = _ref.b,
        c = _ref.c,
        children = _ref.children;
      var slots = (0, _useSlots["default"])({
        a: a,
        b: b,
        c: c,
        children: children
      });
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        "data-testid": "useSlots",
        children: [slots.c, slots.b, slots.a]
      });
    }
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        slot: "a",
        children: "A"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        slot: "b",
        children: "B"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        slot: "c",
        children: "C"
      })]
    }));
    var expected = 'CBA';
    var actual = _react.screen.getByTestId('useSlots');
    expect(actual.textContent).toBe(expected);
  });
  test('should have no children when all have been distributed', function () {
    function Component(_ref2) {
      var a = _ref2.a,
        b = _ref2.b,
        c = _ref2.c,
        children = _ref2.children;
      var slots = (0, _useSlots["default"])({
        a: a,
        b: b,
        c: c,
        children: children
      });
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        "data-testid": "useSlots",
        children: slots.children
      });
    }
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        slot: "a",
        children: "A"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        slot: "b",
        children: "B"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        slot: "c",
        children: "C"
      })]
    }));
    var expected = '';
    var actual = _react.screen.getByTestId('useSlots');
    expect(actual).toHaveTextContent(expected);
  });
  test('should distribute children with a \'type\' that matches a slot', function () {
    function Component(_ref3) {
      var a = _ref3.a,
        b = _ref3.b,
        c = _ref3.c,
        children = _ref3.children,
        custom = _ref3.custom;
      var slots = (0, _useSlots["default"])({
        a: a,
        b: b,
        c: c,
        children: children,
        custom: custom
      });
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        "data-testid": "useSlots",
        children: [slots.c, slots.b, slots.a, slots.custom]
      });
    }
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        slot: "a",
        children: "A"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        slot: "b",
        children: "B"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("custom", {
        children: "D"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        slot: "c",
        children: "C"
      })]
    }));
    var expected = 'CBAD';
    var actual = _react.screen.getByTestId('useSlots');
    expect(actual.textContent).toBe(expected);
  });
  test('should distribute children whose \'type\' has a \'defaultSlot\' property that matches a slot', function () {
    function Custom(props) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        children: props.children
      });
    }
    Custom.defaultSlot = 'c';
    function Component(_ref4) {
      var a = _ref4.a,
        b = _ref4.b,
        c = _ref4.c,
        children = _ref4.children;
      var slots = (0, _useSlots["default"])({
        a: a,
        b: b,
        c: c,
        children: children
      });
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        "data-testid": "useSlots",
        children: [slots.c, slots.b, slots.a]
      });
    }
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        slot: "a",
        children: "A"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        slot: "b",
        children: "B"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Custom, {
        children: "C"
      })]
    }));
    var expected = 'CBA';
    var actual = _react.screen.getByTestId('useSlots');
    expect(actual.textContent).toBe(expected);
  });
  test('should distribute children with no \'slot\' property to Slottable\'s \'children\'', function () {
    function Component(_ref5) {
      var a = _ref5.a,
        b = _ref5.b,
        children = _ref5.children;
      var slots = (0, _useSlots["default"])({
        a: a,
        b: b,
        children: children
      });
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        "data-testid": "useSlots",
        children: [slots.children, slots.b, slots.a]
      });
    }
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        slot: "a",
        children: "A"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        slot: "b",
        children: "B"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        children: "C"
      })]
    }));
    var expected = 'CBA';
    var actual = _react.screen.getByTestId('useSlots');
    expect(actual.textContent).toBe(expected);
  });
  test('should not distribute children with an invalid \'slot\' property', function () {
    // Modify the console spy to silence error output with
    // an empty mock implementation
    console.error.mockImplementation();
    function Component(_ref6) {
      var a = _ref6.a,
        b = _ref6.b,
        children = _ref6.children;
      var slots = (0, _useSlots["default"])({
        a: a,
        b: b,
        children: children
      });
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        "data-testid": "useSlots",
        children: [slots.c, slots.b, slots.a]
      });
    }
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        slot: "a",
        children: "A"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        slot: "b",
        children: "B"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        slot: "c",
        children: "C"
      })]
    }));
    var expected = 'BA';
    var actual = _react.screen.getByTestId('useSlots');
    expect(actual.textContent).toBe(expected);
    expect(actual.textContent).toHaveLength(2);

    // Check to make sure that we only get the one expected error
    var actualErrorsLength = console.error.mock.calls.length;
    var expectedErrorLength = 1;
    expect(actualErrorsLength).toBe(expectedErrorLength);
    var actualError = console.error.mock.calls[0][0];
    var expectedError = 'Warning: The slot "c" specified on div does not exist';
    expect(actualError).toBe(expectedError);
  });
  test('should distribute children with props other than simply \'children\', in entirety, to the matching destination slot', function () {
    function Component(_ref7) {
      var a = _ref7.a,
        b = _ref7.b,
        c = _ref7.c,
        children = _ref7.children,
        custom = _ref7.custom;
      var slots = (0, _useSlots["default"])({
        a: a,
        b: b,
        c: c,
        children: children,
        custom: custom
      });
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "root-div",
        "data-testid": "useSlots",
        children: [slots.c, slots.b, slots.a, slots.custom]
      });
    }
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        slot: "a",
        title: "Div A"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        slot: "b",
        children: "B"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("custom", {
        children: "D"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        slot: "c",
        children: "C"
      })]
    }));
    var expected = 'CBD';
    var actual = _react.screen.getByTestId('useSlots');
    expect(actual.textContent).toBe(expected);
    var expectedTitle = 'Div A';
    var actualChild = _react.screen.getByTestId('useSlots').children[2];
    expect(actualChild).toHaveAttribute('title', expectedTitle);
  });
  test('should distribute multiple children with the same slot into the same slot', function () {
    function Component(_ref8) {
      var a = _ref8.a,
        children = _ref8.children;
      var slots = (0, _useSlots["default"])({
        a: a,
        children: children
      });
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        "data-testid": "useSlots",
        children: slots.a
      });
    }
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        slot: "a",
        children: "A"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        slot: "a",
        children: "A"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        slot: "a",
        children: "A"
      })]
    }));
    var expected = 'AAA';
    var actual = _react.screen.getByTestId('useSlots');
    expect(actual.textContent).toBe(expected);
  });
  test('should override prop with slot value', function () {
    function Component(_ref9) {
      var a = _ref9.a,
        children = _ref9.children;
      var slots = (0, _useSlots["default"])({
        a: a,
        children: children
      });
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        "data-testid": "useSlots",
        children: slots.a
      });
    }
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
      a: "B",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        slot: "a",
        children: "A"
      })
    }));
    var actual = _react.screen.getByTestId('useSlots');
    expect(actual).toHaveTextContent('A');
  });
  test('should fallback to prop when slot is omitted', function () {
    function Component(_ref0) {
      var a = _ref0.a,
        children = _ref0.children;
      var slots = (0, _useSlots["default"])({
        a: a,
        children: children
      });
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        "data-testid": "useSlots",
        children: slots.a
      });
    }
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
      a: "B"
    }));
    var actual = _react.screen.getByTestId('useSlots');
    expect(actual).toHaveTextContent('B');
  });
});