AngularJS + Testem + Jasmine: Why is inject() giving this $injectorr error? - javascript

I'm using Testem with Jasmine to set up an environment to start unit testing in my AngularJS app. Everything was working great until the first time I tried to use the injector. This is what I got back:
test.js
describe('Custom events', function(){
beforeEach(module('AlchemyAdmin'));
beforeEach(inject());
it('should work', function() {
});
});
Error console output:
Custom events should work.
✘ Error: [$injector:modulerr] http://errors.angularjs.org/1.2.25/$in
jector/modulerr?p0=AlchemyAdmin&p1=Error%3A%20%5B%24injector%3Amodulerr%
5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2F%24injector%2Fmodulerr
%3Fp0%3DdateRangePicker%26p1%3DError%253A%2520%255B%2524injector%253Amod
ulerr%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.2.25%252F%2
524injector%252Fmodulerr%253Fp0%253Dpasvaz.bindonce%2526p1%253DError%252
53A%252520%25255B%252524injector%25253Anomod%25255D%252520http%25253A%25
252F%25252Ferrors.angularjs.org%25252F1.2.25%25252F%252524injector%25252
Fnomod%25253Fp0%25253Dpasvaz.bindonce%25250A%252520%252520%252520%252520
at%252520Error%252520(native)%25250A%252520%252520%252520%252520at%25252
0http%25253A%25252F%25252Flocalhost%25253A7357%25252Fvendor%25252Fangula
r%25252Fangular.min.js%25253A6%25253A450%25250A%252520%252520%252520%252
520at%252520http%25253A%25252F%25252Flocalhost%25253A7357%25252Fvendor%2
5252Fangular%25252Fangular.min.js%25253A20%25253A494%25250A%252520%25252
0%252520%252520at%252520http%25253A%25252F%25252Flocalhost%25253A7357%25
252Fvendor%25252Fangular%25252Fangular.min.js%25253A21%25253A502%25250A%
252520%252520%252520%252520at%252520http%25253A%25252F%25252Flocalhost%2
5253A7357%25252Fvendor%25252Fangular%25252Fangular.min.js%25253A33%25253
A267%25250A%252520%252520%252520%252520at%252520r%252520(http%25253A%252
52F%25252Flocalhost%25253A7357%25252Fvendor%25252Fangular%25252Fangular.
min.js%25253A7%25253A290)%25250A%252520%252520%252520%252520at%252520e%2
52520(http%25253A%25252F%25252Flocalhost%25253A7357%25252Fvendor%25252Fa
ngular%25252Fangular.min.js%25253A33%25253A207)%25250A%252520%252520%252
520%252520at%252520http%25253A%25252F%25252Flocalhost%25253A7357%25252Fv
endor%25252Fangular%25252Fangular.min.js%25253A33%25253A284%25250A%25252
Seems like there is something obvious I'm missing, but I can't quite grasp it. Note that taking out the line with the beforeEach(inject()); and writing standard tests in the it block works like a charm. Also, if I just declare an angular.module('myApp'); and then try to module() and inject() that, it works fine. Seems like something is going on in my module definition, maybe, but the app itself works fine with no errors from what I can tell!
Anybody run into this or know what I should look into? Thanks in advance!
Edit:
I thought it might make more sense if I gave a little context to my question. I have been developing an Angular app for a few weeks now, and I've been bit one to many times by not having unit tests. Having decided to TDD from here on out, I setup Testem, wrote a .spec.js file and tried to get started. I'm not testing any existing code, which will come later, but just trying to test-drive the part of the app I'm on. Before even writing my first piece of code or test, just setting up the module() and inject() calls per the docs failed miserably. That is where I am right now.

Well, I shouldn't have gotten frustrated with the angular error links. If you keep clicking through them, I eventually found a sub-dependency that I was not linking to! If anyone else finds themselves in this particular pickle, I hope this helps them! I am closing the plunker I made to remove my live code from the public. Special thanks to PSL for responding so quickly and being so willing to try to understand my issue.

Related

Confusing error with AngularJS: Multiple Directive Resource Contention

We are having an odd issue in our angular project. The project runs fine on my machine, but when it's run from the development server we get the following error:
Multiple directives [organizationConfiguration, organizationConfiguration] asking for new/isolated scope on: <organization-configuration ng-show="tab.id == 'organization'" organization="organization">
organizationConfiguration is an AngularJS component. The code that is causing the error is below:
<organization-configuration ng-show="tab.id == 'organization'"
organization="organization">
</organization-configuration>
I can't see anything wrong with the code and have no idea where the second scope is coming from. And like I said, the code runs fine on my local machine, but once Jenkins deploys it to the dev server it starts to break. We've been using Jenkins for years without issue so I doubt it's an issue with that.
Thanks
Did you miss to close the "organization-configuration" tag properly? I could see you give it as "/organization-configuration>" in the example.

Why doesn't angularJS directly give the specific error location, rather than giving a link to their website link which gives some generic explanation?

