lucid-ui/lib/components/Legend/Legend.spec.js

A UI component library from AppNexus.

import React from 'react';
import { common } from '../../util/generic-tests';
import { shallow } from 'enzyme';
import assert from 'assert';
import Point from '../Point/Point';
import Line from '../Line/Line';
import Legend from './Legend';
var Item = Legend.Item;
describe('Legend', function () {
  common(Legend);
  describe('render', function () {
    it('should render a legend', function () {
      var wrapper = shallow( /*#__PURE__*/React.createElement(Legend, null));
      assert.equal(wrapper.find('.lucid-Legend').length, 1, 'missing legend');
    });
  });
  describe('props', function () {
    describe('orient', function () {
      it('should add the correct class for horizontal', function () {
        var wrapper = shallow( /*#__PURE__*/React.createElement(Legend, {
          orient: "horizontal"
        }));
        assert.equal(wrapper.find('.lucid-Legend-is-horizontal').length, 1, 'missing class');
      });
      it('should add the correct class for vertical', function () {
        var wrapper = shallow( /*#__PURE__*/React.createElement(Legend, {
          orient: "vertical"
        }));
        assert.equal(wrapper.find('.lucid-Legend-is-vertical').length, 1, 'missing class');
      });
    });
  });
  describe('child components', function () {
    describe('Item', function () {
      it('should not render an svg when no line or point', function () {
        var wrapper = shallow( /*#__PURE__*/React.createElement(Legend, null, /*#__PURE__*/React.createElement(Item, null)));
        assert.equal(wrapper.find('svg').length, 0);
      });
      it('should set the correct width when vertical and there are some lines', function () {
        var wrapper = shallow( /*#__PURE__*/React.createElement(Legend, {
          orient: "vertical"
        }, /*#__PURE__*/React.createElement(Item, {
          hasPoint: true
        }), /*#__PURE__*/React.createElement(Item, {
          hasLine: true
        })));
        assert.equal(wrapper.find('.lucid-Legend-Item-indicator').at(0).prop('width'), 22);
        assert.equal(wrapper.find('.lucid-Legend-Item-indicator').at(1).prop('width'), 22);
        assert.equal(wrapper.find(Point).prop('x'), 11);
        assert.equal(wrapper.find(Line).prop('d'), 'M0,6 L22,6');
      });
      it('should set the correct width when there are only points', function () {
        var wrapper = shallow( /*#__PURE__*/React.createElement(Legend, null, /*#__PURE__*/React.createElement(Item, {
          hasPoint: true
        }), /*#__PURE__*/React.createElement(Item, {
          hasPoint: true
        })));
        assert.equal(wrapper.find('.lucid-Legend-Item-indicator').at(0).prop('width'), 12);
        assert.equal(wrapper.find('.lucid-Legend-Item-indicator').at(1).prop('width'), 12);
      });
      it('should render items with text in them', function () {
        var wrapper = shallow( /*#__PURE__*/React.createElement(Legend, null, /*#__PURE__*/React.createElement(Item, null, "Foo"), /*#__PURE__*/React.createElement(Item, null, "Bar")));
        assert.equal(wrapper.find('.lucid-Legend-Item').at(0).text(), 'Foo', 'wrong text content found');
        assert.equal(wrapper.find('.lucid-Legend-Item').at(1).text(), 'Bar', 'wrong text content found');
      });
      it('should handle the `hasLine` prop', function () {
        var wrapper = shallow( /*#__PURE__*/React.createElement(Legend, null, /*#__PURE__*/React.createElement(Item, {
          hasLine: true
        })));
        assert.equal(wrapper.find(Line).length, 1, 'did not find a Line');
      });
      it('should handle the `hasPoint` prop', function () {
        var wrapper = shallow( /*#__PURE__*/React.createElement(Legend, null, /*#__PURE__*/React.createElement(Item, {
          hasPoint: true
        })));
        assert.equal(wrapper.find(Point).length, 1, 'did not find a Point');
      });
      it('should handle the `color` prop by passing through to Line and Point', function () {
        var wrapper = shallow( /*#__PURE__*/React.createElement(Legend, null, /*#__PURE__*/React.createElement(Item, {
          color: 'fooest thou bar',
          hasPoint: true,
          hasLine: true
        })));
        assert.equal(wrapper.find(Line).prop('color'), 'fooest thou bar', 'wrong or missing `color` prop on Line');
        assert.equal(wrapper.find(Point).prop('color'), 'fooest thou bar', 'wrong or missing `color` prop on Point');
      });
      it('should handle the `pointKind` prop by passing through to Point', function () {
        var wrapper = shallow( /*#__PURE__*/React.createElement(Legend, null, /*#__PURE__*/React.createElement(Item, {
          hasPoint: true,
          pointKind: 5
        })));
        assert.equal(wrapper.find(Point).prop('kind'), 5, 'wrong or missing `kind` prop on Point');
      });
    });
  });
});