Testing in JavaScript
Tags: opensource, github, javascript, programming
Published: 2021-11-11 03:18:25

This week we are going to have our __Lab 8__. Lab 8 is also introducing a __new tool__ to our SSG project. In lab 8, we are going to add some __testing functions__ for some functions that we have in our SSG. Talking about the testing stuff, _I have a little bit of experience in it_. Because one of my issues that worked on [__Release 0.2__](https://github.com/TogaTech/helpful.js/pull/20/files) is about __adding a new function__ to the program and __test it__ before I made the `Pull Request`. And the testing framework I used was `mocha`. 

###Procedure 

__After__ watching the __videos__ and read through the lab __instruction__. I just chose the testing framework that I'm going to use in this Lab 8, which is `Jest`. And then I just install the `Jest` to my program by using the command `npm i jest`. Also, I updated the __"test"__ command in the `package.json` file.

__After__ I add the `jest` dependence, I tried to add a new testing function. __However__, when I added a new test function for the function named `htmlGenerator` I had in my program, I can't run it properly. It kept showing this error message:
![error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x5sc1qgdkoixn2u4fjye.png)
That's a __weird error__ for me. It's basically saying that the test function run correctly but there are also some errors. So, I just go back to the code that the error told me. And I __realized__ that I wrote my test function with the reference function in my `server.js`, which is the main file of the program. It means that whenever I run the test function, it will run the program as well since I don't have a main function. This is a really bad coding style. Therefore, I decided to separate the `htmlGenerator()` function to a new `htelGenerator.js` file. So I can code between the `htelGenerator.js` file and the `htelGenerator.test.js` file. And then the problem solved!

__After__ adding a new testing function to my program, I tried to add __more testing steps__ to test `htmlGenerator()` function. At the beginning, I thought that there were only __2__ testing steps. The first one was test the `htmlGenerator()` function to generate a html result with a string html argument. And the second would be test the `htmlGenerator()` function to generate a html result with a object html argument. __However__, that sounds like __too simple__ as a lab. So, I just read the __Lab 8 instruction__ again. And that gave me some ideas for updating the testing functions of the `htmlGenerator()`. For example, I can test the `htmlGenerator()` function with bad value types. Something like: 'What if the type of one argument is not what I expected?', 'What if the type of all arguments are not what I expected?', 'What if the value of one argument is empty or undefined?', etc... Also, I need to update the code inside the `htmlGenerator()` function. Finally, I got 7 test functions for the `htmlGenerator()` function I have in my program. 
![test](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zllgt1866ohkw3wm4qb5.png)
 
__In addition__, I found an __interesting__ stuff from this Lab 8. There is a tool called `Coverage`. It's a great tool to generate a __coverage report__ about the testing functions. It will also shows the `Uncovered` line(s) of code in the testing functions you created! In my program, if I run the coverage with the command that I set up `npm run coverage`, it will shows something like the following:
![coverage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7xvdxsggn31nocwlv8g1.png)

###My Feelings
I think this is a really __helpful__ lab for me. I learned how to `import` and `export` __functions__ correctly between two files, and I learned how to `create testing functions` for a specific function in a program. Moreover, I will have a more clearer idea for testing a function in a program next time!

Link to my Repo :[[My-First-SSG]](https://github.com/DerekJxy/My-First-SSG)