This is an automated email from the ASF dual-hosted git repository. diegopucci pushed a commit to branch chore/d2d-e2e-tests in repository https://gitbox.apache.org/repos/asf/superset.git
commit afbd997d8810ec42fe1d375368e3c11b8a50cdeb Author: geido <[email protected]> AuthorDate: Fri Sep 30 17:05:39 2022 +0300 Add tests Tier1 and Tier2 --- .../integration/dashboard/drilltodetail.test.ts | 608 +++++++++++++++++++-- 1 file changed, 552 insertions(+), 56 deletions(-) diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts index d44f6a27e4..4d83f854f6 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts @@ -42,10 +42,13 @@ function openModalFromMenu(chartType: string) { function openModalFromChartContext(targetMenuItem: string) { interceptSamples(); + cy.wait(500); cy.get('.ant-dropdown') .not('.ant-dropdown-hidden') + .first() .find("[role='menu'] [role='menuitem']") - .should('contain', targetMenuItem) + .contains(targetMenuItem) + .first() .click(); cy.wait('@samples'); } @@ -130,90 +133,322 @@ describe('Drill to detail modal', () => { }); }); + describe('Big number total', () => { + it('opens the modal with no filters', () => { + interceptSamples(); + + // opens the modal by clicking on the number on the chart + cy.get("[data-test-viz-type='big_number_total'] .header-line") + .scrollIntoView() + .rightclick(); + + openModalFromChartContext('Drill to detail'); + + cy.getBySel('filter-val').should('not.exist'); + }); + }); + + describe('Big number with trendline', () => { + it('opens the modal with the correct data', () => { + interceptSamples(); + + // opens the modal by clicking on the number + cy.get("[data-test-viz-type='big_number'] .header-line") + .scrollIntoView() + .rightclick(); + + openModalFromChartContext('Drill to detail'); + + cy.getBySel('filter-val').should('not.exist'); + + closeModal(); + + // opens the modal by clicking on the trendline + cy.get("[data-test-viz-type='big_number'] canvas").then($canvas => { + cy.wrap($canvas).scrollIntoView().click(1, 18).rightclick(1, 18); + + openModalFromChartContext('Drill to detail by 1965-01-01'); + + // checking the filter + cy.getBySel('filter-val').should('contain', '1965-01-01'); + }); + }); + }); + + describe('Table', () => { + it('opens the modal with the correct filters', () => { + interceptSamples(); + + cy.get("[data-test-viz-type='table']") + .scrollIntoView() + .contains('boy') + .rightclick(); + + openModalFromChartContext('Drill to detail by boy'); + + cy.getBySel('filter-val').should('contain', 'boy'); + + closeModal(); + + cy.get("[data-test-viz-type='table']") + .scrollIntoView() + .contains('girl') + .rightclick(); + + openModalFromChartContext('Drill to detail by girl'); + + cy.getBySel('filter-val').should('contain', 'girl'); + }); + }); + + describe('Pivot Table V2', () => { + it('opens the modal with the correct filters', () => { + interceptSamples(); + + cy.get("[data-test-viz-type='pivot_table_v2']") + .scrollIntoView() + .find('[role="gridcell"]') + .first() + .rightclick(); + + openModalFromChartContext('Drill to detail by boy'); + + cy.getBySel('filter-val').should('contain', 'boy'); + closeModal(); + + cy.get("[data-test-viz-type='pivot_table_v2']") + .scrollIntoView() + .find('[role="gridcell"]') + .first() + .rightclick(); + + openModalFromChartContext('Drill to detail by CA'); + + cy.getBySel('filter-val').should('contain', 'CA'); + closeModal(); + + cy.get("[data-test-viz-type='pivot_table_v2']") + .scrollIntoView() + .find('[role="gridcell"]') + .eq(3) + .rightclick(); + + openModalFromChartContext('Drill to detail by girl'); + + cy.getBySel('filter-val').should('contain', 'girl'); + closeModal(); + + cy.get("[data-test-viz-type='pivot_table_v2']") + .scrollIntoView() + .find('[role="gridcell"]') + .eq(3) + .rightclick(); + + openModalFromChartContext('Drill to detail by FL'); + + cy.getBySel('filter-val').should('contain', 'FL'); + closeModal(); + + cy.get("[data-test-viz-type='pivot_table_v2']") + .scrollIntoView() + .find('[role="gridcell"]') + .eq(3) + .rightclick(); + + openModalFromChartContext('Drill to detail by all'); + + cy.getBySel('filter-val').first().should('contain', 'girl'); + cy.getBySel('filter-val').eq(1).should('contain', 'FL'); + }); + }); + + describe('Time-Series Line Chart', () => { + it('opens the modal with the correct filters', () => { + interceptSamples(); + + cy.get("[data-test-viz-type='echarts_timeseries_line'] canvas").then( + $canvas => { + cy.wrap($canvas).scrollIntoView().click(70, 93).rightclick(70, 93); + + openModalFromChartContext('Drill to detail by 1965'); + cy.getBySel('filter-val').should('contain', '1965'); + closeModal(); + + cy.wrap($canvas).scrollIntoView().click(70, 93).rightclick(70, 93); + + openModalFromChartContext('Drill to detail by boy'); + cy.getBySel('filter-val').should('contain', 'boy'); + closeModal(); + + cy.wrap($canvas).scrollIntoView().click(70, 93).rightclick(70, 93); + + openModalFromChartContext('Drill to detail by all'); + cy.getBySel('filter-val').first().should('contain', '1965'); + cy.getBySel('filter-val').eq(1).should('contain', 'boy'); + closeModal(); + + cy.wrap($canvas) + .scrollIntoView() + .click(70, 145) + .rightclick(70, 145); + openModalFromChartContext('Drill to detail by girl'); + cy.getBySel('filter-val').should('contain', 'girl'); + closeModal(); + + cy.wrap($canvas) + .scrollIntoView() + .click(70, 145) + .rightclick(70, 145); + openModalFromChartContext('Drill to detail by all'); + cy.getBySel('filter-val').first().should('contain', '1965'); + cy.getBySel('filter-val').eq(1).should('contain', 'girl'); + }, + ); + }); + }); + describe('Time-series Bar Chart V2', () => { it('opens the modal with the correct filters', () => { interceptSamples(); cy.get("[data-test-viz-type='echarts_timeseries_bar'] canvas").then( $canvas => { + cy.wrap($canvas).scrollIntoView().rightclick(70, 100); + + openModalFromChartContext('Drill to detail by 1965'); + cy.getBySel('filter-val').should('contain', '1965'); + closeModal(); + + cy.wrap($canvas).scrollIntoView().rightclick(70, 100); + + openModalFromChartContext('Drill to detail by boy'); + cy.getBySel('filter-val').should('contain', 'boy'); + closeModal(); + + cy.wrap($canvas).scrollIntoView().rightclick(70, 100); + + openModalFromChartContext('Drill to detail by all'); + cy.getBySel('filter-val').first().should('contain', '1965'); + cy.getBySel('filter-val').eq(1).should('contain', 'boy'); + closeModal(); + + cy.wrap($canvas).scrollIntoView().rightclick(72, 200); + + openModalFromChartContext('Drill to detail by girl'); + cy.getBySel('filter-val').should('contain', 'girl'); + closeModal(); + cy.wrap($canvas) .scrollIntoView() - .rightclick(70, 100, { force: true }); - cy.get('.ant-dropdown') - .not('.ant-dropdown-hidden') - .find("[role='menu'] [role='menuitem']") - .should('have.length', 3) - .then($menuitems => { - expect($menuitems).to.contain('Drill to detail by 1965'); - expect($menuitems).to.contain('Drill to detail by boy'); - expect($menuitems).to.contain('Drill to detail by all'); - }) - .eq(2) - .click(); - cy.wait('@samples'); - - cy.getBySel('filter-val').then($filters => { - expect($filters).to.contain('1965'); - expect($filters).to.contain('boy'); - }); + .click(70, 145) + .rightclick(70, 145); + openModalFromChartContext('Drill to detail by all'); + cy.getBySel('filter-val').first().should('contain', '1965'); + cy.getBySel('filter-val').eq(1).should('contain', 'girl'); }, ); }); }); - describe('Pie', () => { + describe('Time-Series Area Chart', () => { it('opens the modal with the correct filters', () => { interceptSamples(); - // opens the modal by clicking on the slice of the Pie chart - cy.get("[data-test-viz-type='pie'] canvas").then($canvas => { - const canvasWidth = $canvas.width() || 0; - const canvasHeight = $canvas.height() || 0; - const canvasCenterX = canvasWidth / 3; - const canvasCenterY = canvasHeight / 2; + cy.get("[data-test-viz-type='echarts_area'] canvas").then($canvas => { + cy.wrap($canvas).scrollIntoView().click(70, 93).rightclick(70, 93); - cy.wrap($canvas) - .scrollIntoView() - .rightclick(canvasCenterX, canvasCenterY, { force: true }); + openModalFromChartContext('Drill to detail by 1965'); + cy.getBySel('filter-val').should('contain', '1965'); + closeModal(); - openModalFromChartContext('Drill to detail by girl'); + cy.wrap($canvas).scrollIntoView().click(70, 93).rightclick(70, 93); + + openModalFromChartContext('Drill to detail by boy'); + cy.getBySel('filter-val').should('contain', 'boy'); + closeModal(); - // checking the filtered and paginated data + cy.wrap($canvas).scrollIntoView().click(70, 93).rightclick(70, 93); + + openModalFromChartContext('Drill to detail by all'); + cy.getBySel('filter-val').first().should('contain', '1965'); + cy.getBySel('filter-val').eq(1).should('contain', 'boy'); + closeModal(); + + cy.wrap($canvas).scrollIntoView().click(70, 145).rightclick(70, 145); + openModalFromChartContext('Drill to detail by girl'); cy.getBySel('filter-val').should('contain', 'girl'); + closeModal(); + + cy.wrap($canvas).scrollIntoView().click(70, 145).rightclick(70, 145); + openModalFromChartContext('Drill to detail by all'); + cy.getBySel('filter-val').first().should('contain', '1965'); + cy.getBySel('filter-val').eq(1).should('contain', 'girl'); }); }); }); - describe('Big number total', () => { - it('opens the modal with no filters', () => { + describe('Time-Series Scatter Chart', () => { + it('opens the modal with the correct filters', () => { interceptSamples(); - // opens the modal by clicking on the number on the chart - cy.get("[data-test-viz-type='big_number_total'] .header-line") - .scrollIntoView() - .rightclick(); + cy.get("[data-test-viz-type='echarts_timeseries_scatter'] canvas").then( + $canvas => { + cy.wrap($canvas).scrollIntoView().click(70, 93).rightclick(70, 93); - openModalFromChartContext('Drill to detail'); + openModalFromChartContext('Drill to detail by 1965'); + cy.getBySel('filter-val').should('contain', '1965'); + closeModal(); - cy.getBySel('filter-val').should('not.exist'); + cy.wrap($canvas).scrollIntoView().click(70, 93).rightclick(70, 93); + + openModalFromChartContext('Drill to detail by boy'); + cy.getBySel('filter-val').should('contain', 'boy'); + closeModal(); + + cy.wrap($canvas).scrollIntoView().click(70, 93).rightclick(70, 93); + + openModalFromChartContext('Drill to detail by all'); + cy.getBySel('filter-val').first().should('contain', '1965'); + cy.getBySel('filter-val').eq(1).should('contain', 'boy'); + closeModal(); + + cy.wrap($canvas) + .scrollIntoView() + .click(70, 145) + .rightclick(70, 145); + openModalFromChartContext('Drill to detail by girl'); + cy.getBySel('filter-val').should('contain', 'girl'); + closeModal(); + + cy.wrap($canvas) + .scrollIntoView() + .click(70, 145) + .rightclick(70, 145); + openModalFromChartContext('Drill to detail by all'); + cy.getBySel('filter-val').first().should('contain', '1965'); + cy.getBySel('filter-val').eq(1).should('contain', 'girl'); + }, + ); }); }); - describe('Big number with trendline', () => { - it('opens the modal with the correct data', () => { + describe('Pie', () => { + it('opens the modal with the correct filters', () => { interceptSamples(); - // opens the modal by clicking on the number - cy.get("[data-test-viz-type='big_number'] .header-line") - .scrollIntoView() - .rightclick(); + // opens the modal by clicking on the slice of the Pie chart + cy.get("[data-test-viz-type='pie'] canvas").then($canvas => { + cy.wrap($canvas).scrollIntoView().rightclick(130, 150); - openModalFromChartContext('Drill to detail'); + openModalFromChartContext('Drill to detail by girl'); + cy.getBySel('filter-val').should('contain', 'girl'); + closeModal(); - cy.getBySel('filter-val').should('not.exist'); + cy.wrap($canvas).scrollIntoView().rightclick(230, 190); - // TODO: test clicking on a trendline - // Cypress is refusing to rightclick on the dot + openModalFromChartContext('Drill to detail by boy'); + cy.getBySel('filter-val').should('contain', 'boy'); + }); }); }); }); @@ -274,21 +509,282 @@ describe('Drill to detail modal', () => { it('opens the modal with the correct filters', () => { interceptSamples(); - // opens the modal by clicking on the box on the chart cy.get("[data-test-viz-type='box_plot'] canvas").then($canvas => { - const canvasWidth = $canvas.width() || 0; - const canvasHeight = $canvas.height() || 0; - const canvasCenterX = canvasWidth / 3; - const canvasCenterY = (canvasHeight * 5) / 6; + cy.wrap($canvas) + .scrollIntoView() + .click(135, 275) + .rightclick(135, 275); + + openModalFromChartContext('Drill to detail by boy'); + cy.getBySel('filter-val').should('contain', 'boy'); + closeModal(); cy.wrap($canvas) .scrollIntoView() - .rightclick(canvasCenterX, canvasCenterY, { force: true }); + .click(270, 280) + .rightclick(270, 280); + + openModalFromChartContext('Drill to detail by girl'); + cy.getBySel('filter-val').should('contain', 'girl'); + }); + }); + }); + + describe('Time-Series Generic Chart', () => { + it('opens the modal with the correct filters', () => { + interceptSamples(); + + cy.get("[data-test-viz-type='echarts_timeseries'] canvas").then( + $canvas => { + cy.wrap($canvas).scrollIntoView().click(70, 93).rightclick(70, 93); + + openModalFromChartContext('Drill to detail by 1965'); + cy.getBySel('filter-val').should('contain', '1965'); + closeModal(); + + cy.wrap($canvas).scrollIntoView().click(70, 93).rightclick(70, 93); + + openModalFromChartContext('Drill to detail by boy'); + cy.getBySel('filter-val').should('contain', 'boy'); + closeModal(); + + cy.wrap($canvas).scrollIntoView().click(70, 93).rightclick(70, 93); + + openModalFromChartContext('Drill to detail by all'); + cy.getBySel('filter-val').first().should('contain', '1965'); + cy.getBySel('filter-val').eq(1).should('contain', 'boy'); + closeModal(); + + cy.wrap($canvas) + .scrollIntoView() + .click(70, 145) + .rightclick(70, 145); + openModalFromChartContext('Drill to detail by girl'); + cy.getBySel('filter-val').should('contain', 'girl'); + + closeModal(); + + cy.wrap($canvas) + .scrollIntoView() + .click(70, 145) + .rightclick(70, 145); + openModalFromChartContext('Drill to detail by all'); + cy.getBySel('filter-val').first().should('contain', '1965'); + cy.getBySel('filter-val').eq(1).should('contain', 'girl'); + }, + ); + }); + }); + + describe('Time-Series Smooth Chart', () => { + it('opens the modal with the correct filters', () => { + interceptSamples(); + + cy.get("[data-test-viz-type='echarts_timeseries_smooth'] canvas").then( + $canvas => { + cy.wrap($canvas).scrollIntoView().click(70, 93).rightclick(70, 93); + + openModalFromChartContext('Drill to detail by 1965'); + cy.getBySel('filter-val').should('contain', '1965'); + closeModal(); + + cy.wrap($canvas).scrollIntoView().click(70, 93).rightclick(70, 93); + + openModalFromChartContext('Drill to detail by boy'); + cy.getBySel('filter-val').should('contain', 'boy'); + closeModal(); + + cy.wrap($canvas).scrollIntoView().click(70, 93).rightclick(70, 93); + + openModalFromChartContext('Drill to detail by all'); + cy.getBySel('filter-val').first().should('contain', '1965'); + cy.getBySel('filter-val').eq(1).should('contain', 'boy'); + closeModal(); + + cy.wrap($canvas) + .scrollIntoView() + .click(70, 145) + .rightclick(70, 145); + openModalFromChartContext('Drill to detail by girl'); + cy.getBySel('filter-val').should('contain', 'girl'); + + closeModal(); + + cy.wrap($canvas) + .scrollIntoView() + .click(70, 145) + .rightclick(70, 145); + openModalFromChartContext('Drill to detail by all'); + cy.getBySel('filter-val').first().should('contain', '1965'); + cy.getBySel('filter-val').eq(1).should('contain', 'girl'); + }, + ); + }); + }); + + describe('Time-Series Step Line Chart', () => { + it('opens the modal with the correct filters', () => { + interceptSamples(); + + cy.get("[data-test-viz-type='echarts_timeseries_step'] canvas").then( + $canvas => { + cy.wrap($canvas).scrollIntoView().click(70, 93).rightclick(70, 93); + + openModalFromChartContext('Drill to detail by 1965'); + cy.getBySel('filter-val').should('contain', '1965'); + closeModal(); + + cy.wrap($canvas).scrollIntoView().click(70, 93).rightclick(70, 93); + + openModalFromChartContext('Drill to detail by boy'); + cy.getBySel('filter-val').should('contain', 'boy'); + closeModal(); + + cy.wrap($canvas).scrollIntoView().click(70, 93).rightclick(70, 93); + + openModalFromChartContext('Drill to detail by all'); + cy.getBySel('filter-val').first().should('contain', '1965'); + cy.getBySel('filter-val').eq(1).should('contain', 'boy'); + closeModal(); + + cy.wrap($canvas) + .scrollIntoView() + .click(70, 145) + .rightclick(70, 145); + openModalFromChartContext('Drill to detail by girl'); + cy.getBySel('filter-val').should('contain', 'girl'); + + closeModal(); + + cy.wrap($canvas) + .scrollIntoView() + .click(70, 145) + .rightclick(70, 145); + openModalFromChartContext('Drill to detail by all'); + cy.getBySel('filter-val').first().should('contain', '1965'); + cy.getBySel('filter-val').eq(1).should('contain', 'girl'); + }, + ); + }); + }); + + describe('Funnel Chart', () => { + it('opens the modal with the correct filters', () => { + interceptSamples(); + + cy.get("[data-test-viz-type='funnel'] canvas").then($canvas => { + cy.wrap($canvas).scrollIntoView().rightclick(170, 90); openModalFromChartContext('Drill to detail by boy'); + cy.getBySel('filter-val').should('contain', 'boy'); + closeModal(); - // checking the filter + cy.wrap($canvas).scrollIntoView().rightclick(190, 250); + + openModalFromChartContext('Drill to detail by girl'); + cy.getBySel('filter-val').should('contain', 'girl'); + }); + }); + }); + + describe('Gauge Chart', () => { + it('opens the modal with the correct filters', () => { + interceptSamples(); + + cy.get("[data-test-viz-type='gauge_chart'] canvas").then($canvas => { + cy.wrap($canvas).scrollIntoView().rightclick(135, 95); + + openModalFromChartContext('Drill to detail by boy'); cy.getBySel('filter-val').should('contain', 'boy'); + closeModal(); + + cy.wrap($canvas).scrollIntoView().rightclick(95, 135); + + openModalFromChartContext('Drill to detail by girl'); + cy.getBySel('filter-val').should('contain', 'girl'); + }); + }); + }); + + describe('Mixed Chart', () => { + it('opens the modal with the correct filters', () => { + interceptSamples(); + + cy.get("[data-test-viz-type='mixed_timeseries'] canvas").then( + $canvas => { + cy.wrap($canvas).scrollIntoView().click(70, 93).rightclick(70, 93); + + openModalFromChartContext('Drill to detail by 1965'); + cy.getBySel('filter-val').should('contain', '1965'); + closeModal(); + + cy.wrap($canvas).scrollIntoView().click(70, 93).rightclick(70, 93); + + openModalFromChartContext('Drill to detail by boy'); + cy.getBySel('filter-val').should('contain', 'boy'); + closeModal(); + + cy.wrap($canvas).scrollIntoView().click(70, 93).rightclick(70, 93); + + openModalFromChartContext('Drill to detail by all'); + cy.getBySel('filter-val').first().should('contain', '1965'); + cy.getBySel('filter-val').eq(1).should('contain', 'boy'); + closeModal(); + + cy.wrap($canvas) + .scrollIntoView() + .click(70, 145) + .rightclick(70, 145); + openModalFromChartContext('Drill to detail by girl'); + cy.getBySel('filter-val').should('contain', 'girl'); + closeModal(); + + cy.wrap($canvas) + .scrollIntoView() + .click(70, 145) + .rightclick(70, 145); + openModalFromChartContext('Drill to detail by all'); + cy.getBySel('filter-val').first().should('contain', '1965'); + cy.getBySel('filter-val').eq(1).should('contain', 'girl'); + }, + ); + }); + }); + + describe('Radar Chart', () => { + it('opens the modal with the correct filters', () => { + interceptSamples(); + + cy.get("[data-test-viz-type='radar'] canvas").then($canvas => { + cy.wrap($canvas).scrollIntoView().rightclick(180, 45); + + openModalFromChartContext('Drill to detail by boy'); + cy.getBySel('filter-val').should('contain', 'boy'); + closeModal(); + + cy.wrap($canvas).scrollIntoView().rightclick(180, 85); + + openModalFromChartContext('Drill to detail by girl'); + cy.getBySel('filter-val').should('contain', 'girl'); + }); + }); + }); + + describe('Treemap V2', () => { + it('opens the modal with the correct filters', () => { + interceptSamples(); + + cy.get("[data-test-viz-type='treemap_v2'] canvas").then($canvas => { + cy.wrap($canvas).scrollIntoView().rightclick(100, 30); + + openModalFromChartContext('Drill to detail by boy'); + cy.getBySel('filter-val').should('contain', 'boy'); + closeModal(); + + cy.wrap($canvas).scrollIntoView().rightclick(150, 250); + + openModalFromChartContext('Drill to detail by girl'); + cy.getBySel('filter-val').should('contain', 'girl'); }); }); });
