I'm very new to Javascript and Protractor. Still trying to get my head around simple syntax so forgive me if I'm way off base here.
So our angular app, has a module with a factory that generates toast messages. I'd like to disable all toast messages during my E2E testing. We have a function within the factory to disable toasts. Here's some simplified code.
//the module
var module = angular.module('toast',[]);
//the factory
module.factory('tf',[function tf(){
//factory code
//the function within the module's factory
moduleFactory.enable = function(enable){
isEnabled = enable;
};
}]);
My question is, can I access that function in protractor to turn that to false?
I've been searching around and it seems that mocking is how to do it. Something similar to how you disable angular animations.
// Disable animations so e2e tests run more quickly
var disableNgAnimate = function() {
angular.module('disableNgAnimate', []).run(['$animate', function($animate) {
$animate.enabled(false);
}]);
};
browser.addMockModule('disableNgAnimate', disableNgAnimate);
However, I'm struggling with the syntax on accessing the factory's function within the module...Any help would be appreciated.
I believe I've found the solution for anyone else that may have a similar issue.
Using the executeScript function of protractor.
browser.executeScript(function()
{
return angular.element(document).injector().get('toastFactory').enableToasts(false);
});
Related
We have a project (angular) and some unittests for it (jasmine+sinon), which when minified creates some issues. For the actual code, we've solved these problems by injecting using the staticly typed string array, e.g. ['locationService', 'etcService'].
Unfortunately for the unittests, the minification has some more problems to solve. As an example:
module(function($provide){
$provide.service('etc..',...);
}
Code above immediately becomes unusuable since the provider variable gets renamed to something like 'a'. I've tried to tweak it a bit wrapping the function with something like below:
function injectTest($provide){
// do the same stuff
}
injectTest.$inject = ['$provide'];
which was a recommended solution in some other online posts. The problem is with modules this really doesn't work. I've tried both:
module(angular.injector().invoke(injectTest)); // which results in 'Unknown provider: $provideProvider <- $provide
and
module(injectTest); // which results in 'Unknown provider: nProvider <- n'
Is there any way to inject the $provider into a module without breaking on minification?
Inline injection :
var myFN = ['$provide', function($provide){
// do stuff
}]
Now if you want to bind a function to a 3rd party library where you need service let's say in my sample your function need the service CRUDService and receive a params objects from the 3rd party :
var myFN = ['CRUDService', function(CRUDService){
// do some init stuff
// you can either make it a singleton by sotrng the function and return the reference or either return new function on each call
return function(params){
// do stuff
};
}] ;
// now to bind it to your 3rd party
objectFor3rdParty = {fn:$injector.invoke(myFN)};
I use only inline injection instead of $inject, matter of taste i guess.
I'm already some time in the development using AngularJS, and what I do write works, but know I've come to a point where I would like to run unit tests on my AngularJS code.
I have created a very simple service that will inject a stylesheet onto the page,
see the example code below:
var OfficeSuiteStylesheetInjectorModule = angular.module('OfficeSuiteStylesheetInjectorModule', []);
OfficeSuiteStylesheetInjectorModule.factory('stylesheetInjectorService', ['$q', function($q) {
// Returns the service itself.
return {
inject: function(id, uri) {
var deferred = $q.defer();
// Embed the stylesheet into the page, but only when it's non-existing.
if (!angular.element('#' + id).length) {
var link = StylesheetFactory.Create(id, uri);
{
link.onload = deferred.resolve;
angular.element('head').append(link);
}
return deferred.promise;
}
}
}
}]);
It's not a big service, it's just dependend on $q for promises so that I can run additional logic when the stylesheet has been embedded in the page.
Now, I'm using Jasmine (I'm quite new to this) for testing my JavaScript code and I would like to test this module.
I have a skeleton:
// Tests for the angular 'StylesheetInjectorService'.
describe('StylesheetInjectorService', function() {
var stylesheetInjectorService = {};
// This code is executed before every test.
beforeEach(function() {
// Tells jamine that the module we're working on is the 'OfficeSuiteStylesheetInjectorModule'.
angular.module('OfficeSuiteStylesheetInjectorModule');
});
// Ensures that it injects a stylesheet element into the page.
it('Should inject a stylesheet element into the page.', function() {
// How to test here that the stylesheet is injected?
});
});
});
How can I inject te service in the page and ensures that the stylesheet is loaded?
Edit: Loading service now works:
beforeEach(module('OfficeSuiteStylesheetInjectorModule'));
// This code is executed before every test.
beforeEach(function() {
// Inject the required dependencies into the page.
inject(function($injector) {
stylesheetInjectorService = $injector.get('stylesheetInjectorService');
});
});
The same question is still open however. How to test if a stylesheet was embedded in the page?
Any help is highly appreciated.
Kind regards
To write a spec for the attachment of a stylesheet to angular.element('head') I would change the logic a bit to attach it to $document.head.
If you dont want to do that, I would recommend that you change your service into a directive seeing as how injecting a script element, is manipulating the DOM. That way you would kill two birds with one stone, as you would need to inject $compile to test your directive (which would enable you to $compile a custom head element to boot). But this is slightly "over the top" for now.
Implementation:
if (!angular.element('#' + id).length) {
var link = StylesheetFactory.Create(id, uri);
link.onload = deferred.resolve;
$document.head.append(link);
return deferred.promise;
}
}
beforeEach:
/**
* Sorry, this was previously $location which was just
* such a silly mistake.
*/
var $timeout;
beforeEach(function () {
inject(function ($injector) {
$timeout = $injector.get('$timeout');
});
});
it:
it('attaches the stylesheet to $document.head', function () {
styleSheetInjectorService.inject('someId', '/path/to/some/stylesheet');
$timeout.flush(); // flush promises
expect(angular.element($document.head).lastChild[0].nodeName).to.eq('LINK');
});
Something along those lines should get you up and running. Bare in mind that the spec I wrote uses the chai#expect style assertions, and the mocha test framework. Edit the syntax to fit Jasmine if you mean to copy-paste.
I had this doubt a while ago.
To inject your controllers and services into your tests you need to use a tool called Angular Mocks. Here's some official reference about it.
I sugest you use it together with the Karma enviroment.
Here's a great Getting Started tutorial:
https://www.airpair.com/angularjs/posts/unit-testing-angularjs-applications
This other one is for the Ionic Framework, but can still aplly to your case
Hope it can help.
I struggled to title this question but basically I'm just starting off with angular and am using ngMaterial. I have a toast created by using an angular factory
app.factory('notify', ['$mdToast', '$animate', function($mdToast, $animate) {
return {
showToast: function(msg) {
var toast = $mdToast.simple()
.content(msg)
.action('Close')
.highlightAction(false)
.position('top right');
$mdToast.show(toast).then(function() {
//
});
}
}
}]);
This works great if I have a button on the page that activates the toast however I have socket.io running as well with node monitoring redis for updates to pop up that notification. However I can't get it to work as I'm not quite sure how I can call that factory from within here
socket.on('notification.new', function (data) {
//call factory here to show toast
console.log(data);
});
I know if I have it on a controller I can do it by using
angular.element().scope().showToast(data)
But I don't want to create an element just to house the controller to call the function.
What I did to solve this issue is I attached one of the functions inside the controller to the window object. So something like
window.showToast = function(msg) {
var toast = $mdToast.simple()
.content(msg)
.action('Close')
.highlightAction(false)
.position('top right');
$mdToast.show(toast).then(function() {
//
});
Then, from within the socket io listener (or any raw javascript for that matter):
socket.on('notification.new', function (data) {
//call factory here to show toast
window.showToast(data); //or however you'd like
});
And that kind of worked for me. I know this is not the best approach but since this question didn't have any answers at all I thought I'll post a workaround that at least does the job done.
You need to get hold of Angular services to use Angular in a raw Javascript.
Refer to Call Angular JS from legacy code
angular.element(domElement).scope() to get the current scope for the element
angular.element(domElement).injector() to get the current app injector
angular.element(domElement).controller() to get a hold of the ng-controller instance.
In your case use injector service to get hold of your factory.
Update 1
$injector reference
I am having some issues writing some unit tests where i would like to stub out the functionality of the neo4j Thingdom module.
After a few hours of failed attempts i have been searching around the web and the only point of reference i found was a sample project which used to sinon.createStubInstance(neo4j.GraphDatabase); to stub out the entire object. For me, and becuase this seemed to a be a throw away project i wanted a more fine grained approach so i can test that for instance as the Thingdom API outlines when saving a node you create it (non persisted) persist it and then you can index it if you wish which are three calls and could be outlined in multiple specific tests, which i am not sure can be achieved with the createStubInstance setup (i.e. found out if a function was called once).
Example "create node" function (this is just to illustrate the function, i am trying to build it out using the tests)
User.create = function(data, next){
var node = db.createNode(data);
node.save(function(err, node){
next(null,node);
});
};
I am able to stub functions of the top level object (neo4j.GraphDatabase) so this works:
it('should create a node for persistence', function(){
var stub = sinon.stub(neo4j.GraphDatabase.prototype, 'createNode');
User.create({}, res);
stub.calledOnce.should.be.ok;
stub.restore();
});
The issue comes with the next set of test i wish to run which tests if the call to persist the node to the database is called (the node,save) method:
I am not sure if this is possible or it can be achieved but i have tried several variations of the stub and non seem to work (on neo4j.Node, neo4j.Node.prototype) and they all come back with varying errors such as can't wrap undefined etc. and this is probably due to the createNode function generating the node and not my code directly.
Is there something i am glaringly doing wrong, am i missing the trick or can you just not do this? if not what are the best tactics to deal with stuff like this?
A possible solution is to return a stubbed or mocked object, giving you control on what happens after the node is created:
it('should create a node for persistence and call save', function () {
var stubbedNode = {
save: sinon.stub().yields(undefined, stubbedNode)
};
var stub = sinon.stub(neo4j.GraphDatabase.prototype, 'createNode').returns(stubbedNode);
User.create({}, res);
stub.calledOnce.should.be.ok;
stub.restore();
stubbedNode.save.calledOnce.should.be.ok;
});
We couldn't do it directly, the way the module is setup it doesn't work to well with Sinon. What we are doing is simply abstracting the module away and wrapping it in a simple facade/adapter which we are able to stub on our unit tests.
As we are not doing anything bar calling the neo4j module in that class we are integration (and will validate when regression testing) testing that part to make sure we are hitting the neo4j database.
I am writing a web application which uses YUI3 for all it's JS needs. I need functionality such as Tooltips, Tooltips whose content is determined by AJAX queries, Toggle Buttons and so on.
I was not sure who to build an architecture to achieve all this. I have taken the following approach
var Myapp = function(){
this.toggleButton(node,config)
{
YUI().use(....,function(Y){
//code to convert NODE into a toggle button;
});
}
return this;
};
In my application I then just convert all the buttons into toggle buttons by calling
var app = Myapp();
app.toggleButton(Y.all('.toggle-buttons'),{'text1':'TOGGLE_ME','text2':'TOGGLED_ME'});
All this works. But I wanted to know from more experienced developers if there is anything fundamentally wrong with this approach.
Is this a good way to use JavaScript ?
return this;
This is unneccesary since function constructors return this by default.
var app = Myapp();
You forgot to call new Myapp() without the new keyword this will be the window object and you are effectively writing to global scope.
There's a fundamental problem in your code:
var MyApp = function(){
this.toggleButton(node,config)
{
...
You're not defining a function for MyApp. Instead, you try to invoke toggleButton each time you instantiate it. It should fail because the function is undefined
In your case, Class definition and instantiation is not needed because MyApp is being used as a utility.
You can define MyApp as a static Object:
var MyApp = {
toggleButton: function toggleButton() {
// your code
}
};
And you can use it anywhere by:
MyApp.toggleButton();