Commit 5897a8c4 authored by Remi  PLANEL's avatar Remi PLANEL
Browse files

Add brushable-chromosome tests

parent acbe5b39
Pipeline #12076 passed with stage
in 55 seconds
...@@ -73,7 +73,7 @@ export default function () { ...@@ -73,7 +73,7 @@ export default function () {
function updateWholeChromosomeAxis(axis: BrushableAxisData) { function updateWholeChromosomeAxis(axis: BrushableAxisData) {
if (genomesBrowserU) { if (genomesBrowserU) {
genomesBrowserU genomesBrowserU
.select<SVGElement>("." + classes.chromosomeRule) .select<SVGGElement>("." + classes.chromosomeRule)
.datum(axis) .datum(axis)
.call(wholeChromosomeRule, width, 0); .call(wholeChromosomeRule, width, 0);
} }
......
...@@ -16,7 +16,7 @@ export default function () { ...@@ -16,7 +16,7 @@ export default function () {
const tickFormat = format(".3s"); const tickFormat = format(".3s");
const brushHeight = 50; const brushHeight = 50;
function globalGenomeAxis( function globalGenomeAxis(
_selection: Selection<SVGElement, BrushableAxisData, SVGElement, any>, _selection: Selection<SVGGElement, BrushableAxisData, any, any>,
width: number, width: number,
yPosition: number, yPosition: number,
) { ) {
......
import BrushableChromosomeRuler from "../src/scripts/component/ruler/brushable-chromosome";
import { BrushableAxisData } from "../src/scripts/types";
import { select } from "d3-selection";
describe("Test Chromosome Ruler", () => {
const result = '<g class="whole-chromosome-rule"><g class="generic-rule" transform="translate(0,20)"><g class="genome-axis"><g class="title"><text style="fill: black; font-family: monospace;" transform="translate(830,20)">brushable 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.5H1500.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(150.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">100k</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">200k</text></g><g class="tick" opacity="1" transform="translate(450.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">300k</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">400k</text></g><g class="tick" opacity="1" transform="translate(750.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">500k</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">600k</text></g><g class="tick" opacity="1" transform="translate(1050.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">700k</text></g><g class="tick" opacity="1" transform="translate(1200.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">800k</text></g><g class="tick" opacity="1" transform="translate(1350.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">900k</text></g><g class="tick" opacity="1" transform="translate(1500.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">1.00M</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="1500" height="50"></rect><rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" style="" x="150" y="0" width="75" height="50"></rect><rect class="handle handle--e" cursor="ew-resize" style="" x="222" y="-3" width="6" height="56"></rect><rect class="handle handle--w" cursor="ew-resize" style="" x="147" 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(150,60)">100k</text><text class="end" transform="translate(225,60)" style="text-anchor: start;">150k</text></g></g></g>'
const brushableChromosomeRulerComponent = BrushableChromosomeRuler();
document.body.innerHTML =
'<div><svg width="500"><g id="container"></g></svg></div>';
const data: BrushableAxisData = {
title: "brushable chromosome",
interval: [0, 1000000],
window: [100000, 150000],
maxWindowSize: 500000
};
// Start tests
test("Test data to DOM Element", () => {
const container = select("svg")
.select<SVGGElement>("g");
container
.datum<BrushableAxisData>(data)
.call(brushableChromosomeRulerComponent, 1500, 20);
expect(container.html()).toBe(result);
})
});
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment