Qunit: ReferenceError: equals is not defined - javascript

Im QUnit newbie.
I created simple test but it fails with error: "ReferenceError: equals is not defined". My code is following:
simpleTests.js:
QUnit.test('isEven()', function (assert) {
equals(2, 1, 'one equals one');
})
simpleTestRun.js:
<html>
<head>
<title>QUnit Test Suite</title>
<link rel="stylesheet" href="qunit/qunit.css" type="text/css" media="screen">
<script type="text/javascript" src="qunit/qunit.js"></script>
<!-- Your JS library file goes here -->
<script type="text/javascript" src="simple.js"></script>
<!-- Your tests file goes here -->
<script type="text/javascript" src="simpleTests.js"></script>
</head>
<body>
<h1 id="qunit-header">QUnit Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
</body>
</html>
What is wrong?
UPDATE1:
I doing QUnit test on local disc, not through web server. How it affect testing?

equal (not equals) is a method of assert, so you have to use it like this:
QUnit.test('isEven()', function (assert) {
assert.equal(2, 1, 'one equals one');
})

Related

Uncaught TypeError: pJS_tag is null - ParticlesJS fails out of the box

I'm trying to run Particles.Js with no modifications, and its failing out of the box with this error:
Uncaught TypeError: pJS_tag is null
I've installed it via npm install. Here is my HTML
particlesJS.load('particles-js', 'assets/particles.json', function() {
console.log('callback - particles.js config loaded');
});
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
<script src="/node_modules/particles.js/particles.js"> </script>
</head>
<body>
<div class="particles-js"></div>
<div class="banner">test</div>
<script src=
"/node_modules/particles.js/demo/js/app.js">
</script>
</body>
</html>
I found my mistake, I forgot to set the "id" field, and assumed "class" was good enough.
Example:
Change
<div class="particles-js"></div>
to:
<div class="particles-js" id="particles-js"></div>

javascript program not appending markup correctly

I am following a tutorial in Jasmine and serverless. The problem I am facing is around Javascript.
There is a public directory which has an index.html
Jasmine tests are in public/tests directory. It also has an index.html.
Following JS code (SpecHelper.js below) is suppose to find markups with class markup in public/index.html and copy that code in <body> of public/tests/index.html but it isn't doing so. I am unable to find the issue.
public/index.html
<body>
<div class='markup'>
<div class='view-container container'>
<div class='one-half column'>
<h3>Learn JS, one puzzle at a time</h3>
<a href='' class='button button-primary'>Start now!</a>
</div>
<div class='one-half column'>
<img src='/images/HeroImage.jpg'/>
</div>
</div>
</div>
</body>
SpecHelper.js
var fixture;
function loadFixture(path) {
var html;
jQuery.ajax({
url: '/index.html',
success: function(result) {
html = result;
},
async: false
});
return $.parseHTML(html);
}
function resetFixture() {
if (!fixture) {
var index = $('<div>').append(loadFixture('/index.html'));
var markup = index.find('div.markup');
fixture = $('<div class="fixture" style="display: none">').append(markup);
$('body').append(fixture.clone());
} else {
$('.fixture').replaceWith(fixture.clone());
}
}
beforeEach(function () {
resetFixture();
});
public/tests/index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jasmine Spec Runner v2.3.4</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.3.4/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="lib/jasmine-2.3.4/jasmine.css">
<!-- App Dependencies -->
<script src="lib/jquery-2.1.4.js"></script>
<script src="/vendor.js"></script>
<!-- Test libraries -->
<script type="text/javascript" src="lib/jasmine-2.3.4/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-2.3.4/jasmine-html.js"></script>
<script type="text/javascript" src="lib/jasmine-2.3.4/boot.js"></script>
<!-- include source files here... -->
<script type="text/javascript" src="/app.js"></script>
<!-- include spec files here... -->
<script type="text/javascript" src="SpecHelper.js"></script>
<script type="text/javascript" src="app_spec.js"></script>
</head>
<body>
<!--This is always empty! -->
</body>
</html>
The test in Jasmine fails with following error
1 spec, 1 failure
Spec List | Failures
learnJS can show problem view
Expected 0 to equal 1.
Try this
fixture = $('<div class="fixture" style="display: none">').append(markup.html());
Then maybe
$('body').append(fixture.clone().html());
got it working..phew ... had to clear browser cache by going to developer tools, networks. I noticed that most files were being picked from memory. Right clicked and cleared cache and cookies.

jquery undefined / null error

