@enact/core/usePublicClassNames/tests/usePublicClassNames-specs.js

Enact is an open source JavaScript framework containing everything you need to create a fast, scalable mobile or web application.

"use strict";

var _react = require("@testing-library/react");
var _usePublicClassNames = _interopRequireDefault(require("../usePublicClassNames"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
describe('usePublicClassNames', function () {
  var componentCss = {
    test: 'test-class',
    a: 'a-class',
    b: 'b-class'
  };
  var customCss = {
    test: 'test-class-custom',
    a: 'a-class-custom',
    b: 'b-class-custom',
    myClass: 'my-class'
  };
  test('should return `componentCss` if `customCss` is undefined', function () {
    var testComponentCss = {
      test: 'test-class'
    };
    var _renderHook = (0, _react.renderHook)(function () {
        return (0, _usePublicClassNames["default"])({
          componentCss: testComponentCss,
          customCss: null,
          publicClassNames: true
        });
      }),
      result = _renderHook.result;
    expect(result.current).toEqual(testComponentCss);
  });
  test('should return a merged css has all keys from `componentCss` and merged values when `publicClassNames` is true', function () {
    var _renderHook2 = (0, _react.renderHook)(function () {
        return (0, _usePublicClassNames["default"])({
          componentCss: componentCss,
          customCss: customCss,
          publicClassNames: true
        });
      }),
      result = _renderHook2.result;
    var expected = {
      test: 'test-class test-class-custom',
      a: 'a-class a-class-custom',
      b: 'b-class b-class-custom'
    };
    expect(result.current.test).toBe(expected.test);
    expect(result.current.a).toBe(expected.a);
    expect(result.current.b).toBe(expected.b);
  });
  test('should return a merged css has the keys from `publicClassNames` array and merged values when `publicClassNames` is an array of strings', function () {
    var _renderHook3 = (0, _react.renderHook)(function () {
        return (0, _usePublicClassNames["default"])({
          componentCss: componentCss,
          customCss: customCss,
          publicClassNames: ['a', 'b']
        });
      }),
      result = _renderHook3.result;
    var expected = {
      a: 'a-class a-class-custom',
      b: 'b-class b-class-custom'
    };
    expect(result.current.a).toBe(expected.a);
    expect(result.current.b).toBe(expected.b);
  });
});