genoverse 3.2.0

package/test/View/render-bar-graph.test.js

@@ -0,0 +1,87 @@
+const { Genoverse, afterTest, testTrackRenderStatic } = require('../utils');
+
+describe('Correctly render bar graph where:', () => {
+  afterEach(afterTest);
+
+  const track = { _testClass: Genoverse.Track.Graph.Bar, height: 100, margin: 0, resizable: false, rescaleableY: false };
+  const data  = [
+    [ 10, 60, 20, 100, 40, 50, 0, 90, 70, 30 ],
+    [ 40, 30, 20, 50, 90, 10, 10, 80, 60, 70 ],
+  ];
+
+  const makeFeatures = $data => $data.map(
+    (d, i) => ({ start: i + 1, end: i + 1, height: d })
+  );
+
+  const getTrackConf = test => ({ ...track, ...test.conf });
+
+  const features = data.map(d => makeFeatures(d));
+
+  [{
+    why  : 'scale > 1',
+    conf : { width: 100, start: 1, end: 10 },
+  }, {
+    why  : 'scale = 1',
+    conf : { width: 100, start: 1, end: 100 },
+  }, {
+    why  : 'scale < 1, all bins of equal size',
+    conf : { width: 100, start: 1, end: 200 },
+  }, {
+    why  : 'scale < 1, final bin size = 1',
+    conf : { width: 100, start: 1, end: 300 },
+  }, {
+    why  : 'scale < 1, final bin is small',
+    conf : { width: 100, start: 1, end: 400 },
+  }].forEach((testSet) => {
+    describe(testSet.why, () => {
+      [
+        { why: 'no margin',                           conf: { margin: 0                                     } },
+        { why: 'margin',                              conf: { margin: 10                                    } },
+        { why: 'margin top and bottom, inverted',     conf: { margin: { top: 5, bottom: 20 }, invert: true  } },
+        { why: 'margin top and bottom, not inverted', conf: { margin: { top: 5, bottom: 20 }, invert: false } },
+        { why: 'colored',                             conf: { margin: 0, color: 'red'                       } },
+      ].forEach((test) => {
+        it(test.why, () => testTrackRenderStatic(features[0], getTrackConf(test), testSet.conf));
+      });
+
+      describe('the graph has two datasets', () => {
+        [
+          { why: 'coloured red and blue',    conf: { margin: 0, datasets: [{ name: 1, color: 'red'             }, { name: 2, color: 'blue'                               }] } },
+          { why: 'one with globalAlpha set', conf: { margin: 0, datasets: [{ name: 1, color: 'red', fill: true }, { name: 2, color: 'blue', fill: true, globalAlpha: 0.5 }] } },
+        ].forEach((test) => {
+          it(test.why, () => testTrackRenderStatic(
+            [
+              ...features[0].map(f => ({ ...f, dataset: 1 })),
+              ...features[1].map(f => ({ ...f, dataset: 2 })),
+            ],
+            getTrackConf(test),
+            testSet.conf
+          ));
+        });
+      });
+    });
+  });
+
+  describe('yRange is set', () => {
+    const genoverseConf = { width: 100, start: 1, end: 100 };
+    const $data         = [ 1, -8, 5, -5, 0, 7, -2 ];
+    const $features     = makeFeatures($data);
+
+    [
+      { why: 'with no margin', conf: { margin: 0 } },
+      { why: 'with margin',    conf: { margin: 1 } },
+    ].forEach((testSet) => {
+      describe(testSet.why, () => {
+        [
+          { why: 'yRange = [ -5, 5 ]',    conf: { yRange: [  -5, 5   ], height: 10, ...testSet.conf } },
+          { why: 'yRange = [ -1, 5 ]',    conf: { yRange: [  -1, 5   ], height: 12, ...testSet.conf } },
+          { why: 'yRange = [ 0, 1 ]',     conf: { yRange: [   0, 1   ], height: 10, ...testSet.conf } },
+          { why: 'yRange = [ -1, 0 ]',    conf: { yRange: [  -1, 0   ], height: 10, ...testSet.conf } },
+          { why: 'yRange = [ 0.5, 7.5 ]', conf: { yRange: [ 0.5, 7.5 ], height: 70, ...testSet.conf } },
+        ].forEach(
+          test => it(test.why, () => testTrackRenderStatic($features, getTrackConf(test), genoverseConf))
+        );
+      });
+    });
+  });
+});

