/

Introduction to Frontend Testing: A Guide to Getting Started with Mocha and Chai

Introduction to Frontend Testing: A Guide to Getting Started with Mocha and Chai

Frontend testing is an essential part of developing robust applications. In this blog post, we will explore how to start testing frontend applications using Mocha and Chai, two popular testing tools.

Setting Up Mocha and Chai

To begin, we need to download the necessary files for Mocha and Chai. You can find the files at the following links:

Once you have downloaded the files, create a test/ subfolder on your site and place the respective mocha.js, chai.js, and chai-jquery.js files inside it.

Next, include the following script tags in your index.html file to load the Mocha, Chai, and Chai-jQuery files:

1
2
3
4
5
6
7
8
<script src="test/vendor/mocha.js" data-build-exclude="true"></script>
<script src="test/vendor/chai.js" data-build-exclude="true"></script>
<script src="test/vendor/chai-jquery.js" data-build-exclude="true"></script>
<script data-build-exclude="true">
  mocha.setup('bdd');
  expect = chai.expect;
</script>
<script src="test/test.web.js" data-build-exclude="true"></script>

Additionally, add a <div> element with the id mocha inside the body of your HTML file:

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

Writing Tests with Mocha and Chai

Now, let’s create a test.web.js file where we will write our testing rules:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
describe('Array', function() {
  describe('#indexOf()', function() {
    it('should return -1 when the value is not present', function() {
      expect([1,2,3].indexOf(5)).to.equal(-1);
      expect([1,2,3].indexOf(0)).to.equal(-1);
    })
  })
})

describe('After this', function() {
  it('should be logged in', function(done) {
    expect($('#the-main-div')).to.exist;
    done();
  });
});

These are just sample tests to demonstrate how to write tests with Mocha and Chai. You can customize and expand these tests to suit your specific application.

Running Tests

To run the tests in a browser, open the browser console and type mocha.run(). This allows you to watch the screen change and read the console messages while the tests are running.

If you prefer running the tests in the terminal using PhantomJS, a headless WebKit implementation, you can do so by following these steps:

  1. Download and install PhantomJS.
  2. Install Mocha globally using the npm command: npm install -g mocha.
  3. Download the front-tests package and place it in your project directory, specifically in the test/ folder.
  4. Run your tests by executing the following command: phantomjs run-mocha.js http://test-site.com

While PhantomJS may not provide the exact environment where your code will execute, it allows for easier automated detection of problems.

Using Testem for Continuous Integration

When in production, it is often necessary to run the test suite in the real environment where the application will run. Testem is a test runner that can automate this process. It is testing framework agnostic and can run Mocha, Jasmine, QUnit, or any other testing framework you prefer.

To use Testem, follow these steps:

  1. Install Testem globally using the npm command: npm install testem -g
  2. Navigate to the test/ directory of your application and run the command: testem
  3. Open your browser and navigate to the specified location to run the tests.

You can also specify the browser(s) on which you want to run the tests. For example, to run the tests on Chrome and Safari, use the command: $ testem -l Chrome,Safari

Testem can also be used in Continuous Integration mode by running the command: $ testem ci. This launches the tests in the specified browser and outputs the results in a readable format called TAP, which can be used in a Continuous Integration server for automation.

Browser Testing

During the development process, it is important to test your website on different browsers to ensure cross-browser compatibility. Here are some options for testing on different browsers:

  • Google Chrome: You can use the stable version as well as Chrome Canary, which provides access to new features before they are released to the main stable Chrome channel.
  • Firefox: Firefox Nightly is similar to Chrome Canary and provides daily updates.
  • Safari: Testing on Safari can be done using the WebKit Nightly Builds, which run Safari with an updated version of the underlying engine.

By testing your website on multiple browsers, you can identify and fix any compatibility issues that may arise.

In conclusion, frontend testing is crucial for ensuring the quality and reliability of your applications. With tools like Mocha and Chai, you can easily write and run tests for your frontend code. Additionally, using Testem and browser testing, you can automate the testing process and ensure compatibility across different browsers.

Tags: frontend testing, Mocha, Chai, browser testing, Testem