From 1141240bd2985a298abecba7b9e584593b0d79da Mon Sep 17 00:00:00 2001 From: Marcus Tang Date: Sun, 2 Apr 2023 23:46:42 +0800 Subject: [PATCH 1/5] 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); + }); + }); }); From 073c696d2a69727d4d29cf39999c3761f0eff02f Mon Sep 17 00:00:00 2001 From: Marcus Tang Date: Mon, 3 Apr 2023 00:02:14 +0800 Subject: [PATCH 2/5] Update test description --- frontend/cypress/tests/chartView/chartView_mergeGroup.cy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/cypress/tests/chartView/chartView_mergeGroup.cy.js b/frontend/cypress/tests/chartView/chartView_mergeGroup.cy.js index bb15016e37..11d36f4d2e 100644 --- a/frontend/cypress/tests/chartView/chartView_mergeGroup.cy.js +++ b/frontend/cypress/tests/chartView/chartView_mergeGroup.cy.js @@ -55,7 +55,7 @@ describe('merge group', () => { .should('be.disabled'); }); - it('merge group contribution bars have correct number and width after reload', () => { + it('merge group contribution bars should have correct width after reload', () => { cy.get('#summary label.merge-group > input:visible') .should('be.visible') .check() From 8c4f1b65b893e3392a0cc556924b9a149158c252 Mon Sep 17 00:00:00 2001 From: Marcus Date: Mon, 3 Apr 2023 13:47:15 +0800 Subject: [PATCH 3/5] Add non-hardcoded check for contribution bar width and numbers --- .../chartView/chartView_mergeGroup.cy.js | 40 +++++++++++++------ 1 file changed, 27 insertions(+), 13 deletions(-) diff --git a/frontend/cypress/tests/chartView/chartView_mergeGroup.cy.js b/frontend/cypress/tests/chartView/chartView_mergeGroup.cy.js index 11d36f4d2e..a4ca878dff 100644 --- a/frontend/cypress/tests/chartView/chartView_mergeGroup.cy.js +++ b/frontend/cypress/tests/chartView/chartView_mergeGroup.cy.js @@ -55,7 +55,7 @@ describe('merge group', () => { .should('be.disabled'); }); - it('merge group contribution bars should have correct width after reload', () => { + it('should have the correct number of merge group contribution bars and correct length', () => { cy.get('#summary label.merge-group > input:visible') .should('be.visible') .check() @@ -76,23 +76,37 @@ describe('merge group', () => { expect(width2).to.be.closeTo(100, 1); expect(width3).to.be.closeTo(50, 1); }); + }); - cy.reload(); + 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'); - // assert that the chart bars still have the correct widths + // get the width of contribution bars + const initialWidths = []; 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; + $bars.each((_, bar) => { + const width = window.getComputedStyle(bar).width; + initialWidths.push(width); + }); + }); - // 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); + // 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); }); }); }); From 29656f3bd7afa6a6b4287a5508c50bcb032b8204 Mon Sep 17 00:00:00 2001 From: Marcus Tang <50147457+MarcusTXK@users.noreply.github.com> Date: Tue, 4 Apr 2023 22:57:29 +0800 Subject: [PATCH 4/5] Update test to include assumption Co-authored-by: David Ong <45852430+vvidday@users.noreply.github.com> --- frontend/cypress/tests/chartView/chartView_mergeGroup.cy.js | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/cypress/tests/chartView/chartView_mergeGroup.cy.js b/frontend/cypress/tests/chartView/chartView_mergeGroup.cy.js index a4ca878dff..665c91626b 100644 --- a/frontend/cypress/tests/chartView/chartView_mergeGroup.cy.js +++ b/frontend/cypress/tests/chartView/chartView_mergeGroup.cy.js @@ -56,6 +56,7 @@ describe('merge group', () => { }); 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() From 461e1d20ba89279341e03343c7a38446d907d718 Mon Sep 17 00:00:00 2001 From: Marcus Tang Date: Thu, 6 Apr 2023 14:16:43 +0800 Subject: [PATCH 5/5] Fix overlay-loader blocking contrib-bar and initialWidths not being fully populated --- .../chartView/chartView_mergeGroup.cy.js | 37 +++++++++---------- 1 file changed, 17 insertions(+), 20 deletions(-) diff --git a/frontend/cypress/tests/chartView/chartView_mergeGroup.cy.js b/frontend/cypress/tests/chartView/chartView_mergeGroup.cy.js index 665c91626b..129369d0c2 100644 --- a/frontend/cypress/tests/chartView/chartView_mergeGroup.cy.js +++ b/frontend/cypress/tests/chartView/chartView_mergeGroup.cy.js @@ -85,29 +85,26 @@ describe('merge group', () => { .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 + // Store the initial widths of the contribution bars 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); + .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]); + }); }); }); });