'How to setup sinon.js cdn in html file and use it?
I have a test.html file where I'm trying to test and display the result of some functions. I have Qunit setup using the CDN like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Rusty Inc. Org Chart WordPress Plugin JavaScript Tests</title>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.7.1.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div >
<h1>Here is the playground</h1>
<div id="playground"></div>
</div>
<script src="https://cdnout.com/sinon.js/"></script>
<script src="https://cdnout.com/sinon.js/sinon.js"></script>
<script type="module">
console.log('ssadsd')
function once(fn) {
var returnValue,
called = false;
return function () {
if (!called) {
called = true;
returnValue = fn.apply(this, arguments);
}
return returnValue;
};
}
it("calls the original function", function () {
var callback = sinon.fake();
var proxy = once(callback);
proxy();
assert(callback.called);
});
</script>
<script src="https://code.jquery.com/qunit/qunit-2.7.1.js"></script>
<script type="module">
import { subscribe, updateTree, updateSecretURL, getTree , createExpandCollapseCallback } from '../framework.js';
import { ui , askUserForTeamDetails } from '../ui.js';
const q = QUnit;
q.module( 'Framework' );
q.test( 'updateTree does not update the tree if it is given null', assert => {
const tree = { x: 100 };
updateTree( tree );
tree.x = 200;
updateTree( null );
assert.strictEqual( getTree().x, 200, 'State object was modified without changing the reference' );
} );
q.test( 'updateTree and updateSecretURL calls all subscribed callbacks', assert => {
assert.expect( 6 );
subscribe( () => assert.ok( true, 'subscribed callback 0 called' ) );
subscribe( () => assert.ok( true, 'subscribed callback 1 called' ) );
updateTree();
updateTree( { id: 1 } );
// console.log('ree-', getTree())
updateSecretURL( 'http://hi:)' );
} );
q.test('animation duraion is as much provided', assert=>{
const tree = {"id":1,"name":"Rusty Corp.","emoji":"🐕","parent_id":null,"children":[{"id":2,"name":"Food","emoji":"🥩","parent_id":1,"children":[{"id":"cltp","name":"new","emoji”:”🤢”,”parent_id":2,"children":[]}]},{"id":3,"name":"Canine Therapy","emoji":"😌","parent_id":1,"children":[{"id":4,"name":"Massages","emoji":"💆","parent_id":3,"children":[]},{"id":5,"name":"Games","emoji":"🎾","parent_id":3,"children":[]},{"id":"8xza","name":"lol","emoji":"😀","parent_id":3,"children":[]},{"id":"lctu","name":"new","emoji":"🔥","parent_id":3,"children":[]}]}]};
updateTree( tree );
const secretURL= "random.com"
const insertionElement = document.getElementById("playground")
ui(tree,secretURL,true,insertionElement)
const pluginUI = document.querySelector(`#ui > button`)
console.log('lel', pluginUI );
const durationTime = 1500;
const errorMargin = 200;
const dur2 = 3000
const expandCollapse = createExpandCollapseCallback( '#ui > .team','.children', durationTime );
const done = assert.async();
const start = window.performance.now();
expandCollapse()
const end = window.performance.now();
done();
assert.ok( end - start < durationTime + errorMargin, 'someytthing untrue' );
} )
// q.test('', assert => {
// // const input = askUserForTeamDetails();
// // console.log('asa', input);
// } )
</script>
</body>
</html>
The file above first creates a module script for Sinon just like for Qunit(It comes after Sinon.js). After declaring the module, I added a dummy Sinon test from the docs. Further, there is a similar module setup for Qunit tests, they run fine but I get an error:Uncaught ReferenceError: it is not defined for Sinon tests. How can I set up Sinon js in an HTML file and write tests?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|