lucid-ui
Version:
A UI component library from AppNexus.
226 lines (225 loc) • 8.06 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 Lines from './Lines';
import Line from '../Line/Line';
var defaultData = [{
x: 0,
y: 10,
y2: 20
}, {
x: 5,
y: 55,
y2: 35
}, {
x: 10,
y: 100,
y2: 0
}]; // The scales are functions to guard against inadvertent scale mutation
var defaultXScale = d3Scale.scaleLinear().domain([0, 10]).range([0, 100]);
var defaultYScale = d3Scale.scaleLinear().domain([0, 100]).range([1000, 0]);
describe('Lines', function () {
common(Lines, {
exemptFunctionProps: ['xScale', 'yScale'],
getDefaultProps: function getDefaultProps() {
return {
data: [{
x: new Date('2015-01-01T00:00:00Z'),
y: 1
}],
xScale: d3Scale.scaleTime(),
yScale: d3Scale.scaleLinear()
};
}
});
describe('props', function () {
describe('palette', function () {
it('should kick in when theres no colorMap', function () {
var palette = ['bling', 'blang'];
var wrapper = shallow( /*#__PURE__*/React.createElement(Lines, {
data: [{
x: 1,
rev: 1,
imp: 2,
click: 3
}],
yFields: ['rev', 'imp', 'click'],
xScale: defaultXScale,
yScale: defaultYScale,
palette: palette
}));
assert.equal(wrapper.find(Line).at(0).prop('color'), 'bling');
assert.equal(wrapper.find(Line).at(1).prop('color'), 'blang');
assert.equal(wrapper.find(Line).at(2).prop('color'), 'bling');
});
it('should be beat when theres a colorMap', function () {
var palette = ['bling', 'blang'];
var wrapper = shallow( /*#__PURE__*/React.createElement(Lines, {
data: [{
x: 1,
rev: 1,
imp: 2,
click: 3
}],
yFields: ['rev', 'imp', 'click'],
xScale: defaultXScale,
yScale: defaultYScale,
palette: palette,
colorMap: {
rev: 'wat'
}
}));
assert.equal(wrapper.find(Line).at(0).prop('color'), 'wat');
assert.equal(wrapper.find(Line).at(1).prop('color'), 'blang');
assert.equal(wrapper.find(Line).at(2).prop('color'), 'bling');
});
});
describe('colorMap', function () {
it('should pass custom colors through to Line', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Lines, {
data: defaultData,
xScale: defaultXScale,
yScale: defaultYScale,
colorMap: {
y: '#ABC333'
}
}));
assert.equal(wrapper.find(Line).at(0).prop('color'), '#ABC333');
});
});
describe('data', function () {
it('should handle a basic data set', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Lines, {
data: defaultData,
xScale: defaultXScale,
yScale: defaultYScale
}));
assert.equal(wrapper.find(Line).length, 1);
});
});
describe('xScale', function () {
it('should work with linear scales', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Lines, {
data: defaultData,
xScale: defaultXScale,
yScale: defaultYScale
}));
assert.equal(wrapper.find(Line).length, 1, 'wrong number of Line');
assert.equal(wrapper.find(Line).at(0).prop('d'), 'M0,900L50,449.99999999999994L100,0L100,0L50,449.99999999999994L0,900Z');
});
it('should work with time scales', function () {
var xScale = d3Scale.scaleTime().domain([new Date('2015-01-01T00:00:00Z'), new Date('2015-01-02T00:00:00Z')]).range([0, 500]);
var wrapper = shallow( /*#__PURE__*/React.createElement(Lines, {
data: [{
x: new Date('2015-01-01T00:00:00Z'),
y: 50
}, {
x: new Date('2015-01-02T00:00:00Z'),
y: 60
}],
xScale: xScale,
yScale: defaultYScale
}));
assert.equal(wrapper.find(Line).length, 1, 'wrong number of Line');
assert.equal(wrapper.find(Line).at(0).prop('d'), 'M0,500L500,400L500,400L0,500Z');
});
});
describe('yScale', function () {
it('should work with time scales', function () {
var yScale = d3Scale.scaleTime().domain([new Date('2015-01-01T00:00:00Z'), new Date('2015-01-02T00:00:00Z')]).range([0, 500]);
var wrapper = shallow( /*#__PURE__*/React.createElement(Lines, {
data: [{
y: new Date('2015-01-01T00:00:00Z'),
x: 5
}, {
y: new Date('2015-01-02T00:00:00Z'),
x: 6
}],
xScale: defaultXScale,
yScale: yScale
}));
assert.equal(wrapper.find(Line).length, 1, 'wrong number of Line');
assert.equal(wrapper.find(Line).at(0).prop('d'), 'M50,0L60,500L60,500L50,0Z');
});
});
describe('xField', function () {
it('should pickup alternate xFields', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Lines, {
data: [{
axe: 1,
y: 3
}, {
axe: 2,
y: 2
}, {
axe: 3,
y: 1
}],
xField: "axe",
xScale: defaultXScale,
yScale: defaultYScale
}));
assert.equal(wrapper.find(Line).length, 1, 'wrong number of Line');
assert.equal(wrapper.find(Line).at(0).prop('d'), 'M10,970L20,980L30,990L30,990L20,980L10,970Z');
});
});
describe('yFields', function () {
it('should pickup an alternate field', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Lines, {
data: defaultData,
yFields: ['y2'],
xScale: defaultXScale,
yScale: defaultYScale
}));
assert.equal(wrapper.find(Line).at(0).prop('d'), 'M0,800L50,650L100,1000L100,1000L50,650L0,800Z');
});
it('should handle multiple fields', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Lines, {
data: defaultData,
yFields: ['y', 'y2'],
xScale: defaultXScale,
yScale: defaultYScale
}));
assert.equal(wrapper.find(Line).at(0).prop('d'), 'M0,900L50,449.99999999999994L100,0L100,0L50,449.99999999999994L0,900Z');
assert.equal(wrapper.find(Line).at(1).prop('d'), 'M0,800L50,650L100,1000L100,1000L50,650L0,800Z');
});
});
describe('isStacked', function () {
it('should stack', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Lines, {
data: defaultData,
yFields: ['y', 'y2'],
xScale: defaultXScale,
yScale: defaultYScale,
isStacked: true
}));
assert.equal(wrapper.find(Line).at(0).prop('d'), 'M0,1000L50,1000L100,1000L100,0L50,449.99999999999994L0,900Z');
assert.equal(wrapper.find(Line).at(1).prop('d'), 'M0,900L50,449.99999999999994L100,0L100,0L50,99.99999999999997L0,700Z');
});
});
describe('colorOffset', function () {
it('should correctly offset the palette colors', function () {
var palette = ['bing', 'bong'];
var wrapper = shallow( /*#__PURE__*/React.createElement(Lines, {
data: [{
x: 1,
rev: 1,
imp: 2,
click: 3
}],
yFields: ['rev', 'imp', 'click'],
xScale: defaultXScale,
yScale: defaultYScale,
palette: palette,
colorOffset: 1
}));
assert.equal(wrapper.find(Line).at(0).prop('color'), 'bong');
assert.equal(wrapper.find(Line).at(1).prop('color'), 'bing');
assert.equal(wrapper.find(Line).at(2).prop('color'), 'bong');
});
});
});
});