how can I unit test an output of HTML code

Question

I am extremely new to web development and testing (starting slow). I have a page with a button. Once the button is clicked, some information/text is displayed.

How do I write a test case to test that the output is as expected (that its displayed)?

I want to write a test case to make sure that the text is displayed when the button is clicked.

<!DOCTYPE html>
<html>
 <body>

 <button onclick="buttonClick()">Click Me</button>
 <p id="test"></p>

  <script>
    function buttonClick() {
      document.getElementById("test").innerHTML = "TESTING!";
}
  </script>

 </body>
</html>

My guess is that I could use some sort of string verifier. If strings are present on the screen, that means the test passed. I am unsure if that makes sense, or if it is the correct approach.

Thanks,

Code for testing:

var elem = document.getElementById('test');
var text = 'TESTING!';

if (
   document.getElementById('test').innerHTML.indexOf('TESTING') != -1){
     alert('success!');
}

isherwood · Answer 1 · 2019-05-08T14:29:01.760

You could test that the string is rendered, but unit tests should test data, not markup. Problems with the latter are fairly rare and are more obvious when code is deployed and manually tested. (You wouldn't promote changes that don't obviously render a button with something in it.)

Instead, assign the value to a variable and test that the variable is correct in your function.

function buttonClick();
    let myButtonText = 'TESTING!';
    document.getElementById("test").innerHTML = myButtonText;
}

// in the test, assert that myButtonText should equal your string,
// which demonstrates that the function works or has been called

This test is maybe more valuable if the string is passed into the function where the function is called:

function buttonClick(str);
    document.getElementById("test").innerHTML = str;
}

// assert that str is defined when inside the function

If you're required to test the output, you could look at the button's string value (nodeValue or textContent) based on element ID, or look for the entire markup string in the document. Both approaches meet your requirement, but are fragile (dependent on specific markup and string values).

Checking the document in its entirety for a markup snippet might look like this:

 document.documentElement.innerHTML.indexOf('<button>string</button>')

Read more on that

Of course, if any script or library adds a class or other attribute, this fails.

Hi isherwood. Unfortunately, I am working on a project that requires a way to test the output (not for school/work). I will be committing this to git, and then using jenkins to build/test. It does not have to be a unit test. Any sort of test would do that tests that the output text is displayed after clicking the button. — prim3, May 08 '19 at 13:54
Hi isherwood, im having a bit of an issue. I am doing in the react framework and have this as my index.test.js (using Jest to test it). Any ideas? Please see above code for testing. — prim3, May 09 '19 at 06:23

score 0 · Answer 2 · answered May 08 '19 at 22:23

0

The test as you describe it is an end-to-end test, from user input until user output, involving complex components like the browser(s). Such tests are definitely no unit-tests - it would be subsystem or even system tests.

For the specific problem of automated testing of web applications you could use a framework like Selenium (https://en.wikipedia.org/wiki/Selenium_(software)). This would allow you to simulate the button press and then subsequently analyse the resulting content - not in rendered form, but on the level of the html page content (text).

answered May 08 '19 at 22:23

Dirk Herrmann

5,550
1
21
47

This was my initial thought, but on reflection, the question is just describing some JavaScript. There's no mention of a back-end whatsoever. If the test is purely asserting the behaviour of that JavaScript, then I'd say it's certainly still a unit test. There are many JavaScript unit test frameworks (e.g. Karma) which do exactly this. – DaveyDaveDave May 09 '19 at 06:33
Thank you for the comment. But I am trying to use Jest. Im having a bit of an issue. I am doing in the react framework and have this as my index.test.js (using Jest to test it). Any ideas? Please see above code for testing. I keep getting an error when I run "npm test." Thanks.. – prim3 May 09 '19 at 07:00
@DaveyDaveDave I agree that there is no back end mentioned explicitly, and maybe I am interpreting too much into the question. However, the OP two times emphasized that it is important that the text "is displayed" plus once "strings are present on the screen", rather than that the document is modified to contain the proper content. – Dirk Herrmann May 09 '19 at 07:04

how can I unit test an output of HTML code

2 Answers2