lucid-ui
Version:
A UI component library from AppNexus.
399 lines • 15.1 kB
JavaScript
/* eslint-disable comma-spacing */
import React from 'react';
import assert from 'assert';
import * as d3Scale from 'd3-scale';
import { common } from '../../util/generic-tests';
import { shallow } from 'enzyme';
import Bars, { PureToolTip } from './Bars';
import Bar from '../Bar/Bar';
import Legend from '../Legend/Legend';
import { ToolTipDumb as ToolTip } from '../ToolTip/ToolTip';
var defaultData = [{
x: 'aye',
y: 10,
y2: 20
}, {
x: 'bee',
y: 55,
y2: 35
}, {
x: 'see',
y: 100,
y2: 3
}];
var defaultXScale = d3Scale.scaleBand().domain(['aye', 'bee', 'see']).range([0, 100]);
var defaultYScale = d3Scale.scaleLinear().domain([0, 100]).range([1000, 0]);
describe('Bars', function () {
common(Bars, {
exemptFunctionProps: ['xScale', 'yScale', 'xFormatter', 'yFormatter', 'yTooltipFormatter', 'renderTooltipBody'],
getDefaultProps: function getDefaultProps() {
return {
data: defaultData,
xScale: defaultXScale,
yScale: defaultYScale
};
}
});
describe('props', function () {
describe('data', function () {
it('should handle a basic data set', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Bars, {
data: defaultData,
xScale: defaultXScale,
yScale: defaultYScale
}));
assert.equal(wrapper.find(Bar).length, 3);
});
});
describe('legend', function () {
it('should display the correct legend entries based on the legend', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Bars, {
data: defaultData,
xScale: defaultXScale,
yScale: defaultYScale,
hasToolTips: true,
legend: {
y: 'Foo'
}
}));
assert(wrapper.find(PureToolTip).at(0).shallow().find(Legend.Item).text(), 'Foo: 10');
assert(wrapper.find(PureToolTip).at(1).shallow().find(Legend.Item).text(), 'Foo: 55');
assert(wrapper.find(PureToolTip).at(2).shallow().find(Legend.Item).text(), 'Foo: 90');
});
});
describe('palette', function () {
it('should kick in when theres no colorMap', function () {
var palette = ['r', 'g'];
var wrapper = shallow( /*#__PURE__*/React.createElement(Bars, {
data: [{
x: 'one',
rev: 1,
imp: 2,
click: 3
}],
yFields: ['rev', 'imp', 'click'],
xScale: defaultXScale,
yScale: defaultYScale,
palette: palette
}));
assert.equal(wrapper.find(Bar).at(0).prop('color'), 'r');
assert.equal(wrapper.find(Bar).at(1).prop('color'), 'g');
assert.equal(wrapper.find(Bar).at(2).prop('color'), 'r');
});
it('should be beat when theres a colorMap', function () {
var palette = ['r', 'g'];
var wrapper = shallow( /*#__PURE__*/React.createElement(Bars, {
data: [{
x: 'one',
rev: 1,
imp: 2,
click: 3
}],
yFields: ['rev', 'imp', 'click'],
xScale: defaultXScale,
yScale: defaultYScale,
palette: palette,
colorMap: {
imp: '#ABC123'
}
}));
assert.equal(wrapper.find(Bar).at(0).prop('color'), 'r');
assert.equal(wrapper.find(Bar).at(1).prop('color'), '#ABC123');
assert.equal(wrapper.find(Bar).at(2).prop('color'), 'r');
});
});
describe('colorMap', function () {
it('should pass custom colors through to Bar', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Bars, {
data: defaultData,
xScale: defaultXScale,
yScale: defaultYScale,
colorMap: {
y: '#ABC333'
}
}));
assert.equal(wrapper.find(Bar).at(0).prop('color'), '#ABC333');
});
});
describe('xScale', function () {
it('should work with band scales', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Bars, {
data: defaultData,
xScale: defaultXScale,
yScale: defaultYScale
}));
assert.equal(wrapper.find(Bar).length, 3, 'wrong number of Bar');
assert.equal(wrapper.find(Bar).at(0).prop('height'), 100);
assert.equal(wrapper.find(Bar).at(1).prop('height'), 550.00000000000001);
assert.equal(wrapper.find(Bar).at(2).prop('height'), 1000);
});
});
describe('xField', function () {
it('should pickup alternate xFields', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Bars, {
data: [{
axe: 'one',
y: 0
}, {
axe: 'two',
y: 50
}, {
axe: 'three',
y: 100
}],
xField: "axe",
xScale: defaultXScale,
yScale: defaultYScale
}));
assert.equal(wrapper.find(Bar).length, 3, 'wrong number of Bar');
assert.equal(wrapper.find(Bar).at(0).prop('height'), 0);
assert.equal(wrapper.find(Bar).at(1).prop('height'), 500);
assert.equal(wrapper.find(Bar).at(2).prop('height'), 1000);
});
});
describe('xFormatter', function () {
it('should format the x field using the provided function', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Bars, {
data: defaultData,
xScale: defaultXScale,
yScale: defaultYScale,
hasToolTips: true,
xFormatter: function xFormatter(str) {
return str.toUpperCase();
}
})).find(PureToolTip);
assert.equal(wrapper.at(0).shallow().find(ToolTip.Title).prop('children'), 'AYE');
assert.equal(wrapper.at(1).shallow().find(ToolTip.Title).prop('children'), 'BEE');
assert.equal(wrapper.at(2).shallow().find(ToolTip.Title).prop('children'), 'SEE');
});
it('should have access to the full datum', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Bars, {
data: defaultData,
xScale: defaultXScale,
yScale: defaultYScale,
hasToolTips: true,
xFormatter: function xFormatter(str, d) {
return "".concat(str.toUpperCase(), " ").concat(d.y2);
}
})).find(PureToolTip);
assert.equal(wrapper.at(0).shallow().find(ToolTip.Title).prop('children'), 'AYE 20');
assert.equal(wrapper.at(1).shallow().find(ToolTip.Title).prop('children'), 'BEE 35');
assert.equal(wrapper.at(2).shallow().find(ToolTip.Title).prop('children'), 'SEE 3');
});
});
describe('yScale', function () {
it('should work with linear scales', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Bars, {
data: defaultData,
xScale: defaultXScale,
yScale: defaultYScale
}));
assert.equal(wrapper.find(Bar).length, 3, 'wrong number of Bar');
assert.equal(wrapper.find(Bar).at(0).prop('height'), 100);
assert.equal(wrapper.find(Bar).at(1).prop('height'), 550.00000000000001);
assert.equal(wrapper.find(Bar).at(2).prop('height'), 1000);
});
it('should work with time scales', function () {
var xScale = d3Scale.scaleBand().domain([new Date('2015-01-01T00:00:00Z'), new Date('2015-01-03T00:00:00Z')]).range([0, 100]);
var yScale = d3Scale.scaleTime().domain([0, 100]).range([1000, 0]);
var wrapper = shallow( /*#__PURE__*/React.createElement(Bars, {
data: [{
x: new Date('2015-01-01T00:00:00Z'),
y: 0
}, {
x: new Date('2015-01-02T00:00:00Z'),
y: 50
}, {
x: new Date('2015-01-03T00:00:00Z'),
y: 100
}],
xScale: xScale,
yScale: yScale,
xFormatter: function xFormatter(d) {
return d.toISOString();
}
}));
assert.equal(wrapper.find(Bar).length, 3, 'wrong number of Bar');
assert.equal(wrapper.find(Bar).at(0).prop('width'), 50);
assert.equal(wrapper.find(Bar).at(0).prop('height'), 0);
assert.equal(wrapper.find(Bar).at(1).prop('width'), 50);
assert.equal(wrapper.find(Bar).at(1).prop('height'), 500);
assert.equal(wrapper.find(Bar).at(2).prop('width'), 50);
assert.equal(wrapper.find(Bar).at(2).prop('height'), 1000);
});
});
describe('yFields', function () {
it('should pickup an alternate field', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Bars, {
data: [{
x: 'one',
why: 0
}, {
x: 'two',
why: 50
}, {
x: 'three',
why: 100
}],
yFields: ['why'],
xScale: defaultXScale,
yScale: defaultYScale
}));
assert.equal(wrapper.find(Bar).length, 3, 'wrong number of Bar');
assert.equal(wrapper.find(Bar).at(0).prop('height'), 0);
assert.equal(wrapper.find(Bar).at(1).prop('height'), 500);
assert.equal(wrapper.find(Bar).at(2).prop('height'), 1000);
});
it('should handle multiple fields', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Bars, {
data: [{
x: 'one',
why: 0,
not: 100
}, {
x: 'two',
why: 50,
not: 50
}, {
x: 'three',
why: 100,
not: 0
}],
yFields: ['why', 'not'],
xScale: defaultXScale,
yScale: defaultYScale
}));
assert.equal(wrapper.find(Bar).length, 6, 'wrong number of Bar');
assert.equal(wrapper.find(Bar).at(0).prop('width'), 16);
assert.equal(wrapper.find(Bar).at(0).prop('height'), 0);
assert.equal(wrapper.find(Bar).at(1).prop('height'), 1000);
assert.equal(wrapper.find(Bar).at(2).prop('height'), 500);
assert.equal(wrapper.find(Bar).at(3).prop('height'), 500);
assert.equal(wrapper.find(Bar).at(4).prop('height'), 1000);
assert.equal(wrapper.find(Bar).at(5).prop('height'), 0);
});
});
describe('yFormatter', function () {
it('should format the y field using the provided function', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Bars, {
data: defaultData,
xScale: defaultXScale,
yScale: defaultYScale,
hasToolTips: true,
xFormatter: function xFormatter(str) {
return str.toUpperCase();
}
})).find(PureToolTip);
assert.equal(wrapper.at(0).shallow().find(ToolTip.Title).prop('children'), 'AYE');
assert.equal(wrapper.at(1).shallow().find(ToolTip.Title).prop('children'), 'BEE');
assert.equal(wrapper.at(2).shallow().find(ToolTip.Title).prop('children'), 'SEE');
});
});
describe('isStacked', function () {
it('should stack the bars accordingly', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Bars, {
data: [{
x: 'one',
why: 0,
not: 100
}, {
x: 'two',
why: 50,
not: 50
}, {
x: 'three',
why: 100,
not: 0
}],
yFields: ['why', 'not'],
xScale: defaultXScale,
yScale: defaultYScale,
isStacked: true
}));
assert.equal(wrapper.find(Bar).length, 6, 'wrong number of Bar');
assert.equal(wrapper.find(Bar).at(0).prop('width'), 33.333333333333336);
assert.equal(wrapper.find(Bar).at(0).prop('height'), 0);
assert.equal(wrapper.find(Bar).at(1).prop('height'), 1000);
assert.equal(wrapper.find(Bar).at(2).prop('height'), 500);
assert.equal(wrapper.find(Bar).at(3).prop('height'), 500);
assert.equal(wrapper.find(Bar).at(4).prop('height'), 1000);
assert.equal(wrapper.find(Bar).at(5).prop('height'), 0);
});
});
describe('colorOffset', function () {
it('should correctly offset the palette colors', function () {
var palette = ['r', 'g'];
var wrapper = shallow( /*#__PURE__*/React.createElement(Bars, {
data: [{
x: 'one',
rev: 1,
imp: 2,
click: 3
}],
yFields: ['rev', 'imp', 'click'],
xScale: defaultXScale,
yScale: defaultYScale,
palette: palette,
colorOffset: 1
}));
assert.equal(wrapper.find(Bar).at(0).prop('color'), 'g');
assert.equal(wrapper.find(Bar).at(1).prop('color'), 'r');
assert.equal(wrapper.find(Bar).at(2).prop('color'), 'g');
});
});
describe('renderTooltipBody', function () {
it('should format the whole tooltip body', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Bars, {
data: defaultData,
xScale: defaultXScale,
yScale: defaultYScale,
hasToolTips: true,
renderTooltipBody: function renderTooltipBody(dataPoint, data) {
return dataPoint.x.toUpperCase();
}
}));
var toolTip = wrapper.find(PureToolTip);
assert.equal(toolTip.at(0).shallow().find(ToolTip.Body).prop('children'), 'AYE');
assert.equal(toolTip.at(1).shallow().find(ToolTip.Body).prop('children'), 'BEE');
assert.equal(toolTip.at(2).shallow().find(ToolTip.Body).prop('children'), 'SEE');
});
});
});
describe('tooltips', function () {
it('should show the tooltip', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Bars, {
data: defaultData,
xScale: defaultXScale,
yScale: defaultYScale,
hasToolTips: true
}));
wrapper.find(PureToolTip).forEach(function (node) {
return expect(node.prop('isExpanded')).toBe(false);
});
wrapper.setState({
hoveringSeriesIndex: 0
});
var toolTips = wrapper.find(PureToolTip);
expect(toolTips.first().prop('isExpanded')).toBe(true);
expect(toolTips.at(1).prop('isExpanded')).toBe(false);
expect(toolTips.at(2).prop('isExpanded')).toBe(false);
});
it('should not show tooltips with `hasToolTips` = false', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Bars, {
data: defaultData,
xScale: defaultXScale,
yScale: defaultYScale,
hasToolTips: false
}));
wrapper.find(PureToolTip).forEach(function (node) {
return expect(node.prop('isExpanded')).toBe(false);
});
wrapper.setState({
hoveringSeriesIndex: 0
});
wrapper.find(PureToolTip).forEach(function (node) {
return expect(node.prop('isExpanded')).toBe(false);
});
});
});
});