lundi 22 juin 2015

Testing custom Javascript module with webpack/jasmine/Karma

I have developed a javascript library that produces interactive diagrams. I have used webpack to package my library and its dependencies into a bundle. I am now attempting to generate some tests for my library. I would like to test not only the discrete functions of the library (there is a fair bit of range calculation which is decoupled from the actual diagram) as well as testing the actual interactions with the DOM, appending diagram elements etc.

I have been working with Karma and Jasmine, unsuccessful in getting my packaged library into the testing scope.

I have tried numerous solutions, including a very basic configuration like in the Karma tutorial, something more advanced like this:

http://ift.tt/1dZymhu

And I have also tried pulling in the package using require.js like this example: http://ift.tt/1nbn2hM

Here is what I am working with right now:

// Karma configuration
// Generated on Mon Jun 22 2015 11:03:07 GMT-0500 (CDT)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: http://ift.tt/1ft83uu
    frameworks: ['jasmine', 'requirejs'],


    // list of files / patterns to load in the browser
    files: [
      'test-main.js',
      {pattern: 'dist/Lib.js', included: false},
      {pattern: 'test/*.js', included: false}
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: http://ift.tt/1gyw6MG
    preprocessors: {
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: http://ift.tt/1ft83KQ
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR ||  config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: http://ift.tt/1ft83KU
    browsers: ['Firefox'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false
  });
};

# test main
var allTestFiles = [];
var TEST_REGEXP = /test\.js$/;

Object.keys(window.__karma__.files).forEach(function(file) {
   if (TEST_REGEXP.test(file)) {
    // Normalize paths to RequireJS module names.
     allTestFiles.push(file);
   }
 });

 require.config({
    // Karma serves files under /base, which is the basePath from your config file
    baseUrl: '/base/',

   // dynamically load all test files
   deps: allTestFiles,

// we have to kickoff jasmine, as it is asynchronous
callback: window.__karma__.start
});

Here is a simple test that I try run:

# Simple test
define(['Lib'], function(Lib) {
describe("A suite", function() {
    it("contains spec with an expectation", function() {
        expect(true).toBe(true);
    });

    it("Should load my lib", function() {
        instance = Lib();
    });
  });   
});

And here is the output:

kyle@rubberfeet:~/Dev/lib > karma start
INFO [karma]: Karma v0.12.36 server started at http://localhost:9876/
INFO [launcher]: Starting browser Firefox
WARN [web-server]: 404: /favicon.ico
INFO [Firefox 38.0.0 (Ubuntu 0.0.0)]: Connected on socket   8-ZHVTvdeWII8G3NIxa7 with id 40351721
Firefox 38.0.0 (Ubuntu 0.0.0) ERROR: 'There is no timestamp for /base/Lib.js!'

WARN [web-server]: 404: /base/Lib.js
Firefox 38.0.0 (Ubuntu 0.0.0) ERROR
Error: Script error for: Lib
http://ift.tt/1i99lLM
 at /home/kyle/Dev/lib/node_modules/requirejs/require.js:166

Aucun commentaire:

Enregistrer un commentaire