EzDevInfo.com

qunit

An easy-to-use JavaScript Unit Testing framework. QUnit jquery: the write less, do more, javascript library

Testing Javascript that Manipulates the DOM

I've been looking into javascript test suites and I have found QUnit to be very interesting. I understand how to test computational code, but...

How do you test javascript applications written primarily for DOM manipulation?

it seems like testing the position/color/etc of DOM elements would be a moot point because you'd end up doing somethign like this:

$("li.my_element").css("background-color", "#f00");

and then in your test...

$(function() {
    module("coloring");
    test("test_my_element", function() {
        var li_element_color = $("li.my_element").css('background-color');
        equals(li_element_color, "#f00");
    });
});

this just doesn't feel right because it basically just doing this:

var my_li= $("li.my_element");
my_li.css("background-color", "#f00");
if ( my_li.css("background-color") == "#f00" ) {
    return true;
}

Am I nuts? How is this supposed to be done?

edit: the heart of the question:

I guess what I'm getting at is, I need to make sure the code isn't broken before I deploy, but the vast majority of it is UI helpers and ajax. How do I test that things are appearing correctly?

A few examples:

  • test that a JQuery UI dialog is appearing on top of all other elements
  • test that the drag-n-drop is working properly
  • test that the color of a droppable changes when an element is dropped on it
  • test that the ajax is all working properly
  • test that there are no extraneous commas that will break IE

Source: (StackOverflow)

QUnit is only running the first test

I can't get QUnit to run any test after the first. To be sure I wasn't doing something weird, I pared down the code to be as basic as possible.

test("A", function () {
    ok(true, "Test A");
});
test("B", function () {
    ok(true, "Test B");
});

Test A is the only one that runs. No errors thrown or anything else.

My HTML file looks like this.

<!DOCTYPE html>
<html>
<head>
   <title>Test title</title>
   <link rel="stylesheet" rel='nofollow' href="http://code.jquery.com/qunit/qunit-1.10.0.css">
</head>
<body>
   <div id="qunit"></div>
   <script src="http://code.jquery.com/qunit/qunit-1.10.0.js"></script>
   <script src="tests.js" type="text/javascript"></script>
</body>
</html>

Source: (StackOverflow)

Advertisements

QUnit can't recognize more than one test

I am having a problem with QUNIT, no matter what I seem to do the test suites will only ever recognize one test or module, even though I have multiple one's in the javascript. Any help will be greatly appreciated!

    <script>
          $(document).ready(function(){
            QUnit.log = function(result, message)
            {
                if (window.console && window.console.log)
                {
                   window.console.log(result +' :: '+ message);
                }   
            }
            module("Basic Unit Test");
            test("Sample test", function()
            {
                expect(1);
                equal(divide(4,2),2, 'Expected 2 as the result, result was ' + divide(4,2));
            });
                        test("Test two", function() {
                        expect(1);
                        equal(divide(8,2),2,'Expected 4 as the result, result was ' + divide(8,2));
                        });

            function divide(a,b){
                return a / b;
            }
          });

    </script>

Source: (StackOverflow)

QUnit Vs. Jasmine and TDD Vs. BDD

I've been looking at two libraries for doing unit tests on the front-end.

  • QUnit - http://qunitjs.com/

  • Jasmine - http://jasmine.github.io/

    1. Jasmine is clearly more BDD focused than QUnit although I could see doing BDD with QUnit by describing the tests in a behavior-oriented way. Both of them are able to run assertions on units of code so I think they're both unit tests. Is BDD mutually exclusive from TDD or is it all in how you write it?

    2. Is unit testing necessary if you're doing behavior testing? Seems like if you cover all user stories, you don't really need to know the details of the testable units.

    3. Are there any other testing frameworks you like? Are there other tests besides unit tests that are good for devs to do on the front-end?


Source: (StackOverflow)

Recommended structure for testing Javascript with QUnit in ASP.NET

I have a standard ASP.NET MVC (version 2 preview 2) solution with the actual project and server-side unit tests in separate projects.

Because this project is very client-side heavy, I want to make a ClientTest project as well that uses QUnit to test the main project.

I've thought of creating a regular ASP.NET webforms project with a single HTML file that would load the various scripts in my Scripts/ directory and test them with QUnit. Unfortunately this will spawn another ASP.NET Development Server. I could configure the port of the running MVC project server before running the tests, but there's got to be a better way that isn't just throwing the test html file into the main MVC project.

Does anyone know of a better way of going about this?


Source: (StackOverflow)

Ember CLI Code Coverage Reports

I am using Ember CLI and I am trying to integrate code coverage reports with the built in Qunit tests that are run with testem. I tried to use Istanbul, but I couldn't get it to find the files to instrument because it seems to be looking in the tmp directory. I tried doing this in my testem.json:

{
"framework": "qunit",
"serve_files": [
    "instrumented/components/*.js"
],
"before_tests": "istanbul instrument --output instrumented/components app/components",
"after_tests": "istanbul report",
"test_page": "tests/index.html",
"launch_in_ci": ["PhantomJS"],
"launch_in_dev": ["PhantomJS", "Chrome"],
"reporter": "tap"
}

