{"id":1389,"date":"2012-12-05T21:45:03","date_gmt":"2012-12-05T21:45:03","guid":{"rendered":"http:\/\/www.robertprice.co.uk\/robblog\/?p=1389"},"modified":"2012-12-05T21:45:03","modified_gmt":"2012-12-05T21:45:03","slug":"unit-testing-javascript-with-qunit-and-phing","status":"publish","type":"post","link":"https:\/\/www.robertprice.co.uk\/robblog\/unit-testing-javascript-with-qunit-and-phing\/","title":{"rendered":"Unit Testing JavaScript With QUnit And Phing"},"content":{"rendered":"

Recently I’ve been using both Phing for my PHP builds, and QUnit for my JavaScript unit tests, so I’ve been looking for a way to run these QUnit tests when Phing builds my application.<\/p>\n

By default Phing can run PHPUnit tests, but not QUnit. However Martin Jonsson has come to the rescue with his Qunit Phing Task<\/a>.<\/p>\n

QUnit Phing Tasks lets QUnit tests be run during a build and Phing can either pass or fail based on these results. As QUnit is written in JavaScript, QUnit Phing Task runs PhantomJS to call a JavaScript wrapper that passes the output back to PHP and Phing. PhantomJS is a headless JavaScript browser that can excute on a command line.<\/p>\n

Using QUnit Phing Task<\/h2>\n

To run the QUnit Phing Task you need to install PhantomJS<\/a>. I downloaded a binary and placed it in \/usr\/local\/bin<\/var> on my system.<\/p>\n

You need to download the QUnit Phing Task<\/a>. I placed the files in a local .\/lib<\/var> directory in my project.<\/p>\n

You will also need to download QUnit<\/a>. I placed the files in a local .\/tests<\/var> directory in my project.<\/p>\n

In the .\/tests<\/var> directory I created an HTML file called runner.html<\/var>. This is the page we need to call to run our tests.<\/p>\n

<!DOCTYPE html>\n\n<html>\n        <head>\n                <meta chatset=\"utf-8\" \/>\n                <title>Qunit Tests<\/title>\n                <link rel=\"stylesheet\" href=\".\/qunit.css\">\n                <script src=\".\/qunit.js\"><\/script>\n                <script src=\".\/test.js\"><\/script>\n        <\/head>\n\n        <body>\n                <div id=\"qunit\"><\/div>\n        <\/body>\n<\/html><\/pre>\n
I also create a JavaScript file called .\/test.js<\/var> in .\/tests<\/var> to hold my JavaScript tests in.<\/p>\n
test(\"testing for true\", function() {\n        ok(true, \"true is true\");\n});<\/pre>\n
Finally, I create a build.xml<\/var> for my Phing build.<\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<project name=\"qunit example\" basedir=\".\" default=\"qunit\">\n\n        <path id=\"project.class.path\">\n                <pathelement dir=\".\/lib\/\" \/>\n        <\/path>\n\n        <taskdef name=\"qunit\" classname=\"QunitTask\">\n                <classpath refid=\"project.class.path\" \/>\n        <\/taskdef>\n\n        <target name=\"qunit\" description=\"JavaScript Unit Test\">\n                <qunit executable=\"DISPLAY=:0 \/usr\/local\/bin\/phantomjs\" haltonfailure=\"true\" runner=\".\/lib\/run-qunit.js\">\n                        <fileset dir=\".\">\n                                <include name=\"tests\/runner.html\" \/>\n                        <\/fileset>\n                <\/qunit>\n        <\/target>\n\n<\/project><\/pre>\n
In this I am specifying a path to my .\/lib<\/var> directory as this is where the QUnit Phing Task code is. The path is then used in the taskdeftask which is used to create the <qunit> task. Now when I call <qunit> in my qunit target I just pass in the location of the executable – in this case where PhantomJS is, whether Phing should halt if the QUnit tests fail, and where to find the the JavaScript that runs QUnit. Inside the task, we pass in where our runner pages are, as we only have the one in this example we include it by name tests\/runner.html<\/var>.<\/p>\n
Running this gives us the following…<\/p>\n
rob@lamp ~\/qunitphing> phing\nBuildfile: \/root\/qunitphing\/build.xml\n\nqunit example > qunit:\n\n    [qunit] .\/tests\/runner.html: 1 tests of 1 passed, 0 failed\n\nBUILD FINISHED\n\nTotal time: 0.3275 seconds<\/pre>\n
So we can see our tests have passed. Let’s change our test.js<\/var> so that it fails.<\/p>\n
test(\"testing for true\", function() {\n        ok(true, \"true is true\");\n        ok(false, \"false is true\");\n});<\/pre>\n
This test should fail, as false is not true and will fail the ok<\/code> assertion.<\/p>\n
rob@lamp ~\/qunitphing> phing\nBuildfile: \/root\/qunitphing\/build.xml\n\nqunit example > qunit:\n\n    [qunit] 1 tests failed on: .\/tests\/runner.html\n    [qunit] Failed test: testing for true (1, 1, 2)\nExecution of target \"qunit\" failed for the following reason: \/root\/qunitphing\/build.xml:13:41: QUnit tests failed\n\nBUILD FAILED\n\/root\/qunitphing\/build.xml:13:41: QUnit tests failed\nTotal time: 0.3258 seconds\n<\/pre>\n
So we can see that Phing has failed our build due to the QUnit tests failing, which is what we want.<\/p>\n
Summary<\/h2>\n
Although a very simple and contrived example, I hope this has shown you how to add JavaScript unit tests using QUnit to your Phing build.<\/p>\n","protected":false},"excerpt":{"rendered":"
Recently I’ve been using both Phing for my PHP builds, and QUnit for my JavaScript unit tests, so I’ve been looking for a way to run these QUnit tests when Phing builds my application. By default Phing can run PHPUnit tests, but not QUnit. However Martin Jonsson has come to the rescue with his Qunit … Continue reading “Unit Testing JavaScript With QUnit And Phing”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[2],"tags":[31,49,50,54],"class_list":["post-1389","post","type-post","status-publish","format-standard","hentry","category-dev","tag-javascript","tag-phing","tag-php","tag-qunit"],"yoast_head":"\nUnit Testing JavaScript With QUnit And Phing - Robert Price<\/title>\n<meta name=\"description\" content=\"A short quide to adding QUnit JavaScript unit tests into a PHP Phing build.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.robertprice.co.uk\/robblog\/unit-testing-javascript-with-qunit-and-phing\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Unit Testing JavaScript With QUnit And Phing - Robert Price\" \/>\n<meta property=\"og:description\" content=\"A short quide to adding QUnit JavaScript unit tests into a PHP Phing build.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.robertprice.co.uk\/robblog\/unit-testing-javascript-with-qunit-and-phing\/\" \/>\n<meta property=\"og:site_name\" content=\"Robert Price\" \/>\n<meta property=\"article:published_time\" content=\"2012-12-05T21:45:03+00:00\" \/>\n<meta name=\"author\" content=\"rob\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"rob\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/unit-testing-javascript-with-qunit-and-phing\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/unit-testing-javascript-with-qunit-and-phing\\\/\"},\"author\":{\"name\":\"rob\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#\\\/schema\\\/person\\\/fac6d5b076e0e14e1fb13e15b542a6c5\"},\"headline\":\"Unit Testing JavaScript With QUnit And Phing\",\"datePublished\":\"2012-12-05T21:45:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/unit-testing-javascript-with-qunit-and-phing\\\/\"},\"wordCount\":443,\"keywords\":[\"JavaScript\",\"Phing\",\"PHP\",\"qunit\"],\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/unit-testing-javascript-with-qunit-and-phing\\\/\",\"url\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/unit-testing-javascript-with-qunit-and-phing\\\/\",\"name\":\"Unit Testing JavaScript With QUnit And Phing - Robert Price\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#website\"},\"datePublished\":\"2012-12-05T21:45:03+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#\\\/schema\\\/person\\\/fac6d5b076e0e14e1fb13e15b542a6c5\"},\"description\":\"A short quide to adding QUnit JavaScript unit tests into a PHP Phing build.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/unit-testing-javascript-with-qunit-and-phing\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/unit-testing-javascript-with-qunit-and-phing\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/unit-testing-javascript-with-qunit-and-phing\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Unit Testing JavaScript With QUnit And Phing\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#website\",\"url\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/\",\"name\":\"Robert Price\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#\\\/schema\\\/person\\\/fac6d5b076e0e14e1fb13e15b542a6c5\",\"name\":\"rob\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g\",\"caption\":\"rob\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Unit Testing JavaScript With QUnit And Phing - Robert Price","description":"A short quide to adding QUnit JavaScript unit tests into a PHP Phing build.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.robertprice.co.uk\/robblog\/unit-testing-javascript-with-qunit-and-phing\/","og_locale":"en_GB","og_type":"article","og_title":"Unit Testing JavaScript With QUnit And Phing - Robert Price","og_description":"A short quide to adding QUnit JavaScript unit tests into a PHP Phing build.","og_url":"https:\/\/www.robertprice.co.uk\/robblog\/unit-testing-javascript-with-qunit-and-phing\/","og_site_name":"Robert Price","article_published_time":"2012-12-05T21:45:03+00:00","author":"rob","twitter_card":"summary_large_image","twitter_misc":{"Written by":"rob","Estimated reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.robertprice.co.uk\/robblog\/unit-testing-javascript-with-qunit-and-phing\/#article","isPartOf":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/unit-testing-javascript-with-qunit-and-phing\/"},"author":{"name":"rob","@id":"https:\/\/www.robertprice.co.uk\/robblog\/#\/schema\/person\/fac6d5b076e0e14e1fb13e15b542a6c5"},"headline":"Unit Testing JavaScript With QUnit And Phing","datePublished":"2012-12-05T21:45:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/unit-testing-javascript-with-qunit-and-phing\/"},"wordCount":443,"keywords":["JavaScript","Phing","PHP","qunit"],"articleSection":["Dev"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.robertprice.co.uk\/robblog\/unit-testing-javascript-with-qunit-and-phing\/","url":"https:\/\/www.robertprice.co.uk\/robblog\/unit-testing-javascript-with-qunit-and-phing\/","name":"Unit Testing JavaScript With QUnit And Phing - Robert Price","isPartOf":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/#website"},"datePublished":"2012-12-05T21:45:03+00:00","author":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/#\/schema\/person\/fac6d5b076e0e14e1fb13e15b542a6c5"},"description":"A short quide to adding QUnit JavaScript unit tests into a PHP Phing build.","breadcrumb":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/unit-testing-javascript-with-qunit-and-phing\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.robertprice.co.uk\/robblog\/unit-testing-javascript-with-qunit-and-phing\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.robertprice.co.uk\/robblog\/unit-testing-javascript-with-qunit-and-phing\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.robertprice.co.uk\/robblog\/"},{"@type":"ListItem","position":2,"name":"Unit Testing JavaScript With QUnit And Phing"}]},{"@type":"WebSite","@id":"https:\/\/www.robertprice.co.uk\/robblog\/#website","url":"https:\/\/www.robertprice.co.uk\/robblog\/","name":"Robert Price","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.robertprice.co.uk\/robblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.robertprice.co.uk\/robblog\/#\/schema\/person\/fac6d5b076e0e14e1fb13e15b542a6c5","name":"rob","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g","caption":"rob"}}]}},"_links":{"self":[{"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/posts\/1389","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/comments?post=1389"}],"version-history":[{"count":0,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/posts\/1389\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/media?parent=1389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/categories?post=1389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/tags?post=1389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}