Test click event

tests/gene.test.ts

@@ -13,6 +13,9 @@ describe("Test gene componennt", () => {
     begin: 10,
     end: 50,
     gene: "insA",
+    eventHandler: {
+      click: (geneLocation) => console.log(geneLocation)
+    }
   },
   {
     name: "gene 2",
@@ -21,21 +24,37 @@ describe("Test gene componennt", () => {
     end: 100,
     gene: "yaaY",
   }];
-
+  let window = [0, 120];
   const geneComponent = Gene();
   const xScale = scaleLinear()
-    .domain([0, 120])
+    .domain(window)
     .range([0, 1200]);
 
+  const container = select("svg")
+    .select<SVGGElement>("g");
+
   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);
+  });
+
+  test("Click", () => {
+    const result = '<g class=\"gene\" transform=\"translate(0,60)\"><path style=\"fill-opacity: 0.85; stroke-width: 1px; stroke-opacity: 0.8;\" transform=\"translate(0,35) translate(533.3333333333333,30) rotate(180)\" d=\"M0,0L0,30L523.3333333333333,30L533.3333333333333,15L523.3333333333333,0Z\"></path></g><g class=\"gene\" transform=\"translate(666.6666666666667,60)\"><path style=\"fill-opacity: 0.85; stroke-width: 1px; stroke-opacity: 0.8;\" d=\"M0,0L0,30L523.3333333333333,30L533.3333333333333,15L523.3333333333333,0Z\"></path></g>';
+    const path = container.selectAll(".gene").select<SVGPathElement>("path");
+    if (path) {
+      path.dispatch("click");
+      window = [10, 100]
+      xScale.domain(window);
+      container
+        .datum<GeneData[]>(data)
+        .call(geneComponent, xScale);
+      // path.dispatchEvent(new Event('click'));
       expect(container.html()).toBe(result);
-  })
+    }
+  });
 
 });
\ No newline at end of file