Front-Panel Javascript Testing with the Require and Reshayer Features

Question

So, I was trying to figure out how front end testing (unit testing) works, but I was stuck at some point.

So, I have installed my jasmine test as follows:

describe('Blabla', function () { it('returns true', function () { var people = require(["people"], function(ppl) { return ppl; }); expect(people.getTitle()).toBe('People piolmjage'); }); }); 

But it makes me:

TypeError: undefined is not funtion

So people are undefined. So maybe my callback comes too late. But if I remove the callback, I get the following error:

 it('returns true', function () { var people = require("people"); expect(people.getTitle()).toBe('People piolmjage'); }); 

Error: module name "people" has not yet been loaded for context: _. Use require ([])

I suppose something is wrong in my setup ... Does anyone know how to make this FE testing work?

I managed to get it to work from the console and use define in conjunction with phantomjs and durandal test files, but I need it to work outside the console, and therefore I can not use this define because the winner of the test won Do not find my tests.

This is why I need to use CommonJS to get the required view modes.

people model

 define([], function () { var getTitle = function() { return "hello"; } var peopleViewModel = { title: 'People page', getTitle: getTitle }; return peopleViewModel; }); 

UPDATE

I got the code, but not with resharper. Follow this page from the durandal web page .

But this gives me console output, which is unstructured for actual reading.

However, I can use the define keyword, and then it works fine. So I guess the keyword requires , where did I mess up something?

UPDATE 2

So I used a violinist to check what was happening. I also finally got his job (kind of ...).

My test file now looks like this:

 ///<reference path="../../Scripts/require.js"/> ///<reference path="../../test/lib/jasmine-2.1.3/jasmine.js"/> ///<reference path="../../App/viewmodels/people.js"/> describe('Blabla', function () { it('require test', function (done) { require(['people'], function (people) { expect(people.title).toBe('People page'); done(); }); }); }); 

And then I changed the people file:

 define("people", ["bla"], function (bla) { return { title: 'People page', bla: bla }; }); 

As you can see here, I name my viewmodel will be people . This works for testrunner, but in fact it does not receive files through requireJS , but only reference paths. In addition, this does not meet my needs, as the durandal models are unnamed .

Screenshot screenshot Fiddler:

So basically it doesn’t use requireJS to get view models, and therefore I can’t just use the require.config initializer to go to my view modes and load each model with requireJS. Any thoughts?

Answer 1

I finally got his job, took me like a day and a half.

Anyway, I no longer use resharper, or it will be more accurate. Chutzpah is the one I turned to at the end. It also took me some kind of research, but I realized that it includes everything that I want.

Mark this post for sure

Here is what I did:

My people.js is as follows:

 define(['viewmodels/bla'], function (bla) { return { title: 'People page', bla: bla //testing dependencies on other viewmodels }; }); 

Then I also did bla.js

 define(function() { return { bla: "bla" }; }); 

And now for the tests:

 describe('Blabla', function () { it('require test', function (done) { require(['viewmodels/people'], function (people) { expect(people.title).toBe('People page'); done(); }); }); it('dependency on require test', function (done) { require(['viewmodels/people'], function (people) { console.log(people.bla); expect(people.bla.bla).toBe('bla'); done(); }); }); }); 

And then, in the end, after reading the answers to the link above, I had to create a Chutzpah configuration file to create a test harnass :

 { "Framework": "jasmine", "TestHarnessReferenceMode": "AMD", "TestHarnessLocationMode": "SettingsFileAdjacent", "References" : [ {"Path" : "../Scripts/require.js" }, {"Path" : "requireConfig.js" } ], "Tests" : [ {"Path": "specs"} ] } 

Now running tests with Visual Studio test runner really gets everything I need, and as you can see, now I can access all my view modes : require(['viewmodels/whateverviewmodel'], function(whateverviewmodel){....})

Hope this answer gets people testing your (Durandal) SPA using Jasmine and RequireJS.

I know my views in this answer or in the question itself, I will say a lot, but this should give you an idea of ​​how to get around all this.

Small Editing

Now you can also skip the callback mess with require ([] ... inside the tests and build your tests as you make your view models with define

 define(['viewmodels/people'], function (people) { describe('Blabla', function () { it('require test', function () { expect(people.title).toBe('People page'); }); it('dependency on require test', function () { console.log(people.bla); expect(people.bla.bla).toBe('bla'); }); }); }); 

This gives you less indentation and more readability per se.

Answer 2

The require call provided by RequireJS is inherently asynchronous, so you need to do something like this:

 it('returns true', function (done) { require(["people"], function(people) { expect(people.getTitle()).toBe('People piolmjage'); done(); // Signal that the test is done. }); }); 

The first attempt you show in your question may not work. The error of the classic "attempt to return values ​​synchronously from asynchronous code". The second attempt with require("people") does not work either because this require call is pseudo-synchronous and will only work if the requested module is already loaded. See this answer for an explanation of how this pseudo-synchronous require works.