Skip to content

Testing in Bender

Jump to bottom Edit New page
Grzegorz Pabian edited this page Mar 27, 2015 · 14 revisions

After successfully installing Bender, it's time to write a test, configure and run it.

In this example we'll use Jasmine framework to write some tests for a simple JavaScript library.

To run the tests, you'll need benderjs-jasmine plugin. Check its README.md file for installation instructions.

Project's structure

The initial structure of the project looks as follows:

.
..
/lib/
    - ago.js
/node_modules/
    - benderjs_jasmine/
/tests/
    - assets/
        - helpers.js
        - results.js
    - script.js
    - html.js
    - html.html
  • /lib/ago.js - tested library
  • /node_modules/ - directory containing NPM dependencies
  • /tests/ - directory with tests and assets
  • /tests/assets/ - additional files used in tests
  • /tests/script.js - tests for library's basic API
  • /tests/html.js - tests for library's API that modifies HTML
  • /tests/html.html - HTML template for the above test

Test code

Now let's write some tests.

First, we'll test basic API of our library.

script.js:

/* bender-tags: script */
/* bender-include: %BASE_PATH%assets/helpers.js */

describe( 'Ago', function() {
    // testHelpers are defined in tests/assets/helpers.js file
    var h = testHelpers;

    it( 'should add "ago" to window', function() {
        expect( window.ago ).toBeTruthy();
        expect( typeof window.ago ).toEqual( 'function' );
    } );

    it( 'should return "1 second ago" if 1 second passed', function() {
        var now = Date.now();

        expect( ago( now - h.s2ms( 1 ) ) ).toEqual( '1 second ago' );
    } );

    it( 'should return "x seconds ago" if less than 45 seconds passed', function() {
        var now = Date.now();

        expect( ago( now ) ).toEqual( '0 seconds ago' );
        expect( ago( now - h.s2ms( 30 ) ) ).toEqual( '30 seconds ago' );
        expect( ago( now - h.s2ms( 45 ) ) ).not.toEqual( '45 seconds ago' );
    } );

    (...)

} );

Starting from the first line, we define some tags for this file using bender-tags directive. Those will be shown on the Dashboard.

Then, we add some helper functions stored in tests/assets/helpers.js file using bender-includes directive. %BASE_PATH% tag will be replaced with current test group's basePath.

Finally, we write some tests using Jasmine's API.

html.js:

/* bender-tags: html */
/* bender-include: %BASE_PATH%assets/helpers.js, %BASE_PATH%assets/results.js */

var oldNow;

beforeEach( function() {
	oldNow = Date.now;

	Date.now = function() {
		return +new Date( '18 July 2014' );
	};
} );

afterEach( function() {
	Date.now = oldNow;
} );

describe( 'Ago', function() {
	var h = testHelpers,
		r = testResults;

	it( 'should replace date in single element matching passed selector', function() {
		ago( '#date', false );
		expect(
			h.replaceWhitespaces( document.getElementById( 'date' ).outerHTML )
		).toEqual(
			h.replaceWhitespaces( r.id )
		);
	} );

	it( 'should replace dates in multiple elements matching passed selector', function() {
		ago( '.dates li' );
		expect(
			h.replaceWhitespaces( document.querySelector( '.dates' ).outerHTML )
		).toEqual(
			h.replaceWhitespaces( r.list )
		);
	} );
} );

This test looks pretty similar to the previous one. The only addition is assets/results.js file included.

html.html:

<ul class="dates">
	<li>Wed, 09 Aug 1995 00:00:00 GMT</li>
	<li>Aug 9, 1995</li>
	<li>lorem ispum dolor sit amet</li>
	<li>807919200000</li>
	<li><span>foo</span></li>
</ul>

<div id="date">Aug 9, 1995</div>

Here's the HTML template that will be used in the test's context. Above markup will be added to <body> section using dom-combiner. You should check dom-combiner's project page to see how it works.

Configuration

Now it's time to configure Bender to execute the tests.

Initialize Bender in current working directory with:

$ bender init

and modify newly created bender.js file:

First, add our library to the applications list:

applications: {
    ago: {
        path: 'lib/',
        files: [
            'ago.js'
        ]
    }
}

This will cause Bender to include lib/ago.js file in the test context.

Then, configure test framework adapter by choosing jasmine as a default framework and adding benderjs-jasmine to the plugins list:

framework: 'jasmine',

plugins: [ 'benderjs-jasmine' ],

Finally, configure the test group, let's name it Core:

tests: {
    Core: {
        applications: [ 'ago' ],
        basePath: 'tests/',
        paths: [
            '**',
            '!**/assets/**'
        ]
    }
}

Here we add ago to the applications list, set the basePath to tests/ directory and and use ** pattern to find test files in that directory. Finally, we exclude assets directory using ! at the beginning of the pattern - !assets/**.

Complete configuration file should look as follows:

var config = {
	applications: {
		ago: {
			path: 'lib/',
			files: [
				'ago.js'
			]
		}
	},

	framework: 'jasmine',

	plugins: [ 'benderjs-jasmine' ],

	tests: {
		Core: {
			applications: [ 'ago' ],
			basePath: 'tests/',
			paths: [
				'**',
				'!**/assets/**'
			]
		}
	}
};

module.exports = config;

Running the tests

Having the tests and Bender configuration ready, it's time to launch some tests.

First, start Bender server with command:

bender server run

or

bender server start

Please be warned that at the moment, starting a daemon is supported on Unix systems only.

Now open http://localhost:1030 URL in your browsers. You should see Bender Dashboard with the tests on the list. To run them, press Start tests button or press one of the IDs to launch a test separately.

You can download the complete test project from benderjs-example-project repository.

Copyright (c) 2014-2015, CKSource - Frederico Knabben

Getting started

Advanced use

Development

Clone this wiki locally