Angular is not defined Error while testing with Mocha, Chai, Sinonjs - angularjs

My problem lies here where I am trying to test a controller within angular. This is the error the console throws to me when running the command mocha --compilers coffee:coffee-script/register **/*.spec.coffee to run all testing files within the project.
angular.module('weaver.ui.app');
^
ReferenceError: angular is not defined
I recently added angular-mocks library which makes sure angular is not an unresolved variable, but this doesn't resolve the problem.
My beginning of my testing file looks like this (the code is written is CoffeeScript)
# angular = require 'angular'
angular.module 'weaver.ui.app'
chai = require 'chai'
sinon = require 'sinon'
If I uncomment the require angular the error changes into the following, so I assume this is not the right way.
\npm\node_modules\angular\angular.js:29016
})(window, document);
^
ReferenceError: window is not defined
And if I remove the line angular.module 'weaver.ui.app' completely I get a similar error but this one is about the controller.
angular.module('weaver.ui.app').controller('AppDesignSidebarNewcontentCtrl', function($rootScope, $scope) {});
^
ReferenceError: angular is not defined
I hope someeone here can help me with this problem which is bugging me for quite a while now.
Please do not judge me on the name of the controller ;)

Related

Jasmine/Karma unit testing AngularJS service: how to mock "import"

We have a Karma/Jasmine unit tests set up for a legacy AngularJS (v1) app (nowadays compiled with Webpack). We're trying to build unit tests for a service that uses regular Angular injections BUT also an import statement. Something like this:
import myMember from 'my-module';
(function () {
angular
.module('app.core')
.service('myService', myService);
myService.$inject = ['$window', 'anotherService'];
function myService($window, anotherService) {
...
}
})();
The import part poses a challenge because I need to mock myMember from the imported module.
First I tried testing like before, but, naturally, when I try to access myMember in any way, I get an error: "myMember is not defined"
Then I tried inserting a similar import statement at the beginning of the unit test file. However: "SyntaxError: Cannot use import statement outside a module"
Can't seem to wrap my head around this issue. Anyone got a hint how to move forward?
EDIT: The project has a complicated structure and import started working when the test file was located deeper in the directory structure. Maybe something related to file running order. Dunno. Anyways, mocking still remains a challenge.

Unable to Inject $httpBackend

I am using Angular 1.5 to write mocked services for my project by following this little example: https://embed.plnkr.co/qsmx8RUmQlXKkeXny7Rx/
This is a simple code that I have written so far:
function() {
'use strict';
angular.module('agMock', ['ag', 'ngMockE2E'])
.run(function($httpBackend) {
$httpBackend.whenGET('https://localhost:8080/api/users')
.respond({user: 'fooBarBaz', roles: ['admin', 'user']});
});
})();
'ag' is the parent module of my project for which I am going to write mocks. When I try and run this, I get the error saying 'unknown provider: $httpBackend' although I have included angular.mocks library. Can anybody take a guess what can go wrong?
So I figured out why was I getting this error. The project in which I was getting this error uses gulp to inject dependencies and generate index.html files for dev and mocked environment. In the template index.html file, I had the main parent module, "äg" referenced in the ng-app.
I skipped the part where I had to substitute "agMock" instead of "ag" in the ng-app while generating mocked index. So this was the problem. Phew.

Same code in new project says angular is not defined

I have two projects in express with exact same code. One project works fine but the other project says
var app = angular.module('myApp', []);
^
ERROR
ReferenceError: angular is not defined.
What might be the issue?
The error message says that angular is not defined. Most likely you html is missing the script tags for including the angular code.

Angular-mocks Uncaught TypeError, reason for this error

I'm setting up a standard (but simpler) test environment for an Angular app. What I'm using is Mocha, Chai, Angular, Angular-Mocks (since that's needed unless you use Jasmine afaik).
Angular and angular-mocks are version 1.3.10, but this happens for 1.3.15 as well, these are the two versions I tested with.
The problem is that I receive this error from the js console when loading the angular-mocks script.
Uncaught TypeError: undefined is not a function
The lines it's complaining about in angular-mocks is:
(window.beforeEach || window.setup)(function() {
currentSpec = this;
});
So angular-mocks is trying to grab a global function which doesn't exist in this case, right? Why, and how do I prevent it? Is there a actual problem?
Here's a js fiddle with the code and the problem
I then get the following error when trying to use inject()
Uncaught ReferenceError: inject is not defined
Why is this happening?

jasmine complaining about dependencies in angular module where they aren't needed

I always give up on testing because I find it is more work than actually writing code that works well, but I'm working on a project I hope to open-source, so am committed to writing tests this time.
I have this angular app, and when I define it I include the dependencies
var app = angular.module('app', [
'ngResource',
'ngSanitize',
'ngRoute',
'ui.ace'
]);
When I try to test a controller, I start with
beforeEach(angular.mock.module('app'));
beforeEach(angular.mock.inject(function($rootScope,$controller){
scope = $rootScope.$new();
$controller('FileSystemCtrl',{$scope:scope});
})
);
When I run jasmine, I get
Failed to instantiate module app due to:
Failed to instantiate module ui.ace due to:
Module 'ui.ace' is not available!
I don't want to have to list all the dependencies every time I mock or instantiate 'app' in a test, as that would mean when I add a new dependency, I'd have to go back and change all the already existing test.
This seems very inefficient to me.
Can somebody explain why I'm getting this error, and how to get around it?
If you're not using a test runner such as Karma, I'd highly recommend using that. Here's the link. What karma allows you to do is to define all of your required files in one main configuration file so you can maintain it in one central location. Plus there's a jasmine plugin for karma.

Resources