package/test/View/render-blocks.test.js

@@ -0,0 +1,171 @@
+const { afterTest, testTrackRender, testTrackRenderStatic } = require('../utils');
+
+describe('Correctly render blocks where:', () => {
+  afterEach(afterTest);
+
+  const track = { height: 50, margin: 0, featureHeight: 10, featureMargin: {} };
+
+  describe('feature heights and margins are set', () => {
+    [
+      { why: 'default track settings' },
+      { why: 'no feature margin',      track: track },
+      { why: 'feature margin top',     track: { ...track, featureMargin: { top: 1 } } },
+      { why: 'track margin',           track: { ...track, margin: 1 } },
+      { why: 'half feature height',    track: { ...track, featureHeight: 5 } },
+      { why: 'default feature height', track: { height: 50, margin: 0, featureMargin: {} } },
+    ].forEach(
+      test => it(`with ${test.why}`, () => testTrackRenderStatic([{ start: 1, end: 10 }], test.track))
+    );
+  });
+
+  describe('features are colored', () => {
+    [
+      { why: 'all red with feature.color', track: track },
+      { why: 'all red with track.color',   track: { ...track, color: 'red' } },
+    ].forEach((test) => {
+      it(test.why, () => {
+        const color = test.track.color ? undefined : 'red';
+
+        return testTrackRenderStatic([
+          { start: 1,  end: 5,  color: color },
+          { start: 6,  end: 10, color: color },
+          { start: 11, end: 15, color: color },
+          { start: 16, end: 20, color: color },
+        ], test.track);
+      });
+    });
+
+    it('rgbk with feature.color', () => testTrackRenderStatic([
+      { start: 1,  end: 5,  color: 'red'   },
+      { start: 6,  end: 10, color: 'green' },
+      { start: 11, end: 15, color: 'blue'  },
+      { start: 16, end: 20 },
+    ], track));
+
+    it('rgbk with track.color = red', () => testTrackRenderStatic([
+      { start: 1,  end: 5                  },
+      { start: 6,  end: 10, color: 'green' },
+      { start: 11, end: 15, color: 'blue'  },
+      { start: 16, end: 20, color: 'black' },
+    ], { ...track, color: 'red' }));
+
+    it('feature.color = false', () => testTrackRenderStatic([{ start: 1, end: 5, color: false }], track));
+  });
+
+  describe('features have borders', () => {
+    it('with default feature.color', () => testTrackRenderStatic([{ start: 1, end: 5, borderColor: 'blue' }], track));
+    it('with feature.color = "red"', () => testTrackRenderStatic([{ start: 1, end: 5, borderColor: 'blue', color: 'red' }], track));
+    it('with feature.color = false', () => testTrackRenderStatic([{ start: 1, end: 5, borderColor: 'blue', color: false }], track));
+  });
+
+  track.bump = true;
+
+  describe('features are bumped (track.bump = true)', () => {
+    [
+      { why: 'no feature margin',                    track: track },
+      { why: 'feature margin top',                   track: { ...track, featureMargin: { top: 1                      }           } },
+      { why: 'feature margin bottom',                track: { ...track, featureMargin: { bottom: 1                   }           } },
+      { why: 'feature margin right',                 track: { ...track, featureMargin: { right: 1                    }           } },
+      { why: 'feature margin left (does nothing)',   track: { ...track, featureMargin: { left: 1                     }           } },
+      { why: 'feature margin top, bottom and right', track: { ...track, featureMargin: { top: 1, bottom: 1, right: 1 }           } },
+      { why: 'max depth',                            track: { ...track, featureMargin: { top: 1, bottom: 1, right: 1 }, depth: 2 } },
+    ].forEach((test) => {
+      it(`with ${test.why}`, () => testTrackRenderStatic([
+        { start: 1, end: 10 },
+        { start: 6, end: 10 },
+        { start: 1, end: 5  },
+      ], test.track));
+    });
+  });
+
+  describe('the browser is dynamic', () => {
+    describe('at chromosome start', () => {
+      it('with a single feature on first image only', () => testTrackRender([
+        { start: 1, end: 10 },
+      ], track));
+
+      it('with a feature on each (two) image', () => testTrackRender([
+        { start: 1,  end: 10 },
+        { start: 21, end: 30 },
+      ], track));
+
+      it('with a single feature spanning two images', () => testTrackRender([
+        { start: 16, end: 25 },
+      ], track));
+
+      it('with bumped features spanning two images', () => testTrackRender([
+        { start: 1, end: 10 },
+        { start: 6, end: 25 },
+      ], track));
+    });
+
+    describe('in the middle of the chromosome', () => {
+      it('with a feature on each (three) image', () => testTrackRender([
+        { start: 81,  end: 90  },
+        { start: 101, end: 110 },
+        { start: 121, end: 130 },
+      ], track, { start: 101, end: 120 }));
+
+      it('with a single feature spanning three images', () => testTrackRender([
+        { start: 96, end: 125 },
+      ], track, { start: 101, end: 120 }));
+
+      it('with bumped features spanning multiple images', () => testTrackRender([
+        { start: 1,   end: 200, color: 'red'    },
+        { start: 81,  end: 90,  color: 'blue'   },
+        { start: 86,  end: 105, color: 'green'  },
+        { start: 88,  end: 130, color: 'yellow' },
+        { start: 103, end: 103, color: 'orange' },
+        { start: 110, end: 110, color: 'purple' },
+        { start: 126, end: 135, color: 'pink'   },
+        { start: 132, end: 132, color: 'black'  },
+      ], track, { start: 101, end: 120 }));
+
+      // bump takes precendence over y, so pink is bumped down as it overlaps with red.
+      // This probably shouldn't be the case, but mixing feature.y and track.bump is not really supported.
+      it('with bumped features and features with feature.y', () => testTrackRender([
+        { start: 1,   end: 200, color: 'red'         },
+        { start: 81,  end: 90,  color: 'blue',  y: 2 },
+        { start: 86,  end: 105, color: 'green'       },
+        { start: 88,  end: 130, color: 'yellow'      },
+        { start: 103, end: 103, color: 'orange'      },
+        { start: 110, end: 110, color: 'purple'      },
+        { start: 126, end: 135, color: 'pink',  y: 0 },
+        { start: 132, end: 132, color: 'black', y: 9 },
+      ], track, { start: 101, end: 120 }));
+
+      it('with bumped features of varying heights', () => testTrackRender([
+        { start: 1,   end: 200, color: 'red'               },
+        { start: 81,  end: 90,  color: 'blue',  height: 15 },
+        { start: 86,  end: 105, color: 'green'             },
+        { start: 88,  end: 130, color: 'yellow'            },
+        { start: 103, end: 103, color: 'orange'            },
+        { start: 110, end: 110, color: 'purple'            },
+        { start: 110, end: 110, color: 'grey',  height: 8  },
+        { start: 110, end: 110, color: 'aqua',  height: 5  },
+        { start: 126, end: 135, color: 'pink',  height: 20 },
+        { start: 132, end: 132, color: 'black'  },
+      ], { ...track, featureMargin: { bottom: 1 } }, { start: 101, end: 120 }));
+    });
+
+    describe('at chromosome end', () => {
+      it('with a single feature on last image only', () => testTrackRender([
+        { start: 981, end: 990 },
+      ], track, { start: 981, end: 1000 }));
+
+      it('with a feature on each (two) image', () => testTrackRender([
+        { start: 961, end: 970 },
+        { start: 981, end: 990 },
+      ], track, { start: 981, end: 1000 }));
+
+      it('with a single feature spanning two images', () => testTrackRender([
+        { start: 976, end: 985 },
+      ], track, { start: 981, end: 1000 }));
+
+      it('with bumped features spanning two images', () => testTrackRender([
+        { start: 961, end: 970 },
+        { start: 966, end: 985 },
+      ], track, { start: 981, end: 1000 }));
+    });
+  });
+});

