Adventures on vue.js and data visualization - episode 2

Last updated Aug 29, 2022 Published Jan 16, 2022

The content here is under the Attribution 4.0 International (CC BY 4.0) license

Hello there, this is the second episode of the dataviz-project [1] where I am trying to record the steps I take to bring a legacy app into a better state. If you haven’t seen the intro, you can have a look at it here.

For this episode I started to change a bit how the test strategy is approached in the code. In the previous episode one of the goals was related to the testing library - here we will start to do that.

Current set up - vue test utils

Currently the vue test utils defined in the project provide little value for keep running that as it should. The biggest pain point that I could find is the lack of confidence in the tests for changes in both: code and dependencies. For example, updating the D3 version of the project from 5.* to 6.* breaks the application, therefore, if we start the project the bar chart is gone in the page, but the tests are not aware of it, they do not provide feedback when is needed.

Updated set up

After putting a bit of effort to the test suite, the replacement and new test cases are in place, also, the lib jest-fetch-mock was added to avoid hitting github api when running the tests. Although it works, there are some limitations that while adding the tests were faced. In the future, it’s most likely this library will be replaced by another one.

The reason behind adding the jest-fetch-mock library was to enable refactoring in the code. The App.vue has three nested promises that resolves together in a Promise.all. Without fetch mock, there is no way of testing it, as the code is not open to inject test doubles to verify behavior.

While adding the test cases for the components that used D3, a new dependency was needed to work around the canvas API.

Another set of improvements were, splitting the test cases into they own file:

As a minor improvement, coveralls now is used to depict the code coverage of the repo.

References

[1]P. Morgan, Data Analysis From Scratch With Python: Beginner Guide using Python, Pandas, NumPy, Scikit-Learn, IPython, TensorFlow and Matplotlib. AI SciencesAI Sciences LLC, 2018.