genome-browser.test.ts 8.75 KB
Newer Older
1
import GenomeBrowser from "../src/scripts/component/genome-browser";
2 3
import genomeBrowserDataLayout from "../src/scripts/layout/genome-browser";
import { GenomeBrowserData, GeneData } from "../src/scripts/types";
Remi  PLANEL's avatar
Remi PLANEL committed
4
import { select } from "d3-selection";
5

Remi  PLANEL's avatar
Remi PLANEL committed
6
describe("Test Genome Browser", () => {
7
  const result = '<g class="genome-browser"><g class="chromosome-ruler" transform="translate(0,0)"><g class="whole-chromosome-ruler"><g class="generic-ruler" transform="translate(0,0)"><g class="genome-axis"><g class="title"><text style="fill: black; font-family: monospace;" transform="translate(574,20)">chromosome ruler title (300 bp)</text></g><g class="axis-elems" transform="translate(0, 50)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="currentColor" d="M0.5,-6V0.5H900.5V-6"></path><g class="tick" opacity="1" transform="translate(0.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">0.00</text></g><g class="tick" opacity="1" transform="translate(60.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">20.0</text></g><g class="tick" opacity="1" transform="translate(120.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">40.0</text></g><g class="tick" opacity="1" transform="translate(180.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">60.0</text></g><g class="tick" opacity="1" transform="translate(240.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">80.0</text></g><g class="tick" opacity="1" transform="translate(300.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">100</text></g><g class="tick" opacity="1" transform="translate(360.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">120</text></g><g class="tick" opacity="1" transform="translate(420.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">140</text></g><g class="tick" opacity="1" transform="translate(480.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">160</text></g><g class="tick" opacity="1" transform="translate(540.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">180</text></g><g class="tick" opacity="1" transform="translate(600.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">200</text></g><g class="tick" opacity="1" transform="translate(660.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">220</text></g><g class="tick" opacity="1" transform="translate(720.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">240</text></g><g class="tick" opacity="1" transform="translate(780.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">260</text></g><g class="tick" opacity="1" transform="translate(840.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">280</text></g><g class="tick" opacity="1" transform="translate(900.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">300</text></g></g></g></g><g transform="translate(0,25)"><g class="brush-selection" fill="none" pointer-events="all"><rect class="overlay" pointer-events="all" cursor="crosshair" x="0" y="0" width="900" height="50"></rect><rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" style="" x="75" y="0" width="285" height="50"></rect><rect class="handle handle--e" cursor="ew-resize" style="" x="357" y="-3" width="6" height="56"></rect><rect class="handle handle--w" cursor="ew-resize" style="" x="72" y="-3" width="6" height="56"></rect></g><g style="font-size: 9;" class="brush-selection-boundaries"><text class="start" style="text-anchor: end;" transform="translate(75,60)">25.0</text><text class="end" transform="translate(360,60)" style="text-anchor: start;">120</text></g></g></g></g><g class="selected-chromosomes" transform="translate(0,70)"><g class="selected-chromosome"><rect class="genome-browser-background" width="900" height="150"></rect><g class="chromosome-ruler" transform="translate(0,0)"><g class="genome-axis"><g class="title"><text style="fill: black; font-family: monospace;" transform="translate(538,20)">Chromosome [25.0, 120]</text></g><g class="axis-elems" transform="translate(0, 50)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="currentColor" d="M0.5,-6V0.5H900.5V-6"></path><g class="tick" opacity="1" transform="translate(47.868421052631575,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">30.0</text></g><g class="tick" opacity="1" transform="translate(142.60526315789474,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">40.0</text></g><g class="tick" opacity="1" transform="translate(237.3421052631579,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">50.0</text></g><g class="tick" opacity="1" transform="translate(332.07894736842104,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">60.0</text></g><g class="tick" opacity="1" transform="translate(426.81578947368416,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">70.0</text></g><g class="tick" opacity="1" transform="translate(521.5526315789474,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">80.0</text></g><g class="tick" opacity="1" transform="translate(616.2894736842105,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">90.0</text></g><g class="tick" opacity="1" transform="translate(711.0263157894736,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">100</text></g><g class="tick" opacity="1" transform="translate(805.7631578947369,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">110</text></g><g class="tick" opacity="1" transform="translate(900.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">120</text></g></g></g></g><g class="genes"><g class="gene" transform="translate(-142.10526315789474,70)"><path style="fill: rgb(228, 26, 28); fill-opacity: 0.85; stroke: rgb(160, 18, 20); stroke-width: 1px; stroke-opacity: 0.8;" transform="translate(0,25) translate(378.9473684210526,20) rotate(180)" d="M0,0L0,20L368.9473684210526,20L378.9473684210526,10L368.9473684210526,0Z"></path></g><g class="gene" transform="translate(331.57894736842104,70)"><path style="fill: rgb(55, 126, 184); fill-opacity: 0.85; stroke: rgb(39, 88, 129); stroke-width: 1px; stroke-opacity: 0.8;" d="M0,0L0,20L368.9473684210526,20L378.9473684210526,10L368.9473684210526,0Z"></path></g></g></g></g></g>';
Remi  PLANEL's avatar
Remi PLANEL committed
8 9 10 11
  const genomeBrowserComponent = GenomeBrowser();
  const width = 1500;
  const window: [number, number] = [25, 120];
  const chromosomeSize = 300;
12

Remi  PLANEL's avatar
Remi PLANEL committed
13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
  const genes: GeneData[] = [
    {
      name: "gene 1",
      strand: "-",
      begin: 10,
      end: 50,
      gene: "insA",
    },
    {
      name: "gene 2",
      strand: "+",
      begin: 60,
      end: 100,
      gene: "yaaY",
    },
28

Remi  PLANEL's avatar
Remi PLANEL committed
29 30 31 32 33 34 35 36
    {
      name: "gene 3",
      strand: "+",
      begin: 150,
      end: 280,
      gene: "foo",
    }
  ];
37 38 39 40 41 42 43 44 45 46
  const genomeBrowserState = {
    width,
    chromosomeSize,
    window,
    genes,
    chromosome: {
      title: "chromosome ruler title"
    },
    selectedChromosome: {
      title: "Chromosome"
Remi  PLANEL's avatar
Remi PLANEL committed
47
    }
48
  }
49

50 51 52 53 54 55
  const genomeBrowserData = genomeBrowserDataLayout(
    genomeBrowserState,
    () => console.log("brush"),
    () => console.log("click")
  );
  const data: GenomeBrowserData[] = [genomeBrowserData];
Remi  PLANEL's avatar
Remi PLANEL committed
56 57 58 59
  document.body.innerHTML =
    '<div><svg width="500"><g id="container"></g></svg></div>';
  const container = select("svg")
    .select<SVGGElement>("g");
60
  container
Remi  PLANEL's avatar
Remi PLANEL committed
61 62 63 64 65 66
    .datum<GenomeBrowserData[]>(data)
    .call(genomeBrowserComponent);
  test("Test all dom element", () => {
    // This is test is too much. Should find a smarter one that won't break
    // for small changement.
    expect(container.html()).toBe(result);
67
  })
68 69 70 71 72 73 74 75 76
  test("Test transform data", () => {
    expect(genomeBrowserData.selectedChromosome.genes.length).toBe(2);
  });

  test("test window data", () => {
    expect(genomeBrowserData.selectedChromosome.window).toBe(genomeBrowserState.window);
    expect(genomeBrowserData.selectedChromosome.window).toBe(genomeBrowserData.chromosome.ruler.window);
    expect(genomeBrowserData.selectedChromosome.window).toBe(genomeBrowserData.selectedChromosome.ruler.interval)
  });
77
})