This is an automated email from the ASF dual-hosted git repository. suddjian pushed a commit to branch behavior-driven-cypress in repository https://gitbox.apache.org/repos/asf/superset.git
commit 9791c34f8bb80966f224141b440450e3a1838efe Author: David Aaron Suddjian <[email protected]> AuthorDate: Tue Mar 23 16:08:42 2021 -0700 chore(cypress): make the load dashboard test behavior driven --- .../integration/dashboard/dashboard.helper.ts | 13 +++++ .../cypress/integration/dashboard/load.test.ts | 55 +++++++--------------- .../dashboard/components/gridComponents/Chart.jsx | 7 ++- 3 files changed, 36 insertions(+), 39 deletions(-) diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts index 1ad5136..8f08bce 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts @@ -22,6 +22,19 @@ export const TABBED_DASHBOARD = '/superset/dashboard/tabbed_dash/'; export const CHECK_DASHBOARD_FAVORITE_ENDPOINT = '/superset/favstar/Dashboard/*/count'; +export const WORLD_HEALTH_CHARTS = [ + { name: 'Region Filter', viz: 'filter_box' }, + { name: '% Rural', viz: 'world_map' }, + { name: 'Most Populated Countries', viz: 'table' }, + { name: "World's Population", viz: 'big_number' }, + { name: 'Growth Rate', viz: 'line' }, + { name: 'Rural Breakdown', viz: 'sunburst' }, + { name: "World's Pop Growth", viz: 'area' }, + { name: 'Life Expectancy VS Rural %', viz: 'bubble' }, + { name: 'Treemap', viz: 'treemap' }, + { name: 'Box plot', viz: 'box_plot' }, +]; + /** * Drag an element and drop it to another element. * Usage: diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/load.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/load.test.ts index 0b38a83..4522494 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/load.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/load.test.ts @@ -17,53 +17,32 @@ * under the License. */ import { - getChartAliases, - isLegacyResponse, - getSliceIdFromRequestUrl, - JsonObject, -} from '../../utils/vizPlugins'; -import { WORLD_HEALTH_DASHBOARD } from './dashboard.helper'; + WORLD_HEALTH_CHARTS, + WORLD_HEALTH_DASHBOARD, +} from './dashboard.helper'; describe('Dashboard load', () => { - let dashboard; - let aliases: string[]; beforeEach(() => { cy.login(); - cy.visit(WORLD_HEALTH_DASHBOARD); - - cy.get('#app').then(nodes => { - const bootstrapData = JSON.parse(nodes[0].dataset.bootstrap || ''); - dashboard = bootstrapData.dashboard_data; - const { slices } = dashboard; - // then define routes and create alias for each requests - aliases = getChartAliases(slices); - }); }); it('should load dashboard', () => { // wait and verify one-by-one - cy.wait(aliases).then(requests => - Promise.all( - requests.map(async ({ response, request }) => { - const responseBody = response?.body; - let sliceId; - if (isLegacyResponse(responseBody)) { - expect(responseBody).to.have.property('errors'); - expect(responseBody.errors.length).to.eq(0); - sliceId = responseBody.form_data.slice_id; - } else { - sliceId = getSliceIdFromRequestUrl(request.url); - responseBody.result.forEach((element: JsonObject) => { - expect(element).to.have.property('error', null); - expect(element).to.have.property('status', 'success'); - }); - } - cy.get('[data-test="grid-content"]') - .find(`#chart-id-${sliceId}`) + WORLD_HEALTH_CHARTS.forEach(({ name, viz }) => { + // prettier-ignore + cy.get('[data-test="grid-content"] [data-test="editable-title"]').contains(name) + // use the chart title to find the chart grid component, + // which has the chart id and viz type info + .parentsUntil('[data-test="chart-grid-component"]').parent() + .should('have.attr', 'data-test-viz-type', viz) + .then(chartElement => { + const chartId = chartElement.attr('data-test-chart-id'); + // the chart should load in under a minute + // (big timeout so that it works in CI) + cy.wrap(chartElement).find(`#chart-id-${chartId}`, { timeout: 30000 }) .should('be.visible'); - }), - ), - ); + }); + }); }); }); diff --git a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx index cdc8ba9..6e8e350 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx +++ b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx @@ -288,7 +288,12 @@ export default class Chart extends React.Component { }) : {}; return ( - <div className="chart-slice"> + <div + className="chart-slice" + data-test="chart-grid-component" + data-test-chart-id={id} + data-test-viz-type={slice.viz_type} + > <SliceHeader innerRef={this.setHeaderRef} slice={slice}
