it('can be setDetailWidgets', function() {
    var aDOMElement = createDOMElement('div');
    var aWidget = new LabeledTextField('some text');
    var detailWidgetContainer = domElement.querySelector('detail-widget-container');

    assert.equal(detailWidgetContainer.children.length, 0, 'has no child widgets initially');

    todoItem.setDetailWidgets([
      aDOMElement,
      aWidget
    ]);

    assert.equal(detailWidgetContainer.children.length, 2, 'has the appropriate number of children');
    assert.equal(detailWidgetContainer.children[0].tagName, 'DIV', 'the first child is the first widget');
    assert.equal(detailWidgetContainer.children[1].tagName, 'LABELED-TEXT-FIELD', 'the second child is the second widget');

    var aNewChild = createDOMElement('new-child');

    todoItem.setDetailWidgets([
      aNewChild
    ]);

    assert.equal(detailWidgetContainer.children.length, 1, 'resets the children');
    assert.equal(detailWidgetContainer.children[0].tagName, 'NEW-CHILD', 'the first child is the first widget');
  });

  it('can be inserted after a given DOM element', function() {
    var container = createDOMElement('container');
    var firstChild = createDOMElement('first-child');
    var secondChild = createDOMElement('second-child');
    container.appendChild(firstChild);
    container.appendChild(secondChild);

    personSection.insertAfter(firstChild);
    assert.isTrue(firstChild.nextSibling === domElement, 'is inserted after the given DOM element');
    assert.isTrue(secondChild.previousSibling === domElement,
      'is inserted before the given DOM element’s next sibling');
  });

function createElement(labelText, checkbox) {
  var span = createDOMElement('span');
  span.textContent = labelText;

  var label = createDOMElement('label');
  label.appendChild(checkbox);
  label.appendChild(span);

  var domElement = createDOMElement('labeled-checkbox');
  domElement.appendChild(label);

  return domElement;
}

  it('can reset the children of a given DOM element', function() {
    var container = createDOMElement('container');

    var child = createDOMElement('child');
    container.appendChild(child);

    var aNewChild = createDOMElement('new-child');
    var aWidget = new LabeledTextField('A field');
    resetChildren(container, [aNewChild, aWidget]);

    assert.equal(container.children.length, 2, 'has the appropriate number of children');
    assert.equal(container.children[0].tagName, aNewChild.tagName, 'contains the new children only');
    assert.equal(container.children[1].tagName, 'LABELED-TEXT-FIELD', 'contains the new children only');
  });

  it('validates input', function() {
    var domElement = createDOMElement('div');
    var style = { color: 'red' };

    assert.throws(function() {
      toggleStyle(42);
    },
      'toggleStyle expects the first argument to be a DOM element'
    );

    assert.throws(function() {
      toggleStyle(domElement, 42);
    },
      'toggleStyle expects the second argument, style, to be a hash'
    );

    assert.throws(function() {
      toggleStyle(domElement, style, 42);
    },
      'toggleStyle expects the third argument, onEventName, to be a string'
    );

    assert.throws(function() {
      toggleStyle(domElement, style, 'mouseenter', 42);
    },
      'toggleStyle expects the third argument, offEventName, to be a string'
    );
  });

function createElement() {
  var style = {
    display: 'block'
  };

  return createDOMElement('labeled-large-text-field', style);
}

function createTextareaElement(value) {
  var textFieldStyle = _.pick(TextFieldInput.STYLE,
    'color', 'padding', 'font', 'backgroundImage',
    'borderRadius', 'borderWidth', 'outlineWidth'
  );

  var style = _.extend(textFieldStyle, {
    display: 'block',
    marginLeft: '1em',
    marginBottom: '5px',
    lineHeight: '1.75',
    width: '340px',
    height: '5.8em',
    resize: 'none'
  });

  var textarea = createDOMElement('textarea', style);

  if (value) textarea.value = value;

  addFocusEffect(textarea, {
    boxShadow: '0 0 3px 2px #b5d5ff'
  });

  return textarea;
}

function createDatePickerButton(dateField) {
  var style = {
    width: '20px',
    height: '20px',
    padding: '0',
    border: 'none',
    backgroundColor: 'transparent',
    backgroundImage: 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAJCAYAAAF4VF24AAAAAXNSR0IArs4c6QAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAAAG9JREFUGBltTu0RgCAIFc4FWiHdoJ1sptqpWVrAg3x2eHTGDx+8DyQEVEqp9CbkNSvhwTiaV/PMLFnIsK9C0Ig54lW4GISvT0RJ906Q0iksV8MDbggsvDUs3VClLn6N9ZHjPc4BiU/tPJujuYF/mx55tzEWYjQMAAAAAABJRU5ErkJggg==")',
    backgroundPosition: '50% 50%',
    backgroundRepeat: 'no-repeat',
    marginTop: '2px',
    marginLeft: '-18px',
    position: 'absolute'
  };

  var attributes = {
    'title': 'Deschide calendarul'
  };

  var button = createDOMElement('button', style, attributes);

  makeShy(button);
  button.addEventListener('click', toggleDatePickerFor(dateField));
  hideOnEscapeOrOutsideClick(DatePicker.instance);

  return button;
}

    function Field() {
      var domElement = createDOMElement('field');

      this.domElement = domElement;

      WidgetRole.apply(this, [domElement]);
    }