Introduction

Spectacular is a BDD framework for CoffeeScript and JavaScript whose attempt to bring the power of RSpec to JavaScript. Spectacular tries to favor the best practices used for writing better RSpec tests in its design.

These are the kind of tests you can write with Spectacular:

describe Array, ->
  given 'item', -> foo: 'bar'

  it -> should exist

  itsInstance 'length', -> should equal 0

  describe '::indexOf', ->
    context 'with an item not present in the array', ->
      itsReturn with: (-> [@item]), -> should equal -1

    context 'with an item present in the array', ->
      subject 'array', -> [@item]

      specify 'the returned value', ->
        expect(@array.indexOf @item).to equal 0

Features, the short tour

• Conditioned Specs
• Matcher based description
• Implicit subjects
• Describe auto-subject
• Factories
• JSON and HTML fixtures (and more)
• Promised-based tests run
• Synchronous and asynchronous matchers
• Synchronous and asynchronous tests
• Browser support
• Shared examples
• Custom matchers
• CSS-queries expressions to test the DOM content
• Strings and objects diff in comparison results
• The API is provided with both camelCase and snake_case version
• No external dependencies in browsers

---

Install

NodeJS

Spectacular is available as a npm module, you can then install it with:

npm install -g spectacular

This will install Spectacular globally and allow you to use the Spectacular command line tool.

Browser

First download Spectacular:

Then puts Spectacular in your html file:

<link href="build/css/spectacular.css" rel="stylesheet" type="text/css"/>
<script src="build/vendor/snap.js" type="text/javascript"/>
<script src="build/vendor/jade.js" type="text/javascript"/>
<script src="build/js/spectacular.js" type="text/javascript"/>
<script src="build/js/templates.js" type="text/javascript"/>

You can see the runner live on the Online Test Tool page.

You can pass options to spectacular by defining spectacular.options before the spectacular script node :

spectacular =
  options:
    verbose: false
    trace: true
    longTrace: false
    showSource: true
    fixturesRoot: './js/fixtures'
    globs: []

You can also pass an array containing the paths to the specs files in a spectacular.paths array.

spectacular =
  paths: ['js/specs.js']

It will allow the runner to crop the stack at the point a spec file is found and display the source of the test that failed. Errored test's stack is not cropped.

Spectacular Server

If you don't want to bother create a html file to run your test you can use the server feature of Spectacular.

By running:

spectacular server specs/**/*.spec.coffee

You start a server that can be accessed on http://localhost:5000. It bootstrap Spectacular for you with your tests, helpers, matchers, etc.

The same server is used to run tests on PhantomJS and SlimerJS.

Source Map Support

If you use the Spectacular server to test your code on the browser, no additional configuration is needed. However, if you use Spectacular in your own test page some additional configuration is needed to enable source mapping.

In order for Spectacular to kown which files have source mapping and how to retrieve the source and the mapping for that file, some methods have to be defined in the options before the Spectacular start:

• hasSourceMap: A function that takes an url and return true if the file have source map support.
• getSourceURLFor: A function that takes an url and return the url of the corresponding source file.
• getSourceMapURLFor: A function that takes an url and return the url of the json containing the source mapping.

A concrete example can be seen in the Spectacular server's source :

spectacular.options.hasSourceMap = function(file) {
  return /\.coffee$/.test(file);
};
spectacular.options.getSourceURLFor = function(file) {
  return file.replace('.coffee', '.coffee.src')
};
spectacular.options.getSourceMapURLFor = function(file) {
  return file.replace('.coffee', '.map')
};

Browser Support

Spectacular rely on some feature that may not be available in all browsers. You can find below the list of features and the minimum browser version needed to use them.

Command-line

The most simple way to use the spectacular command line tool is as follow:

spectacular test specs/**/*.spec.js

Commands

test	Runs the tests on NodeJS.
server	Starts a server. The specs can then be accessed from a browser at the the following address: http://localhost:5000. The default port can be changed by setting the PORT environment variable.
phantomjs	Assuming you have PhantomJS installed, it starts a server and run the test on PhantomJS.
slimerjs	Assuming you have SlimerJS installed, it starts a server and run the test on SlimerJS.

Options

-c, --coffee	Add support for CoffeeScript files. You can now run your specs with: spectacular --coffee specs/**/*.coffee.
-f, --format	Select the console output format (progress|documentation).
-r, --require PATH	Adds PATH to the array of paths to includes.
-v, --verbose	Enable verbose output.
-t, --trace	Enable stack trace report for failures (default is true).
--long-trace	By default the stack traces are cropped after 6 lines to limit the amount of output. You can display the full stack trace with this option.
-p, --profile	Add a report with the 10 slowest examples at the end of the output.
-d, --documentation	Use --format=documentation option instead.
-s, --server	Use the server command instead.
--phantomjs	Use the phantomjs command instead.
--phantomjs-bin PATH	Pass the path to the PhantomJS binary.
--slimerjs-bin PATH	Pass the path to the SlimerJS binary.
--source GLOB	When using the server, it allow to add files that matches the patterns as served files in the html runner. You can use this option as many times as you need.
--map, --source-map	Enable the support for CoffeeScript source map on both node and browsers. When using this mode with the browser without relying on the Spectacular server additional setup is required, please see the Source Map Support section for details.
-m, --matchers PATH	Use --require PATH instead.
--helpers PATH	Use --require PATH instead.
--fixtures PATH	Specify the path where project fixtures can be found, by default fixtures are loaded from ./specs/support/fixtures.
--no-trace	Remove stack trace from failures reports.
--random	Enable tests randomization.
--no-random	Disable tests randomization.
--seed INT	Sets the seed for the tests randomization.
--colors	Enable coloring of the output.
--no-colors	Disable coloring of the output.
--no-matchers	Don't require your matchers instead.
--no-helpers	Don't require your helpers instead.

Options can also be defined in a .spectacular file at the root of your project.