Testing and Behaviour Driven Development (BDD)

So far we have tried Jasmine and Sinon-Chrome for the testing. The Jasmine is for unit testing, similar to Mocha/Chai and Jest. The Sinon-Chrome is for 'stub'/'test double' of the Chrome API functions, so you can control/simulate the response HistoryMap receives from the Browser during testing.

We are always looking for new testing libraries, such as Jest. In general, unit testing is less an issue; most popular library works fine. However, We have some problem with testing UI behaviour with Sinon-Chrome, as it does not really allow us to check if the UI responded the way it is intended to. Maybe something like Puppeteer can help.

Jasmine

This is a good free video course on JavaScript testing using Jasmine. It provides a good introduction to unit testing and how to get started with Jasmine.

There is a bit of setup to have Jasmine running with the SenseMap extension, because it needs be invoked after the extension is started and the extension (JS) files can't be accessed directly from file system. This is the information about how to using it with Chrome extension. This is all set up now. To run the Jasmine test, open the extension page (chrome://extensions) and then the 'options' pages. Click on the link 'Jasmine test page' will run the unit tests.

BDD: Behaviour-Driven Development

The Jasmine testing library is intended for 'Behaviour-Driven Development', which is not that different from the 'Test-driven development' discussed in the Jasmine tutorial video mentioned earlier. Essentially, this means turn use case/user story into test specification (for example written in Jasmine) before writing the actual JS code. This may seem like a bit of waste time initially, but there are a few benefits:

• This forces you to think about and document the use cases and user stories first, which is important for our own understanding of how SenseMap will behave and have a common understanding among the team members;
• The use case/user story and test specs can be easily turned into documentation, i.e., capturing the context and explaining how code works.
• This will ensure the quality of the code (because of doing test earlier). This is not that much extra work anyway.

Using the Behaviour: Node and Edge Creation as an example, it describes 4 scenarios when a new node is created in the history map. This can be created as 4 test specs in a Jasmine test suite. Then the 'challenges' can be the test specs in another Jasmine suite. We can later add reference to actual test files in the wiki and reference to the wiki page in the testing code.

Sinon-Chrome

Sinon-Chrome uses a different testing library called Sinon. It has some overlap with Jasmine, such as the assertions, but mostly we are using it for its 'test double' features. (After some research, I think the Jasmine and Sinon-Chrome can work together, just as you can use multiple external libraries in JS code.)

Once you start creating tests in Jasmine, you will find the tests often rely on external function calls (things are not controlled by the extension), such as Chrome API functions and database calls. Sinon allows you to create a 'copy' of these functions for the unit testing and return the exact values you want, so for example the testing can automatically create a 'clicking a link' event for the chrome.tabs.onUpdated function.

For SenseMap testing, we will use many chrome api functions, which mean we need to create 'test doubles' for each of them and this can be time consuming. This is where Sinon-Chrome comes in. It already created test-doubles for all the chrome api functions (see the list at the bottom half of its github page), which will save quite a bit of time.

This is a good tutorial on how to use Sinon to get you started. The Sinon-chrome readme and example are also quite useful. This tutorial provides a brief understanding on how to use jasmine and sinon together. This another tutorial provides a more detailed account for the same. Feel free to add other Sinon-related information you found useful here.

Also you can view this YouTube Video by the Grave Hooper Fullstack Academy that introduces core Sinon.js functionality (https://www.youtube.com/watch?v=SvudHPTEsIk).

Finally, this is the Phong explaining the tests he created with Jasmine only (no Sinon-Chrome) and Jasmine + Sinon-Chrome: https://youtu.be/wE3lW1AMc-s.

Summary

To summarise, this is the development process:

1. Create the use case or user story (as a wiki page, until we find a better way);
2. Create the test suites and specs (using Jasmine) based on the user case or user story;
3. Write the JS code according to use case/user story;
4. Use Sinon-Chrome to create the test doubles of chrome api and any other external functions needed;
5. Make sure the JS code passes all the unit tests.