package/test/View/render-chromosome.test.js

@@ -0,0 +1,40 @@
+const { afterTest, testTrackRenderStatic } = require('../utils');
+
+describe('Correctly render a chromosome:', () => {
+  afterEach(afterTest);
+
+  const genome = {
+    '1': {
+      size  : 1000,
+      bands : [
+        { id: 'p13',    start: 1,    end: 100,  type: 'gpos'    },
+        { id: 'p12',    start: 101,  end: 250,  type: 'stalk'   },
+        { id: 'p11.2',  start: 251,  end: 300,  type: 'gneg'    },
+        { id: 'p11.1',  start: 301,  end: 350,  type: 'acen'    },
+        { id: 'q11.1',  start: 351,  end: 450,  type: 'acen'    },
+        { id: 'q11.21', start: 451,  end: 500,  type: 'gpos100' },
+        { id: 'q11.22', start: 501,  end: 600,  type: 'gpos25'  },
+        { id: 'q11.23', start: 601,  end: 700,  type: 'gpos33'  },
+        { id: 'q12.1',  start: 701,  end: 800,  type: 'gpos50'  },
+        { id: 'q12.2',  start: 801,  end: 900,  type: 'gpos66'  },
+        { id: 'q12.3',  start: 901,  end: 1000, type: 'gvar'    },
+      ],
+    },
+    '2': {
+      size  : 1000,
+      bands : [{ id: 'p13', start: 1, end: 1000, type: 'gpos' }],
+    },
+  };
+
+  it('with all band types', () => testTrackRenderStatic(
+    undefined,
+    { _testClass: Genoverse.Track.Chromosome, featureHeight: 20 },
+    { end: genome[1].size, genome: genome, chromosomeSize: genome[1].size, width: genome[1].size }
+  ));
+
+  it('with only one band', () => testTrackRenderStatic(
+    undefined,
+    { _testClass: Genoverse.Track.Chromosome, featureHeight: 20 },
+    { chr: 2, end: genome[2].size, genome: genome, chromosomeSize: genome[2].size, width: genome[2].size }
+  ));
+});

