refactor xy-chart tests

Co-authored-by: Pranav Mishra <mishrap@dickinson.edu>

cypress/integration/rendering/xyChart.spec.js

@@ -316,34 +316,21 @@ describe('XY Chart', () => {
     );
     cy.get('svg');
   });
-  it('should render bar labels when showDataLabel is set to true', () => {
-    imgSnapshotTest(
-      `
-      ---
-      config:
-        themeVariables:
-          xyChart:
-            showDataLabel: true
-      ---
-      xychart-beta
-        title "Default Label Chart"
-        x-axis Categories [A, B, C]
-        y-axis "Values" 0 --> 100
-        bar [10, 50, 90]
-      `,
-      {}
-    );
-  });
 
-  it('should not render bar labels by default', () => {
+  it('should render vertical bar chart with labels', () => {
     imgSnapshotTest(
       `
-      xychart-beta
+    ---
-        title "No Label Chart"
+    config:
-        x-axis Categories [A, B, C]
+      xyChart:
-        y-axis "Values" 0 --> 100
+        showDataLabel: true
-        bar [10, 50, 90]
+    ---
-      `,
+    xychart-beta
+      title "Sales Revenue"
+      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+      y-axis "Revenue (in $)" 4000 --> 11000
+      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    `,
       {}
     );
   });
@@ -367,7 +354,20 @@ describe('XY Chart', () => {
     );
   });
 
-  it('should render horizontal bar chart without labels', () => {
+  it('should render vertical bar chart without labels by default', () => {
+    imgSnapshotTest(
+      `
+    xychart-beta
+      title "Sales Revenue"
+      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+      y-axis "Revenue (in $)" 4000 --> 11000
+      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    `,
+      {}
+    );
+  });
+
+  it('should render horizontal bar chart without labels by default', () => {
     imgSnapshotTest(
       `
     ---
@@ -385,8 +385,7 @@ describe('XY Chart', () => {
     );
   });
 
-  it('should render multiple bar plots with labels correctly', () => {
+  it('should render multiple bar plots vertically with labels correctly', () => {
-    // In this test, we create two bar plots. The default config should render labels for each.
     imgSnapshotTest(
       `
     ---
@@ -399,13 +398,31 @@ describe('XY Chart', () => {
         x-axis Categories [A, B, C]
         y-axis "Values" 0 --> 100
         bar [10, 50, 90]
-        bar [20, 60, 80]
       `,
       {}
     );
   });
 
-  it('should render a single bar with label', () => {
+  it('should render multiple bar plots horizontally with labels correctly', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+        chartOrientation: horizontal
+    ---
+      xychart-beta
+        title "Multiple Bar Plots"
+        x-axis Categories [A, B, C]
+        y-axis "Values" 0 --> 100
+        bar [10, 50, 90]
+      `,
+      {}
+    );
+  });
+
+  it('should render a single bar with label for a vertical xy-chart', () => {
     imgSnapshotTest(
       `
     ---
@@ -423,7 +440,26 @@ describe('XY Chart', () => {
     );
   });
 
-  it('should render negative and decimal values with correct labels', () => {
+  it('should render a single bar with label for a horizontal xy-chart', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+        chartOrientation: horizontal
+    ---
+      xychart-beta
+        title "Single Bar Chart"
+        x-axis Categories [A]
+        y-axis "Value" 0 --> 100
+        bar [75]
+      `,
+      {}
+    );
+  });
+
+  it('should render negative and decimal values with correct labels for vertical xy-chart', () => {
     imgSnapshotTest(
       `
     ---
@@ -441,7 +477,7 @@ describe('XY Chart', () => {
     );
   });
 
-  it('should render data labels within each bar in the horizontal xy-chart', () => {
+  it('should render negative and decimal values with correct labels for horizontal xy-chart', () => {
     imgSnapshotTest(
       `
     ---
@@ -450,50 +486,14 @@ describe('XY Chart', () => {
         showDataLabel: true
         chartOrientation: horizontal
     ---
-    xychart-beta
+      xychart-beta
-            title "Sales Revenue"
+        title "Decimal and Negative Values"
-            x-axis Months [jan,b,c]
+        x-axis Categories [A, B, C]
-            y-axis "Revenue (in $)" 4000 --> 12000
+        y-axis -10 --> 10
-            bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000]
+        bar [ -2.5, 0.75, 5.1 ]
-    `,
+      `,
       {}
     );
-
-    cy.get('g.bar-plot-0').within(() => {
-      cy.get('rect').each(($rect, index) => {
-        // Extract bar properties
-        const barProps = {
-          x: parseFloat($rect.attr('x')),
-          y: parseFloat($rect.attr('y')),
-          width: parseFloat($rect.attr('width')),
-          height: parseFloat($rect.attr('height')),
-        };
-
-        // Get the text element corresponding to this bar by index.
-        cy.get('text')
-          .eq(index)
-          .then(($text) => {
-            const bbox = $text[0].getBBox();
-            const textProps = {
-              x: bbox.x,
-              y: bbox.y,
-              width: bbox.width,
-              height: bbox.height,
-            };
-
-            // Verify that the text label is positioned within the boundaries of the bar.
-            expect(textProps.x).to.be.greaterThan(barProps.x);
-            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
-
-            expect(textProps.y).to.be.greaterThan(barProps.y);
-            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
-            expect(textProps.y + textProps.height / 2).to.be.closeTo(
-              barProps.y + barProps.height / 2,
-              1
-            );
-          });
-      });
-    });
   });
 
   it('should render data labels within each bar in the vertical xy-chart', () => {
@@ -552,7 +552,118 @@ describe('XY Chart', () => {
     });
   });
 
-  it('should render data labels within each bar in the horizontal xy-chart with multiple bars of different sizes', () => {
+  it('should render data labels within each bar in the horizontal xy-chart', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+        chartOrientation: horizontal
+    ---
+    xychart-beta
+            title "Sales Revenue"
+            x-axis Months [jan,b,c]
+            y-axis "Revenue (in $)" 4000 --> 12000
+            bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000]
+    `,
+      {}
+    );
+
+    cy.get('g.bar-plot-0').within(() => {
+      cy.get('rect').each(($rect, index) => {
+        // Extract bar properties
+        const barProps = {
+          x: parseFloat($rect.attr('x')),
+          y: parseFloat($rect.attr('y')),
+          width: parseFloat($rect.attr('width')),
+          height: parseFloat($rect.attr('height')),
+        };
+
+        // Get the text element corresponding to this bar by index.
+        cy.get('text')
+          .eq(index)
+          .then(($text) => {
+            const bbox = $text[0].getBBox();
+            const textProps = {
+              x: bbox.x,
+              y: bbox.y,
+              width: bbox.width,
+              height: bbox.height,
+            };
+
+            // Verify that the text label is positioned within the boundaries of the bar.
+            expect(textProps.x).to.be.greaterThan(barProps.x);
+            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
+
+            expect(textProps.y).to.be.greaterThan(barProps.y);
+            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
+            expect(textProps.y + textProps.height / 2).to.be.closeTo(
+              barProps.y + barProps.height / 2,
+              1
+            );
+          });
+      });
+    });
+  });
+
+  it('should render data labels within each bar in the vertical xy-chart with a lot of bars of different sizes', () => {
+    imgSnapshotTest(
+      `
+      ---
+      config:
+        xyChart:
+          showDataLabel: true
+      ---
+      xychart-beta
+        title "Sales Revenue"
+        x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
+        y-axis "Revenue (in $)" 4000 --> 12000
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 8000, 10000, 5000, 7600, 4999,11000 ,5000,6000]
+    `,
+      {}
+    );
+
+    cy.get('g.bar-plot-0').within(() => {
+      cy.get('rect').each(($rect, index) => {
+        // Extract bar properties
+        const barProps = {
+          x: parseFloat($rect.attr('x')),
+          y: parseFloat($rect.attr('y')),
+          width: parseFloat($rect.attr('width')),
+          height: parseFloat($rect.attr('height')),
+        };
+
+        // Get the text element corresponding to this bar by index.
+        cy.get('text')
+          .eq(index)
+          .then(($text) => {
+            const bbox = $text[0].getBBox();
+            const textProps = {
+              x: bbox.x,
+              y: bbox.y,
+              width: bbox.width,
+              height: bbox.height,
+            };
+
+            // Verify that the text label is positioned within the boundaries of the bar.
+            expect(textProps.x).to.be.greaterThan(barProps.x);
+            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
+
+            // Check horizontal alignment (within tolerance)
+            expect(textProps.x + textProps.width / 2).to.be.closeTo(
+              barProps.x + barProps.width / 2,
+              1
+            );
+
+            expect(textProps.y).to.be.greaterThan(barProps.y);
+            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
+          });
+      });
+    });
+  });
+
+  it('should render data labels within each bar in the horizontal xy-chart with a lot of bars of different sizes', () => {
     imgSnapshotTest(
       `
     ---
@@ -607,19 +718,19 @@ describe('XY Chart', () => {
     });
   });
 
-  it('should render data labels within each bar in the vertical xy-chart', () => {
+  it('should render data labels correctly for a bar in the vertical xy-chart', () => {
     imgSnapshotTest(
       `
-      ---
+    ---
-      config:
+    config:
-        xyChart:
+      xyChart:
-          showDataLabel: true
+        showDataLabel: true
-      ---
+    ---
-      xychart-beta
+    xychart-beta
-        title "Sales Revenue"
+            title "Sales Revenue"
-        x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
+            x-axis Months [jan]
-        y-axis "Revenue (in $)" 4000 --> 12000
+            y-axis "Revenue (in $)" 3000 --> 12000
-        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 8000, 10000, 5000, 7600, 4999,11000 ,5000,6000]
+            bar [4000]
     `,
       {}
     );
@@ -717,60 +828,4 @@ describe('XY Chart', () => {
       });
     });
   });
-
-  it('should render data labels correctly for a bar in the vertical xy-chart', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-    ---
-    xychart-beta
-            title "Sales Revenue"
-            x-axis Months [jan]
-            y-axis "Revenue (in $)" 3000 --> 12000
-            bar [4000]
-    `,
-      {}
-    );
-
-    cy.get('g.bar-plot-0').within(() => {
-      cy.get('rect').each(($rect, index) => {
-        // Extract bar properties
-        const barProps = {
-          x: parseFloat($rect.attr('x')),
-          y: parseFloat($rect.attr('y')),
-          width: parseFloat($rect.attr('width')),
-          height: parseFloat($rect.attr('height')),
-        };
-
-        // Get the text element corresponding to this bar by index.
-        cy.get('text')
-          .eq(index)
-          .then(($text) => {
-            const bbox = $text[0].getBBox();
-            const textProps = {
-              x: bbox.x,
-              y: bbox.y,
-              width: bbox.width,
-              height: bbox.height,
-            };
-
-            // Verify that the text label is positioned within the boundaries of the bar.
-            expect(textProps.x).to.be.greaterThan(barProps.x);
-            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
-
-            // Check horizontal alignment (within tolerance)
-            expect(textProps.x + textProps.width / 2).to.be.closeTo(
-              barProps.x + barProps.width / 2,
-              1
-            );
-
-            expect(textProps.y).to.be.greaterThan(barProps.y);
-            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
-          });
-      });
-    });
-  });
 });