src/components/tree/Tree.unit.js

import assert from 'power-assert';
import Harness from '../../../test/harness';
import TreeComponent from './Tree';
import {
  comp1,
} from './fixtures';

describe('Tree Component', () => {
  it('Should set and render values in readOnly mode', function(done) {
    Harness.testCreate(TreeComponent, comp1).then((component) => {
    component.setValue({
      data: {
        number: 111,
      },
      children: [{
        data: {
          number: 222,
        },
        children: [{
          data: {
            number: 333,
          },
          children: []
        }]
      }]
    });

    assert.equal(component.element.querySelectorAll('.tree__node-content').length, 3);
    assert.equal(component.element.querySelectorAll('.editNode').length, 3);

    component.options.readOnly = true;
    component.redraw();

    const valueContainers = component.element.querySelectorAll('.col-sm-2');

    assert.equal(component.element.querySelectorAll('.tree__node-content').length, 3);
    assert.equal(component.element.querySelectorAll('.editNode').length, 0);
    assert.equal(valueContainers[0].innerHTML.trim(), '111');
    assert.equal(valueContainers[1].innerHTML.trim(), '222');
    assert.equal(valueContainers[2].innerHTML.trim(), '333');

    done();
    });
  });
});