hunar_214
Posts: 41
Joined: Thu Nov 23, 2023 9:07 am

Coverage of highcharts methods

Is there a way to write test cases for highcharts functions in angular for example: chartCallback function to increase the coverage of our angular components? Or should we cover those methods provided by highcharts or not?
jakub.s
Posts: 1222
Joined: Fri Dec 16, 2022 11:45 am

Re: Coverage of highcharts methods

Hi @hunar_214,

There is no need to write those tests as Highcharts already has a rich base of unit, visual and integration tests which you can find on our GitHub repository:
- Unit tests: https://github.com/highcharts/highchart ... unit-tests
- Cypress tests: https://github.com/highcharts/highchart ... aster/test
- Visual tests: https://github.com/highcharts/highchart ... highcharts

In case you'd like to write a test either way, you can use any library of your choice to do that and you can treat our unit tests as a starting point for your Highcharts tests.

Please do not hesitate to ask in case you have any more questions.

Best regards!
Jakub
Highcharts Developer
hunar_214
Posts: 41
Joined: Thu Nov 23, 2023 9:07 am

Re: Coverage of highcharts methods

How can I write test cases of highcharts functions in angular karma framework.I basically want to cover the chartCallback method of highchart in my angular application
jakub.s
Posts: 1222
Joined: Fri Dec 16, 2022 11:45 am

Re: Coverage of highcharts methods

Hi,

If you have a custom chart callback function, you can test it as you normally would. It all depends on what your function does and what part of the functionality would you like to test.

For example, if your chart's callback function updates the color series to green, you could run your chart callback function and then write a test which would check if chart.series[0].color == 'green'.

Here's a simple demo: https://jsfiddle.net/8c4fbayd/

Best regards!
Jakub
Highcharts Developer
hunar_214
Posts: 41
Joined: Thu Nov 23, 2023 9:07 am

Re: Coverage of highcharts methods

How can I test this mouseOut function for example:
mouseout() {
const charts=Highcharts.charts;

charts.forEach((chart) => {
if (chart && chart.tooltip) {
chart.tooltip.hide();
}
}

)
}

I am unable to find some methods in your GitHub repo as well. This function is one such example
jakub.s
Posts: 1222
Joined: Fri Dec 16, 2022 11:45 am

Re: Coverage of highcharts methods

Hi,

It really depends on what exactly would you like to test. If you'd like to test whether the mouseOut function has been triggered, you could:
1. create a counter
2. initialize it with value 0
3. increase the counter in the mouseOut function
4. check if after the hover the counter value has increased

If there's something different that you'd like to test, please elaborate.

Best regards!
Jakub
Highcharts Developer
hunar_214
Posts: 41
Joined: Thu Nov 23, 2023 9:07 am

Re: Coverage of highcharts methods

I tried doing what you suggested but this is still not covering the whole mouseOut function .The code for my mouseOut function is as follow:

mouseout() {
const charts=Highcharts.charts;

charts.forEach((chart) => {
if (chart && chart.tooltip) {
chart.tooltip.hide();
var series=chart.series;
series.forEach(function (serie){
serie.setState('');
serie.points.forEach(function (point){
point.setState('')
})
})
}
}


)
}

How to cover the whole function
jakub.s
Posts: 1222
Joined: Fri Dec 16, 2022 11:45 am

Re: Coverage of highcharts methods

Hi,

What exactly would you like to test? Whether the mouseOut function is called or whether the point.setState gets called?

If you want to "cover the whole function" you should test:
- if the mouseOut event gets called
- whether we iterate through all the charts properly
- whether the series state is set properly
- whether the point state is set properly

Those methods are, however, tested in Highcharts so there is no point in testing them in your project (unless you override some part of the Highcharts logic and you need to test that).

Regards!
Jakub
Highcharts Developer
hunar_214
Posts: 41
Joined: Thu Nov 23, 2023 9:07 am

Re: Coverage of highcharts methods

How to test the last 2 points you mentioned i.e.:
  • if the state of point is set correctly
    the series state is set correctly
jakub.s
Posts: 1222
Joined: Fri Dec 16, 2022 11:45 am

Re: Coverage of highcharts methods

Hi,

You could follow something like this: https://jsfiddle.net/BlackLabel/y3tvoqL0/

Regards!
Jakub
Highcharts Developer
hunar_214
Posts: 41
Joined: Thu Nov 23, 2023 9:07 am

Re: Coverage of highcharts methods

Thanks for your reply but actually i need to write unit test case in angular.This is not how it would get covered in angular.
Waiting for an update wrt angular.
Thanks
jakub.s
Posts: 1222
Joined: Fri Dec 16, 2022 11:45 am

Re: Coverage of highcharts methods

Hi,

On our Highcharts support channels (like this forum), we provide support & guidance - for example - with the documentation, API, bugs (we report them & solve them as soon as we can).

We'll be happy to help if there's anything related to the things I've mentioned above, but I'm afraid that we do not provide custom solutions (and testing) for specific projects.

Thus, I can only guide you and give you tips, but you will have to prepare the testing environment and the tests within your testing library yourself as it is outside of the scope of our support here.

Best regards!
Jakub
Highcharts Developer

Return to “Highcharts Usage”