We Keep Coding

Angular Material $mdPanel doesn't have a close() method

I am using angular material $mdPanel, i can display it using the open() method but i can't remove it (using close button like the demo). The documentation is not clear about that, the close method doesn't work. Is there any solution for that ?
$mdPanel documentation

When you call $mdPanel.open(), it returns a promise. The call to the promise contains a reference to the created panel. You can call close() on that.
$res = $mdPanel.open(...);
$res.then(function(ref) {
$scope.ref = ref;
})
Later on, to close, call:
$scope.ref.close();

There is no close() method on $mdPanel it is instead a method on the panel reference, which is passed on the first argument to the controller for that panel. So to be able to close the panel you need to pass a controller function in your panel definition similar to below.
Hope this helps!
var config = {
...,
controller: PanelController,
controllerAs: 'panelCtrl',
template: '<div><div>Some content</div><button ng-click="panelCtrl.close()">Close</button></div>',
...
};
function PanelController(panelRef) {
this.close = function () {
panelRef && panelRef.close();
};
}

You can inject the mdPanelRef inside a controller and then call mdPanelRef.close()
var config = {
...,
controller: PanelController
};
function PanelController(mdPanelRef) {
this.close = function () {
mdPanelRef.close();
};
}

$uibModal: get instance from method

I'm using modals via method, like:
this.showModal = function () {
return $uibModal.open({...});
}
and then in some method i call this function:
this.showModal().result.then(function (someResult) {...});
but how can i use dismiss, using method call?
becouse i use it without method, i can close my modal so:
$uibModal.open({...}).result.then(function (someResult) {
this.$dismiss();
})
but i have no clue, how to use dismiss, when i use methods promise...
maybe somebody have an idea?

The open method returns a modal instance with open, closed,dismiss ,close,rendered ,returned method.
In your case it is this.showModal is modal instance.
SO, you can call the close the method like this.
var self = this;
self.showModal = function () {
return $uibModal.open({...});
}
//close the modal
self.showModal.close();

You could store the modal in an object, either in the scope or move this to a service, and then call dismiss on the modal object
var modalInstance;
this.showModal = function () {
modalInstance = $uibModal.open({...});
return modalInstance;
}
and when using the promise
this.showModal().result.then(function (someResult) {
modalInstance.dismiss('cancel');
});

What I usually do is making a modal instance :
$scope.doSomething = function(){
var modalOptions = {...};
openModal(modalOptions);
}
function openModal(modalOptions) {
$scope.myModalInstance = $uibModal.open(modalOptions);
$scope.myModalInstance.result.then(function () {
//success callback
}, function () {
//error callback;
});
}
Later if i want to call close or dismiss simply call $scope.myModalInstance.close() and $scope.myModalInstance.dismiss('cancel').

Karma-Jasmine: How to properly spy on a Modal?

THE SITUATION:
I am unit testing my Angular / Ionic app.
I am having troubles with the modal.
At the moment i can test that the modal has been called. That's all so far. I cannot test the proper show() and hide() method of the modal.
I am getting the following errors:
TypeError: $scope.modal_login.show is not a function
Error: show() method does not exist
TypeError: $scope.modal_login.hide is not a function
Error: hide() method does not exist
I think it depends entirely on the spy. I don't know how to properly spy on the modal, and i think that once that is done, everything will work fine.
THE CODE:
The controller:
$scope.open_login_modal = function()
{
var temp = $ionicModal.fromTemplateUrl('templates/login.html',{scope: $scope});
temp.then(function(modal) {
$scope.modal_login = modal;
$scope.modal_login.show();
$scope.for_test_only = true;
});
};
$scope.close_login_modal = function()
{
$scope.modal_login.hide();
};
Note: the code of open_login_modal function has been refactored to facilitate the test. The original code was:
$scope.open_login_modal = function()
{
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal_login = modal;
$scope.modal_login.show();
});
};
The test:
describe('App tests', function()
{
beforeEach(module('my_app.controllers'));
function fakeTemplate()
{
return {
then: function(modal){
$scope.modal_login = modal;
}
}
}
beforeEach(inject(function(_$controller_, _$rootScope_)
{
$controller = _$controller_;
$rootScope = _$rootScope_;
$scope = _$rootScope_.$new();
$ionicModal =
{
fromTemplateUrl: jasmine.createSpy('$ionicModal.fromTemplateUrl').and.callFake(fakeTemplate)
};
var controller = $controller('MainCtrl', { $scope: $scope, $rootScope: $rootScope, $ionicModal: $ionicModal });
}));
describe('Modal tests', function()
{
beforeEach(function()
{
$scope.open_login_modal();
spyOn($scope.modal_login, 'show'); // NOT WORKING
spyOn($scope.modal_login, 'hide'); // NOT WORKING
});
it('should open login modal', function()
{
expect($ionicModal.fromTemplateUrl).toHaveBeenCalled(); // OK
expect($ionicModal.fromTemplateUrl.calls.count()).toBe(1); // OK
expect($scope.modal_login.show()).toHaveBeenCalled(); // NOT PASS
expect($scope.for_test_only).toEqual(true); // NOT PASS
});
it('should close login modal', function()
{
$scope.close_login_modal();
expect($scope.modal_login.hide()).toHaveBeenCalled(); // NOT PASS
});
});
});
As you can see from the code $scope.for_test_only it should be equal to true but is not recognized. I get this error message instead:
Expected undefined to equal true.
The same happens to the show() and hide() method. They are not seen by the test.
And i think because they are not declared in the spy.
THE QUESTION:
How can i properly spy on a modal?
Thank you very much!

