Для своего проекта я использую React и Jest / Enzyme. Я построил повторно используемый компонент Donut Chart и использовал плагин для визуализации текста в середине Donut Chart. Вот мой код.
export default class DoughnutChart extends React.Component {
renderDoughnutChart = () => {
const { labels, datasetsLabel, datasetsData, datasetsBackgroundColor, displayTitle, titleText, displayLabels, doughnutCenterText, doughnutCenterColor, height, width, onClick } = this.props;
const plugin = {
beforeDraw: (chart) => {
if (chart.config.options.elements.center) {
//Get ctx from string
let ctx = chart.chart.ctx;
//Get options from the center object in options
let centerConfig = chart.config.options.elements.center;
let fontStyle = centerConfig.fontStyle || "Arial";
let txt = centerConfig.text;
let color = centerConfig.color || "#000";
let sidePadding = centerConfig.sidePadding || 20;
let sidePaddingCalculated = (sidePadding / 100) * (chart.innerRadius * 2);
//Start with a base font of 30px
ctx.font = "30px " + fontStyle;
//Get the width of the string and also the width of the element minus 10 to give it 5px side padding
let stringWidth = ctx.measureText(txt).width;
let elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;
// Find out how much the font can grow in width.
let widthRatio = elementWidth / stringWidth;
let newFontSize = Math.floor(30 * widthRatio);
let elementHeight = (chart.innerRadius * 2);
// Pick a new font size so it will not be larger than the height of label.
let fontSizeToUse = Math.min(newFontSize, elementHeight);
//Set font settings to draw it correctly.
ctx.textAlign = "center";
ctx.textBaseline = "middle";
let centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
let centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
ctx.font = fontSizeToUse + "px " + fontStyle;
ctx.fillStyle = color;
//Draw text in center
ctx.fillText(txt, centerX, centerY);
}
}
};
const data = {
labels: labels,
datasets: [{
label: datasetsLabel,
data: datasetsData,
backgroundColor: datasetsBackgroundColor,
}],
config: {
animation: {
animateRotate: true,
}
}
};
const options = {
maintainAspectRatio: false,
responsive: true,
title: {
display: displayTitle,
text: titleText,
fontSize: 24,
},
legend: {
display: displayLabels,
},
elements: {
center: {
text: doughnutCenterText,
color: doughnutCenterColor,
fontStyle: "Arial",
sidePadding: 40,
}
},
animation: {
animateRotate: true,
},
onClick: onClick,
};
if (!labels || !datasetsLabel || !datasetsData || !titleText) {
return null;
}
Chart.pluginService.register(plugin);
return (
<Doughnut
data={data}
options={options}
height={height}
width={width}
/>
);
}
render() {
return (
this.renderDoughnutChart()
);
}
}
Этот код отображает диаграмму и текст в середине идеально для меня. Моя проблема, когда я пытаюсь написать тесты для этого компонента, он говорит, что строки для плагина не покрыты. У меня есть базовый тест, который проверяет, визуализирует ли компонент и его свойства.
it("should render based on passed in props", () => {
let testOnClick = jest.fn();
let labels = ["Red", "Yellow", "Blue"];
let datasetsLabel = "test data sets label";
let datasetsData = [10, 20, 30];
let datasetsBackgroundColor = ["red", "yellow", "blue"];
let titleText = "Title";
let height = 300;
let width = 300;
let doughnutCenterText = "Hello";
let doughnutCenterColor = "white";
let wrapper = shallow(
<DoughnutChart
labels={labels}
datasetsLabel={datasetsLabel}
datasetsData={datasetsData}
datasetsBackgroundColor={datasetsBackgroundColor}
titleText={titleText}
height={height}
width={width}
onClick={testOnClick}
doughnutCenterText={doughnutCenterText}
doughnutCenterColor={doughnutCenterColor}
/>
);
expect(wrapper.find("Doughnut").props().data.labels).toEqual(labels);
expect(wrapper.find("Doughnut").props().data.datasets[0].label).toEqual(datasetsLabel);
expect(wrapper.find("Doughnut").props().data.datasets[0].data).toEqual(datasetsData);
expect(wrapper.find("Doughnut").props().data.datasets[0].backgroundColor).toEqual(datasetsBackgroundColor);
expect(wrapper.find("Doughnut").props().options.title.text).toEqual(titleText);
expect(wrapper.find("Doughnut").props().height).toEqual(height);
expect(wrapper.find("Doughnut").props().width).toEqual(width);
expect(wrapper.find("Doughnut").props().options.elements.center.text).toEqual(doughnutCenterText);
expect(wrapper.find("Doughnut").props().options.elements.center.color).toEqual(doughnutCenterColor);
});
Я предполагаю, что плагин применяет все изменения конфигурации при рисовании графика, поэтому я не понимаю, почему тесты не попадают в линии плагинов.
Если кто-нибудь может показать мне, как протестировать плагин или направить меня в правильном направлении, я был бы очень признателен! Спасибо!