I am a c programmer and trying to call jquery function from html.
For example from open source I am having below, I would like to make a variable wd accessible to webdriver-app.js
A.html:
<html>
<!-- jQuery & jQuery UI + theme (required) -->
<link href="jquery-ui.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<!-- keyboard widget css & script (required) -->
<link href="keyboard.css" rel="stylesheet">
<script src="jquery.keyboard.js"></script>
<script src="webdriver.js"></script>
<script src="base64-arraybuffer.js"></script>
<script src="FileSaver.js"></script>
<script src="hammer.min.js"></script>
<script src="webdriver-app.js"></script>
</head>
<input name="webDriverUrlPort" type="text" onchange="wd.onWebDriverUrlPortChange()" onkeyup="wd.onWebDriverUrlPortChange()"/>
<input name="webDriverUrlPort" type="text" onchange="wd.onWebPageChange()" onkeyup="wd.onWebPageChange()"/>
webdriver-app.js contains:
....
WebDriverJsController.prototype.onWebPageChange = function() {
this.view.updateSessionDepControls();
};
document.addEventListener("DOMContentLoaded", function(event) {
window.wd = new WebDriverJsController();
});
....
Currently, changing above wd.onWebPageChange() to window.wd.onWebPageChange() gives me undefined or null error. What could be wrong in above simplified code?

Ui-Grid Not Displaying (at all)

I'm using AngularJS. The controller is functioning; I can call functions and values from it via my view. I can assign values to my gridOptions.data without console error. I can define other properties for gridOptions without conosole error. But the grid doesn't display... at all.
My index.html has the following header:
<!--Lib-->
<!--jquery-->
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<!--<script src="https://code.jquery.com/jquery-1.12.4.js"></script>-->
<!--ng base-->
<script src="app/lib.bower/angular/angular.js"></script>
<script src="app/lib.bower/angular-route/angular-route.js"></script>
<!--ui grid-->
<script src="app/lib.bower/angular-ui-grid/ui-grid.js"></script>
<link href="app/lib.bower/angular-ui-grid/ui-grid.min.css" rel="stylesheet"/>
<!--Misc-->
<link rel="stylesheet" href="app/lib.bower/bootstrap/dist/css/bootstrap.min.css"/>
<script src="app/lib.bower/toastr/toastr.js"></script>
<link href="app/lib.bower/toastr/toastr.css" rel="stylesheet" />
<!--Custom-->
<script src="app/app.js"></script>
<!--Custom - Services-->
<script src="app/services/resetRequestService.js"></script>
<script src="app/services/adValidationService.js"></script>
<script src="app/services/userSearchService.js"></script>
<script src="app/services/passwordCreationService.js"></script>
<script src="app/services/toasterService.js"></script>
<!--Custom - Controllers-->
<script src="app/controllers/UserSearchController.js"></script>
<script src="app/controllers/HeaderController.js"></script>
<script src="app/controllers/PasswordResetRequestController.js"></script>
<!--Custom modules-->
<script src="app/modules/header.js"></script>
<!--Custom - Other-->
<link rel="stylesheet" href="app/css/passwordReset.css"/>
My controler is as such:
var userSearchController = function($scope, $interval, userSearchService) {
var vm = this;
vm.gridOptions = {
enableFiltering: true,
showGridFooter: true,
data: [
{
test: 'test',
test2: 'test2'
}
]
};
//more code
}
And the view has the following div:
<div ui-grid="vm.gridOptions" class="grid"></div>
Again, I don't get any errors, I just get... nothing on my .html; no data, no columns, not even a border, it entirely doesn't appear. I've ensured that the vm.gridOptions is assigned as soon as the controller starts up, and (again) I've ensured that I can run methods and get values from my controller.
I've poured over numerous tutorials which all have their own flavor of making ui-grid work, and I can't figure out what I'm doing wrong.
Anyone know what I'm missing?

Backbone Marionette console.log won't output

I am brand new to marionette and am following along with a textbook to build a simple app using marionette. I ran into this problem almost immediately, they telly you to put a console.log() in a function, except it doesn't show up in my browser when i run it. Here's the script below:
<script type="text/javascript">
var ContactManager = new Marionette.Application();
ContactManager.on("initialize:after", function(){
console.log("ContactManager has started!");
});
ContactManager.start();
</script>
And here's the whole HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Marionette Contact Manager</title>
<link href="./assets/css/bootstrap.css" rel="stylesheet">
<link href="./assets/css/application.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<span class="brand">Contact manager</span>
</div>
</div>
</div>
<div class="container">
<p>Here is static content in the web page. You'll notice that it gets 21 replaced by our app as soon as we start it.</p>
</div>
<script src="./assets/js/vendor/jquery.js"></script>
<script src="./assets/js/vendor/json2.js"></script>
<script src="./assets/js/vendor/underscore.js"></script>
<script src="./assets/js/vendor/backbone.js"></script>
<script src="./assets/js/vendor/backbone.marionette.js"></script>
<script type="text/javascript">
var ContactManager = new Marionette.Application();
ContactManager.on("initialize:after", function(){
console.log("ContactManager has started!");
});
ContactManager.start();
</script>
</body>
</html>
Any help would be greatly appreciated, I can do a console.log() outside of the ContactManager.on() code and it will work. Any ideas?
So i figured out the answer to my own question with a little research. Marionette has updated "initialize:after" to "start". For a full list of updates you can check here -->
https://github.com/marionettejs/backbone.marionette/blob/master/changelog.md#v100-rc1-view-commit-logs

Categories