Skip to content

Instantly share code, notes, and snippets.

@wardbell

wardbell/minMocha.html

Last active January 19, 2021 12:23
Show Gist options
  • Save wardbell/9ead31db1ce8ccdaf387 to your computer and use it in GitHub Desktop.
Save wardbell/9ead31db1ce8ccdaf387 to your computer and use it in GitHub Desktop.
Download ZIP
Minimal mocha/chai in browser
Raw
minMocha.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title>Mocha/Chai Basic Tests</title>
<style>
body {
font: 18px/1.5 "Helvetica Neue", Helvetica, sans-serif;
padding-left: 20px;
}
</style>
</head>
<body>
<p>
Click <a href="/minMocha.html" title="Start over"><img src="https://raw.githubusercontent.com/johnpapa/pluralsight-ng-testing/master/src/client/images/home.png" style="width: 18px"></a> to start over.<br/>
Click a <em>description title</em> to run its specs only
(see "<a href="http://mochajs.github.io/mocha/#grep-option" target="_blank" title="MochaJS grep option">
?grep</a>" in address bar).<br/>
Click a <em>spec title</em> to see its implementation.
</p>
<div id="mocha"></div>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/chai/1.10.0/chai.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.min.js"></script>
<script src="//cdn.rawgit.com/rstacruz/mocha-clean/v0.3.0/index.js"></script>
<script>
mocha.setup('bdd');
mocha.traceIgnores = ['mocha.min.js', 'chai.min.js'];
expect = chai.expect;
</script>
<script>
<!-- specs/tests here -->
</script>
<script>
mocha.run();
</script>
</body>
</html>
@wardbell
Copy link
Author

Minimal mocha/chai in browser

Demonstrates my idea of the "minimum, effective" example of mocha/chai that can be run in a browser.

Try it

Serve it in brackets.io

  • open minMocha.html
  • serve it with "live preview" (click the lightening bolt icon on the right).

Serve it w/ node "live-server"

The brackets "live preview" is nice but (a) you might not be using brackets and (b) is has a significant annoyance: it disconnects when you open the chrome developer tools.

You might find using the node-based "live-server" is a more robust solution that also works with other editors and IDEs.

  • install "live-server" once: npm install live-server -g
  • change directory to where you unzipped it
  • serve it: live-server
  • view it in a browser: http://localhost:8080/minMocha.html

"live-server" is a simple static file server with the live reload capability. If you don't want live reload, try "http-server" instead.

What's up in the HTML?

Load one css & three scripts (from a cdn where possible)

Add "Home" icon with anchor to reset the page to its base state

<a href="/minMocha.html"><img src="..." ... ></a>

Add mocha div to hold test runner output

<div id="mocha"></div>

Add script to configure mocha/chai

mocha.setup('bdd');    // use the "bdd" style
mocha.traceIgnores = ['mocha.min.js', 'chai.min.js']; // tell mocha-clean to remove mocha and chai from stacktraces
expect = chai.expect;  // make chai's `expect` method global

Add script with sample tests

describe('Array', function(){
  ... tests here
});

Launch the mocha testrunner

mocha.run();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment