Writing tests as functions in Dalek.js - javascript

I've been using Dalek.js for testing and have been enjoying it. I would like to take some tests from one of my files and put them in a separate "common_tests.js" file so that I can use them in other places without having to duplicate code. However, whenever I try moving the test code out of the main file, the test fails to execute correctly -- I get the "RUNNING TEST - '[TEST NAME]'" message twice. The first does nothing, and the second immediately hangs while trying to open the page. Is there something I'm doing wrong?
My code is in this format:
In common_tests.js:
module.exports = {
testFunction: function(test) {
test
.open("www.google.com")
// other testing stuff here that's fine when in the other file
.done();
}
In my tests file:
var common = require('../common_tests.js");
module.exports = {
'Trying to test with functions': function(test) {
common.testFunction(test);
test.done();
}
}

I never used DalekJS, but it looks like you are calling test.done() twice : once in the shared function you wrote in common_tests.js, and then in your test file, after calling the common function.
I would have written the test file like this:
var common = require('../common_tests.js');
module.exports = {
'Trying to test with functions': common.testFunction,
};

Related

Protractor code failing due to module exports

In my Protractor framework, I am using a POM model, so a lot of code resides in different .js files, which are then called into , at necessary junctions, to have the e2e tests.
I have a CompleteProfile.js file (dummy name), where I have a condition,
if profile_flag ===100,
then do nothing
else
complete profile (includes a lot of forms)
For the else portion, I have the code in a differentfillCustomerForms.js file, whose code is something like this
var completeprofile = function(){
this.locator = element(by.css('some_css_locator'));
this.locator.click();
browser.sleep(2000);
}
module.exports={
profileComplete1 = completeprofile
}
I'm using this from fillCustomerForms.js in my CompleteProfile.js as
var Profile = require('./fillCustomerForms.js');
var c_profile = new Profile.profileComplete1();
var compl_profile = function(){
this.someFunction= function(){
profile_flag = "90"
if profile_flag ==="100"{
then do nothing;
}else{
c_profile.completeprofile();
}
}
}
module.exports={
finalExp = compl_profile
}
Inside my spec.js, I am calling the CompleteProfile.js as
var Profile = require('./CompleteProfile.js');
var co_profile = new Profile.finalExp();
describe("Modules",()=>{
it('Modules that load other things',()=>{
//do other things neccessary
});
});
describe("Module",()=>{
it("should do something,"()=>{
co_profile.someFunction();
});
});
The first describe block is the one that loads the browser and checks for the URL and other test cases. My issue is when if I add the second describe block, then the URL that is sent in first describe block is rendered empty i.e. Chrome loads without any URL, and errors out due to timeout error. I have checked the code and it seems fine. What did I do wrong here.
I'm guessing this might have to do with some basics of JS, that I might have overlooked, but right now I'm not able to figure this one out.
You have a syntax error in your second testcase (the it function). Every callback of each testcase in Mocha requires to be resolved or rejected. e.g:
it('should ...', done => {
/* assertion */
done(/* passing a new instance of Error will reject the testcase*/);
});`.
The called function doesn't not return anything in the provided code snippet, I don't really see what you're trying to test for.

"ReferenceError: Can't find variable: Mustache" in Unit Tests?

im running a rails app which im running Unit tests on the Javascript side (Using Teaspoon/Jasmine).
the funny thing is, on the function I call I KNOW Mustache.render function is working (Im able to console.log it's return value (which is the Mustache.render function) and see that it is working. However when I call that function from my unit tests im getting a:
Failure/Error: ReferenceError: Can't find variable: Mustache.
For reference I don't actually call the Mustache render function directly im simply calling the function that uses it and grabbing it's return value to check again.
I've been able to successfully grab and use various other functions and use them just fine, this one is just giving me trouble. Can the Mustache.render object not exist outside it's own file or scope or something?
Edit: Example code:
_makeSomething: function viewMakeSomething(data) {
const template = templates.something;
return Mustache.render(document.querySelector(template).innerHTML, data);
}
and my test code is simply:
it('_makeSomething object', function() {
let obj = {id: 1234, content: "_makeSomething Assertion", author: "Test User"}
let $something = _makeSomething(obj);
});
(Right now im just capturing it before I assert anything or split it up/etc...., but it's just calling it at all)
Problem is that you teaspoon doesn't have access to your dev/production assets pipelene. You should specify what JS to load for your tests. This is necessary to prevent loading all files from manifest to test some feature. Because this is unit testing.
From example:
//= require mustache
describe("My great feature", function() {
it("will change the world", function() {
expect(true).toBe(true);
expect(Mustache).toBeDefined();
});
});

Organizing code of a midly sized javascript client side app for testing

I'm building a midly size app using backbone and its friends jquery and underscore. My plan is to use QunitJS to create unittests.
I already have a Proof-Of-Concept of the app, so I basicly have a good grasp of how the code should look like without having to test it. It looks like that:
(function() {
// prepare some model
var Query = BackboneModel.extend({});
query = new Query();
// register some events
$('body.something').click(function() {
query.set('key', 'value');
# ...
});
// create some backbone view
var QueryView = Backbone.View.extend({...})
// init backbone view
query.view = new QueryView();
// add some plumbing here ...
// and so on...
})();
Otherwise said:
I wrap the module inside a function to avoid pollution
Class declaration and class use is interleaved
event registration is interleaved with the rest of the code
variables global to the module are reused inside the module
Now I need to test that. The problem is, I think, mainly about event registration and plumbing.
My plan is to wrap the code in functions and export every function and objects I want to test. The code will look like this:
var app = (function() {
var app = {}
// prepare some model
var Query = BackboneModel.extend({});
app.query = new Query();
// register some events
app.registerEvent = function() {
$('body.something').click(function() {
query.set('key', 'value');
# ...
});
};
app.registerEvent(); // XXX: call immediatly
// create some backbone view
app.QueryView = Backbone.View.extend({...})
// init backbone view
app.query.view = new QueryView();
// add some plumbing here ...
// wrapped in function with correct arguments and call it immediatly
// and so on...
// ...
return app;
})();
This is the first time I need to write tests in javascript for this kind of application so I'm wondering whether my approach to make the code testable is correct or can be improved. For instance, It seems silly to me to wrap the registration of events in function without arguments and call them immediatly.
Is there a javascript way to do this?
So I found an excellent way to test private functions while keeping my production code clean. I am not sure if you are using any build system like Grunt or Gulp, but if you are open to it you could do something like this:
//has a dependency of 'test' causing it to run testing suite first
gulp.task('js', ['test'], function() {
return gulp.src(source)
.pipe(plumber())
//create sourcemaps so console errors point to original file
.pipe(sourcemaps.init())
//strip out any code between comments
.pipe(stripCode({
start_comment: 'start-test',
end_comment: 'end-test'
}))
//combine all separatefiles into one
.pipe(concatenate('mimic.min.js'))
//minify and mangle
.pipe(uglify())
.pipe(sourcemaps.write('maps'))
.pipe(gulp.dest('dist/js'));
});
And the file could look like:
var app = (function () {
function somePrivateFunction () {}
function someotherPrivateFunction () {}
var app = {
publicFunction: function(){}
publicVar: publicVar
}
/* start-test */
app.test = {
testableFunction: somePrivateFunction
}
/* end-test */
}());
Everything between the test comments gets stripped out after the tests are run so the production code is clean. Grunt has a version of this and I assume any automated build system can do the same. You can even set a watch task so that it runs the tests on every save. Otherwise you'll have to manually remove the exported test object before deployment.
In the case of Backbone just attach a test object to the module and reference that object in the tests. Or if you really want to separate it, set the object in the global scope. window.testObject = { //list of objects and methods to test... }; and strip that code out before deployment.
Basically what I do is avoid any calls in the library I want to test. So everything is wrapped in a function and exported.
Then I have two other files one is main.js where I do the plumbing and should be tested using integration tests with selenium and tests.js which does unit testing.

Intern functional testing: skip a suite/test

I'm writing some functional tests using Intern/Leadfoot. These tests are end-to-end tests (called also stories) and between them there kind of data dependency. With that I mean that a test (ie. test2) will fail if the previous test (test1) did not complete successfully. So in order to avoid running tests that fail for sure I want to skip them (or part of them). Thus, I wonder if there a way to achieve that.
Consider that all test.js files are like the one below:
define([
"require",
"intern",
"intern!object",
"../../support/executor/executor"],
function(require, intern, registerSuite, Executor) {
var executor;
var steps = [
// set of actions,
// like login, click this button,
// then assert that ....
];
registerSuite(function() {
return {
setup: function() {
executor = new Executor(this.remote, steps.slice(0));
},
"Test 1": function() {
return executor.run();
},
};
});
});
This means that each js file is a suite that contains only one test. In other words, it's like I wanna skip all remaining suites, if a previous one failed.
The Intern docs specify a this.skip method that is available for unit tests (https://theintern.io/docs.html#Intern/4/docs/docs%2Fwriting_tests.md/skipping-tests-at-runtime) which also works for functional/e2e tests.
"skipped test":function(){
this.skip('skipping this');
}
They also specify a grep-regex option for skipping tests via the config (https://theintern.io/docs.html#Intern/4/docs/docs%2Fwriting_tests.md/skipping-tests-at-runtime).

QUnit multiple scripts in one page but no interaction between them

I'm very new to unit testing (this is my first day working with QUnit and I've never worked with anything other testng system before), and I'm a bit unclear on how to test stuff from multiple script files in one QUnit page without letting the scripts interact with each other. What I mean is, say, if I have script1.js, and it calls hello(), and hello() is defined in script2.js, how can I run a unit test on script1.js to make sure it calls hello(), but mock the output of hello() so that it's a true unit test, and then run script2.js's hello().
Basically, how am I supposed to hide one script's global variables and functions from another script in a single QUnit page?
This depends entirely on how the various script files are organized as well as the system as a whole. If you were using Angular, for example, then you are able to inject dependencies when you include a module in another script file. There are tools for mocking out things and "spying" on function calls such as Sinon, but it still depends heavily on how your code is organized.
For the sake of argument, let's say the two files look like so, and we'll ignore the design pattern (although you should seriously be considering that)...
// File A:
window.greeting = function() {
var world = hello();
return 'hello ' + world;
}
// File B:
window.hello = function() {
// possibly lots of code to determine what to return...
var value = 'foobar';
return value;
}
The hello() function could just as easily return any other value based on the state of the system, user input, etc. For our case it doesn't, and what we want to do is mock out File B's code so that we don't have to test what it is doing, just that it gives back a string. We could (and should) do this with a proper mocking/dependency injection library. However, just to give you a sense of the minimal setup you could do, and to see the general approach, here's our QUnit test file:
var _hello;
QUnit.module('File A', {
setup: function() {
_hello = window.hello; // hold onto the old value
// now we mock out hello()
window.hello = function() {
window.hello.called++; // track calls to it
return 'world'; // return our static value
}
window.hello.called = 0;
},
teardown: function() {
// put the old one back
window.hello = _hello || window.hello;
}
});
QUnit.test('Ensure greeting is correct', function(assert) {
var result = greeting();
assert.equal(window.hello.called, 1, 'hello should be called only once');
assert.equal(result, 'hello world', 'The greeting call should be "hello world"');
});
And if you want to see it running, here is a jsfiddle for you. As I said, this is a simple example to show you how you could do this, but you should look into proper code organization (think AMD modules, require, Angular, Ember, things like this) and a proper mocking library.

Categories