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

<svg class="main-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="904" height="450"><rect x="0" y="0" width="904" height="450" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/><defs id="defs-2de2f2"><g class="clips"><clipPath class="axesclip" id="clip2de2f2x"><rect x="80" y="0" width="744" height="450"/></clipPath><clipPath class="axesclip" id="clip2de2f2y"><rect x="0" y="100" width="904" height="270"/></clipPath><clipPath class="axesclip" id="clip2de2f2xy"><rect x="80" y="100" width="744" height="270"/></clipPath></g></defs><g class="draglayer"><g transform="translate(80,100)"><rect class="drag nsewdrag cursor-crosshair" data-subplot="xy" x="0" y="0" width="744" height="270" style="fill: transparent; stroke-width: 0px; pointer-events: all;"/><rect class="drag nwdrag cursor-nw-resize" data-subplot="xy" x="-20" y="-20" width="20" height="20" style="fill: transparent; stroke-width: 0px; pointer-events: all;"/><rect class="drag nedrag cursor-ne-resize" data-subplot="xy" x="744" y="-20" width="20" height="20" style="fill: transparent; stroke-width: 0px; pointer-events: all;"/><rect class="drag swdrag cursor-sw-resize" data-subplot="xy" x="-20" y="270" width="20" height="20" style="fill: transparent; stroke-width: 0px; pointer-events: all;"/><rect class="drag sedrag cursor-se-resize" data-subplot="xy" x="744" y="270" width="20" height="20" style="fill: transparent; stroke-width: 0px; pointer-events: all;"/><rect class="drag ewdrag cursor-ew-resize" data-subplot="xy" x="74.4" y="270.5" width="595.2" height="20" style="fill: transparent; stroke-width: 0px; pointer-events: all;"/><rect class="drag wdrag cursor-w-resize" data-subplot="xy" x="0" y="270.5" width="74.4" height="20" style="fill: transparent; stroke-width: 0px; pointer-events: all;"/><rect class="drag edrag cursor-e-resize" data-subplot="xy" x="669.6" y="270.5" width="74.4" height="20" style="fill: transparent; stroke-width: 0px; pointer-events: all;"/><rect class="drag nsdrag cursor-ns-resize" data-subplot="xy" x="-20.5" y="27" width="20" height="216" style="fill: transparent; stroke-width: 0px; pointer-events: all;"/><rect class="drag sdrag cursor-s-resize" data-subplot="xy" x="-20.5" y="243" width="20" height="27" style="fill: transparent; stroke-width: 0px; pointer-events: all;"/><rect class="drag ndrag cursor-n-resize" data-subplot="xy" x="-20.5" y="0" width="20" height="27" style="fill: transparent; stroke-width: 0px; pointer-events: all;"/></g></g><g class="subplot xy"><rect x="80" y="100" width="744" height="270" style="stroke-width: 0px; fill: rgb(255, 255, 255); fill-opacity: 1;"/><g transform="translate(80,100)"><path class="xgrid crisp" d="M0,0v270" transform="translate(40.95,0)" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="xgrid crisp" d="M0,0v270" transform="translate(206.48,0)" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="xgrid crisp" d="M0,0v270" transform="translate(372,0)" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="xgrid crisp" d="M0,0v270" transform="translate(537.53,0)" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="xgrid crisp" d="M0,0v270" transform="translate(703.05,0)" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="ygrid crisp" d="M0,0h744" transform="translate(0,252.75)" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="ygrid crisp" d="M0,0h744" transform="translate(0,205.65)" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="ygrid crisp" d="M0,0h744" transform="translate(0,158.55)" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="ygrid crisp" d="M0,0h744" transform="translate(0,111.45)" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="ygrid crisp" d="M0,0h744" transform="translate(0,64.35)" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="ygrid crisp" d="M0,0h744" transform="translate(0,17.25)" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/></g><g/><g transform="translate(80,100)"/><g/><svg preserveAspectRatio="none" x="80" y="100" width="744" height="270" viewBox="0 0 744 270" style="fill: none;"><g class="imagelayer"/><g class="maplayer"/><g class="barlayer"/><g class="errorlayer"><g class="errorbars"/></g><g class="boxlayer"/><g class="scatterlayer"><g class="trace scatter" style="stroke-miterlimit: 2; opacity: 1;"><path class="js-line" d="M40.95,17.25L372,252.75L703.05,17.25" style="fill: none; stroke: rgb(31, 119, 180); stroke-opacity: 1; stroke-width: 2px;"/><g class="points"><path class="point" transform="translate(40.95,17.25)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/><path class="point" transform="translate(372,252.75)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/><path class="point" transform="translate(703.05,17.25)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g></g></g></svg><g/><path class="crisp" transform="translate(80,100)" d="M-1,270.5h746" style="fill: none; stroke-width: 1px; stroke: rgb(0, 0, 0); stroke-opacity: 0;"/><path class="crisp" transform="translate(80,100)" d="M-0.5,-1v271" stroke-width="1px" style="fill: none; stroke: rgb(0, 0, 0); stroke-opacity: 0;"/><g/><g transform="translate(80,100)"><g class="xtick" data-bb="30"><text text-anchor="middle" x="0" y="284" transform="translate(40.95,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; visibility: visible; white-space: pre;" data-bb="24">1</text></g><g class="xtick" data-bb="31"><text text-anchor="middle" x="0" y="284" transform="translate(206.48,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; visibility: visible; white-space: pre;" data-bb="25">1.5</text></g><g class="xtick" data-bb="32"><text text-anchor="middle" x="0" y="284" transform="translate(372,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; visibility: visible; white-space: pre;" data-bb="26">2</text></g><g class="xtick" data-bb="33"><text text-anchor="middle" x="0" y="284" transform="translate(537.53,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; visibility: visible; white-space: pre;" data-bb="27">2.5</text></g><g class="xtick" data-bb="34"><text text-anchor="middle" x="0" y="284" transform="translate(703.05,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; visibility: visible; white-space: pre;" data-bb="28">3</text></g></g><g transform="translate(80,100)"><g class="ytick" data-bb="36"><text text-anchor="end" x="-2" y="6" transform="translate(0,252.75)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; visibility: visible; white-space: pre;">1</text></g><g class="ytick" data-bb="37"><text text-anchor="end" x="-2" y="6" transform="translate(0,205.65)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; visibility: visible; white-space: pre;">1.2</text></g><g class="ytick" data-bb="38"><text text-anchor="end" x="-2" y="6" transform="translate(0,158.55)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; visibility: visible; white-space: pre;">1.4</text></g><g class="ytick" data-bb="39"><text text-anchor="end" x="-2" y="6" transform="translate(0,111.45)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; visibility: visible; white-space: pre;">1.6</text></g><g class="ytick" data-bb="40"><text text-anchor="end" x="-2" y="6" transform="translate(0,64.35)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; visibility: visible; white-space: pre;">1.8</text></g><g class="ytick" data-bb="41"><text text-anchor="end" x="-2" y="6" transform="translate(0,17.25)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; visibility: visible; white-space: pre;">2</text></g></g><g/></g><g class="shapelayer"/><g class="pielayer"/><g class="glimages"/><g class="geoimages"/><text class="js-plot-link-container" y="441" text-anchor="end" x="897" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); pointer-events: all;"><tspan class="js-link-to-tool"/><tspan class="js-link-spacer"/><tspan class="js-sourcelinks"/></text><g class="infolayer"><g class="g-gtitle"/><g class="g-xtitle" data-bb="29"/><g class="g-ytitle" data-bb="35"/></g></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]
};