lucid-ui/lib/util/style-helpers.spec.js

A UI component library from AppNexus.

import _split from "lodash/split";
import _parseInt from "lodash/parseInt";
import _isFunction from "lodash/isFunction";
import assert from 'assert';
import { bindClassNames, lucidClassNames, uniqueName } from './style-helpers';
describe('#bindClassNames', function () {
  it('should always return a function', function () {
    assert(_isFunction(bindClassNames()));
    assert(_isFunction(bindClassNames('lucid')));
    assert(_isFunction(bindClassNames('lucid', '~')));
  });
  describe('the returned function `cx`', function () {
    it('should behave like classnames if no args passed', function () {
      var cx = bindClassNames();
      assert.equal(cx({
        yolo: true,
        bar: false
      }), 'yolo');
      assert.equal(cx({
        yolo: true,
        bar: true
      }), 'yolo bar');
      assert.equal(cx('one', ['two']), 'one two');
    });
    it('should replace the variable `&` with the value from the 1st arg', function () {
      var cx = bindClassNames('lucid');
      assert.equal(cx({
        yolo: true,
        '&-bar': true
      }), 'yolo lucid-bar');
      assert.equal(cx({
        'yolo&': true,
        bar: true
      }), 'yololucid bar');
      assert.equal(cx('&-one', ['&-two']), 'lucid-one lucid-two');
    });
    it('should replace the variable from the 2nd arg with the value from the 1st arg', function () {
      var cx = bindClassNames('lucid', '~');
      assert.equal(cx({
        '&-yolo': true,
        '~-bar': true
      }), '&-yolo lucid-bar');
      assert.equal(cx({
        'yolo~': true,
        bar: true
      }), 'yololucid bar');
      assert.equal(cx('~-one', ['~-two']), 'lucid-one lucid-two');
    });
    it('should be able to take a RegExp as the 2nd arg to be replaced', function () {
      var cx = bindClassNames('lucid', /~/g);
      assert.equal(cx({
        '&-yolo': true,
        '~-bar': true
      }), '&-yolo lucid-bar');
      assert.equal(cx({
        'yolo~': true,
        bar: true
      }), 'yololucid bar');
      assert.equal(cx('~-one', ['~-two']), 'lucid-one lucid-two');
    });
    describe('.bind', function () {
      it('should always return a function', function () {
        var cx = bindClassNames('lucid');
        assert(_isFunction(cx.bind()));
        assert(_isFunction(cx.bind('&-Button')));
        assert(_isFunction(cx.bind('&-Button', '~')));
      });
      it('should behave like the original function if no args passed', function () {
        var cx = bindClassNames('lucid');
        var boundBoundClassNames = cx.bind();
        assert.equal(cx({
          yolo: true,
          '&-bar': true
        }), 'yolo lucid-bar');
        assert.equal(boundBoundClassNames({
          yolo: true,
          '&-bar': true
        }), 'yolo lucid-bar');
        assert.equal(cx({
          'yolo&': true,
          bar: true
        }), 'yololucid bar');
        assert.equal(boundBoundClassNames({
          'yolo&': true,
          bar: true
        }), 'yololucid bar');
        assert.equal(cx('&-one', ['&-two']), 'lucid-one lucid-two');
        assert.equal(boundBoundClassNames('&-one', ['&-two']), 'lucid-one lucid-two');
      });
      it('should return a `cx` function witch a new value to replace the variable', function () {
        var cx = bindClassNames('lucid');
        var buttonClassNames = cx.bind('&-Button');
        assert.equal(cx({
          yolo: true,
          '&-bar': true
        }), 'yolo lucid-bar');
        assert.equal(buttonClassNames({
          yolo: true,
          '&-bar': true
        }), 'yolo lucid-Button-bar');
        assert.equal(cx({
          'yolo&': true,
          bar: true
        }), 'yololucid bar');
        assert.equal(buttonClassNames({
          'yolo&': true,
          bar: true
        }), 'yololucid-Button bar');
        assert.equal(cx('&-one', ['&-two']), 'lucid-one lucid-two');
        assert.equal(buttonClassNames('&-one', ['&-two']), 'lucid-Button-one lucid-Button-two');
      });
    });
  });
});
describe('#lucidClassNames', function () {
  it('should replace the variable `&` with `lucid`', function () {
    assert.equal(lucidClassNames('&-Button', '&-TextField'), 'lucid-Button lucid-TextField');
  });
  it('should be able to bind a more specific value for the variable `&`', function () {
    var cx = lucidClassNames.bind('&-Button');
    assert.equal(cx('&-active', '&-disabled'), 'lucid-Button-active lucid-Button-disabled');
  });
  it('should return the component base className when bound and passed only `&`', function () {
    var cx = lucidClassNames.bind('&-Button');
    assert.equal(cx('&'), 'lucid-Button');
  });
  it('should pass thru classNames which lack `&` without changing them', function () {
    var cx = lucidClassNames.bind('&-Button');
    var classNames = 'my-custom-class another-class';
    assert.equal(cx('&', classNames), 'lucid-Button my-custom-class another-class');
  });
});
describe('#uniqueName', function () {
  it('should increment by one every time it is called', function () {
    var first = _parseInt(_split(uniqueName('foo'), 'foo')[1]);

    var second = _parseInt(_split(uniqueName('foo'), 'foo')[1]);

    assert.equal(first + 1, second);
  });
  it('should reuse random prefix. This will safeguard against unfortunate cases where two ' + 'lucid instances are present.', function () {
    var first = _split(uniqueName('foo'), 'foo')[0];

    var second = _split(uniqueName('foo'), 'foo')[0];

    assert.equal(first, second);
  });
});