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

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

@@ -54,4 +54,60 @@ 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');
+
+    // get the width of contribution bars
+    const initialWidths = [];
+    cy.get('.summary-chart__contrib--bar')
+      .then(($bars) => {
+        $bars.each((_, bar) => {
+          const width = window.getComputedStyle(bar).width;
+          initialWidths.push(width);
+        });
+      });
+
+    // reload the page
+    cy.reload();
+
+    // get the contribution bars again and assert there are the same number and of the same width
+    cy.get('.summary-chart__contrib--bar')
+      .should('have.length', initialWidths.length)
+      .then(($bars) => {
+        const widths = [];
+        $bars.each((_, bar) => {
+          const width = window.getComputedStyle(bar).width;
+          widths.push(width);
+        });
+        expect(widths).to.deep.equal(initialWidths);
+      });
+  });
 });