The question here could be extrapolated to how to properly spy on a promise. You are very much on the right track here.
However, if you want to test that whatever your callback to the success of the promise is called, you have to execute two steps:
Mock the service (in your case $ionicModal) and return some fake function
In that fake function, execute the callback that is passed to you by the production code.
Here is an illustration:
//create a mock of the service (step 1)
var $ionicModal = jasmine.createSpyObj('$ionicModal', ['fromTemplateUrl']);
//create an example response which just calls your callback (step2)
var successCallback = {
then: function(callback){
callback.apply(arguments);
}
};
$ionicModal.fromTemplateUrl.and.returnValue(successCallback);
Of course, you can always use $q if you don't want to be maintaining the promise on your own:
//in your beforeeach
var $ionicModal = jasmine.createSpyObj('$ionicModal', ['fromTemplateUrl']);
//create a mock of the modal you gonna pass and resolve at your fake resolve
var modalMock = jasmine.createSpyObj('modal', ['show', 'hide']);
$ionicModal.fromTemplateUrl.and.callFake(function(){
return $q.when(modalMock);
});
//in your test
//call scope $digest to trigger the angular digest/apply lifecycle
$scope.$digest();
//expect stuff to happen
expect(modalMock.show).toHaveBeenCalled();

How do you mock an angularjs $resource factory

