@enact/core/kind/tests/styles-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 _styles = _interopRequireDefault(require("../styles"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
describe('styles', function () {
  var css = {
    button: 'unambiguous-button-class-name',
    client: 'unambiguous-button-class-name-client'
  };

  // className tests

  test('should add cfg.className to props', function () {
    var cfg = {
      className: 'button'
    };
    var updated = (0, _styles["default"])(cfg, {});
    var expected = cfg.className;
    var actual = updated.className;
    expect(actual).toBe(expected);
  });
  test('should resolve cfg.className to the cfg.css map', function () {
    var cfg = {
      css: css,
      className: 'button'
    };
    var updated = (0, _styles["default"])(cfg, {});
    var expected = css.button;
    var actual = updated.className;
    expect(actual).toBe(expected);
  });
  test('should pass through props.className when cfg.className absent', function () {
    var props = {
      className: 'button'
    };
    var updated = (0, _styles["default"])({}, props);
    var expected = props.className;
    var actual = updated.className;
    expect(actual).toBe(expected);
  });
  test('should append cfg.className with props.className', function () {
    var props = {
      className: 'custom-button'
    };
    var cfg = {
      className: 'button'
    };
    var updated = (0, _styles["default"])(cfg, props);
    var expected = props.className;
    var actual = updated.className;
    expect(actual).toBe(expected);
  });
  test('should resolve cfg.className and append with props.className', function () {
    var props = {
      className: 'custom-button'
    };
    var cfg = {
      css: css,
      className: 'button'
    };
    var updated = (0, _styles["default"])(cfg, props);
    var expected = props.className;
    var actual = updated.className;
    expect(actual).toBe(expected);
  });

  // style tests

  test('should add cfg.style to props', function () {
    var cfg = {
      style: {
        color: 'green'
      }
    };
    var updated = (0, _styles["default"])(cfg, {});
    var expected = cfg.style.color;
    var actual = updated.style.color;
    expect(actual).toBe(expected);
  });
  test('should pass through props.style when cfg.style absent', function () {
    var props = {
      style: {
        color: 'green'
      }
    };
    var updated = (0, _styles["default"])({}, props);
    var expected = props.style.color;
    var actual = updated.style.color;
    expect(actual).toBe(expected);
  });
  test('should merge cfg.style and props.style', function () {
    var props = {
      style: {
        color: 'green'
      }
    };
    var cfg = {
      style: {
        border: '1px solid black'
      }
    };
    var updated = (0, _styles["default"])(cfg, props);
    var expected = 2;
    var actual = Object.keys(updated.style).length;
    expect(actual).toBe(expected);
  });

  // Doesn't support merging shorthand properties and individual properties
  // e.g. borderWidth: 3px + border: 1px solid black = border: 3px solid black
  test('should not merge shorthand properties', function () {
    var props = {
      style: {
        borderWidth: '3px'
      }
    };
    var cfg = {
      style: {
        border: '1px solid black'
      }
    };
    var updated = (0, _styles["default"])(cfg, props);
    var expected = 1;
    var actual = Object.keys(updated.style).length;
    expect(actual).not.toBe(expected);
  });

  // styler tests

  test('should add styler.join() to props', function () {
    var updated = (0, _styles["default"])({}, {});
    var expected = 'function';
    var actual = typeof updated.styler.join;
    expect(actual).toBe(expected);
  });
  test('should join classes together with a space', function () {
    var updated = (0, _styles["default"])({}, {});
    var expected = 'abc def';
    var actual = updated.styler.join('abc', 'def');
    expect(actual).toBe(expected);
  });
  test('should resolve join classes to css map', function () {
    var updated = (0, _styles["default"])({
      css: css
    }, {});
    var expected = css.button + ' ' + css.client;
    var actual = updated.styler.join('button', 'client');
    expect(actual).toBe(expected);
  });
  test('should not resolve author classes to css map', function () {
    var cfg = {
      css: css,
      className: 'button'
    };
    var props = {
      className: 'button'
    };
    var updated = (0, _styles["default"])(cfg, props);
    var expected = css.button + ' button';
    var actual = updated.className;
    expect(actual).toBe(expected);
  });
  test('should append resolved class names to props.className', function () {
    var cfg = {
      css: css,
      className: 'button'
    };
    var props = {
      className: 'button'
    };
    var updated = (0, _styles["default"])(cfg, props);
    var expected = css.button + ' button ' + css.client;
    var actual = updated.styler.append('client');
    expect(actual).toBe(expected);
  });
});