Commit f5ecaa26 authored by Remi  PLANEL's avatar Remi PLANEL

Add test for selected-chromosome

parent f137365b
Pipeline #12077 passed with stage
in 59 seconds
...@@ -11,14 +11,14 @@ import { drag } from "d3-drag"; ...@@ -11,14 +11,14 @@ import { drag } from "d3-drag";
export default function () { export default function () {
const classes = { const classes = {
selectedChromosome: "selected-chromosome", selectedChromosome: "selected-chromosome",
rule: "rule", ruler: "chromosome-ruler",
genes: "genes" genes: "genes"
}; };
const ruleComponent = ChromosomeRule(); const ruleComponent = ChromosomeRule();
const geneComponent = Gene(); const geneComponent = Gene();
function selectedChromosome( function selectedChromosome(
_selection: Selection<SVGElement, SelectedChromosomeData[], SVGElement, any>, _selection: Selection<SVGGElement, SelectedChromosomeData[], any, any>,
width: number width: number
) { ) {
_selection.each(function (_data: SelectedChromosomeData[]) { _selection.each(function (_data: SelectedChromosomeData[]) {
...@@ -39,7 +39,7 @@ export default function () { ...@@ -39,7 +39,7 @@ export default function () {
selectedChromosomeEnter selectedChromosomeEnter
.append("g") .append("g")
.classed(classes.rule, true); .classed(classes.ruler, true);
selectedChromosomeEnter selectedChromosomeEnter
.append("g") .append("g")
...@@ -78,8 +78,8 @@ export default function () { ...@@ -78,8 +78,8 @@ export default function () {
); );
selectedChromosomeUpdate selectedChromosomeUpdate
.select<SVGGElement>("." + classes.rule) .select<SVGGElement>("." + classes.ruler)
.datum<GenericAxisData>(d => d.rule) .datum<GenericAxisData>(d => d.ruler)
.call(ruleComponent, width, 0) .call(ruleComponent, width, 0)
selectedChromosomeUpdate selectedChromosomeUpdate
......
import SelectedChromosome from "../src/scripts/component/selected-chromosome"; import SelectedChromosome from "../src/scripts/component/selected-chromosome";
import { select } from "d3-selection";
import { SelectedChromosomeData } from "../src/scripts/types";
describe("Test Selected Chromosome", () => {
const result = '<g class="selected-chromosome"><rect class="genome-browser-background" width="1500" 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(790,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.5H1500.5V-6"></path><g class="tick" opacity="1" transform="translate(79.44736842105263,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(237.3421052631579,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(395.2368421052631,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(553.1315789473684,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(711.0263157894736,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(868.921052631579,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(1026.8157894736842,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(1184.7105263157896,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">100</text></g><g class="tick" opacity="1" transform="translate(1342.6052631578948,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">110</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">120</text></g></g></g></g><g class="genes"><g class="gene" transform="translate(-236.8421052631579,70)"><path style="fill-opacity: 0.85; stroke-width: 1px; stroke-opacity: 0.8;" transform="translate(0,25) translate(631.578947368421,20) rotate(180)" d="M0,0L0,20L621.578947368421,20L631.578947368421,10L621.578947368421,0Z"></path></g><g class="gene" transform="translate(552.6315789473684,70)"><path style="fill-opacity: 0.85; stroke-width: 1px; stroke-opacity: 0.8;" d="M0,0L0,20L621.5789473684212,20L631.5789473684212,10L621.5789473684212,0Z"></path></g></g></g>'
const selectedChromosomeComponent = SelectedChromosome();
const window: [number, number] = [25, 120];
const data: SelectedChromosomeData[] = [
{
window,
genes: [{
name: "gene 1",
strand: "-",
begin: 10,
end: 50,
gene: "insA",
},
{
name: "gene 2",
strand: "+",
begin: 60,
end: 100,
gene: "yaaY",
}],
ruler: {
title: "Chromosome",
interval: window
}
}
];
document.body.innerHTML =
'<div><svg width="500"><g id="container"></g></svg></div>';
const container = select("svg")
.select<SVGGElement>("g");
container
.datum<SelectedChromosomeData[]>(data)
.call(selectedChromosomeComponent, 1500);
describe("Test Genome Browser", () => { // Start tests
const selectedChromosomeComponent = SelectedChromosome(); test("Test data to DOM elements", () => {
test("", () => { }) expect(container.html()).toBe(result);
})
}) })
\ No newline at end of file
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