You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by di...@apache.org on 2022/08/23 16:22:31 UTC
[superset] 02/02: [WIP] E2E test
This is an automated email from the ASF dual-hosted git repository.
diegopucci pushed a commit to branch chore/e2e-tests-drilltodetail-modal
in repository https://gitbox.apache.org/repos/asf/superset.git
commit caebf71cd3c7501fd4e0f4441d0224be74eb4286
Author: geido <di...@gmail.com>
AuthorDate: Tue Aug 23 19:21:48 2022 +0300
[WIP] E2E test
---
.../integration/dashboard/dashboard.helper.ts | 13 +-
.../integration/dashboard/drilltodetail.test.ts | 288 +++++++++++++++++++++
.../components/DrillDetailPane/TableControls.tsx | 3 +-
.../src/explore/components/RowCountLabel/index.tsx | 12 +-
4 files changed, 309 insertions(+), 7 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 498853164e..486833c72b 100644
--- a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts
+++ b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts
@@ -23,6 +23,7 @@ export const WORLD_HEALTH_DASHBOARD = '/superset/dashboard/world_health/';
export const USA_BIRTH_NAMES_DASHBOARD = '/superset/dashboard/births/';
export const testDashboard = '/superset/dashboard/538/';
export const TABBED_DASHBOARD = '/superset/dashboard/tabbed_dash/';
+export const ECHARTS_DASHBOARD = '/superset/dashboard/echarts_dash/';
export const testItems = {
dashboard: 'Cypress test Dashboard',
@@ -73,6 +74,14 @@ export const WORLD_HEALTH_CHARTS = [
{ name: 'Box plot', viz: 'box_plot' },
] as const;
+export const ECHARTS_CHARTS = [
+ { name: 'Number of Girls', viz: 'big_number_total' },
+ { name: 'Participants', viz: 'big_number' },
+ { name: 'Box plot', viz: 'box_plot' },
+ { name: 'Genders', viz: 'pie' },
+ { name: 'Energy Force Layout', viz: 'graph_chart' },
+] as const;
+
/** Used to specify charts expected by the test suite */
export interface ChartSpec {
name: string;
@@ -81,7 +90,7 @@ export interface ChartSpec {
export function getChartGridComponent({ name, viz }: ChartSpec) {
return cy
- .get(`[data-test="chart-grid-component"][data-test-chart-name="${name}"]`)
+ .get(`[data-test-chart-name="${name}"]`)
.should('have.attr', 'data-test-viz-type', viz);
}
@@ -92,7 +101,7 @@ export function waitForChartLoad(chart: ChartSpec) {
return (
cy
// this id only becomes visible when the chart is loaded
- .get(`[data-test="chart-grid-component"] #chart-id-${chartId}`, {
+ .get(`#chart-id-${chartId}`, {
timeout: 30000,
})
.should('be.visible')
diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts
new file mode 100644
index 0000000000..8a844f32b2
--- /dev/null
+++ b/superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts
@@ -0,0 +1,288 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import {
+ waitForChartLoad,
+ ECHARTS_CHARTS,
+ ECHARTS_DASHBOARD,
+} from './dashboard.helper';
+
+function interceptSamples() {
+ cy.intercept(`/datasource/samples*`).as('samples');
+}
+
+describe('Drill to detail modal', () => {
+ beforeEach(() => {
+ cy.login();
+ cy.visit(ECHARTS_DASHBOARD);
+ ECHARTS_CHARTS.forEach(waitForChartLoad);
+ });
+
+ describe('Box plot', () => {
+ it('opens the modal with the correct data', () => {
+ interceptSamples();
+
+ // opens the modal from context menu
+ cy.get(
+ "[data-test-viz-type='box_plot'] [aria-label='More Options']",
+ ).click();
+ cy.get('.ant-dropdown')
+ .not('.ant-dropdown-hidden')
+ .find("[role='menu'] [role='menuitem']")
+ .eq(5)
+ .should('contain', 'Drill to detail').click();
+ cy.get("[role='dialog'] .draggable-trigger").should(
+ 'contain',
+ 'Drill to detail: Box plot',
+ );
+ cy.get("[aria-label='Close']").eq(1).click();
+
+ // opens the modal by clicking 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 / 6;
+ const canvasCenterY = canvasHeight / 6;
+
+ cy.wrap($canvas)
+ .scrollIntoView()
+ .rightclick(canvasCenterX, canvasCenterY, { force: true });
+ cy.get('.ant-dropdown')
+ .not('.ant-dropdown-hidden')
+ .find("[role='menu'] [role='menuitem']")
+ .should('contain', 'Drill to detail by East Asia & Pacific')
+ .click();
+ cy.wait('@samples');
+
+ // checking the filtered data
+ cy.get("[data-test='filter-val']").should('contain', 'East Asia & Pacific');
+ cy.get("[data-test='row-count-label']").should('contain', '1.98k rows');
+ cy.get("[role='rowgroup'] [role='row']")
+ .should('have.length', 50)
+ .then($rows => {
+ expect($rows).to.contain('American Samoa');
+ });
+ cy.get(".pagination-container [role='navigation'] [role='button']")
+ .should('have.length', 9)
+ .then($pages => {
+ expect($pages).to.contain('1');
+ expect($pages).to.contain('40');
+ });
+
+ // clear the filter and test data was reloaded
+ // @TODO
+ });
+ });
+ });
+
+ describe('Big number total', () => {
+ it('opens the modal with the correct data', () => {
+ interceptSamples();
+
+ // opens the modal from context menu
+ cy.get(
+ "[data-test-viz-type='big_number_total'] [aria-label='More Options']",
+ ).click();
+ cy.get('.ant-dropdown')
+ .not('.ant-dropdown-hidden')
+ .find("[role='menu'] [role='menuitem']")
+ .eq(5)
+ .should('contain', 'Drill to detail').click();
+ cy.get("[role='dialog'] .draggable-trigger").should(
+ 'contain',
+ 'Drill to detail: Number of Girls',
+ );
+ cy.get("[aria-label='Close']").eq(1).click();
+
+ // opens the modal by clicking on the number
+ cy.get(
+ "[data-test-viz-type='big_number_total'] .header-line",
+ ).rightclick();
+ cy.get('.ant-dropdown')
+ .not('.ant-dropdown-hidden')
+ .find("[role='menu'] [role='menuitem']")
+ .should('contain', 'Drill to detail')
+ .click();
+ cy.wait('@samples');
+
+ // checking the data
+ cy.get("[data-test='row-count-label']").should('contain', '36.4k rows');
+ cy.get("[role='table']")
+ .find("[role='columnheader']")
+ .should('have.length', 8)
+ .then($columnheaders => {
+ expect($columnheaders).to.contain('ds');
+ expect($columnheaders).to.contain('gender');
+ expect($columnheaders).to.contain('name');
+ expect($columnheaders).to.contain('state');
+ expect($columnheaders).to.contain('num_boys');
+ expect($columnheaders).to.contain('num_girls');
+ expect($columnheaders).to.contain('num_california');
+ });
+ cy.get("[role='rowgroup'] [role='row']")
+ .should('have.length', 50)
+ .then($rows => {
+ expect($rows).to.contain('Amy');
+ });
+
+ // checking paginated data
+ cy.get(".pagination-container [role='navigation'] [role='button']")
+ .should('have.length', 9)
+ .then($pages => {
+ expect($pages).to.contain('1');
+ expect($pages).to.contain('729');
+ });
+ cy.get(".pagination-container [role='navigation'] [role='button']")
+ .eq(7)
+ .click();
+ cy.wait('@samples');
+ cy.get("[role='rowgroup'] [role='row']")
+ .should('have.length', 46)
+ .then($rows => {
+ expect($rows).to.contain('Victoria');
+ });
+
+ // checking refreshed data
+ cy.get("[aria-label='reload']").click();
+ cy.wait('@samples');
+ cy.get(".pagination-container [role='navigation'] li.active").should(
+ 'contain',
+ '1',
+ );
+ cy.get("[role='rowgroup'] [role='row']")
+ .should('have.length', 50)
+ .then($rows => {
+ expect($rows).to.contain('Amy');
+ });
+ });
+ });
+
+ describe('Big number with trendline', () => {
+ it('opens the modal with the correct data', () => {
+ interceptSamples();
+
+ // opens the modal from context menu
+ cy.get(
+ "[data-test-viz-type='big_number'] [aria-label='More Options']",
+ ).click();
+ cy.get('.ant-dropdown')
+ .not('.ant-dropdown-hidden')
+ .find("[role='menu'] [role='menuitem']")
+ .eq(5)
+ .should('contain', 'Drill to detail').click();
+ cy.get("[role='dialog'] .draggable-trigger").should(
+ 'contain',
+ 'Drill to detail: Participants',
+ );
+ cy.get("[aria-label='Close']").eq(1).click();
+
+ // opens the modal by clicking on the number
+ cy.get("[data-test-viz-type='big_number'] .header-line").rightclick();
+ cy.get('.ant-dropdown')
+ .not('.ant-dropdown-hidden')
+ .find("[role='menu'] [role='menuitem']")
+ .should('contain', 'Drill to detail')
+ .click();
+ cy.wait('@samples');
+
+ // checking the data
+ cy.get('.ant-tag').should('contain', '75.7k rows');
+ cy.get("[role='table']")
+ .find("[role='columnheader']")
+ .should('have.length', 8)
+ .then($columnheaders => {
+ expect($columnheaders).to.contain('ds');
+ expect($columnheaders).to.contain('gender');
+ expect($columnheaders).to.contain('name');
+ expect($columnheaders).to.contain('state');
+ expect($columnheaders).to.contain('num_boys');
+ expect($columnheaders).to.contain('num_girls');
+ expect($columnheaders).to.contain('num_california');
+ });
+ cy.get("[role='rowgroup'] [role='row']")
+ .should('have.length', 50)
+ .then($rows => {
+ expect($rows).to.contain('Aaron');
+ });
+
+ // checking paginated data
+ cy.get(".pagination-container [role='navigation'] [role='button']")
+ .should('have.length', 9)
+ .then($pages => {
+ expect($pages).to.contain('1');
+ expect($pages).to.contain('1514');
+ });
+ cy.get(".pagination-container [role='navigation'] [role='button']")
+ .eq(7)
+ .click();
+ cy.wait('@samples');
+ cy.get("[role='rowgroup'] [role='row']")
+ .should('have.length', 41)
+ .then($rows => {
+ expect($rows).to.contain('Zachary');
+ });
+
+ // checking refreshed data
+ cy.get("[aria-label='reload']").click();
+ cy.wait('@samples');
+ cy.get(".pagination-container [role='navigation'] li.active").should(
+ 'contain',
+ '1',
+ );
+ cy.get("[role='rowgroup'] [role='row']")
+ .should('have.length', 50)
+ .then($rows => {
+ expect($rows).to.contain('Aaron');
+ });
+ cy.get("[aria-label='Close']").eq(1).click();
+
+ // opens the modal by clicking on the trendline
+ cy.get("[data-test-viz-type='big_number'] canvas").then($canvas => {
+ const canvasWidth = $canvas.width() || 0;
+ const canvasHeight = $canvas.height() || 0;
+ const canvasCenterX = canvasWidth / 2;
+ // @TODO
+ cy.wrap($canvas).scrollIntoView().rightclick(canvasCenterX, 1);
+ cy.get('.ant-dropdown')
+ .not('.ant-dropdown-hidden')
+ .find("[role='menu'] [role='menuitem']")
+ .should('contain', 'Drill to detail by 1987-01-01')
+ .click();
+ cy.wait('@samples');
+
+ // checking the filtered data
+ cy.get("[data-test='filter-val']").should('contain', '1987-01-01');
+ cy.get("[data-test='row-count-label']").should('contain', '1.85k rows');
+ cy.get("[role='rowgroup'] [role='row']")
+ .should('have.length', 50)
+ .then($rows => {
+ expect($rows).to.contain('Aaron');
+ });
+ cy.get(".pagination-container [role='navigation'] [role='button']")
+ .should('have.length', 9)
+ .then($pages => {
+ expect($pages).to.contain('1');
+ expect($pages).to.contain('37');
+ });
+
+ // clear and check the filtered data
+ // @TODO
+ });
+ });
+ });
+});
diff --git a/superset-frontend/src/dashboard/components/DrillDetailPane/TableControls.tsx b/superset-frontend/src/dashboard/components/DrillDetailPane/TableControls.tsx
index 9b0e072379..025d7ea4c9 100644
--- a/superset-frontend/src/dashboard/components/DrillDetailPane/TableControls.tsx
+++ b/superset-frontend/src/dashboard/components/DrillDetailPane/TableControls.tsx
@@ -107,13 +107,14 @@ export default function TableControls({
`}
>
<span
+ data-test="filter-col"
css={css`
margin-right: ${theme.gridUnit}px;
`}
>
{colName}
</span>
- <strong>{val}</strong>
+ <strong data-test="filter-val">{val}</strong>
</Tag>
))}
</div>
diff --git a/superset-frontend/src/explore/components/RowCountLabel/index.tsx b/superset-frontend/src/explore/components/RowCountLabel/index.tsx
index 3597e49724..be41be0ba6 100644
--- a/superset-frontend/src/explore/components/RowCountLabel/index.tsx
+++ b/superset-frontend/src/explore/components/RowCountLabel/index.tsx
@@ -35,10 +35,14 @@ export default function RowCountLabel(props: RowCountLabelProps) {
limitReached || (rowcount === 0 && !loading) ? 'danger' : 'default';
const formattedRowCount = getNumberFormatter()(rowcount);
const label = (
- <Label type={type} data-test="row-count-label">
- {loading
- ? t('Loading...')
- : tn('%s row', '%s rows', rowcount, formattedRowCount)}
+ <Label type={type}>
+ {loading ? (
+ t('Loading...')
+ ) : (
+ <span data-test="row-count-label">
+ {tn('%s row', '%s rows', rowcount, formattedRowCount)}
+ </span>
+ )}
</Label>
);
return limitReached ? (