react-spatial/components/LayerTree/LayerTree.test.js

Components to build React map apps.

/* eslint-disable react/jsx-props-no-spreading */
import React from 'react';
import { configure, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import 'jest-canvas-mock';
import renderer from 'react-test-renderer';
import LayerTree from './LayerTree';
import data from '../../../data/TreeData';
import ConfigReader from '../../ConfigReader';
import LayerService from '../../LayerService';

configure({ adapter: new Adapter() });

var mountLayerTree = function (newData) {
  var layers = ConfigReader.readConfig(newData);
  var layerService = new LayerService(layers);
  return mount(React.createElement( LayerTree, { layerService: layerService }));
};

var renderLayerTree = function (newData, props) {
  var layers = ConfigReader.readConfig(newData);
  var layerService = new LayerService(layers);
  var component = renderer.create(
    React.createElement( LayerTree, Object.assign({}, { layerService: layerService }, (props || {})))
  );
  var tree = component.toJSON();
  expect(tree).toMatchSnapshot();
};

var classItem = '.tm-layer-tree-item';
var toggleItem = '.tm-layer-tree-toggle';

describe('LayerTree', function () {
  describe('matches snapshots', function () {
    test('using default properties.', function () {
      renderLayerTree(data);
    });

    test('when no layers.', function () {
      var layerService = new LayerService();
      var component = renderer.create(
        React.createElement( LayerTree, { layerService: layerService })
      );
      var tree = component.toJSON();
      expect(tree).toMatchSnapshot();
    });

    test('when renderItem is used.', function () {
      renderLayerTree(data, {
        renderItem: function (item) { return React.createElement( 'div', { key: item.getName() }, item.getName()); },
      });
    });

    test('when classNames are used.', function () {
      renderLayerTree(data, {
        className: 'foo',
        classNameItem: 'bar',
        classNameInput: 'qux',
        classNameToggle: 'quux',
        classNameArrow: 'ged',
      });
    });

    test('when an item is hidden.', function () {
      renderLayerTree(data, {
        isItemHidden: function (item) { return !!item.children.length; },
      });
    });
  });

  describe('triggers onInputClick', function () {
    var wrapper;
    var spy;
    var spy2;
    var data2 = [
      {
        name: 'foo',
        data: {
          type: 'xyz',
        },
      } ];
    var expectCalled = function () {
      expect(spy).toHaveBeenCalledTimes(1);
      expect(spy2).toHaveBeenCalledTimes(0);
      expect(spy.mock.calls[0][0].getName()).toBe('foo');
    };

    beforeEach(function () {
      spy = jest.spyOn(LayerTree.prototype, 'onInputClick');
      spy2 = jest.spyOn(LayerTree.prototype, 'onToggle');
      wrapper = mountLayerTree(data2);
    });

    afterEach(function () {
      spy.mockRestore();
      spy2.mockRestore();
    });

    test('when we press enter with keyboard on the label element.', function () {
      wrapper
        .find('label')
        .at(0)
        .simulate('keypress', { which: 13 });
      expectCalled();
    });

    test('when we click on input.', function () {
      wrapper
        .find('input')
        .at(0)
        .simulate('click');
      expectCalled();
    });

    test('when we click on toggle button (label+arrow) of an item without children.', function () {
      wrapper
        .find(classItem)
        .first()
        .childAt(1)
        .simulate('click');
      expectCalled();
    });
  });

  describe('triggers onToggle', function () {
    var wrapper;
    var spy;
    var data2 = [
      {
        name: '1',
        children: [
          {
            name: '1-1',
          },
          {
            name: '1-1-1',
            data: {
              type: 'xyz',
            },
          } ],
      } ];

    var expectCalled = function () {
      expect(spy).toHaveBeenCalledTimes(1);
    };

    beforeEach(function () {
      spy = jest.spyOn(LayerTree.prototype, 'onToggle');
      wrapper = mountLayerTree(data2);
    });

    test('when we click on toggle button (label+arrow) of an item with children', function () {
      wrapper
        .find(toggleItem)
        .first()
        .simulate('click');
      expectCalled();
    });
  });
});

//# sourceMappingURL=LayerTree.test.js.map