For this week in my open-source course (DPS909), we were asked to continue working on our static site generator (SSG) and add automated testing to the project.

The Testing Framework

The testing framework that I chose for the project is Jest. 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 on the Jest website.

First, I installed Jest in my project by using the command:

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:

test('adds 1 + 2 to equal 3', () => {
  expect(1 + 2).toBe(3);
});

Finally, I added the following bit to package.json:

{
  "scripts": {
    "test": "jest"
  }
}

I then used this command to start the testing process:

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