When I run the SpecRunner HTML file I get this error.
Looking around, this is due to angular-mocks.js not being referenced. In my case it is being referenced.
SpecRunner.html:
<link rel="stylesheet" type="text/css" href="lib/jasmine-1.3.1/jasmine.css">
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>
<script type="text/javascript" src="lib/angular-mocks.js"></script>
<!-- include source files here... -->
<script type="text/javascript" src="../main/static/js/controllers/norm-definitions-controller.js"></script>
When the tests are run, I get this exception: ReferenceError: inject is not defined
I can see that angular-mocks.js is referenced and it's not a caching issue as I can see it using Firebug.
Looking in angular-mocks.js I can see the full reference angular.mock.inject = function() { ... }, I've tried this as a reference too, and get the exception ReferenceError: angular is not defined.
You still need angular.js lib. I didn't saw it among your scripts. It should be before angular-mock.js.
For the errors which come while adding karma and jasmine to testing your project, make sure that
your angular.js and angular-mocks js files both have same versions.
the jasmine version is compatible with angularjs version, refer to jasmine official site to make sure there is no syntax error.
refer to test formation on angular js official site to follow unit testing methodologies.
The above steps help avoid most of the common errors.
Related
I was using react-vis library. Their readme file says following:
If you're working in a non-node environment, you can also directly include the bundle and compiled style using basic html tags.
<link rel="stylesheet" href="https://unpkg.com/react-vis/dist/style.css">
<script type="text/javascript" src="https://unpkg.com/react-vis/dist/dist.min.js"></script>
The global reactVis object will now be available for you to play around.
When I do exactly that, it works and I was able to use reactVis object in my code. It links versions 1.11.7 from unpkg. I wanted to try out version 1.11.5. So, I tried following:
<link rel="stylesheet" href="https://unpkg.com/react-vis#1.11.5/dist/style.css">
<script type="text/javascript" src="https://unpkg.com/browse/react-vis#1.11.5/dist/dist.min.js"></script>
But, now it gives me following error:
Uncaught ReferenceError: reactVis is not defined
Somehow, it is not able to get reference to reactVis code. Why is this so?
The link you used contains https://unpkg.com/browse/... /browse links to the html preview page of the file.
To link to the raw version of the file remove /browse in your case to https://unpkg.com/react-vis#1.11.5/dist/dist.min.js, which would link to the file raw.
eg.
console.log(
reactVis
)
<link rel="stylesheet" href="https://unpkg.com/react-vis#1.11.5/dist/style.css">
<script type="text/javascript" src="https://unpkg.com/react-vis#1.11.5/dist/dist.min.js"></script>
So hey guys, I'm trying run a html file for this angular 2 course I'm taking. After creating the dependancies for the app I downloaded them with npm. Now when I try to run the app, I get this error..
file:///Users/Rocky/Angular2-course/skeleton/node_modules/jquery/dist/jquery.min.js
Failed to load resource: net::ERR_FILE_NOT_FOUND
This is how I wrote the jquery script..
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/tether/dist/js/tether.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
If your'e using Angular, you want to try and avoid using jQuery since Angular comes with jqLite.
Try to the version of Bootstrap made for Angular 2.
Check out https://ng-bootstrap.github.io/#/getting-started
Also, ever though of linking them?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
If your files are in "./node_modules/jquery/dist/". Then, the script tag in your pages just looks like this:
<script src="/scripts/jquery.min.js"></script>
If you were using express with nodejs, a static route is as simple as this:
app.use('/scripts', express.static(__dirname + '/node_modules/jquery/dist/'));
Then, any browser requests from /scripts/xxx.js will automatically be fetched from your dist directory.
Note: Newer versions of NPM put more things at the top level, not nested so deep so if you are using a newer version of NPM, then the path names will be different than indicated in the OP's question and in the current answer. But, the concept is still the same. You find out where the files are physically located on your server drive and you make an app.use() with express.static() to make a pseudo-path to those files so you aren't exposing the actual server file system organization to the client.
I've been trying to sort this out for a while; my goal is to use Polymer modules inside the Aurelia framework. There's a tutorial here (on the official documentation), but that's not for a CLI generated app.
my aurelia.json file has the following dependencies:
…
"aurelia-html-import-template-loader",
"aurelia-polymer",
…
(installed using npm)
and the index.html file looks like this:
<head>
<title>Aurelia</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
…
I have no errors in the CLI/console upon building.
main.js
aurelia.use.plugin('aurelia-polymer');
loads fine but
aurelia.use.plugin('aurelia-html-import-template-loader');
gives errors in the browser console:
vendor-bundle.js:21513 GET http://localhost:9000/app.html
Unhandled rejection Error: Load timeout for modules: template-registry- ………
I've been talking to a bunch of lads on aurelia/gitter, but so far I've found nobody who was able to get 'aurelia-html-import-template-loader'working in the CLI.
Thanks for reading,
have an awesome day
From aurelia-polymer:
Using with Webpack
If you're using webpack, you won't be able to use
aurelia-html-import-template-loader, which means you won't be able to
load Polymer elements in your templates directly (see #18). Instead,
it's suggested that you use vulcanize to bundle all the Polymer
elements you use into one file that can be loaded in index.html. The
elements will still be available in your templates once loaded, but
this avoids the syntax issues that require the HTML import template
loader.
I haven't tried it with aurelia-cli yet, but it's worth a shot.
I try to use ngAnimate module to create a simple animation. The problem is that every time I try to just include this module as a dependency I got this error: Error: Unknown provider: $animateProvider from ngAnimate.
The code is very simple, but I can't get what is the problem.
Here is my HTML template:
<html>
<head>
<script type="text/javascript" src="/js/lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/js/lib/angular.min.js"></script>
<script type="text/javascript" src="/js/lib/angular-animate.js"></script>
<script type="text/javascript" src="/js/lib/angular-cookies.min.js"></script>
<script type="text/javascript" src="/js/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="/js/lib/angular-ui-router.min.js"></script>
<script type="text/javascript" src="/js/lib/underscore-min.js"></script>
</head>
<!-- And so on -->
</html>
And I include ngAnimation in my module like this:
var myModule = angular.module('myModule', ['ngCookies', 'ngResource', 'ui.router', 'ngAnimate']);
Quite simple. Everything is like in this tutorial, nothing special. But it doesn't work. The same problem was on stackoverflow here, but useless...
So, can anybody explain me what is the problem?
All in all the problem was fixed by migrating to 1.2.13 version of AngularJS. I think that this error was occured bacause 1.0.8 doens't support it (or maybe it was some thing else).
I fixed this error by updating to angular 1.2.13. Seems that for me was due to mismatching versions between angular 1.0.8 etc.
In my experience, this type of error is usually due to wrong file references. Are you sure the path to angular-animate.js is correct? does it point to the right file? is the file present in your directory?
Quoting another answer that helped me for future watchers of this post:
https://stackoverflow.com/a/24766563/1366216
Ran into the same problem. You have to match the version of angular to angular animate.
change:
"angular-animate": "1.2.6"
Crux is that you need to match angular version with angular-animate version.
I'm working Jasmine on a Rails plugin that would be included in a Rails app that loads jQuery from a CDN. However, I'm running into issues running Jasmine tests in my plugin. I need to load jQuery before my source javascript files in app/assets/javascripts, but if I include jQuery in my jasmine.yml it doesn't get loaded before the source files:
jasmine.yml contents:
src_dir: "app/assets/javascripts"
src_files:
- "my_rails_plugin_source_includer.js"
spec_dir: spec/javascripts
asset_paths:
- "vendor/assets/javascripts"
my_rails_plugin_source_includer.js requires my source javascripts:
//= require my_jquery_dependent_script.js
//= require my_other_jquery_dependent_script.js
I'm using
bundle exec jasmine-headless-webkit --color --keep ./spec/javascripts/specs.js
to run my tests. I get an error message like
ReferenceError: Can't find variable: jQuery
ReferenceError: Can't find variable: jQuery
Test ordering seed: --seed 1629
My tests pass if I explicitly require a jQuery javascript file (e.g., jquery-1.9.1-min.js) in my_rails_plugin_source_includer.js. However, I don't want to do that, as I want the actual Rails app, rather than this plugin. Any suggestions on how to require jQuery before my source files? Requiring it in my specs or my helpers doesn't work, as Jasmine seems to always load the source files first (which of course makes sense).
I was able to solve this issue by doing the following:
Downloading jquery-1.9.1.min.js from the official jQuery source and storing it in my spec/javascripts/support/helpers folder.
Creating a source.js file in my spec/javascripts/support/fixtures folder (can be an arbitrary folder) that has the following contents:
//= require ../helpers/jquery-1.9.1.min
//= require ../../../../app/assets/javascripts/application
where app/assets/javascripts/application.js is the manifest for my plugin's JavaScripts.
Editing my jasmine.yml file to use the following sources:
src_dir: "spec/javascripts/support/fixtures"
src_files:
- "source.js"
As a result, the jQuery-dependent source JavaScripts have jQuery preloaded only for Jasmine testing.
Thanks for your answer, Fares, it gave me the insight into what's happening with the jasmine config file.
There's a predictable order to how files are included in your jasmine page's <head> tag.
First, my setup deatils:
rails 4.0.1
jasmine 1.3.2
jquery-rails 3.0.4 (which provides jquery-1.10.2)
Here's my spec/javascripts/support/jasmine.yml. I have no helpers, I don't need css files to test my particular app, and I removed all the comments.
src_files:
- spec/javascripts/lib/jquery-1.10.2.js
- app/assets/javascripts/tools/dependency-parser.js
spec_dir: spec/javascripts
spec_files:
- '**/*[sS]pec.js'
The <head> of my jasmine page contains the following, in order:
jasmine core <link rel="shortcut icon" type="image/png" href="/__JASMINE_ROOT__/images/jasmine_favicon.png">
<link rel="stylesheet" href="/__jasmine__/jasmine.css" type="text/css" media="screen">
<script src="/__jasmine__/jasmine.js" type="text/javascript"></script>
<script src="/__jasmine__/jasmine-html.js" type="text/javascript"></script>
<script src="/__jasmine__/json2.js" type="text/javascript"></script>
src_files <script src="/spec/javascripts/lib/jquery-1.10.2.js" type="text/javascript"></script>
<script src="/app/assets/javascripts/tools/dependency-parser.js" type="text/javascript"></script>
helper_files <!-- I didn't have anything here -->
spec_files <script src="/__spec__/dependency-parser_spec.js" type="text/javascript"></script>
jasmine boot <script src="/__boot__/boot.js" type="text/javascript"></script>
My app uses the asset pipeline, and the jquery-rails gem, along with the typical includes in app/assets/application.js:
//=require jquery
//=require jquery-ujs
//=require tree .
Because I am using the jquery-rails gem, that means I don't actually have the jQuery JavaScript files anywhere to load directly - they should come from the asset pipeline if they come from anywhere. It also seemed that I couldn't include the app/assets/javascripts/application.js file for some reason. This turned out to be okay; I just want to test my custom JavaScript, which depends upon jQuery.
So, I simply downloaded the version of jQuery that my app is using (1.10.2), and put it in:
spec/javascripts/lib/ <= I created this folder
After that everything worked perfectly, because I could predictably load my .js files in the order in which I needed them. It's not perfect. I now manually have keep my jQuery version the same in my specs as whatever version of jquery-rails I use, but that's a rather minor thing for now...though it begs the question, "Why the hell do people package javascript file into a gem?" No other web framework does this kind of wacky stuff.
I also tried using the jasmine 2.0.0.rc5 gem (the current version as of this writing), because it was supposed to take care of asset pipeline issues like this, but it didn't work for me.
I also tried jumping to something more complex like using the jasmine-jquery or jasminerice gems, but found both of their implementations to be more complicated versions of what I did above. Once I understood how the config file was generating the contents of the <head> tag in my particular case, it was a relatively easy fix.
I may move to jasmine 2.0.0 when it's released, if I feel it's necessary (it supposedly has better Rails 4 support), but I'm pretty sure this solution is going to work out just fine.