I prefer unit testing in the browser because I enjoy the legible formatting of testing frameworks like mocha.
Is there an easy way run add-on sdk unit tests in the browser?
Edit: I'm not looking to do regression testing. With mocha, for example, I can create an HTML page like this:
<head>
<title>Tests</title>
<link rel="stylesheet" href="mocha.css" />
</head>
<body>
<script src="mocha.js"></script>
<script src="chai.js"></script>
<script src="main-content.js"></script>
<script>mocha.setup('bdd')</script>
<script src="main-content-test.js"></script>
<script>
mocha.run();
</script>
</body>
The output looks like the picture I linked to above. This is what I mean by unit testing in the browser.
Edit 2: I'm trying to unit test my modules (using require("sdk/test"), not my content scripts.
There is not a prebuilt way to do this, it would require a little jerry-rigging.
All that you need in addition to your page is a page-mod like this:
require('sdk/page-mod').PageMod({
include: require('sdk/self').data.url('testpage.html'),
contentScript: 'unsafeWindow.addon={on: self.port.on, emit: self.port.emit}',
contentScriptWhen: 'start',
onAttach: function(worker) {
worker.port.on('test-1', function() {
worker.port.emit('test-1', {})
});
// ...
}
});
which would listen for test events, perform the test, and emit the results back. Then your test page test code would listen for the test results like so:
function test() {
addon.on('test-1', function(results) {
// loop through results and pass/fail
});
addon.emit('test-1');
}
Related
I'm trying to add unit tests (using qUnit) for my simple SAP UI5 Application. From my understanding the main files you need include:
initialTest.html (where the testing is bootstrapped)
qunit.js (framework library)
qunit.css (framework stylesheet)
test.js (where the unit tests will be written)
target code (the source file that contains the code to be tested)
The problem I'm facing is loading in the desired target code for testing.
I have the following basic file structure
Here is where I need help, how can properly reference the code file in my tests.js? (ie: I want to test the code situated in Main.controller.js)
tests.js
sap.ui.require(["Controller/Main.controller.js"],
function(MyController){
//Quint code
test("hello test", function(assert) {
assert.ok(1 == "1", "Passed!");
});
});
initialTest.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Example</title>
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.15.0.css">
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js">
</script>
<script src="//code.jquery.com/qunit/qunit-1.15.0.js"></script>
<script src="tests.js"></script>
<script src="/Controller/Main.controller.js"></script>
<script>
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
The question does not convey the right problem as I see you are facing issue while trying to refer Controller file of your application and not in the qUnit tests.
Here's how you should refer files
sap.ui.require(
[
"sap/ui/demo/wt/controller/Master", <--- path to your Controller file
],
function (MasterController) {
//refer methods of controller file
//MasterController.methodName
}
You can read more about sap.ui.require here: documentation
Nevertheless, if you are looking at more details on qUnits, you can refer the following documents:
how to setup unit tests
blog on setting unit test
Qunit Fundamentals
Let me know if this helps!
I want to create a unit test for an asynchronous process. I have created a bare-bones mock up of the situation, using a timeout to delay an alert. (The real process will be the loading of a JS file on the fly).
I'm just beginning with Mocha, Chai and Sinon. I've created a folder called vendor alongside my HTML file. This contains the latest versions of mocha.css, mocha.js, chai.js and sinon.js.
The code below works fine if I comment out the setTimeout() call. How should I alter it so that the sinon.assert... calls will wait for the delayed action to occur?
<!DOCTYPE html>
<head>
<title>Delayed alert test</title>
</head>
<body>
<div id="mocha"><p>Index</p></div>
<div id="messages"></div>
<div id="fixtures"></div>
<link rel="stylesheet" type="text/css" href="vendor/mocha.css" />
<script src="vendor/mocha.js"></script>
<script src="vendor/chai.js"></script>
<script src="vendor/sinon.js"></script>
<script>
mocha.setup('bdd')
var spy = sinon.spy(window, 'alert')
describe("Test", function() {
describe("#alert", function() {
it("should show an alert", function(done) {
this.timeout(5000)
setTimeout(function () { // Works if these 2 lines...
alert ("Once")
alert ("Twice")
}, 2000) // are commented out
sinon.assert.called(spy)
sinon.assert.calledTwice(spy)
sinon.assert.calledWithExactly(spy, "Once")
sinon.assert.calledWithExactly(spy, "Twice")
done()
});
});
})
mocha.run();
</script>
</body>
</html>
Your assertions and done() (if the test ever got there) are being called as soon as the timeout is setup.
The test sets a timeout
this.timeout(5000)
Schedules your test to run in 2 seconds, and moves on immediately.
setTimeout(...
Checks an assertion that fails
sinon.assert.called(spy)
Then exits before the setTimeout has a chance to run.
The assertions need to run after the setTimeout has completed and as we are in a browser, the asynchronous assertions need to be captured in a try/catch block so the actual exception can be passed back to mocha via done().
Most asynchronous API's allow you to pass a "callback" function in, which is called after the asynchronous tasks completion which is normally the function you put your assertions/done in.
In your case it's a little more literal...
describe("Test", function() {
describe("#alert", function() {
it("should show an alert", function(done) {
this.timeout(5000)
var stub = sinon.stub(window, 'alert')
var assertion = function(){
try {
sinon.assert.called(stub)
sinon.assert.calledTwice(stub)
sinon.assert.calledWithExactly(stub, "Oce")
sinon.assert.calledWithExactly(stub, "Twice")
done()
} catch ( e ) {
done( e )
}
}
setTimeout(function () {
alert ("Once")
alert ("Twice")
assertion()
}, 2000)
});
});
})
https://jsfiddle.net/6w4p7rxz/
Note, I changed the spy to stub for less clicking. Also use chai! Maybe sinon-chai as well to make things easier to read.
I have some JavaScript that I'm testing with Jasmine. I want to run the tests in the browser window when a user presses "run tests". With Jasmine 1.3, I have successfully set that up as shown in this JSFiddle with this code:
run tests
<script type="text/javascript">
window.jasmineEnv = (function () {
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;
var htmlReporter = new jasmine.HtmlReporter();
jasmineEnv.addReporter(htmlReporter);
jasmineEnv.specFilter = function (spec) {
return htmlReporter.specFilter(spec);
};
return jasmineEnv;
})();
</script>
Jasmine 2.0 offers some new capabilities that I really need. However, I cannot figure out how to get it setup such that the tests run when someone clicks a "run tests" button. I'm using the new boot.js file. However, I'm not having any luck. Can someone please help me migrate that sample from Jasmine 1.3 to Jasmine 2.0?
Thank you
Test cases execution is triggered by below snipped in file boot.js:
window.onload = function() {
if (currentWindowOnload) {
currentWindowOnload();
}
htmlReporter.initialize();
env.execute();
};
Either you can modify this implementation in boot.js file itself to execute under a function call or you can write your custom boot code inspired from actual boot.js.
Can't post this as a comment yet!
Jasmine 2.0 in jsfiddle http://jsfiddle.net/88Xa6/4/ As mentioned by #user3037143 initialization is handled at boot.js.
Ensure the library files are in place:
<script type='text/javascript' src="/libs/jasmine/2.0.0/jasmine.js"></script>
<script type='text/javascript' src="/libs/jasmine/2.0.0/jasmine-html.js"></script>
<link rel="stylesheet" type="text/css" href="/libs/jasmine/2.0.0/jasmine.css">
<!-- Add any custom reporters (Console / Junit / etc) here.
Ensure necessary initialization triggers are set in
boot when adding more reporters. -->
<script type='text/javascript' src="/libs/jasmine/2.0.0/boot.js"></script>
You can either choose to include the spec or have them defined inline:
<script src="spec.js"></script>
or
<script type='text/javascript'>
describe("My Suite", function() {
it("Should be true", function() {
expect(1).toBe(1);
});
});
</script>
I want to test my angular app with Yeoman which use Mocha with Phantom and Chai for assertion.
But when i run any sample test case the test case do not run properly it shows PhantomJs timed out due to missing Mocha run() call.Non angular Cases are working fine in test case.
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Mocha Spec Runner</title>
<link rel="stylesheet" href="lib/mocha/mocha.css">
</head>
<body>
<div id="mocha"></div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="lib/mocha/mocha.js"></script>
<script>mocha.setup('bdd')</script>
<script src="lib/chai.js"></script>
<script>
expect = chai.expect;
assert = chai.assert;
</script>
<script>
function addSum(num1, num2) {
return num1 + num2;
}
</script>
<script>
(function() {
describe('Give it some context', function() {
it('should simulate promise', inject(function ($q, $rootScope) {
assert.notStrictEqual(3, '3', 'no coercion for strict equality');
/* var deferred = $q.defer();
var promise = deferred.promise;
var resolvedValue;
promise.then(function(value) { resolvedValue = value; });
expect(resolvedValue).to.be.undefined;
// Simulate resolving of promise
deferred.resolve(123);
// Note that the 'then' function does not get called synchronously.
// This is because we want the promise API to always be async, whether or not
// it got called synchronously or asynchronously.
expect(resolvedValue).to.be.undefined
// Propagate promise resolution to 'then' functions using $apply().
$rootScope.$apply();
expect(resolvedValue).to.equal(123);*/
}));
});
})();
</script>
<!-- trigger the mocha runner -->
<script src="runner/mocha.js"></script>
</body>
</html>
Have you tried using protractor? It has been developed specifically for testing end to end angularjs apps (by the angularjs team). https://github.com/angular/protractor
It has it's own runner, which you install with:
npm install protractor -g
and then the runner is executed with:
protractor /configfile.cfg
No need for an HTML page to run the tests.
The config file is quite simple (you can see the options in the source code).
With that, you'll have the spec defined as:
// myTest.js
describe('angularjs homepage', function() {
it('should greet the named user', function() {
browser.get('http://www.angularjs.org');
element(by.model('yourName')).sendKeys('Julie');
var greeting = element(by.binding('yourName'));
expect(greeting.getText()).toEqual('Hello Julie!');
});
});
Basically, I'm quite experienced with Mocha (written thousands of unit tests), and I'm quite new to AngularJS (written just my first project).
Now I am wondering how I might unit test all the AngularJS stuff using Mocha.
I know that Mocha runs in the browser, and I have already done this. But how do I structure and setup things?
I guess I need to:
Load AngularJS
Load Mocha
Load my tests
Within each of the tests, I need to load a controller, a service, ... to test. How do I do that? I am not using require.js or something like that, the files are just script files with basically the following content:
angular.controller('fooController', [ '$scope', function ($scope) {
// ...
}]);
How do I reference and instantiate that controller within a test?
The same holds true for services, directives, ...
Do I need to create mocks for $scope, $http & co. for myself, or is there some help?
Please note that I am aware that there is the Karma test runner (formerly known as Testacular), but I do not want to switch my test runner completely.
One way of doing that is to use Angular $injector in your tests:
myModule_test.js
suite('myModule', function(){
setup(function(){
var app = angular.module('myModule', []);
var injector = angular.injector(['myModule', 'ng']);
var service = injector.get('myService');
});
suite('myService', function(){
test('should return correct value', function(){
// perform test with an instance of service here
});
});
});
your html should look similar to this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>myModule tests</title>
<link rel="stylesheet" media="all" href="vendor/mocha.css">
</head>
<body>
<div id="mocha"><p>Index</p></div>
<div id="messages"></div>
<div id="fixtures"></div>
<script src="vendor/mocha.js"></script>
<script src="vendor/chai.js"></script>
<script src="angular.min.js"></script>
<script src="myModule.js"></script>
<script>mocha.setup('tdd')</script>
<script src="myModule_test.js"></script>
<script>mocha.run();</script>
</body>
</html>
If you're creating an angular service that doesn't have any dependencies and isn't necessarily angular specific, you can write your module in an angular-agnostic way, then either write a separate small angular wrapper for it, or test for the presence of angular, and conditionally create a service for it.
Here's an example of an approach that I use to create modules that can be used both in angular, the browser, and node modules, including for mocha tests:
(function(global) {
//define your reusable component
var Cheeseburger = {};
if (typeof angular != 'undefined') {
angular.module('Cheeseburger', [])
.value('Cheeseburger', Cheeseburger);
}
//node module
else if (typeof module != 'undefined' && module.exports) {
module.exports = Cheeseburger
}
//perhaps you'd like to use this with a namespace in the browser
else if (global.YourAppNamespace) {
global.YourAppNamespace.Cheeseburger = Cheeseburger
}
//or maybe you just want it to be global
else {
global.Cheeseburger = Cheeseburger
}
})(this);