DEV Community

Tue
Tue

Posted on

Testing my application

This week's task is to add tests to my program. I used Jest as my testing tool as it is well-developed and very popular among Javascript users.

Setting up Jest

I ran an npm command to install Jest and added it to devDependencies

npm install --save-dev jest
Enter fullscreen mode Exit fullscreen mode

I then added a script to scripts in package.json in order to run jest.

"scripts": {
    "test": "jest --"
  },
Enter fullscreen mode Exit fullscreen mode

Testing the program

I started testing my index.js file which is responsible for parsing command line arguments. I had to edit a few pieces of code to make testing easier. Below is an example

describe("Testing parseCommand()", () => {
  reset();
  test("Input file path not specified", () => {
    const error =
      "error: required option '-i, --input <file path>' not specified";
    const option = {};
    const boolean = parseCommand(option);
    expect(finalize(logOutput)).toBe(null);
    expect(finalize(errorOutput)).toEqual(error);
    expect(boolean).toBe(0);
  });
Enter fullscreen mode Exit fullscreen mode

The challenging part was ssg.js file because I had conflicts between fs and fs.promise and the way it was written, it was quite hard to test some functions using custom mock. I had to edit some code so that I could test one of the functions. Below is one of the tests.

describe("Testing createHTMLFile() with '.md' file", () => {
  const filename = "file.md";
  const ext = ".md";
  const fileData = `# Javascript Static Site Generator (SSG)

  A Javascript command line program that converts **.txt** and **.md** files into **.html** files.`;
  beforeAll(() => {
    fs.__setMockFileData(`${filename}`, fileData);
  });

  test("'.md' file", async () => {
    ssg = new SSG(null, null, null);
    const res = await ssg.createHTMLFile(filename, ext);
    expect(ssg.toBeGenerated_.length).toEqual(1);
    expect(ssg.toBeGenerated_[0].html).toEqual('<!DOCTYPE html>\n        <html lang="en-CA">\n          <head>\n            <meta charset="utf-8" />\n            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />\n            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css" />\n            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">\n            <title>Javascript Static Site Generator (SSG)</title>\n          </head>\n          <body>\n            <main>\n              <div class="mainContent">\n                <h1>Javascript Static Site Generator (SSG)</h1>\n<p>A Javascript command line program that converts <strong>.txt</strong> and <strong>.md</strong> files into <strong>.html</strong> files.</p>\n\n              </div>\n            </main>\n          </body>\n        </html>');
  });
});
Enter fullscreen mode Exit fullscreen mode

Through testing, I realized that it's important to break my code into small pieces and to modularize them, I will refactor my code again and add more tests. This week has been quite hectic πŸ˜…

Top comments (0)