it('should render chart correct with data', function () {
horizontalPercentageChart = ReactTestUtils.renderIntoDocument(
<HorizontalPercentageChart data={ chartData } label='chart'/>
);
ReactTestUtils.findRenderedDOMComponentWithClass(horizontalPercentageChart, 'chart-label')
.textContent.should.equal('chart');
ElementUtils.getElementsAttributeByTagName(horizontalPercentageChart, 'rect', 'width')
.should.deepEqual([expectData[0].width + '%', expectData[1].width + '%']);
ElementUtils.getElementsAttributeByTagName(horizontalPercentageChart, 'rect', 'style')
.should.deepEqual(['fill:#26527f;', 'fill:#A5B4BD;']);
ElementUtils.getElementsAttributeByTagName(horizontalPercentageChart, 'rect', 'x')
.should.deepEqual([expectData[0].translateX + '%', expectData[1].translateX + '%']);
ElementUtils.getElementsAttributeByTagName(horizontalPercentageChart, 'rect', 'class')
.should.deepEqual(['active', '']);
ElementUtils.getElementsTextByClassName(horizontalPercentageChart, 'segment-name').should.deepEqual(['b', 'a']);
ElementUtils.getElementsTextByClassName(horizontalPercentageChart, 'segment-percentage')
.should.deepEqual(['40%', '60%']);
});
it('should render correct label and percent', function () {
var segments = [
{
label: 'a',
percent: 80,
active: true
},
{
label: 'b',
percent: 20,
active: false
}
];
labelBar = ReactTestUtils.renderIntoDocument(
<LabelBar segments={ segments }/>
);
ElementUtils.getElementsTextByClassName(labelBar, 'segment-name').should.deepEqual(['a', 'b']);
ElementUtils.getElementsTextByClassName(labelBar, 'segment-percentage').should.deepEqual(['80%', '20%']);
ReactTestUtils.scryRenderedDOMComponentsWithClass(labelBar, 'active').length.should.equal(1);
});