Add test for d3 geneComponent

tests/gene.test.ts

+import Gene from "../src/scripts/component/sequence/gene";
+import { GeneData } from "../src/scripts/types";
+import { select } from "d3-selection";
+import { scaleLinear } from "d3-scale";
+
+describe("Test gene componennt", () => {
+  const result = '<g class="gene" transform="translate(100,60)"><path style="fill-opacity: 0.85; stroke-width: 1px; stroke-opacity: 0.8;" transform="translate(0,35) translate(400,30) rotate(180)" d="M0,0L0,30L390,30L400,15L390,0Z"></path></g><g class="gene" transform="translate(600,60)"><path style="fill-opacity: 0.85; stroke-width: 1px; stroke-opacity: 0.8;" d="M0,0L0,30L390,30L400,15L390,0Z"></path></g>';
+  document.body.innerHTML =
+    '<div><svg width="500"><g id="container"></g></svg></div>';
+  const data: GeneData[] = [{
+    name: "gene 1",
+    strand: "-",
+    begin: 10,
+    end: 50,
+    gene: "insA",
+  },
+  {
+    name: "gene 2",
+    strand: "+",
+    begin: 60,
+    end: 100,
+    gene: "yaaY",
+  }];
+
+  const geneComponent = Gene();
+  const xScale = scaleLinear()
+    .domain([0, 120])
+    .range([0, 1200]);
+
+  test("test html generated by gene component", () => {
+    const container = select("svg")
+      .select<SVGGElement>("g");
+      
+    container
+      .datum<GeneData[]>(data)
+      .call(geneComponent, xScale);
+
+      expect(container.html()).toBe(result);
+  })
+
+});
\ No newline at end of file