package/test/View/render-highlights.test.js

@@ -0,0 +1,67 @@
+const { afterTest, testTrackRenderStatic } = require('../utils');
+
+describe('Correctly render highlights:', () => {
+  afterEach(afterTest);
+
+  const track           = { _testClass: Genoverse.Track.HighlightRegion };
+  const defaultColors   = Genoverse.Track.HighlightRegion.prototype.colors;
+  const genoverseConfig = { end: 1000, width: 1000 };
+
+  it('with a defined color', () => testTrackRenderStatic([{ start: 100, end: 200, label: 'test', color: 'red' }], track, genoverseConfig));
+
+  it('with a mixture of defined colors and no colors', () => {
+    const colors   = defaultColors.concat(defaultColors[0]);
+    const features = [];
+
+    colors.splice(3, 0, 'yellow');
+    colors.splice(6, 0, 'pink');
+
+    colors.forEach((c, i) => {
+      i++;
+
+      features.push({ start: 50 * i, end: 25 + (50 * i), label: i.toString(), color: defaultColors.includes(c) ? undefined : c });
+    });
+
+    return testTrackRenderStatic(features, track, genoverseConfig);
+  });
+
+  describe('where two highlights overlap', () => {
+    it('both labels are displayed', () => testTrackRenderStatic(
+      [{ start: 100, end: 500, label: 'test1', color: 'red' }, { start: 400, end: 401, label: 'test2', color: 'blue' }],
+      track,
+      genoverseConfig
+    ));
+
+    it('second label is hidden', () => testTrackRenderStatic(
+      [{ start: 100, end: 200, label: 'test1', color: 'red' }, { start: 110, end: 120, label: 'test2', color: 'blue' }],
+      track,
+      genoverseConfig
+    ));
+  });
+
+  describe('backgrounds', () => {
+    it('overlapping highlights, completely inside region', () => testTrackRenderStatic(
+      [{ start: 100, end: 200, color: 'red' }, { start: 110, end: 120, color: 'blue' }],
+      track,
+      genoverseConfig
+    ));
+
+    it('only left highlight edge inside region', () => testTrackRenderStatic(
+      [{ start: 100, end: 1500, color: 'red' }],
+      track,
+      { start: 1000, end: 2000, chromsomeSize: 2000 }
+    ));
+
+    it('only right highlight edge inside region', () => testTrackRenderStatic(
+      [{ start: 100, end: 2000, color: 'red' }],
+      track,
+      genoverseConfig
+    ));
+
+    it('neither highlight edge inside region', () => testTrackRenderStatic(
+      [{ start: 100, end: 3000, color: 'red' }],
+      track,
+      { start: 1000, end: 2000, chromsomeSize: 2000 }
+    ));
+  });
+});

