From 1141240bd2985a298abecba7b9e584593b0d79da Mon Sep 17 00:00:00 2001
From: Marcus Tang <txk.marcus@gmail.com>
Date: Sun, 2 Apr 2023 23:46:42 +0800
Subject: [PATCH] Add cypress test to check width and number of contribution
 bars

---
 .../chartView/chartView_mergeGroup.cy.js      | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/frontend/cypress/tests/chartView/chartView_mergeGroup.cy.js b/frontend/cypress/tests/chartView/chartView_mergeGroup.cy.js
index c2f45d0db5..bb15016e37 100644
--- a/frontend/cypress/tests/chartView/chartView_mergeGroup.cy.js
+++ b/frontend/cypress/tests/chartView/chartView_mergeGroup.cy.js
@@ -54,4 +54,45 @@ describe('merge group', () => {
       .should('be.visible')
       .should('be.disabled');
   });
+
+  it('merge group contribution bars have correct number and width after reload', () => {
+    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);
+      });
+
+    cy.reload();
+
+    // assert that the chart bars still have the correct 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);
+      });
+  });
 });