Blog

Jasmine Tests and HighCharts

I recently built a mildly-complicated client-side charting library for one of Quick Left's clients. The chart has a number of controls, including the "zoom" (year/month/day), selecting which of several available data series is displayed, navigating back and forth in time, etc. It leverages HighCharts to actually draw the chart, but still has to do all the work of determining what to ask HighCharts to do.

I started to write the code as an enormous class, with KnockOut observables tied to the various controls on screen, a fetch method that makes an AJAX request to update the chart, and a bunch of HighCharts configuration.

Of course, this sucked. The logic in the class quickly became tightly integrated, visually messy, and the class was trying to do to many things at once.

Refactoring to the rescue! Several "Extract Class" moves later, and I had four classes: one that contained the various Knockout observables (and the logic they needed to modify each other, etc.), which I called ChartControls; one that took in data and made calls to HighCharts (ChartBuilder), one that had some secondary outputs (summary data, updated in the view via Knockout again) named ChartSummary, and finally a "glue" or "controller" class (ChartViewModel) that, via the Composition pattern, made all these guys work together.