generate plotly.js images with the karma runner

karma-plotly.js

.gitignore

node_modules

README.md

Karma plotly.js

Generate plotly.js images with the karma runner.

How to run this thing?

1. Setup

• Clone this gist
• cd into it
• Run npm i

2. Generate a graph

npm start

and 🍻.

index.js

'use strict';

var Plotly = require('plotly.js');


function main(karma, window) {
  karma.info({total: 1});

  var data = [{
    x: [1,2,3],
    y: [2,1,2] 
  }];

  Plotly.plot(createGraphDiv(), data).then(function(gd) {
    var svg = Plotly.Snapshot.toSVG(gd);

    karma.result({
      success: true,
      img: svg
    });

    karma.complete({});
  });

}

function createGraphDiv() {
  var graphDiv = document.createElement('div');
  graphDiv.id = 'graph';
  document.body.appendChild(graphDiv);
  return graphDiv;
}

// karma-custom framework
window.karmaCustomEnv = {};
window.karmaCustomEnv.execute = main;

karma.conf.js

function func(config) {
  config.set(func.defaultConfig);
}

func.defaultConfig = {

  // use chrome launcher
  browsers: ['Chrome'],

  basePath: '.',

  files: ['./index.js'],

  frameworks: ['browserify', 'custom'],
  reporters: ['custom'],

  // browserify the index
  preprocessors: { './index.js': ['browserify'] },

  // web server port
  port: 9876,

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

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

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

module.exports = func;

out.svg

package.json

{
  "name": "karma-plotly.js",
  "version": "1.0.0",
  "description": "generate plotly.js images with the karma runner",
  "main": "index.js",
  "scripts": {
    "postinstall": "node postinstall.js",
    "start": "karma start karma.conf.js"
  },
  "author": "Étienne Tétreault-Pinard",
  "license": "MIT",
  "dependencies": {
    "browserify": "^13.0.0",
    "fs-extra": "^0.26.5",
    "karma": "^0.13.21",
    "karma-browserify": "^5.0.1",
    "karma-chrome-launcher": "^0.2.2",
    "karma-custom": "^1.1.9",
    "plotly.js": "^1.5.2"
  }
}

postinstall.js

var path = require('path');
var fs = require('fs-extra');

var fakeModule = 'karma-custom-reporter';
var pathToFakeModule = path.join(__dirname, 'node_modules', fakeModule);
var target = path.join(__dirname, 'report.js');
var link = path.join(pathToFakeModule, 'index.js');


fs.mkdirs(pathToFakeModule, function(err) {
  if(err) throw err;
  
  fs.symlinkSync(target, link);
});

report.js

var fs = require('fs');
var path  = require('path');

var reporter = function(baseReporterDecorator, config) {
  baseReporterDecorator(this);

  //var outPath = path.join(__dirname, 'out.svg');
  var outPath = path.join('.', 'out.svg');

  this.specSuccess = function(browser, result) {
    var img = result.img;

    fs.writeFile(outPath, img, function(err) {
      if(err) throw err;
    })
  };

  this.onRunComplete = function(browser, info) {
    this.write('\n > written in ' + outPath + '\n');
  };

};

reporter.$inject = ['baseReporterDecorator', 'config'];

module.exports = {
  'reporter:custom': ['type', reporter]
};