Jasmine require.js maven plugin - backbone.js

I am trying to configure jasmine maven plugin to load jasmine specifications using require.js.
Below is my maven configuration
<plugin>
<groupId>com.github.searls</groupId>
<artifactId>jasmine-maven-plugin</artifactId>
<version>1.1.0</version>
<configuration>
<specRunnerTemplate>REQUIRE_JS</specRunnerTemplate>
<jsSrcDir>${project.basedir}/src/main/webapp/backbone/js</jsSrcDir>
<jsTestSrcDir>${project.basedir}/src/test/javascript/spec</jsTestSrcDir>
<srcDirectoryName>js</srcDirectoryName>
<specDirectoryName>spec</specDirectoryName>
<specIncludes>
<include>*Spec.js</include>
</specIncludes>
<preloadSources>
<source>backbone/js/libs/jquery/jquery.js</source>
<source>backbone/js/libs/require/require.js</source>
<source>backbone/js/libs/underscore/underscore.js</source>
<source>backbone/js/libs/backbone/backbone.js</source>
<source>backbone/js/libs/bootstrap/bootstrap.js</source>
<source>backbone/js/config.js</source>
</preloadSources>
</configuration>
</plugin>
Below is my jasmine specification:
define(['models/Specification'], function(Specification) {
describe("Specification", function() {
var specification;
beforeEach(function() {
specification = new Specification();
})
it("thickness set to 4 by default", function () {
expect(specification.thickness).toEqual(4);
});
});
});
Below is the javascript file
define(["backbone"], function ($, _, Backbone) {
return Backbone.Model.extend({
defaults: {
thickness: 4
}
});
});
I get the following error : TypeError: Cannot call method "extend" of undefined
Is there anyway to load my require.js config instead of loading them manually ?
Any help is appreciated.
Thanks,
Ravi

To expand on rjz's post and to further answer the question...Yes, you can load your require.config file and let it load all of your library files/dependencies for you. There's no need to list the files in the plugin's configuration. I wrote a quick post summarizing my experience with jasmine-maven-plugin using Require.js jasmine+maven+requirejs+coverage. I included my pom.xml in my post for reference. Your main.js (or whatever includes your require.config) should just be one of your source files yes? So should point to your source directory, and thus your require.config gets loaded, and it handles the loading of your dependencies, not jasmine-maven-plugin. Hope my this helps.

Related

Unable to get AngularJS service working in Angular