package/test/View/render-insert-variants.test.js

@@ -0,0 +1,11 @@
+const { afterTest, testTrackRenderStatic } = require('../utils');
+
+describe('Correctly render insert variants:', () => {
+  afterEach(afterTest);
+
+  const track = { _testClass: Genoverse.Track.dbSNP, url: false, margin: 0, featureMargin: {} };
+
+  it('when scale > 1', () => testTrackRenderStatic([{ start: 10, end: 5 }], track));
+
+  it('when scale < 1', () => testTrackRenderStatic([{ start: 100, end: 50 }], track, { end: 1000 }));
+});

package/test/View/render-labels.test.js

@@ -0,0 +1,266 @@
+const { afterTest, testTrackRender, testTrackRenderStatic } = require('../utils');
+
+describe('Correctly render labels where:', () => {
+  afterEach(afterTest);
+
+  const track = { resizable: 'auto', margin: 0, featureHeight: 15, featureMargin: {}, bump: true };
+
+  it('labels are disabled (track.labels = false)', () => testTrackRenderStatic([
+    { start: 1, end: 10, label: 'abc' },
+  ], { labels: false, ...track }));
+
+  describe('labels appear below their features (track.labels = true)', () => {
+    it('with a label shorter than its feature', () => testTrackRenderStatic([
+      { start: 1, end: 10, label: 'abc' },
+    ], track));
+
+    it('with a label longer than its feature', () => testTrackRenderStatic([
+      { start: 1, end: 10, label: 'WWWWWWWWWW' },
+    ], track));
+
+    it('with a multi-line label', () => testTrackRenderStatic([
+      { start: 1, end: 10, label: 'abc\ndef' },
+    ], track));
+
+    it('with bumped features', () => testTrackRenderStatic([
+      { start: 1, end: 10, label: 'abc' },
+      { start: 6, end: 6,  label: 'def' },
+    ], track));
+
+    it('with a multi-line label and bumped features', () => testTrackRenderStatic([
+      { start: 1, end: 10, label: 'abc\ndef' },
+      { start: 6, end: 6,  label: 'def' },
+    ], track));
+
+    it('with a label longer than its feature and bumped features', () => testTrackRenderStatic([
+      { start: 1,  end: 10, label: 'WWWWWW' },
+      { start: 13, end: 13, label: 'abc' },
+      { start: 14, end: 14, label: 'def' },
+    ], track));
+
+    describe('with a repeated label (track.repeatLabels = true)', () => {
+      describe('where the label is shorter than its feature', () => {
+        it('and browser.scale > 1', () => testTrackRender([
+          { start: 85, end: 128, label: 'abc' },
+        ], { repeatLabels: true, ...track }, { start: 101, end: 120 }));
+
+        it('and browser.scale <= 1', () => testTrackRender([
+          { start: 151, end: 650, label: 'abc' },
+        ], { repeatLabels: true, ...track }, { start: 301, end: 500 }));
+      });
+
+      describe('where the label is shorter than its feature, but not shown on the last image', () => {
+        it('and browser.scale > 1', () => testTrackRender([
+          { start: 85, end: 127, label: 'abc' },
+        ], { repeatLabels: true, ...track }, { start: 101, end: 120 }));
+
+        it('and browser.scale <= 1', () => testTrackRender([
+          { start: 151, end: 510, label: 'abc' },
+        ], { repeatLabels: true, ...track }, { start: 301, end: 500 }));
+      });
+
+      describe('where the label is longer than its feature', () => {
+        it('and browser.scale > 1', () => testTrackRender([
+          { start: 85, end: 125, label: 'WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW' },
+        ], { repeatLabels: true, ...track }, { start: 101, end: 120, longestLabel: 59 }));
+
+        it('and browser.scale <= 1', () => testTrackRender([
+          { start: 151, end: 510, label: 'WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW' },
+        ], { repeatLabels: true, ...track }, { start: 301, end: 500, longestLabel: 59 }));
+      });
+    });
+  });
+
+  describe('labels appear overlaid on their features (track.labels = "overlay")', () => {
+    const tr = { labels: 'overlay', ...track };
+
+    it('with a label shorter than its feature', () => testTrackRenderStatic([
+      { start: 1, end: 10, label: 'WWW', labelColor: 'white' },
+    ], tr));
+
+    it('with a label longer than its feature', () => testTrackRenderStatic([
+      { start: 1, end: 10, label: 'WWWWWWWWWW', labelColor: 'white' },
+    ], tr));
+
+    it('with a multi-line label (gets joined with space)', () => testTrackRenderStatic([
+      { start: 1, end: 10, label: 'abc\ndef', labelColor: 'white' },
+    ], tr));
+
+    it('with bumped features', () => testTrackRenderStatic([
+      { start: 1, end: 10, label: 'abc', labelColor: 'white' },
+      { start: 6, end: 7,  label: 'd',   labelColor: 'white' },
+    ], tr));
+
+    describe('with a repeated label (track.repeatLabels = true)', () => {
+      describe('where the label is shorter than its feature', () => {
+        it('and browser.scale > 1', () => testTrackRender([
+          { start: 85, end: 138, label: 'abc', labelColor: 'red' },
+        ], { repeatLabels: true, ...tr }, { start: 101, end: 120 }));
+
+        it('and browser.scale <= 1', () => testTrackRender([
+          { start: 151, end: 650, label: 'abc', labelColor: 'red' },
+        ], { repeatLabels: true, ...tr }, { start: 301, end: 500 }));
+      });
+
+      describe('where the label is shorter than its feature, but not shown on the last image', () => {
+        it('and browser.scale > 1', () => testTrackRender([
+          { start: 85, end: 137, label: 'abc', labelColor: 'red' },
+        ], { repeatLabels: true, ...tr }, { start: 101, end: 120 }));
+
+        it('and browser.scale <= 1', () => testTrackRender([
+          { start: 151, end: 550, label: 'abc', labelColor: 'red' },
+        ], { repeatLabels: true, ...tr }, { start: 301, end: 500 }));
+      });
+
+      it('where the label is longer than its feature', () => testTrackRender([
+        { start: 85, end: 125, label: 'WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW', labelColor: 'white' },
+      ], { repeatLabels: true, ...tr }, { start: 101, end: 120, longestLabel: 59 }));
+    });
+  });
+
+  describe('labels appear on a separate image - all labels are below all features (track.labels = "separate")', () => {
+    const tr = { labels: 'separate', ...track };
+
+    it('with bumped features and unbumped labels', () => testTrackRenderStatic([
+      { start: 1, end: 10, label: 'abc' },
+      { start: 6, end: 6,  label: 'def' },
+    ], tr));
+
+    it('with bumped features and bumped labels', () => testTrackRenderStatic([
+      { start: 1, end: 10, label: 'WWW' },
+      { start: 6, end: 6,  label: 'abc' },
+    ], tr));
+
+    it('with bumped features and bumped labels and track.depth', () => testTrackRenderStatic([
+      { start: 1, end: 10, label: 'WWW' },
+      { start: 6, end: 6,  label: 'abc' },
+    ], { depth: 1, height: 50, ...tr }));
+
+    describe('with a repeated label (track.repeatLabels = true)', () => {
+      describe('where the label is shorter than its feature', () => {
+        it('and browser.scale > 1', () => testTrackRender([
+          { start: 85, end: 128, label: 'abc' },
+        ], { repeatLabels: true, ...tr }, { start: 101, end: 120 }));
+
+        it('and browser.scale <= 1', () => testTrackRender([
+          { start: 151, end: 650, label: 'abc' },
+        ], { repeatLabels: true, ...tr }, { start: 301, end: 500 }));
+      });
+
+      describe('where the label is shorter than its feature, but not shown on the last image', () => {
+        it('and browser.scale > 1', () => testTrackRender([
+          { start: 85, end: 127, label: 'abc' },
+        ], { repeatLabels: true, ...tr }, { start: 101, end: 120 }));
+
+        it('and browser.scale <= 1', () => testTrackRender([
+          { start: 151, end: 510, label: 'abc' },
+        ], { repeatLabels: true, ...tr }, { start: 301, end: 500 }));
+      });
+
+      describe('where the label is longer than its feature', () => {
+        it('and browser.scale > 1', () => testTrackRender([
+          { start: 85, end: 125, label: 'WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW' },
+        ], { repeatLabels: true, ...tr }, { start: 101, end: 120, longestLabel: 59 }));
+
+        it('and browser.scale <= 1', () => testTrackRender([
+          { start: 151, end: 510, label: 'WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW' },
+        ], { repeatLabels: true, ...tr }, { start: 301, end: 500, longestLabel: 59 }));
+      });
+    });
+  });
+
+  describe('a label spans two images', () => {
+    describe('where a feature spans two images, but its label does not', () => {
+      it('with track.labels = true', () => testTrackRender([
+        { start: 16, end: 25, label: 'a' },
+      ], track));
+
+      it('with track.labels = "overlay"', () => testTrackRender([
+        { start: 6, end: 21, label: 'a', labelColor: 'white' },
+      ], { labels: 'overlay', ...track }));
+
+      it('with track.labels = "separate"', () => testTrackRender([
+        { start: 16, end: 25, label: 'a' },
+      ], { labels: 'separate', ...track }));
+    });
+
+    describe('where a label spans two images, but its feature does not', () => {
+      it('with track.labels = true', () => testTrackRender([
+        { start: 19, end: 19, label: 'abcdef' },
+      ], track));
+
+      it('with track.labels = "separate"', () => testTrackRender([
+        { start: 19, end: 19, label: 'abcdef' },
+      ], { labels: 'separate', ...track }));
+    });
+
+    describe('where both feature and label span two images', () => {
+      it('with track.labels = true', () => testTrackRender([
+        { start: 16, end: 25, label: 'abcdef' },
+      ], track));
+
+      it('with track.labels = "overlay"', () => testTrackRender([
+        { start: 16, end: 25, label: 'abcdef', labelColor: 'white' },
+      ], { labels: 'overlay', ...track }));
+
+      it('with track.labels = "separate"', () => testTrackRender([
+        { start: 16, end: 25, label: 'abcdef' },
+      ], { labels: 'separate', ...track }));
+    });
+
+    describe('with bumped features and labels', () => {
+      it('with track.labels = true', () => testTrackRender([
+        { start: 16, end: 25, label: 'a'      },
+        { start: 16, end: 25, label: 'abcdef' },
+        { start: 19, end: 19, label: 'qwerty' },
+      ], track));
+
+      it('with track.labels = "overlay"', () => testTrackRender([
+        { start: 16, end: 25, label: 'a',      labelColor: 'white' },
+        { start: 16, end: 25, label: 'abcdef', labelColor: 'white' },
+        { start: 17, end: 19, label: 'b',      labelColor: 'white' },
+      ], { labels: 'overlay', ...track }));
+
+      it('with track.labels = "separate"', () => testTrackRender([
+        { start: 16, end: 25, label: 'a'      },
+        { start: 16, end: 25, label: 'abcdef' },
+        { start: 19, end: 19, label: 'qwerty' },
+      ], { labels: 'separate', ...track }));
+    });
+  });
+
+  describe('labels are colored', () => {
+    it('red label with feature.labelColor', () => testTrackRenderStatic([
+      { start: 1, end: 10, label: 'abc', labelColor: 'red' },
+    ], track));
+
+    it('red label with feature.color', () => testTrackRenderStatic([
+      { start: 1, end: 10, label: 'abc', color: 'red' },
+    ], track));
+
+    it('red label with track.fontColor', () => testTrackRenderStatic([
+      { start: 1, end: 10, label: 'abc' },
+    ], { fontColor: 'red', ...track }));
+
+    it('a mixture of all three methods (order of precendence = feature.labelColor > track.fontColor > feature.color)', () => testTrackRenderStatic([
+      { start: 1, end: 10, label: 'abc', labelColor: 'green' },
+      { start: 1, end: 10, label: 'abc', color: 'blue'  },
+      { start: 1, end: 10, label: 'abc' },
+    ], { fontColor: 'red', ...track }));
+  });
+
+  describe('labels might be forced to be separate', () => {
+    [
+      { why: 'track.bump = "labels"',                              track: Genoverse.Track.extend({ bump: 'labels'                    }), expected: 'separate' },
+      { why: 'track.depth is set',                                 track: Genoverse.Track.extend({ depth: 1                          }), expected: 'separate' },
+      { why: 'track.bump = "labels" and track.labels = "overlay"', track: Genoverse.Track.extend({ bump: 'labels', labels: 'overlay' }), expected: 'overlay'  },
+      { why: 'track.depth is set and track.labels = "overlay"',    track: Genoverse.Track.extend({ depth: 1,       labels: 'overlay' }), expected: 'overlay'  },
+      { why: 'track.bump = "labels" and track.labels = false',     track: Genoverse.Track.extend({ bump: 'labels', labels: false     }), expected: false      },
+      { why: 'track.depth is set and track.labels = false',        track: Genoverse.Track.extend({ depth: 1,       labels: false     }), expected: false      },
+    ].forEach((test) => {
+      it(`because ${test.why}`, () => {
+        expect(new Genoverse({ tracks: [ test.track ], chromosomeSize: 1000 }).tracks[0].prop('labels')).toBe(test.expected);
+      });
+    });
+  });
+});

