How To Test With Phantom.js and Jasmine

Integration Of Jasmine Into The Build Process (Maven)

Jasmine is integrated with the jasmine-maven-plugin into the maven build process. Therefore only the pom.xml file will be enhanced by the following code, which specifies the jasmine-maven-plugin as plugin for the build process. The configuration of the jasmine-maven-plugin is also done in this file. The meaning of every configuration parameter can be looked up on the jasmine-maven-plugin project page under this link. The following configuration uses a the specRunnerTemplate REQUIRE_JS in order to function properly with RequireJS. Further information about spec runner templates can be found here. On the next build the needed dependencies will be automatically resolved just like it is in the nature of maven.

pom.xml

<build>
<plugins>
    ...
      <plugin>
        <groupId>com.github.searls</groupId>
        <artifactId>jasmine-maven-plugin</artifactId>
        <version>1.3.1.2</version>
        <executions>
          <execution>
            <goals>
              <goal>test</goal>
            </goals>
          </execution>
        </executions>
        <configuration>
          <preloadSources>
            <source>${project.basedir}/src/test/resources/js/lib/require.js</source>
          </preloadSources>
          <jsSrcDir>${project.basedir}/src/main/resources/static</jsSrcDir>
          <sourceIncludes>
            <include>**/*.js</include>
            <include>**/*.coffee</include>
          </sourceIncludes>
          <jsTestSrcDir>${project.basedir}/src/test/resources/js/spec</jsTestSrcDir>
          <specIncludes>
            <include>**/spec_helper.js</include>
            <include>**/*.js</include>
            <include>**/*.coffee</include>
          </specIncludes>
          <specRunnerTemplate>REQUIRE_JS</specRunnerTemplate>
          <format>progress</format>
        </configuration>
      </plugin>
  </plugins>
</build>

Testing The Engage Core

This chapter gives an overview over the directory structure used for testing the theodul engage core module, the configuration for the specs in the spec_helper.js and how to write specs for the core.

Directory Structure

The test relevant files are located in the src/test/resources/ui/js/spec tree. Files that filename ends on _spec.js are considered as files with executable tests. The spec_helper.js in configured in the pom.xml for the initial setup.

Directory Structure Testing Engage Core

|-src
|---main
|-----java          #Java impl of the plugin manager
|-----resources
|-------ui          #UI of the core, core.html and engage_init.js
|---------css       #Global CSS Styles
|---------js        #JavaScript logic
|-----------engage  #Core logic, engage_core.js and engage_model.js
|-----------lib     #External libraries, backbone.js, jquery.js, require.js and underscore.js
|---test            #Unit Tests
|-----resources
|-------ui          #JavaScript Unit Tests
|---------js
|-----------spec    #Tests the *_spec.js and the helper file spec_helper.js

Spec Helper

The file spec_helper.js takes over the configuration of RequireJS which is usually done by the engage_init.js. The paths differ slighty from the player has at runtime.

spec_helper for engage_core module

/*global requirejs*/
requirejs.config({
  baseUrl: 'src/js/lib',
  paths: {
    require: 'require',
    jquery: 'jquery',
    underscore: 'underscore',
    backbone: 'backbone',
    engage: '../engage',
    plugins: '../engage/plugin/*/static'
  },
  shim: {
    'backbone': {
      //script dependencies
      deps: ['underscore', 'jquery'],
      //global variable
      exports: 'Backbone'
    },
    'underscore': {
      //global variable
      exports: '_'
    }
  }
});
var PLUGIN_MANAGER_PATH = '/engage/theodul/manager/list.json';
var PLUGIN_PATH = '/engage/theodul/plugin/';

Testing Engage Plugins

This chapter gives an overview over the directory structure used for testing a theodul engage plugin module, the configuration for the specs in the spec_helper.js and how to write specs for a plugin.

Directory Structure

