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

Remi  PLANEL's avatar
Remi PLANEL committed
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
describe("Test Genome Browser", () => {
  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(490,20)">Chromosome</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-opacity: 0.85; 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-opacity: 0.85; stroke-width: 1px; stroke-opacity: 0.8;" d="M0,0L0,20L368.9473684210526,20L378.9473684210526,10L368.9473684210526,0Z"></path></g><g class="gene" transform="translate(1184.2105263157896,70)"><path style="fill-opacity: 0.85; stroke-width: 1px; stroke-opacity: 0.8;" d="M0,0L0,20L1221.5789473684208,20L1231.5789473684208,10L1221.5789473684208,0Z"></path></g></g></g></g></g>'
  const genomeBrowserComponent = GenomeBrowser();
  const width = 1500;
  const window: [number, number] = [25, 120];
  const chromosomeSize = 300;
  const genes: GeneData[] = [
    {
      name: "gene 1",
      strand: "-",
      begin: 10,
      end: 50,
      gene: "insA",
    },
    {
      name: "gene 2",
      strand: "+",
      begin: 60,
      end: 100,
      gene: "yaaY",
    },
26

Remi  PLANEL's avatar
Remi PLANEL committed
27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
    {
      name: "gene 3",
      strand: "+",
      begin: 150,
      end: 280,
      gene: "foo",
    }
  ];
  const chromInterval: [number, number] = [0, chromosomeSize]
  const data: GenomeBrowserData[] = [
    {
      width,
      chromosome: {
        size: chromosomeSize,
        genes,
        ruler: {
          title: "chromosome ruler title (" + chromosomeSize + " bp)",
          interval: chromInterval,
          window,
          maxWindowSize: chromosomeSize,
          eventHandler: {
            brushed: () => console.log("chromosome brushed")
          }
        },
      },
      selectedChromosome: {
        window,
        genes,
        ruler: {
          title: "Chromosome",
          interval: window
        }
      }
    }
61

Remi  PLANEL's avatar
Remi PLANEL committed
62 63 64 65 66 67 68 69 70 71 72 73
  ];
  document.body.innerHTML =
    '<div><svg width="500"><g id="container"></g></svg></div>';
  const container = select("svg")
    .select<SVGGElement>("g");
    container
    .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);
74 75 76

  })
})