clay/test/spec/lib/clay-item.js

'use strict';

var assert = require('chai').assert;
var sinon = require('sinon');
var checkReadOnly = require('../../test-utils').checkReadOnly;
var ClayItem = require('../../../src/scripts/lib/clay-item');
var minified = require('../../../src/scripts/vendor/minified');
var fixture = require('../../fixture');
var componentRegistry = require('../../../src/scripts/lib/component-registry');

describe('ClayItem', function() {
  it('defines read-only properties', function() {
    var properties = [
      'id',
      'messageKey',
      'config',
      '$element',
      '$manipulatorTarget',
      'on',
      'off',
      'trigger',
      'initialize'
    ];
    var clayItem = fixture.clayItem('input');
    checkReadOnly(clayItem, properties);
  });

  it('attaches the manipulator methods', function() {
    Object.keys(componentRegistry).forEach(function(itemName) {
      var clayItem = fixture.clayItem(itemName);
      var manipulator = componentRegistry[itemName].manipulator;
      checkReadOnly(clayItem, Object.keys(manipulator));
    });
  });

  it('throws if a component is not in the registry', function() {
    var config = fixture.configItem('fake', false);
    /* eslint-disable no-new */
    assert.throws(function() { new ClayItem(config); }, /fake/);
    /* eslint-enable no-new */
  });

  describe('.id', function() {
    it('sets id if config has id', function() {
      var config = fixture.configItem('input');
      var clayItem = new ClayItem(config);
      assert.strictEqual(clayItem.id, config.id);
    });

    it('sets id to null if there is no id in the config', function() {
      var clayItem = fixture.clayItem({type: 'input', id: undefined});
      assert.strictEqual(clayItem.id, null);
    });
  });

  describe('.messageKey', function() {
    it('sets messageKey correctly', function() {
      var config = fixture.configItem('input');
      var clayItem = new ClayItem(config);
      assert.strictEqual(clayItem.messageKey, config.messageKey);
    });

    it('sets messageKey to null if there is no messageKey in the config',
    function() {
      var clayItem = fixture.clayItem({type: 'input', messageKey: undefined});
      assert.strictEqual(clayItem.messageKey, null);
    });
  });

  describe('.config', function() {
    it('sets messageKey correctly', function() {
      var config = fixture.configItem('input');
      var clayItem = new ClayItem(config);
      assert.strictEqual(clayItem.messageKey, config.messageKey);
    });
  });

  describe('.$element', function() {
    it('sets $element correctly', function() {
      var clayItem = fixture.clayItem('input');
      assert.strictEqual(clayItem.$element[0].classList.contains('component'), true);
    });
  });

  describe('.$manipulatorTarget', function() {
    it('sets the $manipulatorTarget to the root element if there are no children',
    function() {
      var clayItem = fixture.clayItem('footer');
      assert.strictEqual(clayItem.$manipulatorTarget, clayItem.$element);
    });
    it('sets the $manipulatorTarget to the correct child element', function() {
      var clayItem = fixture.clayItem('input');
      assert.strictEqual(clayItem.$manipulatorTarget[0].tagName, 'INPUT');
    });
  });

  describe('.initialize()', function() {
    it('calls component initializer  with the ClayItem as context', function() {
      var initializeSpy = sinon.spy(componentRegistry.select, 'initialize');
      var clayConfig = fixture.clayConfig(['select']);
      assert(initializeSpy.alwaysCalledOn(clayConfig.getItemsByType('select')[0]));
      assert(initializeSpy.alwaysCalledWith(minified, clayConfig));
      initializeSpy.restore();
    });

    it('returns itself for chaining', function() {
      var clayItem = fixture.clayItem('select');
      var clayConfig = fixture.clayConfig([]);
      assert.strictEqual(clayItem.initialize(clayConfig), clayItem);
    });

    it('does nothing if there is no initialize function', function() {
      assert.doesNotThrow(fixture.clayItem('input').initialize);
    });
  });

});