The test relevant files are located in the src/test/resources/ui/js/spec tree. Files that filename ends on _spec.js are considered as files with executable tests. The spec_helper.js in configured in the pom.xml for the initial setup. In the directory test/resources/ui/js/engage is a mockup of the theodul engage core module in order to be able to test the plugin module independent. The directory test/resources/ui/js/lib provides the libraries which are provides by the engage core module at runtime of the player, as well to be able to test the plugin module independently.

Directory Structure Testing Plugins

|-src
|---main
|-----java          #Java impl of the plugin manager
|-----resources
|-------ui          #UI of the core, core.html and engage_init.js
|---------css       #Global CSS Styles
|---------js        #JavaScript logic
|-----------engage  #Core logic, engage_core.js and engage_model.js
|-----------lib     #External libraries, backbone.js, jquery.js, require.js and underscore.js
|---test            #Unit Tests
|-----resources
|-------ui          #JavaScript Unit Tests
|---------js
|-----------engage  #Mockup of the engage_core.js and engage_model.js
|-----------lib     #Libraries used and provided by the core (A copy of the lib directory in the engage core module)
|-----------spec    #Tests the *_spec.js and the helper file spec_helper.js

Spec Helper

The file spec_helper.js takes over the configuration of RequireJS which is usually done by the engage_init.js. The paths differ slighty from the player uses at runtime.

/*global requirejs*/
requirejs.config({
  baseUrl: 'src/',
  paths: {
    require: 'test/resources/js/lib/require',
    jquery: 'test/resources/js/lib/jquery',
    underscore: 'test/resources/js/lib/underscore',
    backbone: 'test/resources/js/lib/backbone',
    engage: 'test/resources/js/engage'
  },
  shim: {
    'backbone': {
      //script dependencies
      deps: ['underscore', 'jquery'],
      //global variable
      exports: 'Backbone'
    },
    'underscore': {
      //global variable
      exports: '_'
    }
  }
});

Writing Specs

TODO

Running The Tests

Now you can start the build process and the jasmine specs will be executed. Each . stands for a successful test. F stands for a failure and will stop the build process like it is specified in the configuration. The example output shows a manipulated version of the tests for the theodul engage core in order to illustrate a failing test. Normally all three tests should succeed at this point.

Testing on build

mvn install -DdeployTo=${FELIX_HOME}
    // some output before
    [INFO]
    -------------------------------------------------------
     J A S M I N E   S P E C S
    -------------------------------------------------------
    [INFO]
    F..

    1 failure:

      1.) EngageCore it should have a model <<< FAILURE!

        * Expected { cid : 'c3', ... _pending : false } not to be defined.

    Results: 3 specs, 1 failures
    // some output before

The jasmine-maven-plugin can also be executed manually and show the result in a browser. This can be achieved by the following command:

Manual testing

mvn jasmine:bdd
    [INFO] Scanning for projects...
    [INFO]
    [INFO] ------------------------------------------------------------------------
    [INFO] Building engage-theodul-core 1.5-SNAPSHOT
    [INFO] ------------------------------------------------------------------------
    [INFO]
    [INFO] --- jasmine-maven-plugin:1.3.1.2:bdd (default-cli) @ engage-theodul-core ---
    2014-01-28 14:33:30.722:INFO:oejs.Server:jetty-8.1.10.v20130312
    2014-01-28 14:33:30.746:INFO:oejs.AbstractConnector:Started [email protected]:8234
    [INFO]

    Server started--it's time to spec some JavaScript! You can run your specs as you develop by visiting this URL in
    a web browser:

    http://localhost:8234

    The server will monitor these two directories for scripts that you add, remove, and change:

    source directory: src/main/resources/ui

    spec directory: src/test/resources/ui/js/spec

    Just leave this process running as you test-drive your code, refreshing your browser window to re-run your specs.
    You can kill the server with Ctrl-C when you're done.

In a browser you should see an output like it is shown on the next screenshot.

Jasmin screen