DEV Community

CDPhu
CDPhu

Posted on

1

Javascript Testing

This week we are going to have Lab 8 and along with the lab
it is also introducing a new tool to our SSG project. In lab 8, we are going to add testing functions for several functions that we have in our SSG. I somewhat have experience with this because one of my other course CCP555 has a lot of testing involved. The testing framework that was used in the program was Jest.

Procedure

After watching the videos and reading 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 install jest. I updated the "test" command in the package.json file in order for it to run correctly.

I then extracted the htmlGen function and placed is into its own file that being htmlGen.js, and modified my-button.js to import htmlGen as an external function.

I then started coding the testing functions. At first all I coded was the html good value functions. So I set up a total of 7 tests where for htmlGen():

  • test would generate a html result with a string html argument
  • test where it generates a html result with a string html argument
  • test the htmlGen() function with bad or empty value types (lang, title, html, string, footer)

In CCP555, I have already learned about coverage using npm run coverage. But what was new was setting it up so that coverage would print out a report.

Thought

There were several things I was already aware of since I have done some of this in previous labs in a different course. Though what was new to me was the capability of being able to print coverage
files into a report. I will probably make more use of this on different projects.

NOTE: I didn't squash it correctly therefor having several commits.

Test Function
htmlGen file
Adding Jest
Updatting my-button.js
Coverage Files

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay