Home Reference Source

src/components/checkbox/Checkbox.unit.js

import assert from 'power-assert';
import _ from 'lodash';

import Harness from '../../../test/harness';
import { Formio } from './../../Formio';
import CheckBoxComponent from './Checkbox';

import {
  comp1,
  customDefaultComponent,
  comp2,
  comp3,
  comp4
} from './fixtures';

describe('Checkbox Component', () => {
  it('Should build a checkbox component', () => {
    return Harness.testCreate(CheckBoxComponent, comp1).then((component) => {
      const inputs = Harness.testElements(component, 'input[type="checkbox"]', 1);
      for (let i=0; i < inputs.length; i++) {
        assert(inputs[i].getAttribute('class').indexOf('form-check-input') !== -1, 'No form-check-input class');
        assert.equal(inputs[i].name, `data[${comp1.key}]`);
      }
      Harness.testElements(component, 'span', 1);
    });
  });

  it('Span should have correct text label', () => {
    return Harness.testCreate(CheckBoxComponent, comp1).then((component) => {
      const checkboxes = component.element.querySelectorAll('input[ref="input"]');
      assert.equal(checkboxes.length, 1);
      const componentClass = checkboxes[0].getAttribute('class');
      assert(componentClass.indexOf('form-check-input') !== -1, 'No form-check-input class.');
      const labels = component.element.querySelectorAll('label');
      assert.equal(labels.length, 1);
      assert(labels[0].getAttribute('class').indexOf('form-check-label') !== -1, 'No form-check-label class');
      const spans = labels[0].querySelectorAll('span');
      assert.equal(spans.length, 1);
      assert.equal(spans[0].innerHTML, 'Check me');
    });
  });

  it('Should be able to set and get data', () => {
    return Harness.testCreate(CheckBoxComponent, comp1).then((component) => {
      Harness.testSetGet(component, 1);
      Harness.testSetGet(component, 0);
    });
  });

  it('Should be able to set custom default value', () => {
    return Harness.testCreate(CheckBoxComponent, customDefaultComponent).then((component) => {
      assert.equal(component.dataValue, true);
      });
  });

  it('Should be able to unselect a checkbox component with the radio input type', () => {
    return Harness.testCreate(CheckBoxComponent, comp2).then((component) => {
      const input = Harness.testElements(component, 'input[type="radio"]', 1)[0];
      Harness.clickElement(component, input);
      assert.equal(input.checked, true);
      Harness.clickElement(component, input);
      assert.equal(input.checked, false);
    });
  });

  it('Should render red asterisk for preview template of the modal required checkbox ', (done) => {
    Harness.testCreate(CheckBoxComponent, comp3).then((component) => {
      const label = component.element.querySelector('.control-label');
      assert(label.className.includes('field-required'));
      done();
    }).catch(done);
  });

  it('Should hide component with conditional logic when checkbox component with the radio input type is unchecked', (done) =>  {
    const form = _.cloneDeep(comp4);
    const element = document.createElement('div');

    Formio.createForm(element, form).then(form => {
      const radioCheckbox = form.getComponent('p1');
      const contentComp = form.getComponent('p1Content');
      assert.equal(contentComp.visible, false);
      const radio = Harness.testElements(radioCheckbox, 'input[type="radio"]', 1)[0];
      Harness.clickElement(radioCheckbox, radio);
      setTimeout(() => {
        assert.equal(contentComp.visible, true);
        Harness.clickElement(radioCheckbox, radio);
        setTimeout(() => {
          assert.equal(contentComp.visible, false);
          done();
        }, 300);
      }, 300);
    }).catch((err) => done(err));
  });
});