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

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

"use strict";

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

describe('Slottable Specs', function () {
  test('should distribute children with a \'slot\' property', function () {
    var Component = (0, _Slottable["default"])({
      slots: ['a', 'b', 'c']
    }, function (_ref) {
      var a = _ref.a,
        b = _ref.b,
        c = _ref.c;
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        "data-testid": "slottable",
        children: [c, b, 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 actual = _react.screen.getByTestId('slottable');
    var expected = 'CBA';
    expect(actual.textContent).toBe(expected);
  });
  test('should distribute children with a \'type\' that matches a slot', function () {
    var Component = (0, _Slottable["default"])({
      slots: ['a', 'b', 'c', 'custom']
    }, function (_ref2) {
      var a = _ref2.a,
        b = _ref2.b,
        c = _ref2.c,
        custom = _ref2.custom;
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        "data-testid": "slottable",
        children: [c, b, a, 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 actual = _react.screen.getByTestId('slottable');
    var expected = 'CBAD';
    expect(actual.textContent).toBe(expected);
  });
  test('should distribute children whose \'type\' has a \'defaultSlot\' property that matches a slot', function () {
    var Custom = (0, _kind["default"])({
      name: 'Custom',
      render: function render(_ref3) {
        var children = _ref3.children;
        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          children: children
        });
      }
    });
    Custom.defaultSlot = 'c';
    var Component = (0, _Slottable["default"])({
      slots: ['a', 'b', 'c']
    }, function (_ref4) {
      var a = _ref4.a,
        b = _ref4.b,
        c = _ref4.c;
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        "data-testid": "slottable",
        children: [c, b, 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('slottable');
    expect(actual.textContent).toBe(expected);
  });
  test('should distribute children with no \'slot\' property to Slottable\'s \'children\'', function () {
    var Component = (0, _Slottable["default"])({
      slots: ['a', 'b']
    }, function (_ref5) {
      var a = _ref5.a,
        b = _ref5.b,
        children = _ref5.children;
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        "data-testid": "slottable",
        children: [children, b, 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('slottable');
    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();
    var Component = (0, _Slottable["default"])({
      slots: ['a', 'b']
    }, function (_ref6) {
      var a = _ref6.a,
        b = _ref6.b,
        c = _ref6.c;
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        "data-testid": "slottable",
        children: [c, b, 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('slottable');
    expect(actual.textContent).toBe(expected);

    // 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 () {
    var Component = (0, _Slottable["default"])({
      slots: ['a', 'b', 'c', 'custom']
    }, function (_ref7) {
      var a = _ref7.a,
        b = _ref7.b,
        c = _ref7.c,
        custom = _ref7.custom;
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "root-div",
        "data-testid": "slottable",
        children: [c, b, a, 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('slottable');
    expect(actual.textContent).toBe(expected);
    var expectedTitle = 'Div A';
    var actualChild = _react.screen.getByTestId('slottable').children[2];
    expect(actualChild).toHaveAttribute('title', expectedTitle);
  });
  test('should preserve values in \'slot\' property', function () {
    // This suppresses the unique key warning that this implementation creates. Also, we can't
    // restore this because it breaks our global warning listener.
    jest.spyOn(console, 'error').mockImplementation(function () {});
    var Component = (0, _Slottable["default"])({
      slots: ['a']
    }, function (_ref8) {
      var a = _ref8.a;
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        "data-testid": "slottable",
        children: a
      });
    });
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
      a: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        children: "X"
      }, "X"),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        slot: "a",
        children: "A"
      }, "A")
    }));
    var expected = 'XA';
    var actual = _react.screen.getByTestId('slottable');
    expect(actual.textContent).toBe(expected);
  });
  test('should add values to existing array in \'slot\' property', function () {
    var Component = (0, _Slottable["default"])({
      slots: ['a']
    }, function (_ref9) {
      var a = _ref9.a;
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        "data-testid": "slottable",
        children: a
      });
    });

    /* eslint-disable jsx-a11y/anchor-is-valid */
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
      a: ['a', 'b'],
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
        children: "c"
      })
    }));

    /* eslint-enable jsx-a11y/anchor-is-valid */
    var actual = _react.screen.getByTestId('slottable');
    expect(actual).toHaveTextContent('abc');
  });
  test('should distribute multiple children with the same slot into the same slot', function () {
    function ComponentBase(_ref0) {
      var a = _ref0.a;
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "root-div",
        "data-testid": "slottable",
        children: a
      });
    }
    var Component = (0, _Slottable["default"])({
      slots: ['a']
    }, ComponentBase);
    (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('slottable');
    expect(actual.textContent).toBe(expected);
  });
  test('should allow downstream component to have default value for unset slot', function () {
    function ComponentBase(_ref1) {
      var _ref1$a = _ref1.a,
        a = _ref1$a === void 0 ? 'Default A' : _ref1$a;
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        "data-testid": "slottable",
        children: a
      });
    }
    var Component = (0, _Slottable["default"])({
      slots: ['a']
    }, ComponentBase);
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {}));
    var actual = _react.screen.getByTestId('slottable');
    expect(actual).toHaveTextContent('Default A');
  });
});