@zohodesk/components/lib/Label/__tests__/Label.spec.js

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

"use strict";

var _react = _interopRequireDefault(require("react"));

var _react2 = require("@testing-library/react");

var _Label = _interopRequireDefault(require("../Label.js"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

describe('Label', function () {
  test('rendering the defult props', function () {
    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], null)),
        asFragment = _render.asFragment;

    expect(asFragment()).toMatchSnapshot();
  });
  var type = ['title', 'subtitle'];
  test.each(type)('rendering the type of- %s', function (type) {
    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
      type: type
    })),
        asFragment = _render2.asFragment;

    expect(asFragment()).toMatchSnapshot();
  });
  var palette = ['default', 'primary', 'secondary', 'danger', 'mandatory', 'disable', 'dark'];
  test.each(palette)('rendering the palette of- %s', function (palette) {
    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
      palette: palette
    })),
        asFragment = _render3.asFragment;

    expect(asFragment()).toMatchSnapshot();
  });
  var size = ['xsmall', 'small', 'medium', 'large'];
  test.each(size)('rendering the size of- %s', function (size) {
    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
      size: size
    })),
        asFragment = _render4.asFragment;

    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering the clipped is true', function () {
    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
      clipped: true
    })),
        asFragment = _render5.asFragment;

    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering the title', function () {
    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
      title: "labelTitle"
    })),
        asFragment = _render6.asFragment;

    expect(asFragment()).toMatchSnapshot();
  });
  var variant = ['primary', 'default'];
  test.each(variant)('rendering the variant of- %s', function (variant) {
    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
      variant: variant
    })),
        asFragment = _render7.asFragment;

    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering the customClass', function () {
    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
      customClass: "LabelCustomClass"
    })),
        asFragment = _render8.asFragment;

    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering the Id', function () {
    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
      id: "LabelID"
    })),
        asFragment = _render9.asFragment;

    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering the htmlFor', function () {
    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
      htmlFor: "LabelHtmlFor"
    })),
        asFragment = _render10.asFragment;

    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering the onClick prop with asFragment and toMatchSnapshot', function () {
    // Define an onClick mock function
    var onClickMock = jest.fn(); // Render the Label component with the onClick prop

    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
      text: "Click Me",
      onClick: onClickMock
    })),
        asFragment = _render11.asFragment;

    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering with renderRightPlaceholderNode', function () {
    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
      text: "New Feature",
      id: "label_new",
      renderRightPlaceholderNode: /*#__PURE__*/_react["default"].createElement("span", {
        style: {
          background: '#27ae60',
          color: 'white',
          padding: '2px 6px',
          borderRadius: '3px',
          fontSize: '10px',
          fontWeight: 'bold'
        }
      }, "NEW")
    })),
        asFragment = _render12.asFragment;

    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering with customProps - containerProps & rightPlaceholderNodeProps', function () {
    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
      text: "Premium Feature",
      id: "label_premium",
      size: "large",
      palette: "danger",
      renderRightPlaceholderNode: /*#__PURE__*/_react["default"].createElement("span", {
        style: {
          fontSize: '10px',
          background: '#f39c12',
          color: 'white',
          padding: '1px 4px',
          borderRadius: '2px'
        }
      }, "PRO"),
      customProps: {
        containerProps: {
          $ui_alignItems: 'center',
          $tagAttributes_container: {
            style: {
              gap: '6px'
            }
          }
        },
        rightPlaceholderNodeProps: {
          $ui_displayMode: 'flex',
          $ui_alignItems: 'center',
          $tagAttributes_container: {
            style: {
              gap: '6px'
            }
          }
        }
      }
    })),
        asFragment = _render13.asFragment;

    expect(asFragment()).toMatchSnapshot();
  });
});