Share your repls and programming experiences

← Back to all posts
A Unit Testing library for DOM
AndrewAung11 (21)


This is a testing library for HTML\CSS\JS projects.
I used Javascript minifier for utd.min.js


Hae Hae ^_^

I don't know how to get file link in replit.
So just copy and paste the js code to your project.
You can see it in my example page too.

I have got an idea too.
Here the link of the script file that I get from the example page:
That link will be working until I haven't deleted the example project.

How to use

There are four functions:

  • constructor
  • checkHTML
  • checkText
  • checkAttr
  • emitEvent


It is easy. First you need to select one html element. Then create an instance of Test class:

let ctr = document.getElementById("ctr")

let ctrTest = new Test(ctr);

The constructor take only one argument which is for the target.


As the function is named check HTML it take in one argument the expected value for the innerHTML of the target. If the innerHTML value of the target is equals to the expected value then the function will return Passed if not it will return Not Passed. Here, example:

ctr.innerHTML = "<strong>STRONG!!</strong>";

ctrTest.checkHTML("<strong>STRONG!!</strong>") //return "Passed"
ctrTest.checkHTML("<em>italic</em>") //return "Not Passed"


This function work same as the checkHTML function. But this function check textContent instead of innerHTML. Here, the example:

ctr.textContent = "test";

ctrTest.checkText("test"); //return "Passed"
ctrTest.checkText("Test"); //return "Not Passed"


This function take two arguments first is the attribute name. And the second one is attribute's value. It firstly check if the passed in attribute is defined. If it isn't then return "No attribute with name ${attr}". Or if it is defined, it check for the value that if it is equals to the expected value. Here, the example:

ctrTest.checkAttr("id", "ctr"); //return "Passed" because I even select the element with the id.

ctrTest.checkAttr("id", "div"); //return "Not Passed"

ctrTest.checkAttr("class", "ctrs"); //return "No attribute with name class"


This function emit an event to the target (like: click, mouseover). Be careful about event names because the function create a new Event object so spelling wrong or passing invalid event name will cause an error. And for the arguments it take in two. One for event and one for the function that will execute after emitting. And for the passed in function it pass 2 arguments when executing; the target's innerHTML and textContent. Here an example:

ctr.addEventListener("click", ()=>{
  ctr.textContent = "Clicked to Me";

ctrTest.emitEvent("click", ()=>{
  console.log(ctrTest.checkText("Clicked to Me")); //will print "Passed"

Bye Bye

That is all that I have written.
Here live example: Testing UTD