Home Reference Source

src/components/textfield/TextField.builder.spec.js

import Harness from '../../../test/harness';
import EventEmitter from '../../EventEmitter';
import assert from 'power-assert';

describe('TextField Builder', () => {
  let builder = null;

  before((done) => {
    // Incrise Events limit for this tests set
    Harness.builderBefore(done, {
      editForm: {
        events: new EventEmitter()
      }
    });
  });
  after(() => {
    Harness.builderAfter();
  });

  it('Should create a new textfield component', () => {
    builder = Harness.buildComponent('textfield');
    return builder.editForm.formReady.then(() => {
      // Make sure default preview is correct.
      const preview = builder.componentPreview.innerHTML;
      assert(preview.indexOf('formio-component formio-component-textfield formio-component-textField') !== -1, 'Must have correct classes');
      assert(preview.indexOf('<label class="control-label" style="">Text Field</label>') !== -1, 'Must have a label');
      assert(preview.indexOf('<input name="data[textField]" type="text" class="form-control"') !== -1, 'Must have an input');
    });
  });

  it('Should allow you to change the label', (done) => {
    Harness.setComponentProperty('label', 'Text Field', 'First Name', (preview) => {
      assert(preview.match(/label.*input/), 'Label must be on top.');
      assert(preview.indexOf('<label class="control-label" style="">First Name</label>') !== -1, 'Must have a label');
      done();
    });
  });

  it('Should allow you to hide/show the label', (done) => {
    Harness.setComponentProperty('hideLabel', false, true, (preview) => {
      assert(preview.indexOf('<label class="control-label"') === -1, 'Must not have a label');
      Harness.setComponentProperty('hideLabel', true, false, (preview) => {
        assert(preview.indexOf('<label class="control-label"') !== -1, 'Must have a label');
        done();
      });
    });
  });

  it('Should allow you to change the label position', (done) => {
    Harness.setComponentProperty('labelPosition', 'top', 'bottom', (preview) => {
      assert(preview.match(/input.*label/), 'Label must be on bottom.');
      Harness.setComponentProperty('labelPosition', 'bottom', 'left-left', (preview) => {
        assert(preview.match(/label.*style=".*float: left; width: 30%; margin-right: 3%;.*input/), 'Label must be positioned on the left floated left');
        Harness.setComponentProperty('labelPosition', 'left-left', 'left-right', (preview) => {
          assert(preview.match(/label.*style=".*float: left; width: 30%; margin-right: 3%; text-align: right;.*input/), 'Label must be positioned on the left floated right');
          Harness.setComponentProperty('labelPosition', 'left-right', 'right-left', (preview) => {
            assert(preview.match(/label.*style=".*float: right; width: 30%; margin-left: 3%;.*input/), 'Label must be positioned on the right floated left');
            Harness.setComponentProperty('labelPosition', 'right-left', 'right-right', (preview) => {
              assert(preview.match(/label.*style=".*float: right; width: 30%; margin-left: 3%; text-align: right;.*input/), 'Label must be positioned on the right floated right');
              done();
            });
          });
        });
      });
    });
  });

  it('Should allow you to change the label width and margin', (done) => {
    Harness.setComponentProperty('labelPosition', 'right-right', 'top', () => {
      Harness.testVisibility(builder.editForm, '.formio-component-labelWidth', false);
      Harness.testVisibility(builder.editForm, '.formio-component-labelMargin', false);
      Harness.setComponentProperty('labelPosition', 'top', 'left-left', () => {
        Harness.testVisibility(builder.editForm, '.formio-component-labelWidth', true);
        Harness.testVisibility(builder.editForm, '.formio-component-labelMargin', true);
        Harness.setComponentProperty('labelWidth', 30, 20, () => {
          Harness.setComponentProperty('labelMargin', 3, 5, (preview) => {
            assert(preview.match(/label.*style=".*float: left; width: 20%; margin-right: 5%;.*input/), 'Label must be positioned on the left floated left');
            Harness.setComponentProperty('labelPosition', 'left-left', 'right-right', (preview) => {
              assert(preview.match(/label.*style=".*float: right; width: 20%; margin-left: 5%; text-align: right;.*input/), 'Label must be positioned on the right floated right');
              Harness.testVisibility(builder.editForm, '.formio-component-labelWidth', true);
              Harness.testVisibility(builder.editForm, '.formio-component-labelMargin', true);
              done();
            });
          });
        });
      });
    });
  });

  it('Should allow you to set the input mask', (done) => {
    Harness.testBuilderProperty('inputMask', '', '(999) 999-9999', null, () => {
      assert.equal(builder.preview.inputs[0].placeholder, '(___) ___-____');
      builder.preview.setValue('1234567890');
      assert.equal(builder.preview.inputs[0].value, '(123) 456-7890');
      assert.equal(builder.preview.getValue(), '(123) 456-7890');
      done();
    });
  });

  it('Should set the placeholder of the input', (done) => {
    Harness.setComponentProperty('labelPosition', 'right-right', 'top', () => {
      Harness.testBuilderProperty('placeholder', '', 'Enter something here', /input.*name="data\[firstName\].*placeholder="Enter something here"/, done);
    });
  });

  it('Should set the description of the input', (done) => {
    Harness.testBuilderProperty('description', '', 'This is a description', /input.*div.*class="help-block">This is a description<\/div>/, done);
  });

  it('Should set the tooltip of the input', (done) => {
    Harness.testBuilderProperty('tooltip', '', 'This is something you should fill out.', /label.*i.*class="glyphicon glyphicon-question-sign text-muted.*<\/label>/, () => {
      assert(builder.preview.tooltip, 'There should be a tooltip instance');
      builder.preview.tooltip.show();
      const toolTipText = builder.preview.element.querySelector('.tooltip-inner');
      assert.equal(toolTipText.innerHTML, 'This is something you should fill out.');
      done();
    });
  });

  it('Should set the prefix of the input', (done) => {
    Harness.testBuilderProperty('prefix', '', '$', /div class="input-group">.*<div class="input-group-addon">\$<\/div>.*input/, done);
  });

  it('Should set the suffix of the input', (done) => {
    Harness.testBuilderProperty('suffix', '', 'USD', /div class="input-group">.*input.*<div class="input-group-addon">USD<\/div>/, done);
  });

  it('Should set the custom css class of the input', (done) => {
    Harness.testBuilderProperty('customClass', '', 'custom-text-field', null, () => {
      assert(builder.preview.hasClass(builder.preview.element, 'custom-text-field'), 'Preview should have this custom class');
      done();
    });
  });

  it('Should set the tab index of the input element', (done) => {
    Harness.testBuilderProperty('tabindex', '', 10, null, () => {
      assert.equal(builder.preview.inputs[0].tabIndex, 10);
      done();
    });
  });

  it('Should allow you to set the multiple flag', (done) => {
    Harness.testBuilderProperty('multiple', false, true, null, () => {
      done();
    });
  });
});