How can I simulate a click on Highchart

Question

This is my DashboardPage component:

export const DashboardPage = (props) => {

    const [mounted, setMounted] = useState(false);

    const { index } = props;

    let navigate = useNavigate();

    useEffect(() => {
        if (mounted === false) {
            setMounted(true);
            index();
        }
    }, [mounted, index]);

    const optionNUsersPerCompany = {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Utenti per azienda'
        },
        tooltip: {
            pointFormat: '{series.name}: {point.percentage:.1f}%'
        },
        accessibility: {
            point: {
                valueSuffix: '%'
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '{point.name}: {point.percentage:.1f} %'
                },
            }
        },
        series: [{
            name: 'Utenti',
            colorByPoint: true,
            data: getDataUsersPerCompany(props.items),
            point: {
                events: {
                    click: (e) => {
                        console.log(e);
                        props.setCompanyIdInUsersStore(e.target.point.idCompany);
                        return navigate(PATH_USERS);
                    }
                }
            }
        }]
    }

    return (
        
    )
}

const mapDispatchToProps = (dispatch) => {

    return {
        index: () => dispatch(statsActions.index()),
        setCompanyIdInUsersStore: (id) => dispatch(companiesActions.setCompanyIdInUsersStore(id)),
    };
}

const mapStateToProps = (state) => {

    return {
        items: state.stats.items,
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(DashboardPage);

And this is the simple Highchart Component:

import React, { useState } from "react";

import HighchartsReact from "highcharts-react-official";
import Highcharts from 'highcharts';

export default React.memo(function Chart(props) {

    const [currentOptions, setCurrentOptions] = useState({});

    /**
     * Questo controllo serve a non re-draware per due volte di seguito i containers
     */
    if (JSON.stringify(props.options) !== JSON.stringify(currentOptions)) {
        setCurrentOptions(props.options);
    }

    return (
        
    );
});

I want to test the click on plotOptions with Jest in React Highcharts. This is the resulting HTML page from Jest:

I'm thinking of get the g element and click on it

render();
        const company = screen.getAllByRole('g');

but I got:

TestingLibraryElementError: Unable to find an accessible element with the role "g"

    There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole

I'm trying to get element by class name:

it('Can handle handleOnUserClick on Chart', async () => {

    let initialState = {
        stats: {
            items: {
                nUsersPerCompany: [
                    {
                        company: "demolitori", 
                        qty: 5, 
                        id: 16
                    }
                ]
            }
        },
        setCompanyIdInUsersStore: () => {},
    };

    let store = mockStore(initialState);

    const { container } = render();
    // This console.log outputs the previous HTML code
    console.log(prettyDOM(container));
    const company = await container.getElementsByClassName("highcharts-label");
    console.log(company);
    fireEvent.click(company);

});

But with last console.log(company) I get an empty HTML collection:

HTMLCollection {}

I tried also to remove the async/await mode without luck.

I tried to use:

const {container} = render();
console.log(prettyDOM(container))
const path = container.getElementsByClassName("highcharts-color-0");
console.log(prettyDOM(path[0]))
fireEvent.click(path[0]);

The test itself works, but coverage complain with missing the arrow function in click e

point: {
    events: {
        click: (e) => {
            props.setCompanyIdInUsersStore(e.target.point.idCompany);
            return navigate(PATH_USERS);
        }
    }
}

Parth Tomar · Accepted Answer

The coverage statistic is correct, as Highcharts render the elements using SVG and other components (path, rect etc.) that do not support click events simulation by DOM. If you replace click with mouseOver, your test coverage would hit 100%, as it is supported. Highcharts team might be doing some custom implementation to achieve click handlers and we need to utilize that to solve your use case. @ppotaczek pointed out the correct approach.

Code modifications:

Assume DashboardPage component accepts an optional prop, onAfterChartCreated.
It passes that prop over to Chart component as value of callback.

import { useState, useEffect, useRef } from "react";
import {useNavigate} from 'react-router-dom';
import Chart from "./Chart";
import {connect} from 'react-redux';

export const DashboardPage = (props) => {

    // previous code
    return (
        
    )
}

// follow up code

export default connect(mapStateToProps, mapDispatchToProps)(DashboardPage);

Chart component should be modified to:

import React, { useState } from "react";

import HighchartsReact from "highcharts-react-official";
import Highcharts from 'highcharts';

export default React.memo(function Chart(props) {

    const [currentOptions, setCurrentOptions] = useState({});

    /**
     * Questo controllo serve a non re-draware per due volte di seguito i containers
     */
    if (JSON.stringify(props.options) !== JSON.stringify(currentOptions)) {
        setCurrentOptions(props.options);
    }

    return (
        
    );
});

callback is a prop on HighCharts react wrapper, that executes when chart is rendered and returns an instance of the chart. You could refer to their docs for more info or check out How do i access highcharts api after component renders?

Now we modify the test case for DashboardPage component as follows:

const afterChartCreatedCallback = (chart) => {
  // We can now trigger click on any data point using Highcharts API
  chart.series[0].data[0].firePointEvent('click');
}

render();

So, we only use the callback in the test, to improve the coverage. This should increase your DashboardPage component coverage to 100%.

How can I simulate a click on Highchart

Answers (1)

Related Questions