Codecoverage manual unit testing

JavaScript
1

While manual unit testing in browser for a web application, any way to check code javascript coverage from editor or tools ?

2

Yup, although it depends what you mean by “manual”. This supports Qunit, Mocha and Jasmine and has an adapter API for supporting other test runners.

http://blanketjs.org/

3

@James_Hibbard …Thank you for the response. Does Blanket.js work for manual testing.We do not use any Unit Testing Framework/Suite in the project. So while manually browsing the website or developer unit testing the scenarios manually, does this BlanketJS reports the Code Coverage ?

4

I don’t understand. What does one of your unit tests look like? What do you use to run them?

5

Manual - for example, if a validation is added to a textbox as part of new requirement, developer unit tests the code written by himself - by giving all kinds of inputs in the text box and check whether the relative error message is displayed or not.
For testing the code, we are not writing any new code to test it. All the scenarios are checked in the browser by developer.

6

Oh ok, that’s not really unit testing. Unit tests are automated:

A unit test is an automated piece of code that invokes a unit of work in the system and then checks a single assumption about the behavior of that unit of work.

Source: http://artofunittesting.com/definition-of-a-unit-test/

So to answer your question, blanket.js won’t be able to help you, nor will any other library that I know of i.e. how should a library know what your developer has checked manually?

Another question: this kind of manual testing is laborious and error prone. Why not automate it?

7

Hi Pullo…
Thank you for the clarification. Yeah but unit test automation we need to take it up some time in near future.But this task has time constraint…actually i found this - http://siliconforks.com/jscoverage - it is able to check the coverage while performing verification manually.
If we want to use any Unit testing automation, as we do not use nodeJS and project involves lot of server calls, which can be the ideal unit test automation ? pls suggest

8

Cool. I’m glad you found what you want. I had no idea that something like that existed.

Nonetheless, this tool can’t really test that your validation logic works, only that it is called. You might still be leaving yourself open to bugs.

For example, say you want to validate that someone has entered an age into your text box. You might do this:

function validateAge(num){
  return /\d+/.test(num);
}

Which would work fine if someone entered “aaaa” — the regex flags the input as invalid, the tool flags the code as “tested” and everyone moves on. But what happens if someone enters “aaa123aaa”. This will pass the validation as the regex is crummy.

What would be better would be to automate it with a framework such as Mocha (we have a nice tutorial on doing this).

Then you can write assertions against your code and test that it works from all different angles. That might look a little bit like this:

describe('validateAge', function() {
  it('a number should validate', function() {
    var age = 42;
    const isValidAge = validateAge(age);
    assert.equal(isValidAge, true);
  });
});

which would pass. But then you could also test what would happen with a string:

describe('validateAge', function() {
  it('a number should validate', function() {
    var age = "aaa42aaa";
    const isValidAge = validateAge(age);
    assert.equal(isValidAge, false);
  });
});

This would fail and it would be time to refactor the regex:

function validateAge(num){
  return /^\d+$/.test(num);
}

You could keep testing it and maybe notice that 1000000000000000 validates. That’s obviously not desired so you could tighten up the regex once more and run your tests again:

function validateAge(num){
  return /^\d{2,3}$/.test(num);
}

Here’s an example page for you to have a play around with that demonstrates all of this:

<!DOCTYPE HTML>
<html>
  <head>
    <meta chraset="utf-8">
    <title>Mocha example</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.3.4/mocha.min.css">
  </head>
  <body>
    <div id="mocha"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.min.js"></script>
    <script>
      function validateAge(num){
        return /^\d{2,3}$/.test(num);
      }

      mocha.setup('bdd');
      var assert = chai.assert;

      describe('validateAge', function() {
        it('a two digit number should validate', function() {
          var age = 42;
          const isValidAge = validateAge(age);
          assert.equal(isValidAge, true);
        });

        it('a three digit number should validate', function() {
          var age = 100;
          const isValidAge = validateAge(age);
          assert.equal(isValidAge, true);
        });

        it('a four digit number should not validate', function() {
          var age = 1042;
          const isValidAge = validateAge(age);
          assert.equal(isValidAge, false);
        });

        it('a string should not validate', function() {
          var age = "hello, world!";
          const isValidAge = validateAge(age);
          assert.equal(isValidAge, false);
        });
      });

      mocha.run();
    </script>
  </body>
</html>

Admittedly, this is not the best example, as I would rather do this kind of testing on the server, but nonetheless, it should give you an idea of what I’m on about.

Also, if you keep an eye on SitePoint’s JS channel, we have a tutorial in the pipeline on Using test-driven development to create a JavaScript form validator.

Also, you might want to look at functional testing as a way of automating interactions with a web page: JavaScript Functional Testing with Nightwatch.js

3 Likes
9

Thank you very much for the detailed explaination. Will surely consider it.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.