Reorganize tests: split offline, online; split by rough module

karma.conf.js

@@ -16,7 +16,8 @@ module.exports = function(config) {
     // list of files / patterns to load in the browser
     files: [
       'src/js/index.js',
-      'test/web-test.js',
+      'test/offline/**.test.js',
+      'test/online/**.test.js',
       {pattern: 'dist/data/**', watched: false, included: false, served: true, nocache: false}
     ],
 

test/offline/brush.test.js

@@ -0,0 +1,145 @@
+/* eslint-disable no-new */
+/* eslint-disable spaced-comment */
+/* eslint-disable no-use-before-define */
+/* eslint-disable no-unused-vars */
+/* eslint-disable max-len */
+
+// For tests that use Mocha's async support, see:
+//  - http://martinfowler.com/articles/asyncJS.html
+//  - https://mochajs.org/#asynchronous-code
+
+describe('Ideogram brush', function() {
+
+  var config = {};
+
+  d3 = Ideogram.d3;
+
+  beforeEach(function() {
+
+    delete window.chrBands;
+    d3.selectAll('div').remove();
+
+    config = {
+      organism: 'human',
+      chrWidth: 10,
+      chrHeight: 150,
+      chrMargin: 10,
+      showChromosomeLabels: true,
+      orientation: 'vertical',
+      dataDir: '/dist/data/bands/native/'
+    };
+  });
+
+  it('should create a brush when specified', done => {
+    // Tests use case from ../examples/vanilla/brush.html
+
+    function callback() {
+      assert.equal(ideogram.selectedRegion.from, 5000000);
+      assert.equal(ideogram.selectedRegion.to, 10000000);
+      assert.equal(ideogram.selectedRegion.extent, 5000000);
+      assert.equal(d3.selectAll('.selection').nodes().length, 1);
+      done();
+    }
+
+    var config = {
+      organism: 'human',
+      chromosome: '19',
+      brush: 'chr19:5000000-10000000',
+      chrHeight: 900,
+      orientation: 'horizontal',
+      onBrushMove: callback, // placeholder
+      onLoad: callback,
+      dataDir: '/dist/data/bands/native/'
+    };
+    var ideogram = new Ideogram(config);
+  });
+
+  it('should have annotations and brushes aligned with base pairs', done => {
+    // Tests fix for https://github.com/eweitz/ideogram/issues/91
+    // and related issues.
+
+    function getLeft(selector) {
+      return Math.round(document
+        .querySelector(selector)
+        .getBoundingClientRect().x);
+    }
+
+    function getRight(selector) {
+      return Math.round(document
+        .querySelector(selector)
+        .getBoundingClientRect().right);
+    }
+
+    var config = {
+      organism: 'human',
+      assembly: 'GRCh37',
+      chrHeight: 800,
+      dataDir: '/dist/data/bands/native/',
+
+      annotationsLayout: 'histogram',
+      chromosomes: ['17'],
+
+      brush: 'chr17:5000000-10000000',
+      onBrushMove: function() {},
+      onLoad: function() {
+        this.createBrush('17', 1, 2);
+        this.createBrush('17', 40900000, 44900000);
+        this.createBrush('17', 81094108, 81094109);
+
+        // Closest test for https://github.com/eweitz/ideogram/issues/91
+        var bandQ2131Left = getLeft('#chr17-9606-q21-31');
+        var bandQ2131AnnotLeft = getLeft('#chr17-9606 .annot:nth-child(191)');
+        var bandQ2131BrushLeft = getLeft('#_ideogram > g:nth-child(6) > rect.selection');
+        assert.equal(bandQ2131AnnotLeft, bandQ2131Left);
+        assert.equal(bandQ2131AnnotLeft, bandQ2131BrushLeft);
+
+        // Check alignment at far left
+        var firstBpAnnotLeft = getLeft('#chr17-9606 > .annot:nth-child(51)');
+        var firstBpSliderLeft = getLeft('#_ideogram > g:nth-child(5) > rect.selection');
+        var firstBpLeft = getLeft('#chr17-9606');
+        assert.equal(firstBpAnnotLeft, firstBpSliderLeft);
+        assert.equal(firstBpSliderLeft, firstBpLeft);
+
+        // Check alignment at far right
+        var lastBpAnnotRight = getRight('#chr17-9606 > .annot:nth-child(317)');
+        var lastBpSliderRight = getRight('#_ideogram > g:nth-child(7) > rect.selection');
+        var lastBpRight = getRight('#chr17-9606');
+        assert.isBelow(Math.abs(lastBpAnnotRight - lastBpSliderRight), 3);
+        assert.isBelow(Math.abs(lastBpSliderRight - lastBpRight), 3);
+
+        done();
+      },
+
+      orientation: 'horizontal',
+      showBandLabels: true, // only work in horizontal mode
+
+      annotations: [{
+        name: 'first_band',
+        chr: '17',
+        start: 1,
+        stop: 2
+      },
+      {
+        name: 'band_q21-31',
+        chr: '17',
+        start: 40900000,
+        stop: 40900001
+      },
+      {
+        name: 'last_band_start',
+        chr: '17',
+        start: 75300000,
+        stop: 75300001
+      },
+      {
+        name: 'last_band_stop',
+        chr: '17',
+        start: 81195208,
+        stop: 81195209
+      }]
+    };
+
+    var ideogram = new Ideogram(config);
+  });
+
+});

test/offline/collinear.test.js

@@ -0,0 +1,172 @@
+/* eslint-disable no-new */
+/* eslint-disable spaced-comment */
+/* eslint-disable no-use-before-define */
+/* eslint-disable no-unused-vars */
+/* eslint-disable max-len */
+
+// For tests that use Mocha's async support, see:
+//  - http://martinfowler.com/articles/asyncJS.html
+//  - https://mochajs.org/#asynchronous-code
+
+describe('Ideogram', function() {
+
+  var config = {};
+
+  d3 = Ideogram.d3;
+
+  beforeEach(function() {
+
+    delete window.chrBands;
+    d3.selectAll('div').remove();
+
+    config = {
+      organism: 'human',
+      chrWidth: 10,
+      chrHeight: 150,
+      chrMargin: 10,
+      showChromosomeLabels: true,
+      orientation: 'vertical',
+      dataDir: '/dist/data/bands/native/'
+    };
+  });
+
+  it('should support collinear chromosome geometry', done => {
+
+    function callback() {
+      var chr2CanvasBox, chrLabel, labelX, labelY;
+
+      chr2CanvasBox = d3.select('#chr2-9606-canvas-1').nodes()[0].getBoundingClientRect();
+
+      chrLabel = document.querySelector('#chr6-9606-chromosome-set text');
+      labelX = chrLabel.getAttribute('x');
+      labelY = chrLabel.getAttribute('y');
+
+      assert.equal(chr2CanvasBox.x, 111);
+
+      assert.equal(labelX, '-8');
+      assert.equal(labelY, '31');
+
+      done();
+    }
+
+    var heatmaps = [
+      {
+        key: 'expression-level',
+        thresholds: [
+          ['2', '#88F'],
+          ['4', '#CCC'],
+          ['+', '#F33']]
+      },
+      {
+        key: 'gene-type',
+        thresholds: [
+          ['0', '#00F'],
+          ['1', '#0AF'],
+          ['2', '#AAA'],
+          ['3', '#FA0'],
+          ['4', '#F00']
+        ]
+      }
+    ];
+
+    var annotationTracks = [
+      {id: 'expressionLevelTrack', displayName: 'Expression level'},
+      {id: 'geneTypeTrack', displayName: 'Gene type'}
+    ];
+
+    config = {
+      organism: 'human',
+      orientation: 'horizontal',
+      geometry: 'collinear',
+      chrHeight: 90,
+      annotationHeight: 30,
+      annotationsLayout: 'heatmap',
+      dataDir: '/dist/data/bands/native/',
+      annotationsPath: '/dist/data/annotations/oligodendroglioma_cnv_expression.json',
+      heatmaps: heatmaps,
+      annotationTracks: annotationTracks
+    };
+
+    config.onDrawAnnots = callback;
+    var ideogram = new Ideogram(config);
+  });
+
+  it('should support demarcating collinear chromosome heatmaps', done => {
+
+    function callback() {
+      var style = d3.select('#_ideogramTrackLabelContainer > div').node().style;
+      assert.equal(style.left, '13px');
+      assert.equal(style.top, '2px');
+      done();
+    }
+
+    var heatmapThresholds = [
+      [0.7, '#33F'],
+      [1.2, '#DDD'],
+      ['+', '#F33']
+    ];
+
+    var legend = [{
+      name: 'Expression level',
+      rows: [
+        {name: 'Low', color: '#33F'},
+        {name: 'Normal', color: '#CCC'},
+        {name: 'High', color: '#F33'}
+      ]
+    }];
+
+    ideogram = new Ideogram({
+      organism: 'human',
+      orientation: 'horizontal',
+      geometry: 'collinear',
+      chrHeight: 80,
+      showFullyBanded: false,
+      // showChromosomeLabels: false,
+      rotatable: false,
+      legend: legend,
+      annotationHeight: 30,
+      annotationsLayout: 'heatmap',
+      heatmapThresholds: heatmapThresholds,
+      dataDir: '/dist/data/bands/native/',
+      annotationsPath: '../dist/data/annotations/oligodendroglioma_cnv_expression.json',
+      onDrawAnnots: callback
+    });
+  });
+
+  it('should support 2D heatmaps', done => {
+
+    function callback() {
+      var canvas = d3.select('#chr5-9606-canvas').node();
+      assert.equal(canvas.width, 429);
+      assert.equal(canvas.height, 480);
+      done();
+    }
+
+    var legend = [{
+      name: 'Expression level',
+      rows: [
+        {name: 'Low', color: '#33F'},
+        {name: 'Normal', color: '#CCC'},
+        {name: 'High', color: '#F33'}
+      ]
+    }];
+
+    ideogram = new Ideogram({
+      organism: 'human',
+      orientation: 'vertical',
+      chromosome: '5',
+      chrHeight: 450,
+      chrMargin: 10,
+      showFullyBanded: false,
+      showBandLabels: false,
+      legend: legend,
+      heatmapThresholds: [0, 0.13, 0.27, 0.4, 0.53, 0.67, 0.8, 0.93, 1.1, 1.2, 1.33, 1.47, 1.6, 1.73, 1.87, 2],
+      annotationHeight: 3,
+      annotationsLayout: 'heatmap-2d',
+      dataDir: '/dist/data/bands/native/',
+      annotationsPath: 'https://www.googleapis.com/storage/v1/b/ideogram/o/oligodendroglioma%2finfercnv.observations.optimized.txt?alt=media',
+      onDrawAnnots: callback
+    });
+  });
+
+});