lucid-ui
Version:
A UI component library from AppNexus.
224 lines • 7.89 kB
JavaScript
import _toUpper from "lodash/toUpper";
import _has from "lodash/has";
import React from 'react';
import { shallow } from 'enzyme';
import { common } from '../../util/generic-tests';
import assert from 'assert';
import sinon from 'sinon';
import { PieChartDumb as PieChart } from './PieChart';
import Line from '../Line/Line';
import { ToolTipDumb as ToolTip } from '../ToolTip/ToolTip';
jest.mock('d3-shape', function () {
return {
arc: jest.fn(function () {
return {
innerRadius: jest.fn(function () {
return {
outerRadius: jest.fn(function () {
return function (arg) {
return "".concat(arg);
};
})
};
})
};
}),
pie: jest.fn(function () {
return {
sort: jest.fn(function () {
return function (arg) {
return arg;
};
})
};
})
};
});
var sampleData = [{
x: 'One',
y: 30
}, {
x: 'Two',
y: 20
}, {
x: 'Three',
y: 50
}];
describe('PieChart', function () {
common(PieChart, {
exemptFunctionProps: ['xAxisFormatter', 'yAxisFormatter']
});
describe('render', function () {
it('should render a basic chart', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(PieChart, {
data: sampleData
}));
assert.equal(wrapper.find(Line).length, 3, "missing Line's");
assert.equal(wrapper.find('.lucid-PieChart-slice-hover').length, 3, 'missing the hover slices');
});
});
describe('props', function () {
it('height and width', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(PieChart, {
height: 150,
width: 250
}));
var svg = wrapper.find('.lucid-PieChart');
assert.equal(svg.prop('height'), 150);
assert.equal(svg.prop('width'), 250);
});
describe('margin', function () {
it('should merge margins and transform accordingly', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(PieChart, {
data: sampleData,
width: 200,
height: 100,
margin: {
top: 50
}
}));
assert.equal(wrapper.find('g').at(0).prop('transform'), 'translate(10, 50)');
});
});
describe('hasToolTips', function () {
it('should set isExpanded on ToolTip when true and hovering', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(PieChart, {
data: sampleData,
hasToolTips: true,
isHovering: true
}));
assert.equal(wrapper.find(ToolTip).prop('isExpanded'), true);
});
it('should not set isExpanded on ToolTip when not hovering', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(PieChart, {
data: sampleData,
hasToolTips: false,
isHovering: true
}));
assert.equal(wrapper.find(ToolTip).prop('isExpanded'), false);
});
});
describe('palette', function () {
it('should pass through to Line and handle wrapping values', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(PieChart, {
data: sampleData,
palette: ['foo', 'bar']
}));
assert.equal(wrapper.find(Line).at(0).prop('color'), 'foo');
assert.equal(wrapper.find(Line).at(1).prop('color'), 'bar');
assert.equal(wrapper.find(Line).at(2).prop('color'), 'foo');
});
});
describe('colorMap', function () {
it('should pass through the correct color to Line', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(PieChart, {
data: sampleData,
colorMap: {
Two: '#abc123'
}
}));
assert.equal(wrapper.find(Line).at(0).prop('color'), 'color-chart-3');
assert.equal(wrapper.find(Line).at(1).prop('color'), '#abc123');
assert.equal(wrapper.find(Line).at(2).prop('color'), 'color-chart-2');
});
});
describe('ToolTip', function () {
it('should pass through props to ToolTip', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(PieChart, {
data: sampleData,
ToolTip: {
kind: 'info'
}
}));
assert.equal(wrapper.find(ToolTip).prop('kind'), 'info');
});
});
describe('hasStroke', function () {
it('should add the correct class', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(PieChart, {
data: sampleData,
hasStroke: true
}));
assert.equal(wrapper.find('.lucid-PieChart-slice-has-stroke').length, 3);
});
it('should not add the class when false', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(PieChart, {
data: sampleData,
hasStroke: false
}));
assert.equal(wrapper.find('.lucid-PieChart-slice-has-stroke').length, 0);
});
});
describe('isHovering and hoveringIndex', function () {
it('should put the right class on the right slice', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(PieChart, {
data: sampleData,
isHovering: true,
hoveringIndex: 1
}));
assert(wrapper.find('.lucid-PieChart-slice-group').at(1).hasClass('lucid-PieChart-slice-group-is-hovering'));
});
});
describe('onMouseOver', function () {
it('should fire when hovering on a slice and hasToolTips', function () {
var onMouseOver = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(PieChart, {
data: sampleData,
onMouseOver: onMouseOver,
hasToolTips: true,
palette: ['foo']
}));
var target = wrapper.find('.lucid-PieChart-slice-hover').at(1);
target.simulate('mouseOver');
assert(onMouseOver.called, 'onMouseOver was not called');
assert.equal(onMouseOver.args[0][0], 1, 'wrong index on onMouseOut');
assert.equal(onMouseOver.args[0][1].props.palette[0], 'foo');
assert(_has(onMouseOver.args[0][1], 'event'));
});
});
describe('onMouseOut', function () {
it("should fire when hovering out when we're not using tooltips", function () {
var onMouseOut = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(PieChart, {
data: sampleData,
onMouseOut: onMouseOut,
hasToolTips: false,
palette: ['bar']
}));
var target = wrapper.find('.lucid-PieChart-slice-hover').at(0);
target.simulate('mouseOut', {
stopPropagation: function stopPropagation() {
return undefined;
}
});
assert(onMouseOut.called, 'onMouseOut was not called');
assert.equal(onMouseOut.args[0][0].props.palette[0], 'bar');
assert(_has(onMouseOut.args[0][0], 'event'));
});
});
describe('xAxisFormatter', function () {
it('should work', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(PieChart, {
data: sampleData,
xAxisFormatter: _toUpper,
isHovering: true,
hoveringIndex: 0
}));
assert.equal(wrapper.find(ToolTip.Title).prop('children'), 'ONE');
});
});
describe('yAxisFormatter', function () {
it('should work', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(PieChart, {
data: sampleData,
yAxisFormatter: function yAxisFormatter(x) {
return x * 10;
},
isHovering: true,
hoveringIndex: 1
}));
assert.equal(wrapper.find(ToolTip.Body).prop('children'), '200');
});
});
});
});