Why doesn't angularJS directly throw the specific error location(i.e., in which file there is an error or fault), rather than giving a link their website link which gives some generic explanation? It is making debugging a very difficult task!
Whenever there is an error, i can't debug the app easily because I have to go through the complete application and search every line, if it is valid line or not?
You can use console.log() in the module where you are debugging, might make it easier.
Because AngularJS is not being compiled so it can not know its exact location where actual error occurred.
For example Suppose you are defining a module Say 'XYZ' as follows
angular.module('XYZ', []);
Then you are using this as
var app = angular.module('XYZ');
But if you did mistake and do as follows
var app = angular.module('XYZ', []);
AngularJS will think you want to override your previous module. Then angular can not found dependency for the old component which were defined earlier on 'XYZ' module. So angular will tell those component are not defined.
One more point mostly those error happens on angular digest cycle which is not in our code.
Another Example
$scope.$watch('foo', function() {
$scope.foo = $scope.foo + 1;
});
The above code will be executed infinite time because foo is being watch if it is changed, and insde of watch it is again being changed.
But after 10 iteration angular will stop execution and show a link. Because angular does know it is a digest cycle repetition happening. But do not know which part of the code is responsible for that.
Note: Yes, I found angularJS debugging is really little hard, But If
we see the error carefully and try to find out what latest changes we
did last time, then we can found exact problem.

Angular js deployment on web server issue

I've developed my first spa application in Angular js but I've done it on localhost.
Now it's time to test it online. I'm sure that everything works localy but simply I can't make it work online.
It seems to me like controllers are not being loaded although they are linked well.
Routing works because html templates change but THERE ARE NO CONTROLLERS ???.
Here is sample output from console :
First,for every controller in my app I get this (total 5 times) :
Uncaught SyntaxError: Unexpected token <
And after that I get this for controller that is being used right now:
Error: [ng:areq] http://errors.angularjs.org/1.3.5/ng/areq?p0=homeCtrl&p1=not%20aNaNunction%2C%20got%20undefined
at Error (native)
at https://code.angularjs.org/1.3.5/angular.min.js:6:416
For every single controller I get the same error.
I followed rule to inject dependacys (found that on stackowerflow but it doesn't help at all) so my every controller looks like this:
myApp.controller('nearCtrl',
['$scope', 'geolocation', 'nearApartments', 'uiGmapGoogleMapApi',
function ($scope, geolocation, nearApartments, uiGmapGoogleMapApi) {...}])
Does anyone have an idea what could I do to fix this ?
Ok I found the solution,as usual it was trivial and now I feel like I shot myself in leg.
The thing was that I was very stupid and didn't follow good
practices as NAMING CONVENTION from the BEGINING of the
project !
In my index.html file there was an issue because few controllers were named by lowercase like myController.js and their real name on server was different like MyController.js so there's a problem.
I worked with git,merged branches and stuff and probabbly git messed up something with names(explains how it worked on localhost I guess) but that wouldn't happen if I had followed rules from the start.
To every wannabe Angular.js developer like me there are some great design guides and good practices described on link below.
Use them !
https://github.com/mgechev/angularjs-style-guide
Tnx everyone who tried to help me, Angular has really great community.
The trouble is with your server routing. You're serving your whole app instead of the individual JS files. First thing you should do is make sure 188.226.150.65/app/components/about/aboutController.js serves correctly the JS for aboutController.js.
Looking at each of your component folders, it seems all your controller.js files all have the same error:
Error in exception handler: The stream or file "/var/www/html/zimmer-
production/app/storage/logs/laravel.log" could not be opened: failed to open stream:
Permission denied in /var/www/html/zimmer-production/bootstrap/compiled.php:9016
The only controllers that seem to actually have any Javascript are the signup controllers and the apartmentControler. I'd check the permissions in your production environment, as that seems to be the problem.

Bower components and Codekit 2

I have recently been getting into using CodeKit, and now version 2 is out, which is what this question regards. There seems to be great potential in using the bower components installer; however, there is little to no documentation on the working relationship between CodeKit and bower components. My code follows as:
// #codekit-prepend "../bower_components/jquery/dist/jquery.js"
// #codekit-prepend "../bower_components/PhysicsJS/dist/physicsjs-full-0.6.0.js"
Physics(function(world){
// code straight out of the example online from the bottom of http://wellcaffeinated.net/PhysicsJS/basic-usage
});
Then I get 'Physics' is not defined. errors on any reference. This is one example but I seem to always get stuck at this point and I'm wondering: Is there a working way to use prepended libraries through CodeKit's bower components integration?
It seems as though I forgot something quite simple. It took me hours to figure out that simply adding $(document).ready(function(){ at the beginning and closing those tags at the end fixed the problem. Not sure exactly how that works if the libraries are in the same file but I guess it adds a little delay to the execution of the code, allowing the libraries to be considered for the code that follows.

Ember and Syn integration

I'm having trouble integrating bitovi syn (link), Rails 3 (asset pipeline), Ember and qunit. I want to use syn for browser simulation for testing purposes. Has anyone done this, if so, how?
I'm using the version of syn that was released 11 Mar 2014. When I load it into my app, two things happen:
I get a global failure in qunit that says "TypeError: 'undefined' is not an object (evaluating 'Syn.schedule')", (around this line: syn.js?body=1:1084)
and
A div with a form is added to my application.
I'm using qunit for the most part, and I dabbled with using YUI to do browser simulation but it isn't working quite the way I had expected it to. I'd really like to use Syn, but I don't understand why it's not working.
In attempting to get it work, I tried adding this line to the top of the syn.js file:
window.Syn = { schedule: function (fn, ms) { Ember.run.later(window, fn, ms); } };
but it didn't do anything much at all.
I'd read on this pull request: https://github.com/bitovi/syn/pull/28 that I could add that piece of code to mount it in a fashion to work with Ember.
Any help would be greatly appreciated!
So the thing here was simply to load Syn at the bottom of the page. It's potentially a bit broken at the moment in the case where you want to load it in the head (which I probably shouldn't have been doing anyway, but still!) :)

Categories