I searched a lot of posts and also the official Angular documentation, but I'm not able to get an AngularJS service running in Angular. I finally came to this page https://angular.io/api/upgrade/static/UpgradeModule#examples which seems to explain exactly what I need, but when doing all those steps I'm getting:
ERROR Error: Trying to get the AngularJS injector before it being set.
My impression is that this example is not quite complete. E.g. there is no hint were the (old) AngularJS framework must be loaded. My service looks like angular.module('my-module').service('my-service', ... thus angular needs to be defined, otherwise I'm getting an error. Furthermore many examples assume that the AngularJS code is written in TypeScript. In my case this is not true (just plain Javascript).
Unfortunately with Angular 9 there is an additional issue with the #angular/upgrade module which is not mentioned anywhere and can only be solved by disabling the new Ivy compiler in tsconfig.app.json, otherwise the compiler will throw Error: Error on worker #1: Error: getInternalNameOfClass() called on a non-ES5 class: expected UpgradeComponent to have an inner class declaration:
"angularCompilerOptions": {
"enableIvy": false
}
I'd really appreciate if somebody could post a complete example on what exactly must be done in order to run an AngularJS service in an Angular component.
UPDATE [6th July 2020]
Here you can find a GitHub repo which you can clone, to reproduce the behavior: https://github.com/berkon/angularjs-service-upgrade-test. I should also mention that I'm using the Electron framework and started based on this repo https://github.com/maximegris/angular-electron but I guess that shouldn't matter in this case.
Finally I got it working! It was really really cumbersome to figure this all out. A lot of things aren't mentioned in most tutorials and even in the official Angular guide there are only code snippets which make it hard for Angular newbies to guess where to put all that stuff. Also the bootstraping is not explained correctly. Furthermore all tutorials assume that the "old" AngularJS code is already written in TypeScript, which makes it even harder to find the right way/order to load/bootstrap/import all that stuff. Finally there seems to be an issue with the #angular/upgrade module in combination with the new Ivy compiler in Angular 9. It throws the error mentioned below. Thus it must be disabled to get things working. A real pain!!!
So roughly these are the steps:
install the angular and #angular/upgrade node modules
load all .js modules including AngularJS in the script section of angular.json
interrupt the regular Angular bootstrap process by removing the bootstrap section from #NgModule and bootstrap AngularJS via ngDoBootstrap manually. First bootstrap
AngularJS, afterwards bootstrap the AppComponent class. This way the service is available at AppComponent initialization. Otherwise you'll get an injection error!
Add a new provider in providers [] section to get access to the new service
Now the new (upgraded) service can be injected in the constructor of AppComponent
Its quite a lot of work to perform all steps below manually, but I listed them for reference. Here you can find a GitHub repo where you can clone a working app. Don't be surprised! This repo uses the Electron framework (electronjs.org). But don't worry this doesn't have any influence on my findings: https://github.com/berkon/angularjs-service-upgrade-test
And here is the step-by-step guide:
Prerequistes
execute npm install angular --save
execute npm install #angular/upgrade --save
in tsconfig.app.json add "enableIvy": false to angularCompilerOptions to avoid getting:
Error: getInternalNameOfClass() called on a non-ES5 class: expected UpgradeComponent to have an inner class declaration
add "node_modules/angular/angular.js" and the Javascript file which contains your AngularJS service (in this case "src/app/angular-js-service.js") to the scripts [] array in angular.json
app.module.ts
add ApplicationRef to the import brackets of #angular/core
add import { UpgradeModule } from '#angular/upgrade/static'
add UpgradeModule to imports [] array of #NgModule
remove bootstrap section completely from #NgModule and replace it with this: entryComponents: [AppComponent]
add this to the providers [] array in #NgModule and make sure to replace myService with the correct name of your service:
{ provide: 'myService', useFactory: (i: any) => { return i.get('myService') }, deps: ['$injector'] }
replace the constructor of AppModule with this:
constructor ( public upgradeModule: UpgradeModule ) {}
add this to the AppModule class and make sure to replace ajsAppModule with the name of your AngularJS main app module:
ngDoBootstrap ( appRef: ApplicationRef ) {
this.upgradeModule.bootstrap(document.body, ['ajsAppModule'], { strictDi: true } )
appRef.bootstrap ( AppComponent )
}
app.component.ts
add Inject to the import brackets at #angular/core
in the AppComponent class change the constructor to this and make sure to replace myService with the name of your AngularJS service
constructor ( #Inject('myService') myService: any ) {
myService.doSomething()
}
I had this same error and I solved it in my app, however I cannot remember exactly why this was happening (sorry, it was a long time ago). I wasn't upgrading services, instead I was downgrading.
Here's my app.module.ts I've added comments to the parts that were critical to get this working, I hope there may be a hint for you here. Note that I used the Angular CLI to generate the app.
setAngularJSGlobal(angular);
// Configure the angularjs app (yours might be defined elsewhere)
const app = angular.module('app', [MyFormsModule, AngularMaterialModule]);
app.run(RunAddressAutocompleteConfig);
app.run(RunDynamicQueryConfig);
// Downgrade Angular AppComponent so AngularJS can render it after bootstrapping
// my app used an Angular component as the root
app.directive('appRoot', downgradeComponent({ component: AppComponent }));
// Downgrade Angular services
app.factory('api', downgradeInjectable(ApiService));
app.factory('dynamicQuery', downgradeInjectable(DynamicQueryService));
#NgModule({
declarations: [
AppComponent,
FormDirective,
FormPageComponent,
FormsListPageComponent,
RouterLinkPreserveQueryParamsDirective,
FormEmptyStatePageComponent,
],
imports: [BrowserModule, UpgradeModule, AppRoutingModule, HttpClientModule, CommonModule],
// This was absolutely necessary for bootstrapping my app in this way
// I encountered errors otherwise
providers: [
{
provide: '$scope',
useExisting: '$rootScope',
},
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
entryComponents: [AppComponent],
})
export class AppModule implements DoBootstrap {
constructor(private readonly upgrade: UpgradeModule) {}
ngDoBootstrap(appRef: ApplicationRef) {
this.upgrade.bootstrap(document.body, [app.name], { strictDi: true });
appRef.bootstrap(AppComponent);
}
}
index.html
<body>
<app-root></app-root>
</body>

angularjs directive not being loaded when angularjs-dragula package is required

