Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create QUnit tests with reference to another class?

I'm trying to add unit testing for JavaScript into my web site. I use VS2013 and my project is an ASP.NET web site.

Based on recommendations (http://www.rhyous.com/2013/02/20/creating-a-qunit-test-project-in-visual-studio-2010/) I've done so far:

  1. Created new ASP.NET app
  2. Imported QUnit (using NuGet)
  3. Into "Scripts" added links to js-file in my original web site (files PlayerSkill.js - containts PlayerSkill class and trainings.js - contains Trainer and some other classes)
  4. Created new folder "TestScripts"
  5. Added TrainingTests.js file
  6. Wrote simple test:

     test( "Trainer should have non-empty group", function () {
        var group = "group";
        var trainer = new Trainer(123, "Name123", group, 123);
        EQUAL(trainer.getTrainerGroup(), group);
     });
    

Notice: my trainings.js file among others contains

function Trainer(id, name, group, level) {
    ... 
    var _group = group;
    this.getTrainerGroup = function () { return _group ; }
};

When I execute my test I see error: Trainer is not defined.

It looks like reference to my class is not recognized. I feel like linking file is not enough, but what did I miss?

Please help add reference to the original file with class and run unit test.

Thank you.

P.S. Question 2: Can I add reference to 2 files (my unit test will require one more class which is in another file)? How?

like image 368
Budda Avatar asked Jun 05 '15 03:06

Budda


People also ask

How do you write a test case on Qunit?

Create a Test CaseMake a call to the QUnit. test function, with two arguments. Name − The name of the test to display the test results. Function − Function testing code, having one or more assertions.

What are hooks in Qunit?

Hooks can run around individual tests, or around a whole module. before : Run a callback before the first test. beforeEach : Run a callback before each test. afterEach : Run a callback after each test.


2 Answers

You should add all the relevant logic of your application to your unit testing file so they all execute before you run your tests

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>QUnit Test Results</title>
        <link rel="stylesheet" href="/Content/qunit.css">
    </head>
    <body>
        <div id="qunit"></div>
        <div id="qunit-fixture"></div>
        <script src="/Scripts/qunit.js"></script>
        <script src="/Scripts/PlayerSkill.js"></script>
        <script src="/Scripts/trainings.js"></script>
        <script src="/TestScripts/TrainingTests.js"></script>
    </body>
</html>

You should not use linked files because they will not exist physically in the script folder.

If you really want to use them you should let the Visual Studio intellisense resolve the physical path of the file like this.

  1. Type the script tag <script src=""></script>
  2. Place the cursor inside the quotes in the src attribute and press CTRL + SPACE
  3. Search your files and let the resolved path untouched
  4. If your project location changes you must update the linked files and also the script references.

{Edit1}

Solution 2:

You could also use an MVC Controller and a Razor View to create your unit testing page and the linked files will work as expected with the only issue that you will have an extra controller in your project but this is not bad at all if for example you want to test the loading of content using ajax that is by default blocked by the browser if they are run from a local file.

Solution 3:

You can also setup a new MVC project just for your javascript unit testing just as you usually setup a new project for any server side code and this will help to prevent your testing to interfere with your production code

{Edit 2}

Solution 4:

As part of the javascript ecosystem you could use grunt or gulp to automate the copy of your scripts from anywhere to your project before running the tests. You could write a gulpfile.js like this

var sourcefiles = [/*you project file paths*/];
gulp.task('default', function () {
    return gulp.src(sourcefiles).pipe(gulp.dest('Scripts'));
});

And then run it opening a console and running the command gulp or gulp default

like image 129
devconcept Avatar answered Oct 13 '22 23:10

devconcept


Looks like trainings.js is not defined when calling TrainingTests.js . See this question for more details regarding why this happens! Once that is fixed it does work. And yes similar to trainings.js you can have any number of files in any folder as long as you reference them properly. I have created a sample fiddle accessible @ http://plnkr.co/edit/PnqVebOzmPpGu7x2qWLs?p=preview

<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="http://code.jquery.com/qunit/qunit-1.18.0.js"></script>
  <script src="trainings.js"></script>
  <script src="TrainingTests.js"></script>
</body>
like image 27
meteor Avatar answered Oct 13 '22 23:10

meteor