added new tests

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

cypress/integration/rendering/xyChart.spec.js

@@ -441,7 +441,7 @@ describe('XY Chart', () => {
     );
   });
 
-  it('should render data labels within the bar in the horizontal xy-chart', () => {
+  it('should render data labels within each bar in the horizontal xy-chart', () => {
     imgSnapshotTest(
       `
     ---
@@ -454,40 +454,34 @@ describe('XY Chart', () => {
             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]
+            bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000]
     `,
       {}
     );
 
-    let textProps, barProps;
+    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')
-      .contains('5000')
+          .eq(index)
-      .then(($el) => {
+          .then(($text) => {
-        const bbox = $el[0].getBBox();
+            const bbox = $text[0].getBBox();
-        textProps = {
+            const textProps = {
               x: bbox.x,
               y: bbox.y,
               width: bbox.width,
               height: bbox.height,
             };
-        console.log('textProps', textProps);
-      });
 
-    cy.get('g.bar-plot-0')
+            // Verify that the text label is positioned within the boundaries of the bar.
-      .find('rect')
-      .first()
-      .then((rect) => {
-        barProps = {
-          x: parseFloat(rect.attr('x')),
-          y: parseFloat(rect.attr('y')),
-          width: parseFloat(rect.attr('width')),
-          height: parseFloat(rect.attr('height')),
-        };
-        console.log('barProps', barProps);
-      })
-      .then(() => {
-        // Ensure that both textProps and barProps are defined before the assertion
             expect(textProps.x).to.be.greaterThan(barProps.x);
             expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
 
@@ -499,8 +493,10 @@ describe('XY Chart', () => {
             );
           });
       });
+    });
+  });
 
-  it('should render data labels within the bar in the horizontal xy-chart', () => {
+  it('should render data labels within each bar in the vertical xy-chart', () => {
     imgSnapshotTest(
       `
     ---
@@ -512,43 +508,47 @@ describe('XY Chart', () => {
             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]
+            bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000]
     `,
       {}
     );
-    let textProps, barProps;
+
+    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')
-      .contains('5000')
+          .eq(index)
-      .then(($el) => {
+          .then(($text) => {
-        const bbox = $el[0].getBBox();
+            const bbox = $text[0].getBBox();
-        textProps = {
+            const textProps = {
               x: bbox.x,
               y: bbox.y,
               width: bbox.width,
               height: bbox.height,
             };
-        console.log('textProps', textProps);
+
-      });
+            // Verify that the text label is positioned within the boundaries of the bar.
-    cy.get('g.bar-plot-0')
-      .find('rect')
-      .first()
-      .then((rect) => {
-        barProps = {
-          x: parseFloat(rect.attr('x')),
-          y: parseFloat(rect.attr('y')),
-          width: parseFloat(rect.attr('width')),
-          height: parseFloat(rect.attr('height')),
-        };
-        console.log('barProps', barProps);
-      })
-      .then(() => {
-        // Ensure that both textProps and barProps are defined before the assertion
             expect(textProps.x).to.be.greaterThan(barProps.x);
             expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
-        expect(textProps.x + textProps.width / 2).to.be.closeTo(barProps.x + barProps.width / 2, 1);
+
+            // 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);
           });
       });
+    });
+  });
 });