Lab 8 - Add Testing Jest
Tags: opensource
Published: 2021-11-13 01:05:45

## Intro
For my eighth lab, I have to setup Jest to my text ssg project.
Jest is one of the best tool for testing, during my co-op I used Cypress for e2e testing. 
Jest is super similar to Cypress. I had no issue learning it.

## Process
Let's first install jest by running `npm install --save-dev jest`.
Then add an script for easier for testing.
```json
    "test": "jest --verbose",
    "test-silent": "jest --silent --verbose",
    "test-watch": "jest --verbose --watchAll",
    "test-watch-silent": "jest --verbose --watchAll --silent",
    "jest": "jest --verbose --",
    "jest-silent": "jest --silent --verbose --",
    "jest-watch": "jest --verbose --watch --",
    "jest-watch-silent": "jest --silent  --watch --verbose --",
```

- To run all test case `npm test`
- To run all test case in silent mode `npm test-silent`
- To run all test case and watch for change `npm test-watch`
- To run all test case in silent modeTo run all test case and watch for change in silent mode
  `npm test-watch-silent`
- To run a specific test case `npm jest <test case name>`
- To run a specific test case in silent mode `npm jest-silent <test case name>`
- To run a specific test case and watch for change `npm jest-watch <test case name>`
- To run a specific test case and watch for change in silent mode
  `npm jest-watch-silent <test case name>`

I covered only unit testing for my case. All test case is located in test folder.

I first created a yargsChecking folder which contains all my unit test of yargs argurment checking. 

I also created handlerChecking folder to cover everything in handler folder.
```
├───test
│   ├───handlerChecking
│   │       dataProcessing.test.js
│   │       generateHtmlFile.test.js        
│   │       generateHtmlMenuTemplate.test.js
│   │       generateHtmlTemplate.test.js    
│   │       getAllFiles.test.js
│   │       readConfiguration.test.js       
│   │       
│   ├───test_file
│   │   │   config.json
│   │   │   emptyConfig.json
│   │   ├───folder_with_md_txt
│   │   ├───folder_with_no_md_txt
│   │   └───folder_with_random_files
│   │
│   └───yargsChecking
│           configurationCheck.test.js
│           inputCheck.test.js
│           isFile.test.js
│           langCheck.test.js
│           outputCheck.test.js
│           stylesheetCheck.test.js
```
Test case format
```js
describe('...', () => {
  it('...', () => {
  
  });
});
```
One thing I encounter and challenging to do is to check for correct content in the generated HTML file. The space and tab weren't perfectly correct. I had to run the test several times and adjust the test case.

After finishing writing all my test cases. I update `contributing.md` to help other contributors that text-ssg has a testing portion before creating a PR.

## Conclusion

Testing is an essential part of software development, It helps to prevent some bugs. But it will always have edge case bug that might not be found here yet. I notice Cypress and Jest are very similar. The learning curve is not too hard. 

Issue: https://github.com/Kevan-Y/text-ssg/issues/26
Commit: https://github.com/Kevan-Y/text-ssg/commit/2ca3d50f599b95620c1d28782fac9af9275746b8