I am working on some E2E tests for AngularJS.
I have implemented a $httpBackend ngMockE2E.
This works well, however in some instances HTTP requests are being made before my mocks have been completely set up.
The Mock is set up as:
angular.module('Mock', ['ngMockE2E']).
run(function($httpBackend) {
$httpBackend.whenPOST('/path1').respond({ exampleresponse: 'valid' });
$httpBackend.whenPOST('/path2').respond({ exampleresponse: 'valid' });
And it is used as below:
angular.module('Application', ['FirstDependency', 'Mock', 'ThirdDependency']);
However FirstDependency and ThirdDependency can make HTTP requests which sometimes happen before the Mock .run() block has been executed. This results in request errors.
Am I setting up my mocks correctly? What is the best way to ensure my mocks are loaded in the right order?
This is what the doc says:
Dependencies:
Modules can list other modules as their dependencies.
Depending on a module implies that required module needs to be loaded
before the requiring module is loaded. In other words the
configuration blocks of the required modules execute before the
configuration blocks of the requiring module. The same is true for the
run blocks. Each module can only be loaded once, even if multiple
other modules require it.
However what it doesn't say is that it will first execute the config blocks for all modules (dependencies first) and then it will execute all the other blocks in a row for each module in turn. For an illustration of this take a look at this jsfiddle:
http://jsfiddle.net/9FJnZ/2/
Related
Let's say I have 3 modules:
angular.module('A', [])
angular.module('B', ['A'])
angular.module('C', ['B', 'A'])
In terms of dependency injection, will B and C share the same instance of module A, or will separate instances be injected into each of them?
To summarize your question, answer would be only one instance.
In fact it is this way. Angular app resolves dependencies via injector. Only one injector is created per app. Technically you can have only one ng-app, but you can have multiple apps by using manual bootstrapping, in that case there will be an injector created for each app and those 2 apps will not share any dependencies.
In general case where there is only rootElement bootstrapped as an angular app. It resolves the modules starting the module that has been bootstrapped (starting from the bottom of the dependency chain). Any services/controllers/filters etc registered under that module or any dependent modules under that dependency chain will be bundled together in the injector cache(instantiated lazily when injected) just once. For example say you have a service myService registered under module A. No matter how many places you list A as dependency ultimately only one instance of its constructor will be available, and service being a singleton everyone gets the same singleton instance.
Official Doc:
Modules can list other modules as their dependencies. Depending on a module implies that the required module needs to be loaded before the requiring module is loaded. In other words the configuration blocks of the required modules execute before the configuration blocks of the requiring module. The same is true for the run blocks. Each module can only be loaded once, even if multiple other modules require it.
I didn't understand how work modular depending.
I have 3 modules, they are dependent on each other, as shown in the picture.
"App" module includes "module1" and "module2".
"module2" includes "core" module. There are source on plunker.
angular.module("core", []).factory("HelloWorld", function() {
return function () {
alert('Hello World!')
}
});
angular.module("module1", []).controller("main", function(HelloWorld){
HelloWorld();
});
angular.module("module2", ["core"]);
angular.module("app", ["module1", "module2"]);
If I inject service from module core to module "module1" it is work fine. But "core" module not depend in module "module1". Why it happening?
Since your App module depends on Core module (indirectly through Module 2), the services in Core module are available anywhere inside your App module (including Module 1).
This is because Angular will first load all modules and then start instantiating their components and resolving injected dependencies.
Yet, if you indeed need Core services in Module 1, you should make it dependent on the Core module as well. That way your application won't break if Module 2 is modified at a later time (or removed altogether) and your Module 1 will be more self-contained and reusable (e.g. you could use it with a different application that does not depend on the Core module).
In general, you should not rely on "indirect" dependencies. Each module should explicitly declare its dependencies.
Angular is smart enough to only load a module if it is not already loaded, so there is no overhead.
Quoting from the Developer Guide's section on modules:
Modules can list other modules as their dependencies. Depending on a module implies that required module needs to be loaded before the requiring module is loaded. In other words the configuration blocks of the required modules execute before the configuration blocks of the requiring module. The same is true for the run blocks. Each module can only be loaded once, even if multiple other modules require it.
(emphasis mine)
When setting up a unit test suite for an angular application using Karma/Jasmine, is it recommended to include the js with the app module's config function in the test's files?
I've read that it is suggested to exclude this from testing, however that seems awkward because there's often critical setup that happens in the config function that would prevent the application from working.
What's the best practice around this? Create a mock config function that does the same thing in a 'mocked' manner?
I'm running across this issue myself but want to understand the broader strategy:
How do unit test with angular-translate
In my application, I ended up using the following solution:
Define an "appBase" module with all the config and run functions that I want to run when unit-testing and create another "app" module which declares "appBase" module as a dependency and includes all the config and run functions that I don't what to run when unit-testing. Then all my unit tests use the "appBase" module, while the final application uses the "app" module. In code:
angular.module('appBase', ['dependencies'])
.config(function() {
// This one will run when unit-testing. Can also set-up mock data
// that will later be overridden by the "app" module
});
angular.module('app', ['appBase'])
.config(function() {
// This function will only run in real app, not in unit-tests.
});
I'm using grunt-browserify and running into two issues in particular. The task is up and running successfully with the following config options. The variable jsFilesToConcat represents all of the javascript files for a Backbone.js + Marionette.js application, the main application defintion, the front-end utility assets (e.g. Bootstrap plugins), and all JS associated with the project. Is this the wrong approach? The thought was to load the entire 250k JS application (and all it's dependencies) at one time.
I want to offer the disclaimer that this is new territory for me, so I think my intended use case is available with the options already available with the plugin, but I'm confused by two errors:
1) Backbone not defined - which means that the script is in fact loading, however, when I inspect the call stack in Chrome Dev Tools it shows only the anonymous self-invoking function. So I'm not clear on how to pass the Backbone object to Marionette in order for it to be extended at load time.
2) require is not defined - error on the line where I'm declaring var SampleApp = require('SampleApp'). Do I need to do something special within my grunt config, or node.js server.js config to expose the require function?
3) Is the javascript executing asynchronously within itself, is this part of the browserify intended behavior that I'm not properly handling? I think since I'm wrapping alot of JS utilities in a global wrapper to protect namespacing, that's the reason some functions are not available, but I'm not clear on why that would affect require.
// uses grunt-browserify task
browserify: {
developmentJs: {
options: {
debug: true,
alias: ["./js/app.dev.js:SampleApp"],
},
src: [
'<%= pkg.jsFilesToConcat %>'
],
dest: 'public-dev/js/app.dev.js'
}
}
and then in the index.html of my single-page Marionette app, I have.
(function ($) {
$(document).ready( function() {
var sampleApp = require('SampleApp');
console.log( SampleApp );
});
})(jQuery);
Well for starters, the src attribute in your grunt file doesn't need to reference all of the files in your application. It only needs an entry point. So normally I have something similar to your anonymous self executing function in an index.js file, and set my src configuration option to ["./index.js"]. When browserify looks at that file, it will check for calls to require and grab all of the required dependencies.
That said, browserify will generate a file with an internal definition of require. The require function is not globally available on the page, nor are the dependencies that you include with require. You can use them in your application, but that doesn't make them available in the page. So if you are getting a Backbone is not defined error, the first thing I would check is that you have installed backbone via npm (npm install backbone --save).
Once everything is set up you should just have to include your compiled script on the page, and let your anonymous self executing function (which should now be in a file that grunt-browserify is processing) do the work to kick off your application.
I'm trying to setup my AngularJS application to test out controllers, routes, templates and so on, but I'm having an issue getting some of the helper methods provided by the angular-mocks.js to work (namely module and inject).
I'm using testacular to load up the test suite with the following files added before the specs:
files = [
MOCHA,
MOCHA_ADAPTER,
'../application/lib/angular.min.js',
'./lib/angular/angular-mocks.js',
'./lib/angular/angular-scenario.js',
'../application/application.js',
'./lib/chai.js',
'./lib/chai-should.js',
'./lib/chai-expect.js',
'./spec/**/*.js'
];
So far so good, but when I run the tests I get this issue:
ReferenceError: Can't find variable: module
Not sure where this is loaded. Am I missing something?
First thing to check is that all those files are getting loaded in the test browser. It's surprisingly easy to get a path wrong in your config and not realize it. If you're running testacular with autowatch, you can navigate to http://localhost:9876/context.html with a browser and use developer tools inspect elements/resources/network and see if anything is missing.
If everything is good there and you're still having problems, post some of your test code and I'll take a look.
UPDATE: It appears (strangely) from the comments in the source for angular-mocks.js (line 1635) that window.module is only available with Jasmine. It looks like you're using Mocha instead of Jasmine. This is very likely the culprit.
ANSWER:
I can't rightly take credit for this Matsko, since you figured it out yourself... but it turns out that the current AngularJS stable download and angular-seed contain an older version of ngMock that doesn't support Mocha. Manually replacing the mock file with the latest from the github repo solves the problem. Glad I could help ;-)
I ran into this issue today and I wanted to provide others with a complete summary of the required steps to get this working. First let's say you have a module named myApp. Inside that that module there is a service called myModel. the myModel service has a method named getItems().
Currently, the angular-mocks.js (I am using AngularJS 1.0.6) does not support Mocha. You will need to visit this link and replace the 1.0.6 version with the one in the master branch from the AngularJS GitHub project. An easy way to do this (if you have wget) is wget https://raw.github.com/angular/angular.js/master/src/ngMock/angular-mocks.js in the correct directory. If you use a properly configured Sublime or vim it can also easily pull it down for you.
Make sure your karma.conf.js file includes the angular-mocks.js file in files array
Somewhere in your tests.js file (maybe at the top level describe) include beforeEach(module('myApp')); or whatever you named your main module.
If you plan to use the service (or whatever you want to include in the test) in more than one place you can call another beforeEach where needed like this:
beforeEach(inject(function(myModel) {
mymodel = myModel;
}));
otherwise you just can inject where it is needed. Now the mymodel variable (notice this is the variable you assigned in the beforeEach above) will be available to you for testing in your next blocks. For example, you can now write:
describe('when fetched', function() {
it('should return 3 items', function() {
// console.log(mymodel.getItems());
expect(mymodel.getItems()).to.have.length(3);
});
});