chore: Add Cypress tests for drill by

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

@@ -18,7 +18,11 @@
  */
 import { waitForChartLoad } from 'cypress/utils';
 import { SUPPORTED_CHARTS_DASHBOARD } from 'cypress/utils/urls';
-import { SUPPORTED_TIER1_CHARTS, SUPPORTED_TIER2_CHARTS } from './utils';
+import {
+  openTopLevelTab,
+  SUPPORTED_TIER1_CHARTS,
+  SUPPORTED_TIER2_CHARTS,
+} from './utils';
 
 function interceptSamples() {
   cy.intercept(`/datasource/samples*`).as('samples');
@@ -77,10 +81,6 @@ function closeModal() {
   });
 }
 
-function setTopLevelTab(tabName: string) {
-  cy.get("div#TABS-TOP div[role='tab']").contains(tabName).click();
-}
-
 function testTimeChart(vizType: string) {
   interceptSamples();
 
@@ -139,7 +139,7 @@ describe('Drill to detail modal', () => {
   describe('Tier 1 charts', () => {
     before(() => {
       cy.visit(SUPPORTED_CHARTS_DASHBOARD);
-      setTopLevelTab('Tier 1');
+      openTopLevelTab('Tier 1');
       SUPPORTED_TIER1_CHARTS.forEach(waitForChartLoad);
     });
 
@@ -438,7 +438,7 @@ describe('Drill to detail modal', () => {
   describe('Tier 2 charts', () => {
     before(() => {
       cy.visit(SUPPORTED_CHARTS_DASHBOARD);
-      setTopLevelTab('Tier 2');
+      openTopLevelTab('Tier 2');
       SUPPORTED_TIER2_CHARTS.forEach(waitForChartLoad);
     });
 

superset-frontend/cypress-base/cypress/e2e/dashboard/utils.ts

@@ -37,10 +37,24 @@ export const SUPPORTED_TIER1_CHARTS = [
   { name: 'Big Number', viz: 'big_number_total' },
   { name: 'Big Number with Trendline', viz: 'big_number' },
   { name: 'Pie Chart', viz: 'pie' },
+  { name: 'Table', viz: 'table' },
+  { name: 'Pivot Table', viz: 'pivot_table_v2' },
+  { name: 'Time-Series Line Chart', viz: 'echarts_timeseries_line' },
+  { name: 'Time-Series Area Chart', viz: 'echarts_area' },
+  { name: 'Time-Series Scatter Chart', viz: 'echarts_timeseries_scatter' },
+  { name: 'Time-Series Bar Chart V2', viz: 'echarts_timeseries_bar' },
 ] as ChartSpec[];
 
 export const SUPPORTED_TIER2_CHARTS = [
   { name: 'Box Plot Chart', viz: 'box_plot' },
+  { name: 'Time-Series Generic Chart', viz: 'echarts_timeseries' },
+  { name: 'Time-Series Smooth Line Chart', viz: 'echarts_timeseries_smooth' },
+  { name: 'Time-Series Step Line Chart', viz: 'echarts_timeseries_step' },
+  { name: 'Funnel Chart', viz: 'funnel' },
+  { name: 'Gauge Chart', viz: 'gauge_chart' },
+  { name: 'Radar Chart', viz: 'radar' },
+  { name: 'Treemap V2 Chart', viz: 'treemap_v2' },
+  { name: 'Mixed Chart', viz: 'mixed_timeseries' },
 ] as ChartSpec[];
 
 export const testItems = {
@@ -515,3 +529,7 @@ export function openTab(tabComponentIndex: number, tabIndex: number) {
     .eq(tabIndex)
     .click();
 }
+
+export const openTopLevelTab = (tabName: string) => {
+  cy.get("div#TABS-TOP div[role='tab']").contains(tabName).click();
+};

superset-frontend/cypress-base/cypress/e2e/explore/utils.ts

@@ -35,14 +35,18 @@ export function interceptUpdate() {
   cy.intercept('PUT', `/api/v1/chart/*`).as('update');
 }
 
-export function interceptPost() {
-  cy.intercept('POST', `/api/v1/chart/`).as('post');
-}
+export const interceptV1ChartData = (alias = 'v1Data') => {
+  cy.intercept('/api/v1/chart/data*').as(alias);
+};
 
-export function interceptExploreJson() {
-  cy.intercept('POST', `/superset/explore_json/**`).as('getJson');
+export function interceptExploreJson(alias = 'getJson') {
+  cy.intercept('POST', `/superset/explore_json/**`).as(alias);
 }
 
+export const interceptFormDataKey = () => {
+  cy.intercept('POST', '/api/v1/explore/form_data').as('formDataKey');
+};
+
 export function interceptExploreGet() {
   cy.intercept({
     method: 'GET',

superset-frontend/src/components/Chart/DrillBy/DrillByChart.tsx

@@ -54,6 +54,7 @@ export default function DrillByChart({
         height: 100%;
         min-height: 0;
       `}
+      data-test="drill-by-chart"
     >
       <SuperChart
         disableErrorBoundary

superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx

@@ -36,6 +36,7 @@ export const useDisplayModeToggle = () => {
             box-shadow: none;
           }
         `}
+        data-test="drill-by-display-toggle"
       >
         <Radio.Group
           onChange={({ target: { value } }) => {

superset-frontend/src/components/Chart/DrillBy/useResultsTableView.tsx

@@ -40,7 +40,7 @@ export const useResultsTableView = (
   }
   if (chartDataResult.length === 1) {
     return (
-      <PaginationContainer>
+      <PaginationContainer data-test="drill-by-results-table">
         <SingleQueryResultPane
           colnames={chartDataResult[0].colnames}
           coltypes={chartDataResult[0].coltypes}
@@ -53,7 +53,7 @@ export const useResultsTableView = (
     );
   }
   return (
-    <Tabs fullWidth={false}>
+    <Tabs fullWidth={false} data-test="drill-by-results-tabs">
       {chartDataResult.map((res, index) => (
         <Tabs.TabPane tab={t('Results %s', index + 1)} key={index}>
           <PaginationContainer>

superset/examples/supported_charts_dashboard.py

@@ -335,7 +335,7 @@ def create_slices(tbl: SqlaTable) -> List[Slice]:
                 viz_type="mixed_timeseries",
                 metrics=["sum__num"],
                 groupby=["gender"],
-                metrics_b=["count"],
+                metrics_b=["sum__num"],
                 groupby_b=["state"],
             ),
         ),

tests/integration_tests/superset_test_config.py

@@ -61,7 +61,7 @@
 HIVE_POLL_INTERVAL = 0.1
 
 SQL_MAX_ROW = 10000
-SQLLAB_CTAS_NO_LIMIT = True  # SQL_MAX_ROW will not take affect for the CTA queries
+SQLLAB_CTAS_NO_LIMIT = True  # SQL_MAX_ROW will not take effect for the CTA queries
 FEATURE_FLAGS = {
     **FEATURE_FLAGS,
     "foo": "bar",
@@ -71,6 +71,7 @@
     "ALERT_REPORTS": True,
     "DASHBOARD_NATIVE_FILTERS": True,
     "DRILL_TO_DETAIL": True,
+    "DRILL_BY": True,
     "HORIZONTAL_FILTER_BAR": True,
 }