|
|
|
var expect = require('chai').expect;
|
|
|
|
|
|
|
|
describe('c3 api region', function () {
|
|
|
|
|
|
|
|
|
|
|
|
var chart, args;
|
|
|
|
|
|
|
|
beforeEach(function (done) {
|
|
|
|
chart = window.initChart(chart, args, done);
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('api.region', function () {
|
|
|
|
|
|
|
|
it('should update args', function () {
|
|
|
|
args = {
|
|
|
|
data: {
|
|
|
|
columns: [
|
|
|
|
['data1', 30, 200, 100, 400, 150, 250],
|
|
|
|
]
|
|
|
|
},
|
|
|
|
regions: [
|
|
|
|
{
|
|
|
|
axis: 'y',
|
|
|
|
start: 300,
|
|
|
|
end: 400,
|
|
|
|
class: 'green',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
axis: 'y',
|
|
|
|
start: 0,
|
|
|
|
end: 100,
|
|
|
|
class: 'green',
|
|
|
|
}
|
|
|
|
]
|
|
|
|
};
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should update regions', function (done) {
|
|
|
|
var main = chart.internal.main,
|
|
|
|
expectedRegions = [
|
|
|
|
{
|
|
|
|
axis: 'y',
|
|
|
|
start: 250,
|
|
|
|
end: 350,
|
|
|
|
class: 'red'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
axis: 'y',
|
|
|
|
start: 25,
|
|
|
|
end: 75,
|
|
|
|
class: 'red'
|
|
|
|
}
|
|
|
|
],
|
|
|
|
regions;
|
|
|
|
|
|
|
|
// Call regions API
|
|
|
|
chart.regions(expectedRegions);
|
|
|
|
setTimeout(function () {
|
|
|
|
regions = main.selectAll('.c3-region');
|
|
|
|
expect(regions.size()).to.equal(expectedRegions.length);
|
|
|
|
|
|
|
|
regions.each(function (d, i) {
|
|
|
|
var region = d3.select(this),
|
|
|
|
rect = region.select('rect'),
|
|
|
|
y = +rect.attr('y'),
|
|
|
|
height = +rect.attr('height'),
|
|
|
|
expectedClass = 'red',
|
|
|
|
unexpectedClass = 'green',
|
|
|
|
expectedStart = Math.round(chart.internal.y(expectedRegions[i].start)),
|
|
|
|
expectedEnd = Math.round(chart.internal.y(expectedRegions[i].end)),
|
|
|
|
expectedY = expectedEnd,
|
|
|
|
expectedHeight = expectedStart - expectedEnd;
|
|
|
|
expect(y).to.be.closeTo(expectedY, -1);
|
|
|
|
expect(height).to.be.closeTo(expectedHeight, -1);
|
|
|
|
expect(region.classed(expectedClass)).to.be.ok;
|
|
|
|
expect(region.classed(unexpectedClass)).to.not.be.ok;
|
|
|
|
});
|
|
|
|
}, 500);
|
|
|
|
|
|
|
|
setTimeout(function () {
|
|
|
|
done();
|
|
|
|
}, 1000);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('api.region.add', function () {
|
|
|
|
|
|
|
|
it('should update args', function () {
|
|
|
|
args = {
|
|
|
|
data: {
|
|
|
|
columns: [
|
|
|
|
['data1', 30, 200, 100, 400, 150, 250],
|
|
|
|
]
|
|
|
|
},
|
|
|
|
regions: [
|
|
|
|
{
|
|
|
|
axis: 'y',
|
|
|
|
start: 300,
|
|
|
|
end: 400,
|
|
|
|
class: 'green',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
axis: 'y',
|
|
|
|
start: 0,
|
|
|
|
end: 100,
|
|
|
|
class: 'green',
|
|
|
|
}
|
|
|
|
]
|
|
|
|
};
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should add regions', function (done) {
|
|
|
|
var main = chart.internal.main,
|
|
|
|
expectedRegions = [
|
|
|
|
{
|
|
|
|
axis: 'y',
|
|
|
|
start: 300,
|
|
|
|
end: 400,
|
|
|
|
class: 'green',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
axis: 'y',
|
|
|
|
start: 0,
|
|
|
|
end: 100,
|
|
|
|
class: 'green',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
axis: 'y',
|
|
|
|
start: 250,
|
|
|
|
end: 350,
|
|
|
|
class: 'red'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
axis: 'y',
|
|
|
|
start: 25,
|
|
|
|
end: 75,
|
|
|
|
class: 'red'
|
|
|
|
}
|
|
|
|
],
|
|
|
|
expectedClasses = [
|
|
|
|
'green',
|
|
|
|
'green',
|
|
|
|
'red',
|
|
|
|
'red',
|
|
|
|
],
|
|
|
|
regions;
|
|
|
|
|
|
|
|
// Call regions API
|
|
|
|
chart.regions(expectedRegions);
|
|
|
|
setTimeout(function () {
|
|
|
|
regions = main.selectAll('.c3-region');
|
|
|
|
expect(regions.size()).to.equal(expectedRegions.length);
|
|
|
|
|
|
|
|
regions.each(function (d, i) {
|
|
|
|
var region = d3.select(this),
|
|
|
|
rect = region.select('rect'),
|
|
|
|
y = +rect.attr('y'),
|
|
|
|
height = +rect.attr('height'),
|
|
|
|
expectedClass = expectedClasses[i],
|
|
|
|
expectedStart = Math.round(chart.internal.y(expectedRegions[i].start)),
|
|
|
|
expectedEnd = Math.round(chart.internal.y(expectedRegions[i].end)),
|
|
|
|
expectedY = expectedEnd,
|
|
|
|
expectedHeight = expectedStart - expectedEnd;
|
|
|
|
expect(y).to.be.closeTo(expectedY, -1);
|
|
|
|
expect(height).to.be.closeTo(expectedHeight, -1);
|
|
|
|
expect(region.classed(expectedClass)).to.be.ok;
|
|
|
|
});
|
|
|
|
}, 500);
|
|
|
|
|
|
|
|
setTimeout(function () {
|
|
|
|
done();
|
|
|
|
}, 1000);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('api.region.remove', function () {
|
|
|
|
|
|
|
|
it('should update args', function () {
|
|
|
|
args = {
|
|
|
|
data: {
|
|
|
|
columns: [
|
|
|
|
['data1', 30, 200, 100, 400, 150, 250],
|
|
|
|
]
|
|
|
|
},
|
|
|
|
regions: [
|
|
|
|
{
|
|
|
|
axis: 'y',
|
|
|
|
start: 300,
|
|
|
|
end: 400,
|
|
|
|
class: 'green',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
axis: 'y',
|
|
|
|
start: 0,
|
|
|
|
end: 100,
|
|
|
|
class: 'green',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
axis: 'y',
|
|
|
|
start: 250,
|
|
|
|
end: 350,
|
|
|
|
class: 'red'
|
|
|
|
},
|
|
|
|
]
|
|
|
|
};
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should remove regions', function (done) {
|
|
|
|
var main = chart.internal.main,
|
|
|
|
expectedRegions = [
|
|
|
|
{
|
|
|
|
axis: 'y',
|
|
|
|
start: 250,
|
|
|
|
end: 350,
|
|
|
|
class: 'red'
|
|
|
|
},
|
|
|
|
],
|
|
|
|
expectedClasses = ['red'],
|
|
|
|
regions;
|
|
|
|
|
|
|
|
// Call regions API
|
|
|
|
chart.regions(expectedRegions);
|
|
|
|
setTimeout(function () {
|
|
|
|
regions = main.selectAll('.c3-region');
|
|
|
|
expect(regions.size()).to.equal(expectedRegions.length);
|
|
|
|
|
|
|
|
regions.each(function (d, i) {
|
|
|
|
var region = d3.select(this),
|
|
|
|
rect = region.select('rect'),
|
|
|
|
y = +rect.attr('y'),
|
|
|
|
height = +rect.attr('height'),
|
|
|
|
expectedClass = expectedClasses[i],
|
|
|
|
expectedStart = Math.round(chart.internal.y(expectedRegions[i].start)),
|
|
|
|
expectedEnd = Math.round(chart.internal.y(expectedRegions[i].end)),
|
|
|
|
expectedY = expectedEnd,
|
|
|
|
expectedHeight = expectedStart - expectedEnd;
|
|
|
|
expect(y).to.be.closeTo(expectedY, -1);
|
|
|
|
expect(height).to.be.closeTo(expectedHeight, -1);
|
|
|
|
expect(region.classed(expectedClass)).to.be.ok;
|
|
|
|
});
|
|
|
|
}, 500);
|
|
|
|
|
|
|
|
setTimeout(function () {
|
|
|
|
done();
|
|
|
|
}, 1000);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|