I tried to write the simplest possible javascript unit test with angular.js but it fails and I don't know why.
test.html
<html>
<head>
<script src="angular-1.2.21/angular-scenario.js" ng-autotest></script>
<script src="test1.js"></script>
</head>
</html>
test1.js
describe('A suite', function() {
it('should be true', function() {
expect(5).toBe(5);
});
});
I deploy both files (and libs) on server and call the html site. The tests runs but always fails with
expected undefined toBe 5 but was undefined
What am I missing?
From the information that you have given I think you have not included the jasmine file
http://searls.github.io/jasmine-all/jasmine-all-min.js
Tried your code after including this and it is working fine.
Here is a working fiddle
I think the syntax is wrong. Try:
expect(5).to.equal(5);
REF: http://chaijs.com/api/bdd/
Related
I'm new to babel, and just trying to play around with the simple browser-based babel.js standalone, but I'm running into some problems even with a very simple "hello world" type example. Here's some code that works fine in Chrome 70, but fails with "undefined is not a function" in Chrome 40:
<script src="https://unpkg.com/#babel/standalone#7.2.5/babel.js"></script>
<script type="text/babel">
async function test() {}
console.log("done");
</script>
JSBin link for testing this code
Browserling link for testing on Chrome 40
Here's the stack trace, screenshotted from the browserling page:
And here's the offending bit of code:
This seems to be related to this question, but I'd have thought that the standalone would "stand alone" and not require any extra stuff to polyfill it. At a file size of 5.7mb, shouldn't Object.assign be polyfilled? Maybe I'm missing something here?
Thanks to #Keith's comment for letting me know that I need to include polyfills separately. Here's a working "hello world" with babel.js:
<script src="https://polyfill.io/v2/polyfill.js?features=default,es5,es6&flags=gated,always"></script>
<script src="https://unpkg.com/#babel/standalone#7.2.5/babel.js"></script>
<script type="text/babel" data-presets="es2015,es2016,es2017,stage-3">
async function test() { return 10; }
console.log("done");
</script>
Edit: When testing it with my real code I was getting "runtimeGenerator not defined" messages, so this isn't a complete solution. I tried including it straight from the source, and it seemed to work, but then I was getting "undefined is not a function" again, and so to save my what is left of my hair and sanity I stepped away from the computer.
Edit 2: Here's what I ended up needing:
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/facebook/regenerator/packages/regenerator-runtime/runtime.js"></script>
<script src="https://polyfill.io/v2/polyfill.js?features=default,es5,es6,Array.prototype.##iterator,Array.prototype.entries,Array.prototype.find,Array.prototype.findIndex,Array.prototype.copyWithin,Array.prototype.findIndex,Array.prototype.includes,Array.prototype.keys,Array.prototype.values,DOMTokenList.prototype.##iterator,DocumentFragment,Element.prototype.dataset,EventSource,Function.name,HTMLCanvasElement.prototype.toBlob,HTMLDocument,MutationObserver,NodeList.prototype.##iterator,IntersectionObserver,IntersectionObserverEntry,NodeList.prototype.##iterator,Object.entries,Object.values,Promise.prototype.finally,RegExp.prototype.flags,String.fromCodePoint,String.prototype.codePointAt,String.prototype.padEnd,String.prototype.padStart,String.prototype.repeat,Symbol.hasInstance,Symbol.isConcatSpreadable,Symbol.match,Symbol.replace,Symbol.search,Symbol.species,Symbol.split,Symbol.toPrimitive,Symbol.toStringTag,console.exception,fetch,screen.orientation,setImmediate&flags=gated,always"></script>
<script src="https://unpkg.com/#babel/standalone#7.2.5/babel.js"></script>
<script>
var beforeCode = "YOUR ES6+ CODE";
var afterCode = Babel.transform(beforeCode, {
presets: ['es2015','es2016','es2017','stage-3'],
plugins: ['transform-async-to-generator','transform-regenerator'],
}).code;
var script = document.createElement("script");
script.innerHTML = afterCode;
document.head.appendChild(script);
</script>
I also needed to add a NodeList.forEach polyfill which polyfill.io doesn't support.
I'm using RequireJS 2.1.15, and I have trouble getting the errback that I pass to the library to be executed. Here is a small sample that illustrates my problem.
define("parent", ["missing"], function(){
return new Parent();
});
require(["parent"], function(parent){
alert("parent");
}, function(err){
alert("err");
});
(corresponding fiddle at : http://jsfiddle.net/605w0ex5/2/)
When I run this code, none of the success or error functions of the require() actually ends up called, but RequireJS prints a console message saying Error: Script error for: missing.
My problem here is that my require() call appears to be in limbo. It is neither successful nor failed even though one of the module it explicitly depends on will never ever be loaded. And the parent will never be loaded because a module is depends on cannot be loaded.
The problem is I DO want to be notified when my require() call cannot be satisfied. How can I get RequireJS to actually call my errback?*
I'm having this problem on Chrome 39 and RequireJS 2.1.15.
I'm ready to call it a bug in RequireJS because a) we get the expected behavior in FF and b) if we do the following, we also get the expected behavior.
What I did is take your code and create an HTML page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8"/>
<script type="text/javascript" src="js/require.js"></script>
</head>
<body>
<script>
require.config({
baseUrl: "js"
});
require(["parent"], function(parent){
alert("parent");
}, function(err){
console.log(err);
alert("err");
});
</script>
</body>
</html>
The js subdirectory contains RequireJS and a file named parent.js, which contains:
define(["missing"], function(){
function Parent () {}
return new Parent();
});
With this setup, the errback is called as expected. I can also add the name of the module to the define and it works with that too. But if the parent module is created like you did, then the errback is never called.
The other thing that makes me ready to call it a bug is that in one large application of mine I rely on errbacks for proper loading of modules. The application is tested in multiple versions of FF, IE, Chrome on multiple OSes and it works. (And I use it non-optimized and optimized with r.js.) The only thing I do not do that you code does is define a module outside of an individual file.
Update: I figured out what the issue was, see my comment below.
Is there a way to guarantee state before each Jasmine test?
For example:
describe('some thing', function () {
beforeEach(function () {
doSetup();
// this expect does not evaluate :(
expect(something).toBe(inSomeState);
});
it('has some behavior', function () {
// test code
});
});
The expect inside of the setup make no difference at all. Even throwing an error in the beforeEach does nothing. I would like to have some assurance that the setup has completed correctly before running the next test.. is there a way to do this?
Okay I see what the issue is. Hoping this will help other people out there having this same issue. grunt-contrib-jasmine does not display errors or failed expects inside of beforeEach or afterEach with the display option set to short. Setting this option to full will once again display Errors and failed expects.
I'm building a normal webpage which requires me to load about five CSS files and ten Javascript files.
When loading them separately in the HTML page, my webpage loads fine.
Now for production, I concatenated all the Javascript into a single file, in the order needed, and all the CSS into another file. But when I try to run the web page with the concatenated files it throws an error saying:
Uncaught TypeError: undefined is not a function
On the line where jquery.min.js is being loaded in the concatenated Javascript file.
What can I do to mitigate this? I want to concatenate all files and minify them for production. Please help.
EDIT: I merged the Javascript and CSS in the order they were when they were being loaded individually and were working fine.
Assuming this problem still has not be resolved, a lot of individual files don't end their code with a semicolon. Most jQuery scripts end with (jQuery) and you need to have (jQuery);.
As separate files the script will load just fine but as one individual file you need the semicolons.
You might have to re-check the order in which you are merging the files,
it should be something like:
jquery.min.js
jquery-ui.js
any third party plugins you loading
your custom JS
This solution worked for me
;(function($){
// your code
})(jQuery);
Move your code inside the closure and use $ instead of jQuery
I found the above solution in https://magento.stackexchange.com/questions/33348/uncaught-typeerror-undefined-is-not-a-function-when-using-a-jquery-plugin-in-ma
after seraching too much
I got the same error from having two references to different versions of jQuery.
In my master page:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
And also on the page:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
I had this problem recently with the jQuery Validation plug-in, using Squishit, also getting the js error:
"undefined is not a function"
I fixed it by changing the reference to the unminified jquery.validate.js file, rather than jquery.validate.min.js.
#MvcHtmlString.Create(
#SquishIt.Framework.Bundle.JavaScript()
.Add("~/Scripts/Libraries/jquery-1.8.2.min.js")
.Add("~/Scripts/Libraries/jquery-ui-1.9.1.custom.min.js")
.Add("~/Scripts/Libraries/jquery.unobtrusive-ajax.min.js")
.Add("~/Scripts/Libraries/jquery.validate.js")
.Add("~/Scripts/Libraries/jquery.validate.unobtrusive.js")
... more files
I think that the minified version of certain files, when further compressed using Squishit, for example, might in some cases not deal with missing semi-colons and the like, as #Dustin suggests, so you might have to experiment with which files you can doubly compress, and which you just leave to Squishit or whatever you're bundling with.
For those out there who still couldn't fix this, I did so by changing my 'this' to '$(this)' when using jQuery.
E.G:
$('.icon').click(function() {
this.fadeOut();
});
Fixed:
$('.icon').click(function() {
$(this).fadeOut();
});
I've run into the very same issue, when mistakenly named variable with the very same name, as function.
So this:
isLive = isLive(data);
failed, generating OP's mentioned error message.
Fix to this was as simple as changing above line to:
isItALive = isLive(data);
I don't know, how much does it helps in this situation, but I decided to put this answer for others looking for a solution for similar problems.
Yes, i also I fixed it changing in the js libraries to the unminified.
For example, in the tag, change:
<script type="text/javascript" src="js/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.rcarousel.min.js"></script>
For:
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.rcarousel.js"></script>
Quiting the 'min' as unminified.
Thanks for the idea.
Remember: Javascript functions are CASE SENSITIVE.
I had a case where I'm pretty sure that my code would run smoothly. But still, got an error and I checked the Javascript console of Google Chrome to check what it is.
My error line is
opt.SetAttribute("value",values[a]);
And got the same error message:
Uncaught TypeError: undefined is not a function
Nothing seems wrong with the code above but it was not running. I troubleshoot for almost an hour and then compared it with my other running code. My error is that it was set to SetAttribute, which should be setAttribute.
In case there are any morons out there like me, I had this frustrating problem because I forgot a simple
new
keyword before instantiating a new object.
I just had the same message with the following code (in IcedCoffeeScript):
f = (err,cb) ->
cb null, true
await f defer err, res
console.log err if err
This seemed to me like regular ICS code. I unfolded the await-defer construct to regular CoffeeScript:
f (err,res) ->
console.log err if err
What really happend was that I tried to pass 1 callback function( with 2 parameters ) to function f expecting two parameters, effectively not setting cb inside f, which the compiler correctly reported as undefined is not a function.
The mistake happened because I blindly pasted callback-style boilerplate code. f doesn't need an err parameter passed into it, thus should simply be:
f = (cb) ->
cb null, true
f (err,res) ->
console.log err if err
In the general case, I'd recommend to double-check function signatures and invocations for matching arities. The call-stack in the error message should be able to provide helpful hints.
In your special case, I recommend looking for function definitions appearing twice in the merged file, with different signatures, or assignments to global variables holding functions.
Make sure you have commented out any commentaries. Sometimes when copying and pasting you will leave out the "/*!"
Also when you go into the console they will list your errors and you should take it one at a time. If you see "Uncaught SyntaxError: Unexpected token * " That might mean it is reading your js file and it isn't getting past the first line.
/*!
* jquery.tools 1.1.2 - The missing UI library for the Web
*
* [tools.tabs-1.0.4, tools.tooltip-1.1.2, tools.scrollable-1.1.2, tools.overlay-1.1.2, tools.expose-1.0.5]
*
* Copyright (c) 2009 Tero Piirainen
* http://flowplayer.org/tools/
* File generated: Wed Oct 07 09:40:16 GMT 2009
*/
I got this when I accidentally passed too many parameters into a jquery function that only expected one callback parameter.
For others troubleshooting: make sure you check all your jquery function calls for extra parameters.
I am using JQuery's getScript function to load scripts depending on the device type, to hope fully save on unnecessary requests and load time for mobile devices. I have this code currently:
<script type="text/javascript">
$(document).ready(function(){
$.getScript('http://dev.imadeamerica.com/wp-content/themes/imadeamerica/js/mfc.js', function(){
alert('It WORKED!');
});
});
</script>
But it's not working, because I keep getting the error $(window)._scrollable is not a function. The only weird thing is that if you visit http://dev.imadeamerica.com/wp-content/themes/imadeamerica/js/mfc.js there is no call to that function. When I put a different script in the getScript function it works fine. But for some reason it thinks I am calling a function called $(window)._scrollable even though it's not present in that file.
I haven't found anything like this before and any help would be much appreciated.
The first line of setUp, line 27, has this:
$(window)._scrollable();
So, yes, you are calling that function.
open your script and # line no 27 you have a call $(window)._scrollable(); please define the function cz that functions is not defined
Have the same issue when update bootstrap v4.0 to v4.3.1
Code example:
`https://codepen.io/pasha-oleynik/pen/yWvjaQ?editors=1011`
To fix need to use jquery without slim postfix. (use jquery-3.3.1.min.js instead of jquery-3.3.1.slim.min.js)