Q-Unit Global Failure - javascript

I have just attempted to set up Q-Unit Testing, for my javascript functions. However, I seem to be getting an error of Global Failure
Within my JS file : script.js, I have to have the test code above all of my JS code, else the unit tests do not run and I only get the global failure message. However, if I paste the unit tests above all of the JS functions, the tests do then run but I still get the global failure error.
Can someone guide in the right direction.
test-script.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Q-Unit Tests</title>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.10.0.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="https://code.jquery.com/qunit/qunit-2.10.0.js" integrity="sha256-X1fQXHSYGxa4V2bqkEAQW0DQGSxJrKveasahr959o28=" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
script.js:
function square(x) {
return x * x;
}
QUnit.test( "square", function( assert ) {
var result = square(2);
assert.equal( result, "4", "square(2) should be 4." );
});
//Normal JS functions are below here

I'm posting the answer to this one as I think by including the CDN link for jQuery that has solved the global failure error, as it is no longer appearing.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Related

How to import pdf.js using cdn

I wanted to use pdf.js for a project of mine but I faced an issue of importing it, basically, the CDN doesn't work
Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist#2.7.570/build/pdf.min.js"></script>
</head>
<body>
<canvas id="my-canvas"></canvas>
<script>
pdfjsLib.getDocument('./ahmed.pdf').then(doc => {
console.log("this file has" + doc._pdfInfo.numPages);
});
</script>
</body>
</html>
and that is the errors that my console shows
Deprecated API usage: No "GlobalWorkerOptions.workerSrc" specified.
Uncaught TypeError: pdfjsLib.getDocument(...).then is not a function
So what should i do to solve this problem and thank you so much
You have to set GlobalWorkerOptions.workerSrc to /build/pdf.worker(.min).js of same version:
pdfjsLib.GlobalWorkerOptions.workerSrc =
"https://cdn.jsdelivr.net/npm/pdfjs-dist#2.7.570/build/pdf.worker.min.js"; 👈
pdfjsLib.getDocument('./ahmed.pdf').promise.then(doc => {
console.log(`This document has ${doc._pdfInfo.numPages} pages.");
});
And, as #Pasi has mentioned, you have to promisify .getDocument() by chaining .promise on it. Without it, there is no .then().
See the "Hello World with document load error handling" example on this page to get started: https://mozilla.github.io/pdf.js/examples/
(Your snippet is missing .promise after getDocument() and setting the workerSrc property)

Calling a javascript function from another javascript file and getting Reference errors and Invalid state errors and some warnings inside atom IDE

I am a new to javascript coding in p5 and i am getting errors when trying to call a function from another javascript file. Here is my html file:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js example</title>
<style> body {padding: 0; margin: 0;} </style>
<script src="../p5.min.js"></script>
<script src="../addons/p5.dom.min.js"></script>
<script src="../addons/p5.sound.min.js"></script>
<script src="sketch.js"></script>
<script src="file.js"></script>
</head>
<body>
</body>
</html>
Here is my javascript file 1:
function setup() {
createCanvas(400,400);
}
function draw(){
pr("hello world",x,y);
}
Here is my javascript file 2:
function pr(text,x,y){
text(text,x,y);
}
I edited the function arguments because i forgot that text function has a different sytnax than i wrote. Still getting errors:
InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable
Use of the orientation sensor is deprecated. p5.min.js:3:232007
Use of the motion sensor is deprecated. p5.min.js:3:232007
ReferenceError: x is not defined
The files has different scope, so one isn't aware of the other. If you want a function to be accessible from another file you need to add it to a shared scope. You can put it on the window (global scope) object and then to use it elsewhere.
file1:
function there(text){
console.log(text)
}
window.there = there
file2:
function here(){
there("hello world");
}
here()
In your html file you should first import file1 and after that file2. That way when you call it it is already the.
NOTE: writing on the window object is not a good practice! you should probably find a tool that creates a bundle an let you access a function from another file. Check Webpack for example.

"$" Undefined when using jQuery in Visual Studio

I am trying to learn how to get JSON data using jQuery (using Visual Studio) but am hitting a runtime error in VS.
Error message: JavaScript runtime error: '$' is undefined
It seems that VS is just not recognizing jQuery. Alternatively, I have tried referencing the external jQuery library via their CDN but it did not resolve it.
Anyone have an idea why I am running into the error?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>JSON Test</title>
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/jquery-1.10.2.min"></script>
<script src="/js/default.js"></script>
</head>
<body>
<button onclick="canWeGetData()">Get Data!</button>
</body>
</html>
Default.JS:
function canWeGetData() {
var error = "Null data!";
var success = "Good data!";
$.getJSON("http://ip.jsontest.com/?callback=showMyIP", function (data) {
if (data == null) {
document.writeln(error);
}
else {
document.writeln(success);
}
});
};
Jquery isn't present.
Look at this line:
<script src="/js/jquery-1.10.2.min.js"></script> <!-- you missed the .js -->
Also, Check whether the path is correct. Or simply use
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
doubt jquery is not present
try
<script src="//code.jquery.com/jquery-1.9.1.js"></script>

Jquery Unit Testing with Qunit and JSMockito (or other framework?), output isn't working as expected

I'm new to unit testing in Javascript and am having some trouble adapting my understanding of unit testing from Java to Javascript. I have the code below that I am trying to do, basically I just want to mock the divide function. Currently, when I try it like this it just says there are no tests to run. I am open to suggestions of using a different mocking framework, I have been looking at a number of tutorials but just can't seem to wrap my head around javascript mocking. Any advice is appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
<script type="text/javascript" src="http://witnesstreefiles.s3.amazonaws.com/development/jsmockito-1.0.3-minified.js"></script>
<script>
function divide(a,b)
{
return a / b;
}
$(document).ready(function(){
mockFunc = mockFunction();
when(mockFunc)(anything()).then(function(arg) {
return "foo ";
});
divide = mockFunc
module("Basic Unit Test");
test("Sample test", function()
{
expect(1);
equals(divide(4,2),
2,
'Expected 2 as the result, result was: ' + divide(4,2));
});
});
</script>
</head>
<body>
<h1 id="qunit-header">QUnit example</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup, will be hidden</div>
</body>
</html>
Two problems:
1) You need to include JsHamcrest: http://jshamcrest.destaquenet.com/
E.g.
<script type="text/javascript" src="https://github.com/downloads/danielfm/jshamcrest/jshamcrest-0.5.2-minified.js"></script>
2) You need to include both JsHamcrest and JsMockito into QUnit, by running the appropriate javascript functions (inside your script block is best):
JsHamcrest.Integration.QUnit();
JsMockito.Integration.QUnit();
cheers,
chris

Uncaught reference error: quickread is not defined

I get an UncaughtReferenceError: QuickRead is not defined on line 10 which is QuickRead.applyToLinks();
I am using the script from here http://www.readshout.com/quickread and I believed I followed all the directions it has to use it, yet its not working.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<script language="JavaScript" type="text/javascript" src="http://www.readshout.com/bookmarklets/quickread/quickread.js"></script>
<script>
//QuickRead.setFilter('a.my_links');
QuickRead.applyToLinks();
</script>
Give up on google<br />
ycomb exp
</body>
</html>
Works for me. You could however try to add jQuery 1.4.2 manually, as QuickRead seems to dynamically load it. Otherwise try Firebug to find the error.

Categories

Resources