DPS909 Blog - Lab 8: Testing
Tags: opensource
Published: 2022-11-11 22:17:53

For this week in my open-source course (DPS909), we were asked to continue working on our [static site generator (SSG)](https://github.com/alexsam29/ssg-cli-tool) and add automated testing to the project.

## The Testing Framework
The testing framework that I chose for the project is [Jest](https://jestjs.io/). Jest is a testing framework originally developed by Facebook for React UI testing.  However, now it's its own tool that is used for any type of JavaScript project, including Node.js. I mostly chose it because of it's snapshot capabilities that allow you test whether UI elements on a page change unexpectedly.

## Setup
In order to setup the framework in my project, I followed the [documentation](https://jestjs.io/docs/getting-started) on the Jest website.

First, I installed Jest in my project by using the command:
```powershell
npm install --save-dev jest
```

Then I created a `test` folder with a file called `test.js` that will contain all the testing code. For the initial setup, I used a basic test that had nothing to do with the source code:
```javascript
test('adds 1 + 2 to equal 3', () => {
  expect(1 + 2).toBe(3);
});
```

Finally, I added the following bit to `package.json`:
```json
{
  "scripts": {
    "test": "jest"
  }
}
```

I then used this command to start the testing process:
```powershell
npm test
```

Should everything be installed correctly, this will be the output in the terminal:
```
PASS  ./test.js
✓ adds 1 + 2 to equal 3 (5ms)
```

## Writing Test Cases
I initially had trouble coming up with test cases because I've been so accustomed to just running the code manually and testing it myself. I don't have much experience with automated testing so this was a new experience. I also wrote the source code to show error messages should something go wrong when manually testing. Coming up with ways to automate testing was the tricky part.

I thought I should test something simple. So I made test cases all the functions in `Utils.js`. These functions are small but crucial functions that verify things like file and directory existence.

In order to test the main functionalities of the project, I decided to create tests for HTML file generation and Index page creation. I tested the functions `HTMLfile()` and `indexPage()` that I had made for this purpose in `create.js`. I used Jest snapshots to take initial snapshots of the UI elements in the HTML pages created. Future tests will compare the UI elements against the snapshots to make sure nothing has changed. I tested Markdown to HTML file creation, `txt` to HTML file creation, and index page creation. To make these tests work with snapshots, I had to adjust the function to return a value. Originally, these functions returned nothing. So I added a `return` statement that returned the generated HTML body.

## Lessons Learned
While writing and coming up with tests cases, it became increasingly clear that my source code was not written with testing in mind. I had to make some adjustments to make some tests work, but I feel like I should have even more test cases had my code been initially written with testing in mind.

So from now on, I will always include automated testing in my code and make sure that I write my code with testing in mind.

Automated testing commit: https://github.com/alexsam29/ssg-cli-tool/commit/dff551f7690bf7caaa3db6902b934145df401853