I am writing some end-to-end tests with Protractor for and Angular app. I am currently trying to mock some http responses using angular-mock and am running into a problem with scoping that I don't understand.
var protractor = require('protractor');
var ngMockE2E = require('ng-mock-e2e');
var testData = require('./e2e-data.json');
describe('DataEater', function() {
var $httpBackend = ngMockE2E.$httpBackend;
var appUrl = browser.baseUrl + 'scheduler/data-eater/';
var self = this;
self.testData2 = require('./e2e-data.json');
beforeEach(function() {
browser.get(appUrl);
ngMockE2E.addMockModule();
ngMockE2E.addAsDependencyForModule('dataEater');
$httpBackend.when('GET', '/scheduler/tasks/queue/')
.respond(function(method, url, data) {
console.log(testData);
console.log(self.testData2);
return [200, self.testData.history, {}];
});
Why are neither testData or testData2 defined? How can I get this data scoped properly so that I can return it as part of the response?
The problem might be that you need to explicitly pass the $scope to your controller. Try something like the following code:
beforeEach(
inject(function (_$controller_, _$rootScope_) {
myController = _$controller_('myControllerName', {
$scope: _$rootScope_.$new()
});
})
);
Related
I am attempting to simply throw some JSON data onto a page from a GET call.
This is my HTML (Please be aware this is loaded into index.html which has the correct angular notation):
<h1>Downloads</h1>
<div class="container" ng-controller="DownloadCtrl as download">
<p>{{download.routes}}</p>
</div>
This is the download controller:
(function(){
'use strict';
angular.module('dashboardApp').controller('DownloadCtrl', DownloadCtrl);
DownloadCtrl.$inject= ['DownloadService'];
function DownloadCtrl(DownloadService){
var self = this;
self.routes = function(){
DownloadService.getRoutes()
.then(function(responseData) {
self.routes = responseData;
});
};
};
})();
This is the download service:
(function(){
'use strict';
angular.module('dashboardApp')
.factory('DownloadService', DownloadService);
DownloadService.$inject = ['$http', '$sessionStorage'];
var baseURL = 'http://localhost:8080/Dashboard/rest/download/';
function DownloadService ($http, $sessionStorage){
var service = {};
service.getRoutes = getRoutes;
return service;
function getRoutes(){
return $http.get(baseURL+"route",$sessionStorage.sessionData.sessionID);
}
}
})();
I have debugged the application and it does hit self.routes however it just skips over it and no data is displayed.
I also am not receiving any errors in the console. It just skips over the function.
This is my first AngularJS application.
Your code is bad organized,
the error resides in the view, because it is not calling the method self.routes, it is just printing out...
your view must do something like that:
<p>{{download.routes()}}</p>
But, this is a bad way to code...
Please, consider doing something like that:
DownloadService
.getRoutes()
.then(function(responseData){
self.routes = responseData;
})
;
// instead of
self.routes = function(){
DownloadService.getRoutes()
.then(function(responseData){
self.routes = responseData;
});
};
I am trying to create a user profile page. Where User can display and edit their information.
This is my Controller.js
var userProfileControllers = angular.module("userProfileControllers", []);
userProfileControllers.controller ('userProfileCtrl', ['$scope', '$location', 'localCache', 'customersignup', function ($scope, $location, localCache, customersignup){
var submitProfile = function() {
//Bind Scope
//
var bindScope = function () {
$scope.userProfile = customersignup.userProfile;
};
var asyncBindScope = function() {
$scope.$evalAsync(bindScope());
};
bindScope ();
}}]);
This is my service.js
var userProfileServices = angular.module("userProfileServices", []);
userProfileServices.factory("customersignup", function() {
return {
userProfile: {fname: "kunal"},
updateProfile: function() {
var userProfile = this.userProfile;
},
}
});
In the HTML, let's say in case of first name I have included ng-model="userProfile.fname" in the input of First Name field. Now, when I am loading the html page, I am getting this error :-
https://docs.angularjs.org/error/$injector/unpr?p0=localCacheProvider%20%3C-%20localCache%20%3C-%20userProfileCtrl
Please check the above link, it is from AngularJS official site.
check you have two modules one is for service and other one is for controller, and note that there is no glue between these two modules, to work this you need to glue these two modules, to do that, import the service module in to controller module as below.
var userProfileControllers = angular.module("userProfileControllers", ['userProfileServices']);
then module userProfileControllers have access to module userProfileServices which service is defined. Other vice you don't have access to service module userProfileServices.
You have to add factory name in controller userProfileServices
I use AngularJS 1.2.16 with Jasmine 2.X for my javascript specs.
But they quickly turned messy. I am having a hard time finding information on how to refactor and structure the specs.
Here are some bad specs of mine:
channel = mockRestangular = $httpBackend = deferred = undefined
channel_id = {...}
beforeEach ->
module("channels", ($provide) ->
mockRestangular = {
configuration: { baseUrl: "" }
one: ->
this
post: ->
this
put: ->
this
...
}
module ($provide) ->
$provide.value('Restangular', mockRestangular)
return
)
beforeEach inject((_channel_, $q, $injector) ->
channel = _channel_
$httpBackend = $injector.get('$httpBackend')
deferred = $q.defer()
)
it "spec1", inject(($q, $rootScope) ->
deferred = $q.defer()
spyOn(mockRestangular.one().one(), 'get').and.returnValue(deferred.promise)
spyOn(channel::, 'init').and.stub()
new_channel = new channel(channel_id)
new_channel.updateCount()
deferred.resolve({"channels":[{...long...long...object...}]})
$rootScope.$digest()
expect(new_channel.meta.totalProducts).toEqual(24849)
expect(new_channel.meta.activeProducts).toEqual(1349)
)
it "spec2", inject(($q, $rootScope) ->
deferred = $q.defer()
spyOn(mockRestangular.one().one(), 'get').and.returnValue(deferred.promise)
spyOn(channel::, 'init').and.stub()
new_channel = new channel(channel_id)
new_channel.updateStatisticsRevenue()
deferred.resolve({"revenue_statistics":[{...another...very...very...long...object...}]})
$rootScope.$digest()
expect(new_channel.statistics.revenue).toEqual([{...kinda...long...object...result...}])
)
# spec with real respond-mock objects
describe "describtor2", ->
it "spec3", inject(($rootScope) ->
$httpBackend.expectPUT().respond(201,
{products:[{"sku":"10413161","active":false,"min_price":{"fractional":400,"currency":"EUR"},"max_price":{"fractional":950,"currency":"EUR"}},{"sku":"10413162","active":true,"min_price":{"fractional":458,"currency":"EUR"},"max_price":{"fractional":799,"currency":"EUR"}}]})
spyOn(mockRestangular.one().one(), 'get').and.returnValue(deferred.promise)
spyOn(channel::, 'init').and.stub()
new_channel = new channel channel_id
new_channel.updateProducts()
new_channel.getMeta().activeProducts = 2
expect(mockRestangular.one().one().get).toHaveBeenCalled
deferred.resolve({"products":[{"sku":"10413161","active":true,"min_price":{"fractional":412,"currency":"EUR"},"max_price":{"fractional":890,"currency":"EUR"}},{"sku":"10413162","active":true,"min_price":{"fractional":448,"currency":"EUR"},"max_price":{"fractional":799,"currency":"EUR"}}]}
)
$rootScope.$digest()
new_channel.updateProduct([{sku:"10413161",active:false,min_price:{fractional:400,currency:"EUR"},max_price:{fractional:950,currency:"EUR"}},{"sku":"10413162","active":true,"min_price":{"fractional":458,"currency":"EUR"},"max_price":{"fractional":799,"currency":"EUR"}}])
$httpBackend.flush()
expect(new_channel.getProducts()).toEqual(
[{"sku":"10413161","active":false,"min_price":{"fractional":400,"currency":"EUR"},"max_price":{"fractional":950,"currency":"EUR"}},{"sku":"10413162","active":true,"min_price":{"fractional":458,"currency":"EUR"},"max_price":{"fractional":799,"currency":"EUR"}}]
)
expect(new_channel.getMeta().activeProducts).toBe(1)
)
Because they are so long with all the objects in them I even start to put more "expects" into a single spec. I know that's wrong, but I am afraid of those huge specs.
Are there any best practices for structuring or refactoring Jasmine specs?
Use BeforeEach to put some initial common code of each spec, for instance, you could put those lines:
deferred = $q.defer()
spyOn(mockRestangular.one().one(), 'get').and.returnValue(deferred.promise)
spyOn(channel::, 'init').and.stub()
new_channel = new channel(channel_id)
in a BeforeEach, associated to the concerned describe.
beforeEach(function() {
deferred = $q.defer();
spyOn(mockRestangular.one().one(), 'get').and.returnValue(deferred.promise);
spyOn(channel::, 'init').and.stub();
new_channel = new channel(channel_id);
});
Other alternative: create some basic javascript function to gather common code.
The advantage would be that you could name those portions of code:
function mockDBGet() {
deferred = $q.defer();
spyOn(mockRestangular.one().one(), 'get').and.returnValue(deferred.promise);
}
function initChannel() {
spyOn(channel::, 'init').and.stub();
new_channel = new channel(channel_id);
}
//.......
it('myCurrentSpec', function(){
mockDBGet();
initChannel(); far more clean than your previous version
});
I'm going through some of the examples online for AngularJS to try to understand how it works. I'm trying to use jasmine to test like in the examples. In my spec file, I have:
var Person = function (name, $log) {
this.eat = function (food) {
$log.info(name + " is eating delicious " + food);
};
this.beHungry = function (reason) {
$log.warn(name + " hungry " + reason);
};
};
var bob = new Person();
describe("describe", function () {
it("$q", function () {
var pizzaOrderFulfillment = $q.defer();
var pizzaDelivered = pizzaOrderFulfillment.promise;
pizzaDelivered.then(bob.eat, bob.beHungry);
pizzaOrderFulfillment.resolve("resolved");
$rootScope.$digest();
expect($log.TypeInfo.logs).toContain(["resolved"]);
});
});
I get
ReferenceError: $q is not defined
Am I using Jasmine correctly? I basically am just writing all my angular and jasmine code in the spec.js file. When I had the angular code in another file, my spec.js file couldn't find it. Probably because I didn't set any dependencies up on what gets loaded first since I'm just starting out with this stuff.
Edit, fixed the $ to be $q and the referencerror.
I guess you are not injecting the $q service in your unit test.
For example in your beforeEach block you can inject it:
var q;
beforeEach(inject(function($q) {
q = $q;
}));
And then in your unit test:
describe("describe", function () {
it("$q", function () {
var pizzaOrderFulfillment = q.defer();
var pizzaDelivered = pizzaOrderFulfillment.promise;
pizzaDelivered.then(bob.eat, bob.beHungry);
pizzaOrderFulfillment.resolve("resolved");
$rootScope.$digest();
expect($log.TypeInfo.logs).toContain(["resolved"]);
});
});
In my jasmine test suite I want to navigate my router to the right state. Something like this:
describe("The Router", function(){
beforeEach(function(){
router = App.Router.create();
router.transitionTo('foo.bar');
}
});
but if I do so, I get an Cannot call method 'disconnectOutlet' of undefined error. That happens cuz I am calling
bar: Ember.Route.extend({
connectOutlets: function(router, context){
router.get('applicationController').connectOutlet('bla', 'blub');
}
}),
at this router transition. I tried somehow to init my applicationController like
applicationController = App.ApplicationController.create();
but it doesnt change the error. So how can I mock to be in the right router state?
How are you testing this with jasmine today? Are you going to the browse with each change or trying to run it from the command line with something like jasmine-phantom-node / jasmine-node?
One example might look something like the below. In the setup below I'm testing a view but the same mocking / spying ideas apply to the router example you have above.
require('static/script/vendor/filtersortpage.js');
require('static/script/app/person.js');
describe ("PersonApp.PersonView Tests", function(){
var sut, router, controller;
beforeEach(function(){
sut = PersonApp.PersonView.create();
router = new Object({send:function(){}});
controller = PersonApp.PersonController.create({});
controller.set("target", router);
sut.set("controller", controller);
});
it ("does not invoke send on router when username does not exist", function(){
var event = {'context': {'username':'', 'set': function(){}}};
var sendSpy = spyOn(router, 'send');
sut.addPerson(event);
expect(sendSpy).not.toHaveBeenCalledWith('addPerson', jasmine.any(String));
});
it ("invokes send on router with username when exists", function(){
var event = {'context': {'username':'foo', 'set': function(){}}};
var sendSpy = spyOn(router, 'send');
sut.addPerson(event);
expect(sendSpy).toHaveBeenCalledWith('addPerson', 'foo');
});
it ("does not invoke set context when username does not exist", function(){
var event = {'context': {'username':'', 'set': function(){}}};
var setSpy = spyOn(event.context, 'set');
sut.addPerson(event);
expect(setSpy).not.toHaveBeenCalledWith('username', jasmine.any(String));
});
it ("invokes set context to empty string when username exists", function(){
var event = {'context': {'username':'foo', 'set': function(){}}};
var setSpy = spyOn(event.context, 'set');
sut.addPerson(event);
expect(setSpy).toHaveBeenCalledWith('username', '');
});
});
Here is the jasmine test above in a real project if you want to see it with some context
Here is the view under test (to help make sense of the above jasmine tests)
PersonApp.PersonView = Ember.View.extend({
templateName: 'person',
addPerson: function(event) {
var username = event.context.username;
if (username) {
this.get('controller.target').send('addPerson', username);
event.context.set('username', '');
}
}
});