I am in the process of migrating our .NET Framework project over to .NET Core. And where we previously relied on the BundleTable tools in .NET Framework. We are now using webpack.
I have a directive that uses a package 'angularjs-dragula'. The webpack entry definition is as follows
'bundles/grouping':
[
"./Scripts/angularjs-dragula.js",
"./App/components/grid.directive.js",
"./App/components/inline-edit.directive.js",
"./App/services/grouping.service.js",
"./App/components/grouping/grouping.directive.js"
],
I initialize the directive as follows:
(function () {
angular.module('App').requires.push(angularDragula(angular));
angular
.module('App')
.directive('appCustomGrouping', appCustomGrouping);
appCustomGrouping.$inject = ['urlService', 'groupingService', 'dragulaService' ];
function appCustomGrouping(urlService, groupingService, dragulaService) {
...
As it is, the page never loads grouping.directive. And there are no errors. Unless i remove the dragula file in the webpack entrypoint. The directive will then load, but complain:
ReferenceError: angularDragula is not defined[Learn More]
I have tried relying on webpack to import the package, and removed it from the entry definition. I installed angularjs-dragula into my node_modules, and used
var angularDragula = require('angularjs-dragula');
(function () {
angular.module('App').requires.push(angularDragula(angular));
angular
.module('App')
.directive('appCustomGrouping', appCustomGrouping);
appCustomGrouping.$inject = ['urlService', 'groupingService', 'dragulaService' ];
function appCustomGrouping(urlService, groupingService, dragulaService) {
...
However this results in the same behavior.
The angularjs-dragula package works, since we were using it before the move to webpack. However now it seems to be silently failing, and taking the rest of the directive with it?
How can I begin to diagnose this issue?
The AngularJS wrapper for Dragula is unusual in that it places on global scope a function named angularDragula. That function registers the dragula module with AngularJS when the function is invoked with angular as an argument. It returns a string with the module name "dragula".
angularDragula(angular)
angular.module("app",["dragula"])
.run(function(dragulaService) {
console.log(dragulaService);
})
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angularjs-dragula/dist/angularjs-dragula.js"></script>
<body ng-app="app">
<h1>Hello AngularJS!</h1>
</body>
the page never loads grouping.directive
How can I begin to diagnose this issue?
I would use the Developer Console to insert breakpoints. Then examine variables.
The above example loads AngularJS with Dragula and successfully logs the dragularService.

Uncaught Error: [$injector:modulerr] Failed to instantiate module yeomanTestApp due to: Error: [$injector:unpr] Unknown provider: e

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) {};

How do I control the order files are loaded in karma config

I'm testing an Angular app with Karma. I've got everything working, but it seems like I'm doing something wrong.
https://gist.github.com/guyjacks/7bca850844deb612e681
Karma will throw the following error if I comment out 'app/notes/notes.main.js' :
Uncaught Error: [$injector:nomod] Module 'notes.main' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.4.3/$injector/nomod?p0=notes.main
at /Users/guyjacks/projects/adr-demo/node_modules/angular/angular.js:1958
I don't want to have to manually list each application file to control the order in which each file loads. Am I don't something wrong or do I just have to list each file in the order I want?
---- Solution based on the accepted answer ----
My app is organized into modules as recommended by the Angular Style Guide: https://github.com/johnpapa/angular-styleguide.
'app/app.module.js',
'app/**/*.module.js',
'app/**/*.service.js',
'app/**/*.controller.js',
'app/**/*.directive.js',
'app/**/*.js'
I don't think the following lines are necessary above
'app/**/*.service.js',
'app/**/*.controller.js',
'app/**/*.directive.js'
when each module has an angular module declared in the *.module.js file like my app does.
That said, if you did need to explicitly load services before controllers & controllers before directives then this would be the way to do it.
Update : I could not see your karma file, now Gist link is fixed.
The point in notes[.]main.js is causing the problem,
So, 'app/**/*.js' is not matching notes.main.js.
Try now like this : app/**/*. *.js
=============================================================
Before update :
You have to load the modules that you app depends on, in karma config. file :
module.exports = function(config) {
config.set({
.......
// list of files / patterns to load in the browser
files: [
'./client/app/vendors/angular/angular.js',
// =====> load Your modules here ...
'./client/app/app.js',
'./client/app/controllers/*.js',
'./client/app/directives/*.js',
'./client/app/services/*.js',
'./test/client/unit/**/*.js'
],
.....
}) }

AngularJS unit-test 'ReferenceError: humane is not defined'

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'
...
],

Resources