mercredi 29 août 2018

Testing Chart.js Plugin with React and Jest/Enzyme

For my project, I am using React and Jest/Enzyme. I built out a reusable Doughnut Chart component and used a plugin to render text in the middle of the Doughnut Chart. Here is my code.

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()
        );
    }
}

This code displays the chart and the text in the middle perfectly for me. My problem is when I try to write tests for this component, it says the lines for the plugin isn't covered. I have a basic test here that tests the component renders itself and its props.

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);
});

I'm guessing the plugin applies all the configuration changes when the chart is drawn, so I don't understand why the tests do not hit the plugin lines.

If anyone can show me how to test the plugin or guide me in the right direction, I would greatly appreciate it! Thank you!

Aucun commentaire:

Enregistrer un commentaire