Skip to content

Instantly share code, notes, and snippets.

@osvik
Last active July 11, 2021 22:00
Show Gist options
  • Save osvik/8dcaa048ee7fd628a32c366d9e0a303a to your computer and use it in GitHub Desktop.
Save osvik/8dcaa048ee7fd628a32c366d9e0a303a to your computer and use it in GitHub Desktop.
Example on how to run tests in the browser. Running tests in the browser has advantages in many use cases as you can test the page in different mobile and desktop browsers and interact with the DOM.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of simple javascript testing in the browser</title>
</head>
<body>
<h1>Example of simple javascript testing in the browser</h1>
<p>Testing in the browser may be useful to test stuff in the DOM. You can also use multiple browsers to test. In a
server testing environment you can also test with mobile phones.</p>
<script>
const foo = "124";
</script>
<!-- BEGIN TESTS IN THE BROWSER -->
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/9.0.2/mocha.min.css" as="style" onload="this.rel='stylesheet'" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/9.0.2/mocha.min.js" defer="defer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.3.4/chai.min.js" defer="defer"></script>
<div id="mocha"></div>
<script>
window.jQuery || document.write('<script src="https://code.jquery.com/jquery-3.6.0.min.js" defer="defer">\x3C/script>')
</script>
<script src="setup.js" defer="defer"></script>
<!-- Test files -->
<script src="tests.js" defer="defer"></script>
<!-- /Test files -->
<script src="run.js" defer="defer"></script>
<!-- END TESTS IN THE BROWSER -->
</body>
</html>
// You can also run mocha.run() in the developers console
mocha.run();
// Setup before all the test files
mocha.setup('bdd');
/**
* Tests in the browser with Mocha and Chai
* https://mochajs.org/
* https://www.chaijs.com/
* https://www.chaijs.com/api/assert/
*/
/*jshint esversion: 6 */
describe('Tests with Mocha and Chai', function () {
it('Assert is true', function () {
chai.assert(true);
});
it('One body element', function () {
chai.assert.lengthOf(jQuery("body"), 1, "Just one body");
});
it('Foo is a string', function () {
chai.assert.typeOf(foo, 'string');
});
it('Foo is a number', function () {
chai.assert.typeOf(foo, 'number');
});
});
describe('Simple Tests with just Mocha', function () {
it("There's a body element", function () {
const uselessVariable = 1;
if (jQuery("body").length !== 1) throw ("No body present");
});
it("An exception was thrown", function () {
throw ("This is an error");
});
});
describe('Nested tests:', function () {
describe('Son', function () {
it("Nested assertion 1", function () {
chai.assert.equal(1, 1, "One is one");
});
});
describe('Daughter', function () {
it("Nested assertion 2", function () {
chai.assert.isTrue(true, "True is true");
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment