I am trying to test an Ext JS 5.0.1 application with Jasmine 2.3.4. I keep getting the error "Uncaught ReferenceError: describe is not defined". It is as though it is not seeing describe, it, and other global functions. If I switch out the Jasmine files to 1.3, then it does see these global functions. I want to use the newest version of Jasmine and furthermore, I am not sure 1.3 plays well with Ext JS 5. Has anyone else run into this issue? Code snippets below:
specrunner.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Application</title>
<!--Jasmine Files -->
<link rel="stylesheet" type="text/css" href="/app_name/app/js/jasmine/jasmine.css">
<script type="text/javascript" src="/app_name/app/js/jasmine/jasmine.js"></script>
<script type="text/javascript" src="/app_name/app/js/jasmine/jasmine-html.js"></script>
<!-- ExtJS Files -->
<script type="text/javascript" src="//cdn-tst.corporate.com/LNF/4/4.0.1/extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="//cdn-tst.corporate.com/LNF/4/4.0.1/extjs/packages/ext-theme-classic/build/ext-theme-classic.js"></script>
<!-- Jasmine Test Case File -->
<script type="text/javascript" src="/app_name/app/js/spec/AppSpec.js"></script>
<!-- app Test Case File -->
<script type="text/javascript" src="/app_name/app/js/test/app.js"></script>
</head>
<body>
</body>
</html>
app.js (for testing)
Ext.Loader.setConfig ({enabled: true});
// Loading different components like controller, model, view..
Ext.application ({
models: [ 'Trip' ],
stores: [ 'Trips' ],
// views: [ 'simpleTrip' ], Views are throwing an error
autoCreateViewport: false,
name: 'carrier360',
// using the Launch method of Application object to execute the Jasmine Test Cases
launch: function () {
debugger;
var jasmineEnv = jasmine.getEnv ();
jasmineEnv.updateInterval = 1000;
var htmlReporter = new jasmine.HtmlReporter ();
jasmineEnv.addReporter (htmlReporter);
jasmineEnv.execute ();
}
});
AppSpec.js
describe ("ExtJS App Test Suite", function () {
debugger;
beforeEach (function () {
// Initializing the mainPanel
debugger;
tripsStore = Ext.StoreManager.lookup ('Trips');
simpleTrip = Ext.create ('app.view.simpleTrip');
controller = Ext.create ('view.controller.tripController');
});
/* Test if View is created Successfully.*/
it ('View is loaded', function () {
debugger;
expect (simpleTrip != null).toBeTruthy ();
});
/* Test if store is loaded successfully.*/
it ('Store shouldn’t be null', function () {
debugger;
expect (tripsStore != null).toBeTruthy();
});
/* Test controller is initialized successfully.*/
it ('Controller shouldn’t be null', function () {
debugger;
expect (controller != null).toBeTruthy();
});
});
Any suggestions on why describe and other functions are not visible would be appreciated!
Descibre, it, ... are no longuer defined in jasmine.js but instead in the boot.js included with jasmine library.
Related
I'm new to Unit Testing. I have followed the tutorials and I have everything
configured on node.js via npm. I have done some describe and it just to get the feel for ho things are set up and my spec runner is fine. The problem I'm trying to get test on controllers figured out but I run in a snag and been trying to figure things out for a while but I continue to get the same error so I thought I would reach out.
I'm trying to do a simple test on a LoginController but I continue to get the same error. I can't point out what I'm doing wrong. Trying to get over this hurdle.
TypeError: angular.mock.module is not a function:
spec runner index html file.
<!doctype html>
<html>
<head>
<title>Jasmine Spec Runner</title>
<link rel="stylesheet" href="../bower_components/jasmine-core/lib/jasmine-core/jasmine.css">
</head>
<body>
<script src="../My Documents/My Website/AngularLogin-
Registration/js/angular-1.6.0.js"></script>
<script src="../My Documents/My Website/AngularLogin-Registration/js/angular-route-1.6.0.min.js"></script>
<script src="../bower_components/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="../bower_components/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script src="../bower_components/jasmine-core/lib/jasmine-core/boot.js"></script>
<!-- include source files here... -->
<!--<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>-->
<!--<script src="//code.angularjs.org/1.6.0/angular-cookies.min.js"></script>-->
<script src="../My Documents/My Website/AngularLogin-Registration/js/angular-mock.js"></script>
<script src="../My Documents/My Website/AngularLogin-Registration/js/app.js"></script>
<script src="../My Documents/My Website/AngularLogin-Registration/login/login.controller.js"></script>
<!-- include spec files here... -->
<script src="spec/test.js"></script>
Here is my test file.
describe('LoginController test', function () {
beforeEach(angular.mock.module('app'));
beforeEach(angular.mock.inject(function(_$controller_){
$controller = _$controller_;
}));
describe('$scope.grade', function() {
it('sets the strength to "strong" if the password length is >8 chars',
function() {
var $scope = {};
var controller = $controller('LoginController', { $scope: $scope });
$scope.password = 'longerthaneightchars';
$scope.grade();
expect($scope.strength).toEqual('strong');
});
});
});
Thanking You In Advance
PDH
Load angular-mocks library in your spec runner html , make sure to load it after angular.js.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-mocks.js"></script>
You can also use bower to download the js file instead of the CDN.
I got this service
angular.module('common.utils', [])
.service('Timer', function () {
function Timer() {
var start = new Date();
return function () {
return (new Date()).getTime() - start.getTime();
};
}
return Timer;
});
And i'm trying to write a simple test for it:
describe('common.utils', function() {
beforeEach(function () {
module('common.utils');
});
it('has a timer service', inject(function(Timer) {
expect(Timer).not.toBeNull();
}));
});
And I keep getting ReferenceError: inject is not defined.
I included angular.js, angular-mocks.js and all the app files (module is working... ). I don't understand what the problem is...
I had the same problem.
It turns out the issue was in the loading order of the files. You have to load jasmine before you load angular-mocks.
The following loading order will be throwing the error as mentioned in the question:
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-mocks/angular-mocks.js"></script>
<script src="/bower_components/jasmine/lib/jasmine-core/jasmine.js"></script>
<script src="/bower_components/jasmine/lib/jasmine-core/jasmine-html.js"></script>
<script src="/bower_components/jasmine/lib/jasmine-core/boot.js"></script>
<!-- include spec files here... -->
<script src="/spec/test.js"></script>
ReferenceError: inject is not defined
In several jasmine examples there is an additional comment included in the code:
<!-- include source files here... -->
The comment helps us to remind to load things in the right order.
<script src="/bower_components/jasmine/lib/jasmine-core/jasmine.js"></script>
<script src="/bower_components/jasmine/lib/jasmine-core/jasmine-html.js"></script>
<script src="/bower_components/jasmine/lib/jasmine-core/boot.js"></script>
<!-- include source files here... -->
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-mocks/angular-mocks.js"></script>
<!-- include spec files here... -->
<script src="/spec/test.js"></script>
I have a java script file that contains a config object for decoding a lot of business jargon for ease of use in my application.
How can I get that to be available to my angular app? I currently have it included in my html file above all the application files.
here is my config.js:
var config = {
"metadata":[
"8235205241531AF399B113140005492E":{
"name":"verison_number"
}
]
}
here is includes:
<script src="libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-resources/angular-resource.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script src="js/config.js"></script>
<script src="js/viewer.js"></script>
<script src="js/controller.js"></script>
<script src="js/services.js"></script>
<script src="js/routes.js"></script>
<script src="js/app.js"></script>
now here is my controller just trying to do a console.log on it:
var MainCtrl = angular.module('MainCtrl', []);
MainCtrl.controller('loader',['$scope','$rootScope','$http','startApp', function($scope,$rootScope,$http,startApp) {
console.log(config);
console.log('loading course...');
console.log(startApp);
}]);
Your JSON is incorrect.
Here is the correct way for declaring config:
var config = {
"metadata":[
{"8235205241531AF399B113140005492E":"verison_number"}
]}
Working Plunkr
Maybe using the value recipe. For example:
var app = angular.module('MainCtrl');
// later
app.value('myconfigs',config); // set your "object"
// somewhere in your controller code
MainCtrl.controller('loader',['$scope','$rootScope','$http','startApp','myconfigs', function($scope,$rootScope,$http,startApp, myconfig) {
console.log(myconfig.metadata);
console.log('loading course...');
console.log(startApp);
}]);
For the concat block of my Gruntfile.js:
concat: {
options: {
stripBanners: false,
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
production: {
files: {
'./public/js/build/services.js': ['./public/js/services/*.js'],
'./public/js/build/factories.js': ['./public/js/factories/*.js'],
'./public/js/build/controllers.js': ['./public/js/controllers/*.js'],
'./public/js/build/directives.js': ['./public/js/directives/*.js'],
'./public/js/build/filters.js': ['./public/js/filters/*.js'],
'./public/js/build/plugins.js': ['./public/js/plugins/*.js'],
'./public/js/build/modern-angular.js': [
'./public/bower_components/jquery/dist/jquery.js',
'./public/bower_components/angular-stable/angular.js',
'./public/bower_components/angular-sanitize-stable/angular-sanitize.js'
],
'./public/js/build/old-angular.js': [
'./public/bower_components/jquery-1.11/index.js',
'./public/bower_components/angular-unstable/angular.js',
'./public/bower_components/angular-sanitize-unstable/angular-sanitize.js',
'./public/bower_components/html5shiv/dist/html5shiv.js'
],
'./public/js/build/app.js': [
'./public/js/app.js',
'./public/js/build/services.js',
'./public/js/build/factories.js',
'./public/js/build/controllers.js',
'./public/js/build/directives.js',
'./public/js/build/filters.js',
'./public/js/build/plugins.js'
]
}
}
},
As you may be able to tell with my Gruntfile.js, I'm required to support old, outdated browsers, therefor I have to load two different versions of Angular depending on the browser.
Here's my index.ejs:
<!doctype html>
<html lang="en" class="ng-app:idocs" id="ng-app" ng-app="idocs" xmlns:ng="http://angularjs.org">
<head>
<!-- Omitting to prevent bloating -->
<!--[if lte IE 8]>
<script> var olderIE = true; </script>
<![endif]-->
<script>
if (typeof olderIE === 'undefined') {
// User is using a modern browser, they're awesome.
var script = document.createElement('script');
script.setAttribute('src', '/js/build/modern-angular.js');
document.head.appendChild(script);
}
</script>
<!--[if lte IE 8]>
<script src="/js/build/old-angular.js"></script>
<![endif]-->
</head>
<body data-ng-cloak onload="handleTaggerEvent()">
<!-- Again, omitting -->
<% if(nodeEnv == 'production') { %>
<script src="/js/build/app.js"></script>
<% } else { %>
<script src="/js/build/controllers.js"></script>
<script src="/js/build/directives.js"></script>
<script src="/js/build/factories.js"></script>
<script src="/js/build/filters.js"></script>
<script src="/js/build/plugins.js"></script>
<script src="/js/build/templates.js"></script>
<script src="/js/app.js"></script>
<% } %>
<script src="socket.io/socket.io.js"></script>
<script>
var app = {
// Omitting for brevity
};
// Socket.io stuff
</script>
</body>
</html>
Then in the browser I get littered with the following error. Angular appears to load, but after the rest of the angular code:
I think you are getting the error because you are loading the controllers, directives, factories, filters and such before you actually load angular files. You need to load the angular files. Should look something like this:
'./public/js/build/modern-angular.js': [
'./public/bower_components/jquery/dist/jquery.js',
'./public/bower_components/angular-stable/angular.js',
'./public/bower_components/angular-sanitize-stable/angular-sanitize.js'
],
'./public/js/build/services.js': ['./public/js/services/*.js'],
'./public/js/build/factories.js': ['./public/js/factories/*.js'],
'./public/js/build/controllers.js': ['./public/js/controllers/*.js'],
'./public/js/build/directives.js': ['./public/js/directives/*.js'],
'./public/js/build/filters.js': ['./public/js/filters/*.js'],
'./public/js/build/plugins.js': ['./public/js/plugins/*.js'],
This would allow for the angular-stable/angular.js files to load before the other files.Your previous version loads because you load all the files after the angular files a second time. Try removing one of the copies of:
'./public/js/build/app.js': [
'./public/js/app.js',
'./public/js/build/services.js',
'./public/js/build/factories.js',
'./public/js/build/controllers.js',
'./public/js/build/directives.js',
'./public/js/build/filters.js',
'./public/js/build/plugins.js'
]
That should work.
Add this two line before script tab
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
Trying to use Chutzpah with Jasmine to unit test an ExtJS application. Tests are detected and appear in the test explorer in VS 2012. The attached sample passes when running in the browser. However, running it the IDE, my store test fails. Now Ext creates a singleton application object (v 4.1.3) and am creating an application specific namespace that Chutzpah can see but as soon as I attempt to load a controller from the namespace, AppName.app.getController('My.controller.Controller') fails saying its undefined.
app_jasmine.js
Ext.Loader.setConfig({ enabled: true });
Ext.require('Ext.app.Application');
Ext.ns('My');
My.app = this;
Ext.application({
name: 'My',
controllers: ['My'],
init: function () {
My.app = this;
},
launch: function () {
jasmine.getEnv().addReporter(new jasmine.HtmlReporter());
jasmine.getEnv().execute();
}
});
SpecRunner.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/jasmine.css" rel="stylesheet" />
<script type="text/javascript" src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all-debug.js"></script>
<script type="text/javascript" src="Scripts/jasmine.js"></script>
<script type="text/javascript" src="Scripts/jasmine-html.js"></script>
<!-- include specs here -->
<script type="text/javascript" src="tests/specs/MySpecs.spec.js"></script>
<!-- test launcher -->
<script type="text/javascript" src="tests/app_jasmine.js"></script>
</head>
<body>
</body>
</html>
MySpecs.specs.js
/// <reference path="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all-debug.js" />
/// <reference path="../../Scripts/jasmine.js" />
/// <reference path="../app_jasmine.js" />
describe("Store", function () {
var store = null,
ctlr = null;
beforeEach(function () {
if (!ctlr) {
ctlr = My.app.getController('My');
}
if (!store) {
store = ctlr.getStore('My');
}
expect(store).toBeTruthy();
waitsFor(
function () { return !store.isLoading(); },
"load never completed",
4000
);
});
it("should have records", function () {
expect(store.getCount()).toBeGreaterThan(1);
});
});
describe(" Application Test ", function () {
describe(" Assumptions ", function () {
it(" has loaded ExtJS4 library.", function () {
expect(Ext).toBeDefined();
expect(Ext.getVersion()).toBeTruthy();
expect(Ext.getVersion().major).toEqual(4);
});
it(" has loaded application.", function () {
expect(My).toBeDefined();
});
});
});
Now obviously there are two contexts here. The browser and headless as this is the only variance between executions. I would appreciate any ideas.
Have you tried referencing a local copy of ext-all-debug.js?
Perhaps Chutzpah/PhantomJS are failing to access the sencha CDN and therefore ExtJS is not being loaded.
P.S.: I'd suggest you to use Chutzpah specific reference:
/// <chutzpah_reference path="../../Scripts/jasmine.js" />
instead of
/// <reference path="../../Scripts/jasmine.js" />
To avoid possible conflicts with other libraries that also use the reference command. More details here.