I'm trying to setup unit tests with an Angular application that utilizes the breezejs library for odata queries. When running my tests with Karma the breeze library appears to attempt a configuration setup which I don't want to happen. I'm using angular mocks to mock the module but it appears the entityManagerFactory runs and tries to configure breeze. Here is the karma.conf setup
files: [
// 'www/Scripts/**/*.js',
// 'www/**/*.js',
'www/Scripts/angular.js',
'www/Scripts/angular-animate.min.js',
'www/Scripts/angular-translate.min.js',
'www/Scripts/angular-route.js',
'www/Scripts/angular-messages.js',
'www/Scripts/angular-sanitize.min.js',
'www/Scripts/angular-resource.js',
'www/Scripts/naturalSort.js',
'node_modules/angular-mocks/angular-mocks.js',
'www/Scripts/jquery-1.10.2.js',
'www/Scripts/breeze.min.js',
'www/Scripts/breeze.debug.js',
'www/Scripts/breeze.directives.js',
'www/Scripts/breeze.bridge*.js',
'www/app.module.js',
'www/data/**/*.js',
'www/core/**/*.js',
'www/blocks/**/*.js',
'www/common/**/*.js',
'www/features/**/*.js',
'test/unit/**/*Spec.js',
],
I get the following error when I run "karam start"
Error: Unable to initialize OData. Needed to support remote OData services
at Object.__requireLib [as requireLib] (www/Scripts/breeze.debug.js:410:11)
at webApiODataCtor.proto.initialize (www/Scripts/breeze.debug.js:16284:18)
at initializeAdapterInstanceCore (www/Scripts/breeze.debug.js:1874:14)
at Object.__config.initializeAdapterInstance (www/Scripts/breeze.debug.js:1795:12)
at configureBreeze (www/data/entityManagerFactory.js:46:41)
at Object.emFactory (www/data/entityManagerFactory.js:16:9)
at Object.invoke (www/Scripts/angular.js:4182:17)
at Object.enforcedReturnValue [as $get] (www/Scripts/angular.js:4035:37)
The entityManagerFactory calls a function (configureBreeze();) when its loaded to configure breeze, which must be the problem
function emFactory(breeze) {
configureBreeze();
var oldClient = null;
var factory = {
newManager: newManager,
serviceName: eCAT_ServiceName,
setAuthToken: setAuthToken
};
return factory;
Related
I need to mask my input in my application. I was using ngMask in angularjs. But i found an issue in ngMask is that if we update the mid value the cursor move to end. I tried to resolve the issue but did not find anything. Even on github this issue has reported but still not resolved. Here is the link
ngMask Issue
Then i decided to use another mask library. I found ui-mask and trying to use in my application but i am getting error when i include in my project. My application is in angularjs and i am using requirejs as well to load the modules.
This is what i have done in main.js:
paths: {
...////
"angular-ui-mask": "../../lib/ui-mask/ui-mask.min",
},
'angular-ui-mask': {
deps: ['angular'],
exports: 'angular-ui-mask'
},
in app.js i have done:
var app = angular.module("app",
[
"ui.router",
"mobile-angular-ui",
"scrollable-table", //for alert triggering
"rzModule", //slider for SEMI diagram
"isteven-multi-select",
"ui.bootstrap",
"cgBusy", "dndLists", 'apm-kpi-widget',
'angular.filter',
"pascalprecht.translate",
"jQueryScrollbar",
"ui.checkbox",
"angular-ui-mask"
])
This is exact i was doing for ngMask. But in this case i am getting error
[$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?
at angular.js:38
at angular.js:4587
at q (angular.js:322)
at g (angular.js:4548)
at bb (angular.js:4470)
at c (angular.js:1746)
at Object.yc [as bootstrap] (angular.js:1767)
at HTMLDocument.<anonymous> (angularAMD.js:449)
at i (jquery-1.12.3.min.js?v=1531811705531:2)
at Object.add [as done] (jquery-1.12.3.min.js?v=1531811705531:2)
What's the issue?
I'm using yeoman generator for scaffolding angular web application with requirejs. Its working fine but when I tried to concat and minifying all the js file into a single file through grunt task runner its started giving me above mentioned error. I've researched online about the issue and common solution is I may be mis-spelled any service injecting in the module or service does not exists, I've cross checked again all the spelling, quotation marks etc everything seems fine but still I'm unable to resolve this issue.
Here is my app.js file where my main module with dependencies is listed.
return angular
.module('arteciateYeomanApp', [
'arteciateYeomanApp.controllers.MainCtrl',
'arteciateYeomanApp.controllers.AboutCtrl',
'arteciateYeomanApp.services.Xhr',
'arteciateYeomanApp.services.Common',
'arteciateYeomanApp.controllers.ArtworkCtrl',
'arteciateYeomanApp.controllers.AddAccountCtrl',
'arteciateYeomanApp.controllers.AddArtgroupCtrl',
'arteciateYeomanApp.controllers.AddArtistCtrl',
'arteciateYeomanApp.controllers.AddArtworkCtrl',
'arteciateYeomanApp.controllers.AddCampaignsCtrl',
'arteciateYeomanApp.controllers.AddGenreCtrl',
'arteciateYeomanApp.controllers.AddInstitutionCtrl',
'arteciateYeomanApp.controllers.AdminSignupCtrl',
'arteciateYeomanApp.controllers.ArtistInfoCtrl',
'arteciateYeomanApp.controllers.DirectUserSignupCtrl',
'arteciateYeomanApp.controllers.ErrorCtrl',
'arteciateYeomanApp.controllers.ForgotPasswordCtrl',
'arteciateYeomanApp.controllers.GroupBuyingCtrl',
'arteciateYeomanApp.controllers.LoginCtrl',
'arteciateYeomanApp.controllers.AdminLoginCtrl',
'arteciateYeomanApp.controllers.ResetPasswordCtrl',
'arteciateYeomanApp.controllers.SignupCtrl',
'arteciateYeomanApp.controllers.UnblockUserCtrl',
'arteciateYeomanApp.controllers.UpdatePasswordCtrl',
'arteciateYeomanApp.controllers.DashboardCtrl',
'ngRoute','ngResource']).config(.....);
here is grunt task which I'm running for minifying the js files.
registering task
grunt.registerTask('dev', ['requirejs' ]);
Here is task running script
requirejs : {
compile : {
options : {
baseUrl : "<%= yeoman.app %>/scripts",
mainConfigFile : "<%= yeoman.app %>/scripts/main.js",
name : "main",
out : "requireArterciate.js"
}
}
}
Please let me know if I'm doing something wrong here.
If you need to minify the angularjs code, then use the following standard format syntax to define the controller and to inject the dependencies. Refer Dependency Injection
angular.module('test').controller('testController', testController);
testController.$inject = ['$scope', '$rootScope'];
function testController($scope, $rootScope) {};
I'm switching all of our protractor E2E tests of an angular app to ngMock, so that we can mock our resources/http calls. However, I can't find a recommended method for loading ngMock in that scenario.
I don't want to include the script itself in my live app of course, but I'm not seeing a clear method through protractor for injecting an extra script element, or dynamically loading it.
You can do is to use grunt-targethtml or gupl-targethtml so in your index.html you can add conditions of when to add an script or not:
<!--(if target mock || e2e)><!-->
<script src="dev-mocks/mock-utils.js"></script>
<script src="dev-mocks/modules/authentication-service-mock.js"></script>
<!--<!(endif)-->
First configure your grunt task to execute the targethtml task with the target e2e/mock
grunt.registerTask(
'e2e',
'Automated tests',
function(target) {
var tasks = [
'clean:server',
'targethtml:e2e',
'concurrent:server',
'autoprefixer',
'connect:e2e'
];
return grunt.task.run(tasks);
});
Here is a working template with all the tasks, packages and logic necessary to implement Protractor + CucumberJS + sugar-step (for easy sync-async steps executions), and also inject mock modules dinamically using the #Around method of CucumberJS
I have a working webdriver javascript test script for my html page that runs using ChromeDriver without needing to start up a selenium standalone server:
test.js
'use strict';
var path = require('path');
var webdriver = require('selenium-webdriver');
var chrome = require('selenium-webdriver/chrome');
var options = new chrome.Options();
var logging_prefs = new webdriver.logging.Preferences();
logging_prefs.setLevel(webdriver.logging.Type.BROWSER, webdriver.logging.Level.ALL);
options.setLoggingPrefs(logging_prefs);
var driver = new webdriver.Builder().withCapabilities(options.toCapabilities()).build();
driver.get('file://' + path.resolve('./index.html'));
// Do some testing
driver.quit();
I want to port this test to use theintern.io, but I'd prefer not to have to run a standalone selenium server. Is this possible?
[Edit: Add info on the error and theintern config]
I see the error [POST http://localhost:4444/wd/hub/session] connect ECONNREFUSED which I guess is because I don't have the standalone server running.
My theintern config looks like this:
define({
environments: [
{ browserName: 'chrome' }
],
// Name of the tunnel class to use for WebDriver tests
tunnel: 'NullTunnel',
// Non-functional test suite(s) to run in each browser
suites: [ /* 'myPackage/tests/foo', 'myPackage/tests/bar' */ ],
// Functional test suite(s) to run in each browser once non-functional tests are completed
functionalSuites: [ 'tests/functional/index' ],
// A regular expression matching URLs to files that should not be included in code coverage analysis
excludeInstrumentation: /^(?:tests|node_modules)\//
});
My theintern test looks like this:
define([
'intern!object',
'intern/chai!assert',
'require'
], function (registerSuite, assert, require) {
registerSuite({
name: 'index',
'first test': function () {
return this.remote
.get(require.toUrl('index.html'))
... //more test logic
}
});
});
Intern speaks the standard WebDriver protocol so can be used with any server that implements the specification, not just Selenium. In this case if you are trying to connect to ChromeDriver just make sure that it is running first (chromedriver --port=4444 --url-base=wd/hub) and then run intern-runner config=mid/of/config and you should be good to go with the configuration that you currently have.
I am attempting to incorporate the humane.js notification library into my AngularJS app. I have wrapped the humane.js use into an Angular service, and the app is working correctly. But when I attempt to write unit tests for the Angular service, I get the following error when attempting to execute the first test of this service:
ReferenceError: humane is not defined
My karma.conf file contains the reference to the humane.js file:
files: [
'bower_components/angular/angular.js',
'bower_components/angular-route/angular-route.js',
'bower_components/angular-mocks/angular-mocks.js',
'bower_components/messageformat/messageformat.js',
'bower_components/angular-translate/angular-translate.js',
'bower_components/angular-translate-interpolation-messageformat/angular-translate-interpolation-messageformat.js',
'bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js',
'bower_components/momentjs/moment.js',
'other_components/highcharts-ng/src/directives/highcharts-ng.js',
'other_components/keylines/keylines.js',
'other_components/logging/log4javascript.js',
'bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
'bower_components/humane-js/humane.js',
'scripts/*.js',
'scripts/*/*.js',
'resources/defaultTranslations.js',
'test/unit/*/*.js',
'views/*.html'
],
I can't figure out what's going wrong. If I replace Humane.js with an otherwise similar notification library - alertify.js - and do the exact same thing, I do not get the error.
What am I missing? Like I said, the application works, including the notification portion. Only the unit tests are affected. The Humane.js module uses some unusual (to me) self-executing module syntax:
;!function (name, context, definition) {
if (typeof module !== 'undefined') module.exports = definition(name, context)
else if (typeof define === 'function' && typeof define.amd === 'object') define(definition)
else context[name] = definition(name, context)
}('humane', this, function (name, context) {
...module definitions here...
return new Humane()
})
I'm wondering if this is confusing the karma loader somehow. The other library (alertify.js) does not have this structure.
Got here while trying to figure out a different Karma error. It might not be related but I see your karma file paths look different that to me. I usually use the default generated via the angular-generator and it products something like this in my karma kong:
files : [
'app/bower_components/angular/angular.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/bower_components/angular-resource/angular-resource.js',
'app/bower_components/angular-cookies/angular-cookies.js',
'app/bower_components/angular-sanitize/angular-sanitize.js',
'app/bower_components/angular-route/angular-route.js'
...
],