Five Easy Steps to Learn JsUnit

If you already know JUnit or PyUnit, it shouldn’t take you more than ten minutes to learn how to use JsUnit. JsUnit is a Unit Testing Framework for Javascript. It is a JavaScript version of JUnit.

Below are five easy steps you can follow to quickly learn JsUnit.

Step 1. Download JsUnit zip file and extract it to a local directory.

http://jsunit.net/
http://downloads.sourceforge.net/jsunit/

Step 2. Create a sample function that you will use to test using JsUnit.

For example, let’s create a function that adds two numbers. Save this code into a file and name it “myAdd.js”.

// myAdd.js
function add(x, y) {
    return (x+y);
}

Step 3. Create an HTML file and name it “testMyAdd.html”.

In the HEAD section of this file, include the JsUnit source code and your myAdd.js file. In the BODY section, write your testcase functions as shown below. Similar to JUnit and PyUnit, the names of testcase functions must begin with “test”.

“testAdd.html”

<html>
<head>
    <title>Test Add Function</title>

    <script type="text/javascript" src="junit/jsUnitCore.js"></script>
    <script type="text/javascript" src="myAdd.js"></script>

</head>
<body>
<script type="text/javascript">
    function setUp() {
        // fixture setup before running a testcase
    }

    function tearDown() {
        // anything to cleanup after running a testcase
    }

    function testAdd() {
        assertEquals("", 3, add(2, 1));
    }

    function testAdd2() {
        assertNotEquals("", 0, add(2, 1));
    }
</script>
</body>
</html>

Step 4. Using a browser, locate the file “jsunit/testRunner.html” and load it.

Step 5. On the testRunner.html page, enter the testpage URL (testAdd.html) and click on the RUN button.

When JsUnit loads the testpage, it will automatically find all testcase functions and run them in sequence.

That’s it! You now have a working JsUnit testcase. Of course, JsUnit has more to offer than this simple example. But this should get you started as you explore more features of JsUnit. See online doc for more details: http://jsunit.net/documentation/index.html

Advertisements

10 thoughts on “Five Easy Steps to Learn JsUnit

  1. Hello,

    I have problem with JsUnit. I copied files(myAdd.js and testMyAdd.html). I opened testRunner.html in Mozilla Firefox. I entered “testMyAdd.html” from desktop and clicked “Run”. After 120 sec I saw message: “Reading Test Page file:///testAdd.html timed out.
    Make sure that the file exists and is a Test Page.” and I clicked “OK” button. I was asking about “Retry Test Run?”. After clicked “OK” problem is the same.

    Can you help me with this problem??

    Regards,
    Mateusz

  2. It seems, JSUnit only works if we place the tests along with default tests that comes with JSUnit. I am also having problems working with this from ant.

  3. It not an issue with location of testadd.html .It has to do with the location of your jsUnitCore.js in jsunit 2.2 its located in the app folder in the jsunit directory….If you point your jsunitcore.js it should work fine

  4. One thing that worked for me was to put the full path of the testMyAdd.html in the testRunner page. (even though the two pages were in the same directory it would work by just adding the name.
    Ex: C:\Users\joe\Documents\jsunit\testMyAdd.html

    As mentioned in the comment above you need to change the source of the jsUnitCore in the html page from:
    src=”junit/jsUnitCore.js
    to:
    src=”app/jsUnitCore.js”
    (assuming testMyAdd.html is in the jsunit folder)

    Also, when I copied and pasted I named the HTML file testMyAdd.html as it’s listed in step 3. When I went to run the testRunner I typed in testAdd.html as it’s listed in step 5.

    I hope this helps anybody trying this out for the first time. Thanks a bunch for the info, jsunit has been really helpful.

  5. Like many of you I encountered issues trying to run this seemingly easy sample. I encountered many errors along the way. I’m going to document EACH of them so you have more things to try when you want to your own tests running.
    1) Tried using Google Chrome browser to launch testRunner.html and nothing showed up at all. Switched to Internet Explorer and it started.
    2) Tried creating the sample myAdd.js test and received the HTML file not found error message above. I could run ANY test in sample set provided but I could never run anything that I created myself. (permissions? what could it be?). I’m using UltraEdit editor on Win 7 64bit.
    3) I copied failedTest.html to failingTest – Copy.html. From there I copied the HEAD tag section into the copied file.
    4) I renamed the copy to myAddTest.html.
    5) I ran the file and I got it to run, but with errors: add function not found.
    6) I made a copy of JsUnitCore.js and wiped out all the contents. I typed in the myAdd.js function statements.
    7)I renamed the copy of JsUnitCore.js to myAdd.js and saved the fill in the app sub-directory with the other *.js files.
    8) Test ran successfully.

    When I looked at the supplied files in hexadecimal I noticed they all had the Byte Order Mark (0xFFFE) signature of a UTF-8 file. All characters were double-byte. It seems that if you edit a file using something like windows notepad or another editor that defaults to the charset=US-ANSI you own tests won’t work. I am not 100% sure on this, but I thought I’d pass along my painful experience just getting this simple test to run.

  6. Additionally.. the files that came from the Jsunit download all have an accompanying file with a long extension filename:Zone.Identifier:$DATA. When you copy one of the original files Windows creates the companion file (or were there to begin with and get unzipped with the original file). After you modify the contents | save | rename, the Zone.Identifier.$DATA file gets renamed as well. Without this file I cannot run any test files I create myself. WITH the companion file I can run the tests. It seems to be a Win 7 security thing that is turned on for the local zone (local machine). I’ll continue to dig and let you know what I come up with.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s