Add 10 more test cases for nearest interaction when spanGaps=true

chartjs · Jan 3, 2025 · 7c20804 · 7c20804
1 parent fe0cd3d
commit 7c20804
Showing 1 changed file with 86 additions and 54 deletions.
diff --git a/test/specs/core.interaction.tests.js b/test/specs/core.interaction.tests.js
@@ -913,61 +913,93 @@ describe('Core.Interaction', function() {
     });
   });
 
-  it('should select closest non-null elements if spanGaps=true and closest non-null element is to the left', function() {
-    const chart = window.acquireChart({
-      type: 'line',
-      data: {
-        labels: [1, 2, 3, 4, 5, 6, 7, 8, 9],
-        datasets: [{
-          data: [12, 19, null, null, null, null, 5, 2, 3],
-          spanGaps: true,
-        }]
-      }
-    });
-    chart.update();
-    const interactionPointIndex = 3;
-    const meta = chart.getDatasetMeta(0);
-    const point = meta.data[interactionPointIndex];
-
-    const evt = {
-      type: 'click',
-      chart: chart,
-      native: true, // needed otherwise things its a DOM event
-      x: point.x,
-      y: point.y,
-    };
-
-    const expectedInteractionPointIndex = 1;
-    const elements = Chart.Interaction.modes.nearest(chart, evt, {axis: 'x', intersect: false}).map(item => item.element);
-    expect(elements).toEqual([meta.data[expectedInteractionPointIndex]]);
-  });
+  const testCases = [
+    {
+      data: [12, 19, null, null, null, null, 5, 2],
+      clickPointIndex: 0,
+      expectedNearestPointIndex: 0
+    },
+    {
+      data: [12, 19, null, null, null, null, 5, 2],
+      clickPointIndex: 1,
+      expectedNearestPointIndex: 1},
+    {
+      data: [12, 19, null, null, null, null, 5, 2],
+      clickPointIndex: 2,
+      expectedNearestPointIndex: 1
+    },
+    {
+      data: [12, 19, null, null, null, null, 5, 2],
+      clickPointIndex: 3,
+      expectedNearestPointIndex: 1
+    },
+    {
+      data: [12, 19, null, null, null, null, 5, 2],
+      clickPointIndex: 4,
+      expectedNearestPointIndex: 6
+    },
+    {
+      data: [12, 19, null, null, null, null, 5, 2],
+      clickPointIndex: 5,
+      expectedNearestPointIndex: 6
+    },
+    {
+      data: [12, 19, null, null, null, null, 5, 2],
+      clickPointIndex: 6,
+      expectedNearestPointIndex: 6
+    },
+    {
+      data: [12, 19, null, null, null, null, 5, 2],
+      clickPointIndex: 7,
+      expectedNearestPointIndex: 7
+    },
+    {
+      data: [12, 0, null, null, null, null, 0, 2],
+      clickPointIndex: 3,
+      expectedNearestPointIndex: 1
+    },
+    {
+      data: [12, 0, null, null, null, null, 0, 2],
+      clickPointIndex: 4,
+      expectedNearestPointIndex: 6
+    },
+    {
+      data: [12, -1, null, null, null, null, -1, 2],
+      clickPointIndex: 3,
+      expectedNearestPointIndex: 1
+    },
+    {
+      data: [12, -1, null, null, null, null, -1, 2],
+      clickPointIndex: 4,
+      expectedNearestPointIndex: 6
+    }
+  ];
+  testCases.forEach(({data, clickPointIndex, expectedNearestPointIndex}, i) => {
+    it(`should select nearest non-null element with index ${expectedNearestPointIndex} when clicking on element with index ${clickPointIndex} in test case ${i + 1} if spanGaps=true`, function() {
+      const chart = window.acquireChart({
+        type: 'line',
+        data: {
+          labels: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+          datasets: [{
+            data: data,
+            spanGaps: true,
+          }]
+        }
+      });
+      chart.update();
+      const meta = chart.getDatasetMeta(0);
+      const point = meta.data[clickPointIndex];
 
-  it('should select closest non-null elements if spanGaps=true and closest non-null element is to the right', function() {
-    const chart = window.acquireChart({
-      type: 'line',
-      data: {
-        labels: [1, 2, 3, 4, 5, 6, 7, 8, 9],
-        datasets: [{
-          data: [12, 19, null, null, null, null, 5, 2, 3],
-          spanGaps: true,
-        }]
-      }
+      const evt = {
+        type: 'click',
+        chart: chart,
+        native: true, // needed otherwise things its a DOM event
+        x: point.x,
+        y: point.y,
+      };
+
+      const elements = Chart.Interaction.modes.nearest(chart, evt, {axis: 'x', intersect: false}).map(item => item.element);
+      expect(elements).toEqual([meta.data[expectedNearestPointIndex]]);
     });
-    chart.update();
-    const interactionPointIndex = 4;
-    const meta = chart.getDatasetMeta(0);
-    const point = meta.data[interactionPointIndex];
-
-    const evt = {
-      type: 'click',
-      chart: chart,
-      native: true, // needed otherwise things its a DOM event
-      x: point.x,
-      y: point.y,
-    };
-
-    const expectedInteractionPointIndex = 6;
-    const elements = Chart.Interaction.modes.nearest(chart, evt, {axis: 'x', intersect: false}).map(item => item.element);
-    expect(elements).toEqual([meta.data[expectedInteractionPointIndex]]);
   });
 });