Front-End Web Testing

Setting up testing with Mocha & Chai

Introduction

Mocha & Chai are tools for running web tests. The world of testing is very confusing with tons of libraries. This is the simplest version I have found for getting front-end testing up and running. To clarify though, this front-end testing is just for general functionality. This is not for testing cross browser compatibility. For that, you'll want to use Selenium & and a Selenium driver.

What This Tutorial Covers

1. We'll cover installing Mocha & Chai.

2. We'll create a basic test.

What You Need For Just The Tutorial

You need Nodejs installed. These tools are installed using npm below, which requires node.

You need NPM installed. NPM is the node package manager. You need it to install these dependencies.

A server. We'll be adding testing to a front-end html page, but you need a server like Apache or a Nodejs server to actually deliver the html page to your browser.


What The Project Directory Should Look Like

When we're done creating everything, your project directory should look similar to below:

  • front-tests/
    • mytest.js

  • node_modules/
    • mocha/
      • mocha.css
      • mocha.js
      ├── chai/
      • chai.js

  • public/
    • css/
      • mocha.css // symlink
      ├── js/
      • mocha.js // symlink
      • chai.js // symlink
      • mytest.js // symlink
      ├── html/
      • mypage.html

  • package.json // exists after running npm install

Install Mocha & Chai

@@PROJECT-DIRECTORY@@

The directory of your project.

Installing these dependencies can all be done using npm. We're saving them as --save-dev, which means you can exclude them from your production build by running npm install --production.

copy
cd @@PROJECT-DIRECTORY@@
npm install --save-dev mocha
npm install --save-dev chai

Create Test Folder & Test File

All of our testing files can be named whatever you want and put wherever. I'm going to put them in a folder called "front-tests".

copy
mkdir @@PROJECT-DIRECTORY@@/front-tests
touch @@PROJECT-DIRECTORY@@/front-tests/mytest.js

Create Symlinks

Usually, your node_modules folder stays hidden from your users & you put all web facing files in a public folder. We need to make several files that are hidden, available in our public folder, so we'll use symbolic links to accomplish that. If you're using a server like Apache, make sure it's enabled to forward traffic from the symbolic link to the real file.

copy
ln -s @@PROJECT-DIRECTORY@@/node_modules/mocha/mocha.css @@PROJECT-DIRECTORY@@/public/css/mocha.css
ln -s @@PROJECT-DIRECTORY@@/node_modules/mocha/mocha.js @@PROJECT-DIRECTORY@@/public/js/mocha.js
ln -s @@PROJECT-DIRECTORY@@/node_modules/chai/chai.js @@PROJECT-DIRECTORY@@/public/js/chai.js
ln -s @@PROJECT-DIRECTORY@@/front-tests/mytest.js @@PROJECT-DIRECTORY@@/public/js/mytest.js

Integrate Mocha & Chai Into Front-End File

Integrating Mocha, Chai, & your tests, just requires importing them using link & script tags in your html. It's best practice to load these files last, so they should go at the bottom of your <body> tag. The code below goes into public/html/mypage.html

copy
<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'>
	</head>
<body>
	<div id="exists">We will test to see if this div exists</div>
	// the mocha chai dependencies should be loaded last, at bottom of <body> tag
	<div id="mocha"></div>
	<link rel="stylesheet" href="@@PROJECT-DIRECTORY@@/css/mocha.css"/>
	<script src="@@PROJECT-DIRECTORY@@/js/mocha.js"></script>
	<script src="@@PROJECT-DIRECTORY@@/js/chai.js"></script>
	<script>mocha.setup('bdd')</script>
	<script src="@@PROJECT-DIRECTORY@@/js/mytest.js"></script>
</body>
</html>

Create Mocha Chai Test

Mocha is structured with the expectation that you'll be testing object-oriented design, although you don't have to use it that way. So where you see 'Class' would typically be named after the class you're testing or a related group of tests. Where you see '#method' would typically be named after a class method you're testing or a related group of functionality. Each test though, lives inside the it() function. It's first parameter is a string that describes what you want the test result to be. That style originated from BDD (Behavior Driven Developement), which is a philosphy on testing.

Our test will be very simple. It will get a div with the id "exists" from the DOM and verify that it actually exists. The code below goes into front-tests/mytest.js

copy
var should = chai.should();

describe('Class',function() {

    before(function() {
        // runs before all tests in this block
    });

    after(function() {
        // runs after all tests in this block
    });

    beforeEach(function() {
        // runs before each test in this block
    });

    afterEach(function() {
        // runs after each test in this block
    });

    describe('#method',function() {
        it('should do something',function(done) {
	        var simple = document.getElementByID("exists").innerHTML;
	        simple.should.equal('We will test to see if this div exists');
            done();
        });
    });
});

Run Mocha Tests

Finally, to run the tests, open mypage.html in a browser. Then, open the developer's console of your browser and type in the following:

copy
mocha.run();

If set up correctly, you should see the overall results in the top right corner of the page. You should also see more specific results listed in the html div with id "mocha", which for us is placed at the bottom.

And that's it!