[#1966] Add cypress test for merged groups contribution bars

frontend/cypress/tests/chartView/chartView_mergeGroup.cy.js

@@ -54,4 +54,57 @@ describe('merge group', () => {
       .should('be.visible')
       .should('be.disabled');
   });
+
+  it('should have the correct number of merge group contribution bars and correct length', () => {
+    // Assumption: The number of merge group contribution bars is 3 and the width of the third bar is 50%.
+    cy.get('#summary label.merge-group > input:visible')
+      .should('be.visible')
+      .check()
+      .should('be.checked');
+
+    // get the three chart bars and assert they have the correct initial widths
+    cy.get('.summary-chart__contrib--bar')
+      .should('have.length', 3)
+      .then(($bars) => {
+        // calculate the percentage of the width relative to the parent container
+        const parentWidth = $bars.eq(0).parent().width();
+        const width1 = (parseFloat(window.getComputedStyle($bars[0]).width) / parentWidth) * 100;
+        const width2 = (parseFloat(window.getComputedStyle($bars[1]).width) / parentWidth) * 100;
+        const width3 = (parseFloat(window.getComputedStyle($bars[2]).width) / parentWidth) * 100;
+
+        // assert that the widths are close enough to 100% and 50%
+        expect(width1).to.be.closeTo(100, 1);
+        expect(width2).to.be.closeTo(100, 1);
+        expect(width3).to.be.closeTo(50, 1);
+      });
+  });
+
+  it('merge group contribution bars should have correct width after reload', () => {
+    cy.get('#summary label.merge-group > input:visible')
+      .should('be.visible')
+      .check()
+      .should('be.checked');
+
+    const initialWidths = [];
+
+    // Store the initial widths of the contribution bars
+    cy.get('.summary-chart__contrib--bar')
+      .each(($bar) => {
+        const width = window.getComputedStyle($bar[0]).width;
+        initialWidths.push(width);
+      })
+      .then(() => {
+        // Reload the page and wait for the loading div to disappear
+        cy.reload();
+        cy.get('.overlay-loader').should('not.be.visible');
+
+        // Get the contribution bars again and compare their widths with the initial widths
+        cy.get('.summary-chart__contrib--bar')
+          .should('have.length', initialWidths.length)
+          .each(($bar, index) => {
+            const width = window.getComputedStyle($bar[0]).width;
+            expect(width).to.equal(initialWidths[index]);
+          });
+      });
+  });
 });