I have a resource factory
angular.module('mean.clusters').factory('Clusters', ['$resource',
function($resource) {
return $resource('clusters/:clusterId/:action', {
clusterId: '#_id'
}, {
update: {method: 'PUT'},
status: {method: 'GET', params: {action:'status'}}
});
}]);
and a controller
angular.module('mean.clusters').controller('ClustersController', ['$scope',
'$location', 'Clusters',
function ($scope, $location, Clusters) {
$scope.create = function () {
var cluster = new Clusters();
cluster.$save(function (response) {
$location.path('clusters/' + response._id);
});
};
$scope.update = function () {
var cluster = $scope.cluster;
cluster.$update(function () {
$location.path('clusters/' + cluster._id);
});
};
$scope.find = function () {
Clusters.query(function (clusters) {
$scope.clusters = clusters;
});
};
}]);
I am writing my unit tests and every example I find is using some form of $httpBackend.expect to mock the response from the server, and I can do that just fine.
My problems is, when unit testing my controller functions I would like to mock the Clusters object. If I'm using $httpBackend.expect, and I introduce a bug in my factory every unit test in my controller will fail.
I would like to have my test of $scope.create test only $scope.create and not also my factory code.
I've tried adding a provider in the beforeEach(module('mean', function ($provide) { part of my tests but I cant seem to get it right.
I also tried
clusterSpy = function (properties){
for(var k in properties)
this[k]=properties[k];
};
clusterSpy.$save = jasmine.createSpy().and.callFake(function (cb) {
cb({_id: '1'});
});
and setting Clusters = clusterSpy; in the before(inject but in the create function, the spy gets lost with
Error: Expected a spy, but got Function.
I have been able to get a spy object to work for the cluster.$update type calls but then it fails at var cluster = new Clusters(); with a 'not a function' error.
I can create a function that works for var cluster = new Clusters(); but then fails for the cluster.$update type calls.
I'm probably mixing terms here but, is there a proper way to mock Clusters with spies on the functions or is there a good reason to just go with $httpBackend.expect?

Looks like I was close a few times but I think I have it figured out now.
The solution was the 'I also tried' part above but I was not returning the spy object from the function.
This works, it can be placed in either the beforeEach(module( or beforeEach(inject sections
Step 1: create the spy object with any functions you want to test and assign it to a variable that's accessible to your tests.
Step 2: make a function that returns the spy object.
Step 3: copy the properties of the spy object to the new function.
clusterSpy = jasmine.createSpyObj('Clusters', ['$save', 'update', 'status']);
clusterSpyFunc = function () {
return clusterSpy
};
for(var k in clusterSpy){
clusterSpyFunc[k]=clusterSpy[k];
}
Step 4: add it to the $controller in the beforeEach(inject section.
ClustersController = $controller('ClustersController', {
$scope: scope,
Clusters: clusterSpyFunc
});
inside your tests you can still add functionality to the methods using
clusterSpy.$save.and.callFake(function (cb) {
cb({_id: '1'});
});
then to check the spy values
expect(clusterSpy.$save).toHaveBeenCalled();
This solves both problems of new Clusters() and Clusters.query not being a function. And now I can unit test my controller with out a dependency on the resource factory.

Another way to mock the Clusters service is this:
describe('Cluster Controller', function() {
var location, scope, controller, MockClusters, passPromise, q;
var cluster = {_id : '1'};
beforeEach(function(){
// since we are outside of angular.js framework,
// we inject the angujar.js services that we need later on
inject(function($rootScope, $controller, $q) {
scope = $rootScope.$new();
controller = $controller;
q = $q;
});
// let's mock the location service
location = {path: jasmine.createSpy('path')};
// let's mock the Clusters service
var MockClusters = function(){};
// since MockClusters is a function object (not literal object)
// we'll need to use the "prototype" property
// for adding methods to the object
MockClusters.prototype.$save = function(success, error) {
var deferred = q.defer();
var promise = deferred.promise;
// since the Clusters controller expect the result to be
// sent back as a callback, we register the success and
// error callbacks with the promise
promise.then(success, error);
// conditionally resolve the promise so we can test
// both paths
if(passPromise){
deferred.resolve(cluster);
} else {
deferred.reject();
}
}
// import the module containing the Clusters controller
module('mean.clusters')
// create an instance of the controller we unit test
// using the services we mocked (except scope)
controller('ClustersController', {
$scope: scope,
$location: location,
Clusters: MockClusters
});
it('save completes successfully', function() {
passPromise = true;
scope.save();
// since MockClusters.$save contains a promise (e.g. an async call)
// we tell angular to process this async call before we can validate
// the response
scope.$apply();
// we can call "toHaveBeenCalledWith" since we mocked "location.path" as a spy
expect(location.path).toHaveBeenCalledWith('clusters/' + cluster._id););
});
it('save doesn''t complete successfully', function() {
passPromise = false;
scope.save();
// since MockClusters.$save contains a promise (e.g. an async call)
// we tell angular to process this async call before we can validate
// the response
scope.$apply();
expect(location.path).toHaveBeenCalledWith('/error'););
});
});
});

AngularJS two way binding now work with websockets [duplicate]

Updating the model property has no effect on the view when updating the model in event callback, any ideas to fix this?
This is my service:
angular.service('Channel', function() {
var channel = null;
return {
init: function(channelId, clientId) {
var that = this;
channel = new goog.appengine.Channel(channelId);
var socket = channel.open();
socket.onmessage = function(msg) {
var args = eval(msg.data);
that.publish(args[0], args[1]);
};
}
};
});
publish() function was added dynamically in the controller.
Controller:
App.Controllers.ParticipantsController = function($xhr, $channel) {
var self = this;
self.participants = [];
// here publish function is added to service
mediator.installTo($channel);
// subscribe was also added with publish
$channel.subscribe('+p', function(name) {
self.add(name);
});
self.add = function(name) {
self.participants.push({ name: name });
}
};
App.Controllers.ParticipantsController.$inject = ['$xhr', 'Channel'];
View:
<div ng:controller="App.Controllers.ParticipantsController">
<ul>
<li ng:repeat="participant in participants"><label ng:bind="participant.name"></label></li>
</ul>
<button ng:click="add('test')">add</button>
</div>
So the problem is that clicking the button updates the view properly, but when I get the message from the Channel nothings happens, even the add() function is called

You are missing $scope.$apply().
Whenever you touch anything from outside of the Angular world, you need to call $apply, to notify Angular. That might be from:
xhr callback (handled by $http service)
setTimeout callback (handled by $defer service)
DOM Event callback (handled by directives)
In your case, do something like this:
// inject $rootScope and do $apply on it
angular.service('Channel', function($rootScope) {
// ...
return {
init: function(channelId, clientId) {
// ...
socket.onmessage = function(msg) {
$rootScope.$apply(function() {
that.publish(args[0], args[1]);
});
};
}
};
});