superset/superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts

/**
 * 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');
}

function openModalFromMenu(chartType: string) {
  interceptSamples();

  cy.get(
    `[data-test-viz-type='${chartType}'] [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.wait('@samples');
}

function openModalFromChartContext(targetMenuItem: string) {
  interceptSamples();

  cy.get('.ant-dropdown')
    .not('.ant-dropdown-hidden')
    .find("[role='menu'] [role='menuitem']")
    .should('contain', targetMenuItem)
    .click();
  cy.wait('@samples');
}

describe('Drill to detail modal', () => {
  beforeEach(() => {
    cy.login();
    cy.visit(ECHARTS_DASHBOARD);
    ECHARTS_CHARTS.forEach(waitForChartLoad);
  });

  it('opens the modal from the context menu', () => {
    openModalFromMenu('big_number_total');

    cy.get("[role='dialog'] .draggable-trigger").should(
      'contain',
      'Drill to detail: Number of Girls',
    );
  });

  it('refreshes the data', () => {
    openModalFromMenu('big_number_total');
    // move to the last page
    cy.get(".pagination-container [role='navigation'] [role='button']")
      .eq(7)
      .click();
    cy.wait('@samples');
    // reload
    cy.get("[aria-label='reload']").click();
    cy.wait('@samples');
    // make sure it started back from first page
    cy.get(".pagination-container [role='navigation'] li.active").should(
      'contain',
      '1',
    );
  });

  it('paginates', () => {
    openModalFromMenu('big_number_total');
    // checking the data
    cy.get("[data-test='row-count-label']").should('contain', '36.4k rows');
    cy.get("[role='rowgroup'] [role='row']")
      .should('have.length', 50)
      .then($rows => {
        expect($rows).to.contain('Amy');
      });
    // checking the 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');
      });
  });

  it('clears 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 / 6;
      const canvasCenterY = canvasHeight / 6;

      cy.wrap($canvas)
        .scrollIntoView()
        .rightclick(canvasCenterX, canvasCenterY, { force: true });

      openModalFromChartContext('Drill to detail by East Asia & Pacific');

      // checking the filter
      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(".pagination-container [role='navigation'] [role='button']")
        .should('have.length', 9)
        .then($pages => {
          expect($pages).to.contain('1');
          expect($pages).to.contain('40');
        });

      // close the filter and test that data was reloaded
      cy.get("[data-test='filter-col']").find("[aria-label='close']").click();
      cy.wait('@samples');
      cy.get("[data-test='row-count-label']").should('contain', '11.8k rows');
      cy.get(".pagination-container [role='navigation'] li.active").should(
        'contain',
        '1',
      );
      cy.get(".pagination-container [role='navigation'] [role='button']")
        .should('have.length', 9)
        .then($pages => {
          expect($pages).to.contain('1');
          expect($pages).to.contain('236');
        });
    });
  });

  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, { 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.get("[data-test='filter-val']").then($filters => {
            expect($filters).to.contain('1965');
            expect($filters).to.contain('boy');
          });
        },
      );
    });
  });

  describe('Box plot', () => {
    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 / 6;
        const canvasCenterY = canvasHeight / 6;

        cy.wrap($canvas)
          .scrollIntoView()
          .rightclick(canvasCenterX, canvasCenterY, { force: true });

        openModalFromChartContext('Drill to detail by East Asia & Pacific');

        // checking the filter
        cy.get("[data-test='filter-val']").should(
          'contain',
          'East Asia & Pacific',
        );
      });
    });
  });

  describe('Pie', () => {
    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 / 2;
        const canvasCenterY = canvasHeight / 2;

        cy.wrap($canvas)
          .scrollIntoView()
          .rightclick(canvasCenterX, canvasCenterY, { force: true });

        openModalFromChartContext('Drill to detail by boy');

        // checking the filtered and paginated data
        cy.get("[data-test='filter-val']").should('contain', 'boy');
      });
    });
  });

  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",
      ).rightclick();

      openModalFromChartContext('Drill to detail');

      cy.get("[data-test='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").rightclick();

      openModalFromChartContext('Drill to detail');

      cy.get("[data-test='filter-val']").should('not.exist');

      // TODO: test clicking on a trendline
      // Cypress is refusing to rightclick on the dot
    });
  });
});