But I kept getting errors like this: not ok 1 Error --- message: >

        fs.js:684
          return binding.stat(pathModule._makeLong(path));
                         ^
        Error: ENOENT, no such file or directory '/Users/Robert/ui/tmp/class-tests_dist-hqZLfsWS.tmp/app/components'
            at Object.fs.statSync (fs.js:684:18)
            at InstrumentCommand.Command.mix.run (/usr/local/lib/node_modules/istanbul/lib/command/instrument.js:230:20)
            at runCommand (/usr/local/lib/node_modules/istanbul/lib/cli.js:58:19)
            at runToCompletion (/usr/local/lib/node_modules/istanbul/lib/cli.js:62:5)
            at Object.<anonymous> (/usr/local/lib/node_modules/istanbul/lib/cli.js:67:5)
            at Module._compile (module.js:456:26)
            at Object.Module._extensions..js (module.js:474:10)
            at Module.load (module.js:356:32)
            at Function.Module._load (module.js:312:12)
            at Function.Module.runMain (module.js:497:10)

I tried using Karma as well, but I couldn't figure out the configuration. I also tried blanket, but that just gave me a false report of 100% covered on the transpiled code.

I don't fully understand how the transpiled code works, and I'm not sure what the best way to approach this is, but I would definitely love any help to point me in the right direction for how to get a nice code coverage report.

Has anyone successfully integrated any code coverage reports of any kind?


Source: (StackOverflow)

Javascript unit testing with V8

Currently, I am using PhantomJS for running Javascript unit tests in QUnit and Sinon framework on our build server.

But, PhantomJS uses JavaScriptCore with JIT compiler as its Javascript engine. Instead, I want to use the V8 engine, which is used in Google Chrome, or Chakra, which is used in IE. I want to do this because I want to check platform compatibility for the code.

Are there any popular test runners like PhantomJS, which use these engines?


Source: (StackOverflow)

Running QUnit tests with Jenkins and Apache Ant?

Is it possible to execute my QUnit (javascript) unit tests from Jenkins? My build script is Apache Ant. Would Jenkins execute this as a separate Build Step, or would I need to add something in the config of my Ant build script?


Source: (StackOverflow)

Is it possible to mock the window.location object for a qUnit test?

Let's say I have a utility function that, for simplicity's sake (the real thing is complicated and irrelevant), returns the current window's querystring.

var someUtilityFunction = () {
    return window.location.search.substring(1);
};

Now I want to unit test this function in qUnit (not sure if the testing harness is relevant or not):

test('#1 someUtilityFunction works', function () {
    // setup
    var oldQS = window.location.search;
    window.location.search = '?key1=value1&key2=value2&key3=value3';

    var expectedOutput = 'key1=value1&key2=value2&key3=value3';

    // test
    equals(someUtilityFunction(),
        expectedOutput,
        'someUtilityFunction works as expected.');

    // teardown
    window.location.search = oldQS;
});

The problem here is that setting the window.location.search to a different querystring is causing the page to reload, essentially entering an infinite request loop. Is there any way to mock out the window.location object without making any changes to the someUtilityFunction function?


Source: (StackOverflow)

Is there a spyOn analogue in QUnit?

I'm writing specs for different test cases for Jasmine and QUnit to compare them and they looked the same before I needed to write a test to check if an event is binded to an element.

Event binding looks like

$('.page').live('click', function() { page_clicked( $(this) ) });

page_clicked is a private method but it calls for a public method of another module.

Here is a Jasmine spec:

it('should bind events to pages', function() {
    spyOn( search, 'get_results' );

    $('.page:eq(0)').trigger('click');

    expect( search.get_results ).toHaveBeenCalled();
});

This test works. Now I'm trying to write the same test for QUnit and can't find anything similar to spyOn. How to write this test for QUnit?


Source: (StackOverflow)

Running JavaScript unit tests headlessly in a Continuous Integration build

I have a webapp build plan running on a Continuous Integration system (Atlassian Bamboo 2.5). I need to incorporate QUnit-based JavaScript unit tests into the build plan so that on each build, the Javascript tests would be run and Bamboo would interpret the test results.

Preferably I would like to be able to make the build process "standalone" so that no connections to external servers would be required. Good ideas on how to accomplish this? The CI system running the build process is on an Ubuntu Linux server.


Source: (StackOverflow)

QUnit: How to test ajax call without modifying the ajax call

How can I write a QUnit test for this:

function doSomethingWithAjax() {
    $.ajax({
        url: '/GetHelloWorld',
        success: function(data) { $("#responseFromServer").text(data); },
    });
}

Mockjax+qunit requires a start() call in the ajax complete() method.


Source: (StackOverflow)

Qunit + JSCoverage + Jenkins

I have started using Qunit to test my JS code. I am looking into JSCoverage to generate the coverage reports later. We have a CI server (Jenkins) which already do a few things with our PHP code and I was wondering if anyone can comment on how I can integrate the report from my Qunit and JSCoverage into Jenkins

Thanks Sparsh


Source: (StackOverflow)

How can we execute Unit Tests against DOM manipulation?

The introduction to QUnit over at netTuts.com spawns an interesting exchange (never resolved) over how to apply unit tests against actions that manipulate the DOM. The following quote (Alex York) gets to the crux:

What would be nice is that if you had a function like this:

function add(a, b) { var result = a + b; $(“input#ResultTestBox”).val(result);

In the above test, I would love to test two things: the addition of a and b, and the result correctly being put into a DOM element. I would love to test the second thing by providing some mock HTML. Possible?

But, like i said...unresolved. Resolvable?

thx


Source: (StackOverflow)

Post-mortem unit testing

I do version control with Git, and unit testing with QUnit. Sometimes I find a bug in my software that was not present in a past version. It's easy for me to write a unit test specifically for that bug.

Given that unit test, can I easily go trough all my past commits and test the build with that unit test, so that I can pinpoint which commit caused the breakage?


Source: (StackOverflow)