From 3bad16bb3db2125543409ca9930902025b9a6026 Mon Sep 17 00:00:00 2001 From: Germaine Lee <97350904+germainelee02@users.noreply.github.com> Date: Thu, 31 Aug 2023 21:34:03 +0800 Subject: [PATCH] [#1931] Update frontend integration tests for summary and zoom view (#2015) On the frontend, changes in the summary panel affect the zoom panel. However, this functionality is not well tested in our current Cypress tests. Let's add additional Cypress tests for the changing of zoom and date range. --- .../chartView/chartView_zoomFeature.cy.js | 316 ++++++++++++++++++ 1 file changed, 316 insertions(+) diff --git a/frontend/cypress/tests/chartView/chartView_zoomFeature.cy.js b/frontend/cypress/tests/chartView/chartView_zoomFeature.cy.js index 1f052ee705..0ee3010da1 100644 --- a/frontend/cypress/tests/chartView/chartView_zoomFeature.cy.js +++ b/frontend/cypress/tests/chartView/chartView_zoomFeature.cy.js @@ -1,3 +1,9 @@ +const extractDate = (str) => { + const regex = /\[(.*?)\]/g; + const matches = str.match(regex); + return new Date(matches[0].slice(1, -1)); +}; + describe('zoom features in code view', () => { const zoomKey = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}'; it('click on view commits button', () => { @@ -39,3 +45,313 @@ describe('zoom features in code view', () => { .should('be.visible'); }); }); + +// Assumptions: Contributer 'eugenepeh' is the first result. +describe('date changes in chart view should reflect in zoom', () => { + it('setting \'since\' date range changes the zoom view', () => { + cy.get('div.mui-textfield.search_box > input:visible') + .should('be.visible') + .type('eugenepeh'); + + cy.get('input[name="since"]:visible') + .type('2018-06-11'); + + cy.get('.icon-button.fa-list-ul') + .should('be.visible') + .first() + .click(); + + cy.get('#tab-zoom') + .should('be.visible'); + + cy.get('#tab-zoom .ramp .ramp__slice') + .each(($element) => { + cy.wrap($element) + .invoke('attr', 'title') + .then((titleStr) => { + const date = extractDate(titleStr); + cy.wrap(date).should('be.gte', new Date('2018-06-11')); + }); + }); + }); + // Assumptions: Contributer 'yong24s' is the first result. + it('setting \'since\' date again results in a different zoom view', () => { + cy.get('div.mui-textfield.search_box > input:visible') + .should('be.visible') + .type('yong24s'); + + cy.get('input[name="since"]:visible') + .type('2018-05-20'); + + cy.get('.icon-button.fa-list-ul') + .should('be.visible') + .first() + .click(); + + cy.get('#tab-zoom') + .should('be.visible'); + + cy.get('#tab-zoom .ramp .ramp__slice') + .each(($element) => { + cy.wrap($element) + .invoke('attr', 'title') + .then((titleStr) => { + const date = extractDate(titleStr); + cy.wrap(date).should('be.gte', new Date('2018-05-20')); + }); + }); + }); + + // Assumptions: Contributer 'eugenepeh' is the first result. + it('setting the \'until\' date changes the zoom view', () => { + cy.get('div.mui-textfield.search_box > input:visible') + .should('be.visible') + .type('eugenepeh'); + + cy.get('input[name="until"]:visible') + .type('2019-08-19'); + + cy.get('.icon-button.fa-list-ul') + .should('be.visible') + .first() + .click(); + + cy.get('#tab-zoom') + .should('be.visible'); + + cy.get('#tab-zoom .ramp .ramp__slice') + .each(($element) => { + cy.wrap($element) + .invoke('attr', 'title') + .then((titleStr) => { + const date = extractDate(titleStr); + cy.wrap(date).should('be.lte', new Date('2019-08-19')); + }); + }); + }); + + // Assumptions: Contributer 'ongspxm' is the first result. + it('setting the \'until\' date again results in a different zoom view', () => { + cy.get('div.mui-textfield.search_box > input:visible') + .should('be.visible') + .type('ongspxm'); + + cy.get('input[name="until"]:visible') + .type('2018-07-20'); + + cy.get('.icon-button.fa-list-ul') + .should('be.visible') + .first() + .click(); + + cy.get('#tab-zoom') + .should('be.visible'); + + cy.get('#tab-zoom .ramp .ramp__slice') + .each(($element) => { + cy.wrap($element) + .invoke('attr', 'title') + .then((titleStr) => { + const date = extractDate(titleStr); + cy.wrap(date).should('be.lte', new Date('2018-07-20')); + }); + }); + }); + + // Assumptions: Contributer 'eugenepeh' is the first result. + it('setting the \'until\' and \'since\' date changes the zoom view', () => { + cy.get('div.mui-textfield.search_box > input:visible') + .should('be.visible') + .type('eugenepeh'); + + cy.get('input[name="since"]:visible') + .type('2018-08-27'); + + cy.get('input[name="until"]:visible') + .type('2019-03-09'); + + cy.get('.icon-button.fa-list-ul') + .should('be.visible') + .first() + .click(); + + cy.get('#tab-zoom') + .should('be.visible'); + + cy.get('#tab-zoom .ramp .ramp__slice') + .each(($element) => { + cy.wrap($element) + .invoke('attr', 'title') + .then((titleStr) => { + const date = extractDate(titleStr); + cy.wrap(date).should('be.lte', new Date('2019-03-09')); + }); + }); + + cy.get('#tab-zoom .ramp .ramp__slice') + .each(($element) => { + cy.wrap($element) + .invoke('attr', 'title') + .then((titleStr) => { + const date = extractDate(titleStr); + cy.wrap(date).should('be.gte', new Date('2018-08-27')); + }); + }); + }); + + // Assumptions: Contributer 'jamessspanggg' is the first result. + it('setting the \'until\' and \'since\' date again results in a different zoom view', () => { + cy.get('div.mui-textfield.search_box > input:visible') + .should('be.visible') + .type('jamessspanggg'); + + cy.get('input[name="since"]:visible') + .type('2019-07-22'); + + cy.get('input[name="until"]:visible') + .type('2019-08-01'); + + cy.get('.icon-button.fa-list-ul') + .should('be.visible') + .first() + .click(); + + cy.get('#tab-zoom') + .should('be.visible'); + + cy.get('#tab-zoom .ramp .ramp__slice') + .each(($element) => { + cy.wrap($element) + .invoke('attr', 'title') + .then((titleStr) => { + const date = extractDate(titleStr); + cy.wrap(date).should('be.lte', new Date('2019-08-01')); + }); + }); + + cy.get('#tab-zoom .ramp .ramp__slice') + .each(($element) => { + cy.wrap($element) + .invoke('attr', 'title') + .then((titleStr) => { + const date = extractDate(titleStr); + cy.wrap(date).should('be.gte', new Date('2019-07-22')); + }); + }); + }); +}); + +describe('range changes in chartview should reflect in zoom', () => { + const zoomKey = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}'; + + // Assumptions: Contributer 'jamessspanggg' is the first result, + // he does not add more commits in the future, + // and the sort feature is working as expected. + it('selecting the initial righthand and lefthand boundary', () => { + cy.get('div.mui-textfield.search_box > input:visible') + .should('be.visible') + .type('jamessspanggg'); + cy.get('body').type(zoomKey, { release: false }) + .get('#summary-charts .summary-chart__ramp .ramp') + .first() + .click(120, 20) + .click(250, 20); + + cy.get('#tab-zoom') + .should('be.visible'); + + cy.get('#tab-zoom .ramp .ramp__slice') + .first() + .invoke('attr', 'title') + .should('eq', '[2021-01-04] Update `About us` page (#1393): +55 -30 lines '); + cy.get('#tab-zoom .ramp .ramp__slice') + .last() + .invoke('attr', 'title') + .should('eq', '[2019-12-20] [#46] Show total time after batch processing (#758): +43 -0 lines '); + }); + + // Assumptions: Contributer 'jamessspanggg' is the first result, + // he does not add more commits in the future, + // and the sort feature is working as expected. + it('changing the righthand boundary', () => { + cy.get('div.mui-textfield.search_box > input:visible') + .should('be.visible') + .type('jamessspanggg'); + cy.get('body').type(zoomKey, { release: false }) + .get('#summary-charts .summary-chart__ramp .ramp') + .first() + .click(120, 20) + .click(200, 20); + + cy.get('#tab-zoom') + .should('be.visible'); + + cy.get('#tab-zoom .ramp .ramp__slice') + .first() + .invoke('attr', 'title') + .should('eq', '[2020-10-01] [#1312] Conditional run for markbind to gh pages deployment (#1337): +1 -0 lines '); + cy.get('#tab-zoom .ramp .ramp__slice') + .last() + .invoke('attr', 'title') + .should('eq', '[2019-12-20] [#46] Show total time after batch processing (#758): +43 -0 lines '); + }); + + // Assumptions: Contributer 'jamessspanggg' is the first result, + // he does not add more commits in the future, + // and the sort feature is working as expected. + it('changing the lefthand boundary', () => { + cy.get('div.mui-textfield.search_box > input:visible') + .should('be.visible') + .type('jamessspanggg'); + cy.get('body').type(zoomKey, { release: false }) + .get('#summary-charts .summary-chart__ramp .ramp') + .first() + .click(200, 20) + .click(250, 20); + + cy.get('#tab-zoom') + .should('be.visible'); + + cy.get('#tab-zoom .ramp .ramp__slice') + .first() + .invoke('attr', 'title') + .should('eq', '[2021-01-04] Update `About us` page (#1393): +55 -30 lines '); + cy.get('#tab-zoom .ramp .ramp__slice') + .last() + .invoke('attr', 'title') + .should('eq', '[2020-11-21] [#1345] Authorship: Add last modified ' + + 'date to each LoC if specified (#1348): +165 -76 lines '); + }); + + // Assumptions: Contributer 'jamessspanggg' is the first result, + // he does not add more commits in the future, + // and the sort feature is working as expected. + it('changing the righthand and lefthand boundary', () => { + cy.get('div.mui-textfield.search_box > input:visible') + .should('be.visible') + .type('jamessspanggg'); + + cy.get('body').type(zoomKey, { release: false }) + .get('#summary-charts .summary-chart__ramp .ramp') + .first() + .click(200, 20) + .click(225, 20); + + cy.get('#tab-zoom') + .should('be.visible'); + + cy.get('#tab-zoom .ramp .ramp__slice') + .first() + .invoke('attr', 'title') + .should( + 'eq', + '[2021-01-04] Update `About us` page (#1393): +55 -30 lines ', + ); + + cy.get('#tab-zoom .ramp .ramp__slice') + .last() + .invoke('attr', 'title') + .should('eq', '[2020-11-21] [#1345] Authorship: Add last modified date ' + + 'to each LoC if specified (#1348): +165 -76 lines '); + }); +});