package/test/View/render-legends.test.js

@@ -0,0 +1,31 @@
+const { afterTest, testTrackRenderStatic } = require('../utils');
+
+describe('Correctly render legends:', () => {
+  afterEach(afterTest);
+
+  const track = {
+    id            : 'test',
+    margin        : 0,
+    featureHeight : 10,
+    featureMargin : {},
+    legend        : true,
+  };
+
+  it('multiple feature types', () => testTrackRenderStatic(
+    [{ start: 1, end: 5, color: 'red', legend: 'test1' }, { start: 6, end: 10, color: 'blue', legend: 'test2' }, { start: 11, end: 15, color: 'green', legend: 'test3' }],
+    track,
+    { width: 1000 }
+  ));
+
+  it('legends are sorted alphabetically, regardless of feature order', () => testTrackRenderStatic(
+    [{ start: 1, end: 5, color: 'red', legend: 'zzz' }, { start: 6, end: 10, color: 'blue', legend: 'aaa' }, { start: 11, end: 15, color: 'green', legend: 'bbb' }],
+    track,
+    { width: 1000 }
+  ));
+
+  it("feature doesn't have legend property", () => testTrackRenderStatic(
+    [{ start: 1, end: 5, color: 'red', legend: 'zzz' }, { start: 6, end: 10, color: 'blue', legend: 'aaa' }, { start: 11, end: 15, color: 'green' }],
+    track,
+    { width: 1000 }
+  ));
+});