Automating Javascript unit testing... where to start?

Question

I have a website that's build using JS for the client-side and PHP for the backend with a MySQL backing DB. I started unit testing everything, and the back-end was fairly straightforward using PHPUnit.

In the same spirit, I wanted to start testing the client-side and opted for QUnit. However, we're using Kendo UI and I'm a little lost as to how I could automate my tests without practically reinventing the wheel.

Say I have a modify.js file, where after I define everything I have the following jQuery:

$(document).ready(function() {

    $("#user-menu").kendoMenu();
    var modify = $('#modify');

    kendo.bind(modify, modifyViewModel);
    kendo.bind($('#numTagWindow'), numTagWindow);

    modifyViewModel.initForm();

    $(window).on("resize", function() {
        kendo.resize($("#trip"));
    });
});

Here, modify.php is an html file with some PHP and corresponds to the view that users get when they go to modify some corresponding setting. In a separate jsTest.js file which is incuded in modify.php, I have all my QUnit tests pertaining to modify.js.

My question is the following: What would be the standard approach for unit testing here, automated or otherwise? As it stands, since the same HTML page is being used for numerous tests my only current option is manually trying out every single option to see if the assertions pass.

In the case where a said function depends on the type of pre-selected input, this gets even worse. I'm forced to put a different number of expected assertions based on input (admittedly, this may be a design flaw).

How should I approach this? Would it be possible to just 'reset' the page using multiple $(document).ready's and run the tests in that manner? In that case, what would be the easiest way to provide the user input to the client-side code?

Jordan Kasper · Accepted Answer · 2014-10-30 18:56:54Z

I haven't ever tested an app with KendoUI before, but I assume it's similar to any other front-end library... that is, you can either use whatever built in tools they have, mock out the library, or do more "integration" testing rather than unit testing. For your minimal example above mocking isn't so bad, but you can imagine it getting out of hand. As such, I'd say integration testing is best, and you can use QUnit for that (along with jQuery), you just have to "write" all of the actions you're testing.

Of course, you also need to have some strategy for making the tests atomic by resetting the HTML blocks, or separating the various blocks into different test files, or something else...

Here is an uber basic example of a QUnit test file with an html fixture that gets reset after each test. Note that by using the document.ready() call in your source code you basically negate the ability to do any of this. If you strip that out and an init() method of some sort things will work much better.

<!doctype html>
<html>
  <head>
      <link rel="stylesheet" href="lib/qunit-1.14.0.css" />
  </head>
  <body>
    <div id="qunit"></div>   <!-- required! -->
    <div id="qunit-fixture">
      <!-- HTML to be reset for each test -->
      <div id="user-menu"> <!-- whatever you need in here --> </div>
      <!-- whatever other HTML you need for these tests -->
    </div>

    <script src="lib/qunit-1.14.0.js"></script>

    <script src="path/to/source-code.js"></script>

    <script>
      QUnit.test("Test some trigger", function(assert) {
        myCode.init(); // used to be in your document.ready()
        $("#someTriggerButton").click();

        assert.ok($("#someElement").hasClass("foobar"), "Ensure the element has the correct class after clicking trigger");
      });

      // Note that after this test runs, before the next test runs,
      // the HTML inside of #qunit-fixture will be reset to its value when freshly loaded

      QUnit.test("Another test", function(assert) {
        // ...
      });
    </script>
  </body>
</html>

So there's something to start with... This is intended to be used with HTML fragments, not entire pages. Of course, there are lots of other ways to do things. Unfortunately, your question is a bit too vague to really give you a specific "solution". If you try something out and have issues, please post another question on here and we'll try to help.

Thank you for your answer and the information. My apologies for being a little late on accepting it!

Collectives™ on Stack Overflow

Automating Javascript unit testing... where to start?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related