I am working to initiate a controller sits inside a directive. I have some tests I need to run but right now I am not able to access the controller with ng-Mock.
describe('hero Directive', function () {
var $compile,
$rootScope,
$scope,
element,
ctrl;
beforeEach(function () {
angular.mock.module('ha.module.core');
angular.mock.inject(function (_$compile_, _$rootScope_, _$controller_, $templateCache) {
$compile = _$compile_;
element = angular.element("<div exlore-hereo></div");
$compile(element)($rootScope);
$rootScope = _$rootScope_;
$scope = $rootScope.$new();
ctrl = _$controller_('ExploreHeroController', { $scope: $scope });
console.log(ctrl)
$scope.$digest();
});
});
afterEach(function () {
// need to remove the element element.remove();
});
describe('directive controller', function () {
it('should dispatch call $emit with $methodsBound', function () {
//spyOn($scope, '$emit');
spyOn($scope, 'ControllerName');
//expect(scope.$emit).toHaveBeenCalledWith('$methodsBound');
//expect(ctrl).toHaveBeenCalled();
});
});
});
I created an element compiled it and called the $digest method.
The error that I got was
Argument 'scope' is required.
So I tried spying on the it with jasmine
spyON($scope, 'ControllerName');
My controller inside of my directive is pretty basic.
var ControllerName = function($scope) {
$scope.$emit('$method');
}
It seems like I need a spy, but I am not sure why the one I created does not work.
You can try to spy on $scope, but note that ControllerName is not a member of the $scope object.
However, $emit is....
The thing is, that you call $emit in the controllers constructos, therefore you have to spy on it before:
beforeEach(function () {
...
$scope = $rootScope.$new();
spyOn($scope, '$emit');
ctrl = _$controller_('ExploreHeroController', { $scope: $scope });
...
});
describe('directive controller', function () {
it('should dispatch call $emit with $methodsBound', function () {
expect($scope.$emit).toHaveBeenCalledWith('$methodsBound');
});
});
Related
I am new to unit testing and I am getting these errors even though I though my test was correct, I just cannot figure out what these errors mean and I have tried several things
Can't find variable: $rootScope
Error: Injector already created, can not register a module!
spec.js
describe('test broadcast', function () {
var $controller;
beforeEach(function() {
module('test');
inject(function (_$rootScope_, _$controller_) {
$rootScope = _$rootScope_;
spyOn($rootScope, '$broadcast');
// Notice how inject $controller here.
$controller = _$controller_;
});
});
it("should broadcast something", function ($rootScope) {
$controller('myCtrl', {
// Pass in the $rootScope dependency.
$rootScope: $rootScope.$new()
})
// Here we actually run the controller.
expect($rootScope.$broadcast).toHaveBeenCalledWith('update');
//someObj = { data: testData};
//expect($rootScope.$broadcast).toHaveBeenCalledWith('update', someObj);
});
})
controller
(function () {
var test= angular.module('test');
test.controller('myCtrl',
function($rootScope, $scope, $resource, $location, $route, $routeParams, $log, catalogData) {
$log.debug("myCtrl");
$log.debug(myCtrl);
$rootScope.$broadcast("update", {
data: testData
});
}); // catalogCtrl
})();
You have a variable called rootScope defined, not $rootScope - change your definition:
rootScope.$apply();
Though I personally like to define them like so:
var $rootScope;
beforeEach(inject(function(_$rootScope_) {
$rootScope = _$rootScope_;
}));
EDIT 2:
You cannot access $rootScope in your it function because it is not in the current javascript scope (not angular $scope, don't get confused).
You need to define it alongside your controller at the top.
var $controller, $rootScope
And remove $rootScope from your it function so you don't overwrite it.
// Notice there is no $rootScope parameter.
it("should broadcast something", function () {
//Code
}
You will also have to pass in your other dependencies.
After a discussion with the OP, the whole code should look like this:
describe('test broadcast', function () {
var $controller, $rootScope;
beforeEach(function() {
module('test');
inject(function (_$rootScope_, _ $controller_) {
$rootScope = _$rootScope_;
spyOn($rootScope, '$broadcast');
$controller = _$controller_;
});
});
it("should broadcast something", function () {
$controller('myCtrl', {
$scope: $rootScope.$new(),
catalogData: {}
})
expect($rootScope.$broadcast).toHaveBeenCalledWith('update', {catalog:{}})});
})
EDIT 1:
You are passing in the $scope dependency. $broadcast is called on the $rootScope so you need to pass that in. Like this:
var testScope = $rootScope.$new()
$controller('myCtrl', {
// Pass in the $rootScope dependency.
$rootScope: testScope
}
Original post (in case it's still useful to anyone)
You aren't actually calling your controller anywhere in your test suite.
You need to have something like
var $controller
beforeEach(inject(function (_$rootScope_, _$controller_) {
$rootScope = _$rootScope_;
spyOn($rootScope, '$broadcast');
// Notice how inject $controller here.
$controller = _$controller_;
}));
Then initialise it in your test:
it("should broadcast something", function () {
// Here we actually run the controller.
$controller('myCtrl', {
// Pass in the $rootScope dependency.
$rootScope: $rootScope.$new()
}
expect($rootScope.$broadcast).toHaveBeenCalledWith('catalogUpdate');
someObj = { catalog: catalogData};
expect($rootScope.$broadcast).toHaveBeenCalledWith('catalogUpdate', someObj);
});
This will remove the error about $rootScope.broadcast not being called.
Take a look at the "Testing Controllers" section here: https://docs.angularjs.org/guide/controller
As for not being able to register a module, this normally happens if you have an inject() before a beforeEach(module('abc')).
As the error says, you cannot register another module after inject has been called.
I have the following...
app.controller('testCtrl', function(testService){
testService.doSomething();
});
app.service('testService', function(){
this.doSomething = function(){...};
});
I want to use Jasmine to ensure doSomething is called once and only once. I seem to be having some trouble doing this.
Also, I am currently grabbing my controller from a compiled element like this...
var element = angular.element('<my-test-directive />');
controller = view.controller('testCtrl');
So extra appreciation if it fits with this sort of formatting
Update
I tried this...
describe("Testing", function () {
var $rootScope,
$scope,
$compile,
testService,
view,
$controller;
beforeEach(module("app"));
function createController() {
return $controller('testCtrl', {
$scope: scope,
testService:testService
});
}
function SetUpScope(_$controller_, _$compile_, _$rootScope_, _testService_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
$scope = $rootScope.$new();
$controller = _$controller_;
testService = _testService_;
spyOn(testService, 'doSomething');
}
SetUpScope.$inject = ["$controller","$compile", "$rootScope", "testService"];
beforeEach(inject(SetUpScope));
it("On intitialization, the controller should register itself with the list service", function(done){
createController();
scope.$digest();
expect(workOrderService.doSomething).toHaveBeenCalled();
})
});
It seems to work
It is probably better to test controller in isolation and use Jasmine spies for this:
spyOn(testService, 'doSomething');
expect(testService.doSomething.calls.count()).toEqual(0);
Something like this should work in the actual test.
describe('testCtrl function', function() {
describe('testCtrl', function() {
var $scope, testService;
beforeEach(module('myApp'));
beforeEach(inject(function($rootScope, $controller, _testService_) {
$scope = $rootScope.$new();
testService = _testService_;
spyOn(testService, 'doSomething');
$controller('MyController', {$scope: $scope});
}));
it('should call testService.doSomething()', function() {
expect(testService.doSomething.calls.count()).toEqual(1);
});
});
});
Here is a quick plunkr http://plnkr.co/edit/Swso4Y
Depending on which version of Jasmine you are using you might need to use
expect(testService.doSomething.calls.length).toEqual(1);
I am trying to write unit tests for the AngularJS application. Below is a pretty standard test template, which works fine:
describe('Controller: MainCtrl', function () {
var MainCtrl, scope;
beforeEach(function() { // <-- what if I remove this
module('watcomApp');
inject(function ($controller, $rootScope) {
scope = $rootScope.$new();
MainCtrl = $controller('MainCtrl', {
$scope: scope,
});
});
}); // <-- and this
it('some spec', function () {
expect(scope.data).toEqual('something');
});
});
However if I try to reuse the current state of controller and remove beforeEach:
describe('Controller: MainCtrl', function () {
var MainCtrl, scope;
module('watcomApp');
inject(function ($controller, $rootScope) {
...
it stops working because scope.data becomes undefined.
The question is: what happens to scope? I expect it to persist between specs since it's global.
So I have my blank tests passing with this setup.
describe('loginController', function() {
var scope, createController;
beforeEach(module('souply'));
beforeEach(inject(function ($rootScope, $controller, _$location_) {
$location = _$location_;
scope = $rootScope.$new();
createController = function() {
return $controller('loginController', {
'$scope': scope
});
};
}));
And here are the tests...
describe('processGoogleLogin', function(){
describe('successful', function(){
beforeEach(function() {
});
it('should connect to google plus', function () {
expect(true).toBe(true);
});
This one passes no problem.
QUESTION: How can I test a method on the login controller?
Here is the method I want to test on the login controller:
$scope.processGoogleLogin = function(){
console.log('process login was clicked');
window.location.replace('/#/dashboard');
};
The test I have so far is:
it('should sign you into the dashboard', function () {
scope.processGoogleLogin();
//$controller.processGoogleLogin();
//expect(window.location).toBe('/#/dashboard');
});
This test throws an error of:
'undefined' is not a function (evaluating 'scope.processGoogleLogin()')
This needed this line.
var ctrl = $controllerConstructor('myController', {$scope: scope, myResolve: {}, state: state});
I have a service that synchronously returns data to a controller:
angular.module('app').controller(function($scope, myService) {
$scope.foo = myService.getFoo();
});
This works just fine in the browser. In my unit tests, $scope.foo is undefined:
beforeEach(function () {
module('app');
myService = jasmine.createSpyObj('myService', ['getFoo']);
inject(function($controller, $rootScope) {
$scope = $rootScope.$new();
ctrl = $controller('ModelSliderCtrl', {
myService: myService,
$scope: $scope
});
});
});
it('should have foo on the scope', function() {
myService.getFoo.and.returnValue({});
expect(myService.getFoo).toHaveBeenCalled(); // PASS
$scope.$digest();
expect($scope.foo).toBeDefined(); // FAIL - $scope.foo is undefined
});
This does work in both the browser and tests:
angular.module('app').controller(function($scope, myService) {
$scope.init = function() {
$scope.foo = myService.getFoo();
};
$scope.init();
});
.
it('should have foo on the scope', function() {
myService.getFoo.and.returnValue({});
$scope.init();
expect(myService.getFoo).toHaveBeenCalled(); // PASS
expect($scope.foo).toBeDefined(); // PASS
});
I'd like to believe I'm fairly well-versed in Angular, Jasmine and JavaScript. I've also asked some colleagues who are equally puzzled.
Can anyone explain to me what is going on here?
You are setting up a mock
it('should have foo on the scope', function() {
myService.getFoo.and.returnValue({});
after your controller has been instantiated. It's too late to set up the mock by then, do it before instantiating your controller since you are executing init() right away.
myService = jasmine.createSpyObj('myService', ['getFoo']);
myService.getFoo.and.returnValue({});
inject(function($controller, $rootScope) {