Geek Answers Handbook

How to create QUnit tests with reference to another class?

I am trying to add unit testing for JavaScript to my website. I am using VS2013 and my project is an ASP.NET website.

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

  • New ASP.NET Application Created
  • Imported QUnit (using NuGet)
  • Added links to the js file on my source website in the "Scripts" (PlayerSkill.js files - contain the PlayerSkill class and trainings.js - contain the trainer and some other classes)
  • New folder "TestScripts" created
  • Added file TrainingTests.js

  • Wrote a 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); });

Note. My trainings.js file, among others, contains

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

When I perform my test, I see an error: Coach is not defined.

It looks like the link to my class is not recognized. It seems to me that linking the file is not enough, but what did I miss?

Help add a link to the source file with the class and run unit test.

Thanks.

PS Question 2: Can I add a link to 2 files (for my unit test you need another class that is in another file)? How?

+7
javascript unit-testing visual-studio qunit
source share
3 answers

You must add all the appropriate logic for your application to the device test file so that they all run before ..

 <!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>

Linked files cannot be used because they will not physically exist in the script folder.

If you really want to use them, you must allow Visual Studio intellisense to resolve the physical path to a file like this.

  • Enter the tag tag <script src=""></script>
  • Place the cursor inside the quotation marks in the src attribute and press CTRL + SPACE
  • Search for files and allow resolved path intact
  • If your project location has changed, you must update the related files as well as the script links.

{Edit1}

Solution 2:

You can also use the MVC controller and Razor View to create a device test page, and the associated files will work as expected with the only problem in which you will have an additional controller in your project, but this is not bad at all if, for example, you you want to test the loading of content using ajax, which by default is blocked by the browser if they are running from a local file.

Solution 3:

You can also set up a new MVC project only for testing your javascript module, as you usually set up a new project for any code on the server side, and this will help prevent your testing to interfere with your production code.

{Change 2}

Solution 4:

As part of the javascript ecosystem, you can use grunt or gulp to automate copying your scripts from anywhere to your project before running tests. You can write 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 by opening the console and running the gulp or gulp default

+4
source share

It looks like trainings.js not defined when TrainingTests.js called. See this question for more details on why this is happening! Once this is fixed, it works. And yes, like trainings.js , you can have any number of files in any folder if you link to them correctly. I created a sample script available @ 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>
+3
source share

Well, due to the help of two answers, I localized this problem, really, was VS's inability to copy the necessary file to the test project.

This can probably be resolved in several ways, I found one, the idea is copied from: http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

The solution is simple: add the tag dynamically

To achieve this, I added the following code to the tag:

 <script> var fileref = document.createElement('script'); fileref.setAttribute("type", "text/javascript"); var path = 'path'; // here is an absolute address to JS-file on my web site fileref.setAttribute("src", path); document.getElementsByTagName("head")[0].appendChild(fileref); loadjscssfile(, "js") //dynamically load and add this .js file </script>

And migrated my tests (also requires a link to jquery)

  $(document).ready(function () { QUnit.test("Test #1 description", function () { ... }); });

A similar approach also works for clean test files.

0
source share

More articles:


All Articles