I'm trying to test a controller function which does a very basic task, some snippets below
I import an enum from a custom module I made
import { CurrentUser, Right } from "habenero-identity";
In the controller, I then have the following function
entercanAddModem = () => {
this.user.hasRight(Right.AddModem);
};
When i try to test this with:
#test
canAddModemCallsUserHasRight() {
this.user = { hasRight: sinon.spy() };
var sut = this.sut();
sut.canAddModem();
}
It tells me Right.AddModem is undefined
When I try to stub the Right Enum with
sinon.stub(Right, "AddModem").returns(14);
I get the error
`D:\Repos\Complete\node_modules\angular\index.js:2
module.exports = angular;
^
source-map-support.js:445
ReferenceError: angular is not defined`
IN the habenero-identity module
i tried the angularcontext module, I tried importing angular, i tried putting it on the global variable...nothing works
Related
I need to get the instances of my Services/Factory in my Angular JS application. For that reason I would want to use $injector so as to get instances and not depend on DI. I tried to create a wrapper method over $injector which is a seperate js file so that any other modules can call this helper method and get necessary instances. I know this is not straight forward but still wanted to try.
For this my code looks like
//helper.js file
export default function returnInstances(service) {
const app = angular.module('moduleName');
let instance;
app.run(() => {
injector = angular.injector(['ng', 'moduleName']);
instance = injector.get(service);
});
return instance;
}
// some other file
const instance = returnInstances('serviceName');
As expected this does not work. So I was wondering if anything like this is possible.
const helper = {
init: (injector) => this.injector = injector;
get: (name) => this.injector.get(name);
}
export default helper;
And in file where you bootstrap your module:
app.run((['$injector'], $injector) => helper.init($injector));
angular.bootstrap(...
And then u can use it.
I have an Angular 1.x application. Now that there is a use case where in I have to access the Angular 1.x Services / Factories in ES6 Classes which are not part of or registered with Angular JS. In short I would want to do something like export an Angular Service and import in ES6 class. I know this is not directly possible but will there be a work around ?
So I have a service like
(function () {
angular.module('myApp').service('ServiceOne', function () {
return {
property: value
};
});
})();
and now there is an ES6 class another (service file)...
import angular from 'angular';
// const $injector = angular.injector(['ng', 'myApp']);
// const ServiceOne = $injector.get('ServiceOne');
// const ServiceTwo = $injector.get('ServiceTwo');
class Es6Service {
constructor() {
//this.serviceOne = ServiceOne;
//this.serviceTwo = ServiceTwo;
}
methodOne() {
// code
}
methodTwo() {
// code
}
}
export default Es6Service;
I know that injector.get('serviceName') can get us the service instance, in my case I am getting an error of unknown provider. My assumption is that the angular module reference is missing perhaps here.
If that is the case then how can I get the Module reference here ? or there is some other way to achieve this ?
Thanks
Looks strange but should work:
import angular from 'angular';
let _$injector;
angular.module('myApp').run($injector => _$injector = $injector);
class Es6Service {
methodOne() {
// Cannot call this method until angular initialize
return _$injector.get(...)
}
I'm testing an AngularJS service with Jasmine. The service calls a function in another service using an enum from another module as a parameter.
public getSavedColumns = (): ng.IPromise<GridColumn[]> => {
return this.productSettingsService.readProjectSetting(
psfc.ApplicationId.Calculator, this.getColumnStorageProperty())
.then(response => { /**/ });
};
psfc.ApplicationId is an enum in another module:
export enum ApplicationId {
Calculator = 2636
}
The Jasmine tests fail with the error:
TypeError 'undefined' is not an object (evaluating 'psfc.ApplicationId.Calculator')
I thought I could mock the enum in the test, but it doesn't change the outcome.
beforeEach(() => {
angular.mock.module('pw_psfc',
$provide => {
$provide.constant('psfc.ApplicationId.Calculator', 0);
});
});
I was able to solve my problem by including the file with the exported enum in the karma configuration. Five months is a pretty slow learning curve, but I'm getting there! =~)
I have the following file: classAModel.js with the following code:
class classAModel{
constructor(model) {
'ngInject';
if (!model) return {};
this.id = model.id;
this.name = model.name;
this.displayName = model.displayName;
}
}
export default classAModel;
This code is defined as a factory in another file: module.js:
import classAModelfrom './classAModel'
module.factory('ClassAModel', ClassAModel);
This code works perfectly when not in a testing context. It works using Webpack to create a bundle that is loaded and runs. So far so good. Now, the question is how do I test this class. Before I changed my code to es6 style, it used be a function and it worked. The test first loads the bundle, but when I try to inject the factory (again, same as before), I get an error: Unknown provider: modelProvider <- model <- classAModel. I can understand why he thinks there is a problem, but I can't understand how to fix it.
Moreover, I'm wondering if this is the correct way to work with the factory rather then create a factory method inside the class, that gets the model, and then create my object.
Thanks
Based on the information you've provided, here's a simple test case for testing your factory. Hope this is what you're looking for.
import classAModel from './classAModel'
let classAInstance;
describe('classAModel', function() {
beforeEach(function() {
modelInstance = new Model();
classAInstance = new classAModel(modelInstance);
});
it('should have id provided by model', () => {
expect(classAInstance.id).toBe(modelInstance.id);
});
});
When i try to create angularjs module in usual way, it works perfect, but when i try to execute same code inside a callback function of aync function call, it throws error that module not found:
The following code works fine:
var myApp = angular.module('SSApp',[]);
myApp.controller('config', function($scope) {
});
But following throws error:
Init_Data(function() {
initApp();
});
function initApp() {
var myApp = angular.module('SSApp',[]);
myApp.controller('config', function($scope) {
});
}
function Init_Data(callback) {
chrome.storage.local.get(null, function(data) {
window.data = data;
callback();
});
}
I've defined ng-app="SSApp" directive in respective html code.
The reason your code is not doing what you expect is because, Angular tries to bootstrap the module "SSApp" automatically when the DOM is ready. But, finds no such module defined by your JavaScript code when it tries to do so.
You probably have ng-app="SSApp" somewhere in your HTML which is why Angular tries to bootstrap the module automatically.
You can choose to bootstrap the module manually by removing the ng-app directive and doing
angular.bootstrap(document.documentElement, ['SSApp']);
This is the change you have to do:
var myApp = angular.module("SSApp", []);
Init_Data(function () {
initApp();
});
function initApp() {
myApp.controller('config', function ($scope) {
});
console.log(myApp)
}
function Init_Data(callback) {
setTimeout(function () {
callback();
},4000);
}
From what I understand in your code, first you want to load data and then to add config controller to your app...so define your app first and then in your callback configure