chore: V1 charts load cypress tests (#11685)

* Enabled assertion on v1 chart request

* added missing code after rebase

* extracted alias logic to function

* modified v1 requests to contain form data, added assertion on ui elements using slice id from request

superset-frontend/cypress-base/cypress/integration/dashboard/load.test.js

@@ -17,13 +17,16 @@
  * under the License.
  */
 import readResponseBlob from '../../utils/readResponseBlob';
-import { isLegacyChart } from '../../utils/vizPlugins';
+import {
+  getChartAliases,
+  isLegacyResponse,
+  getSliceIdFromRequestUrl,
+} from '../../utils/vizPlugins';
 import { WORLD_HEALTH_DASHBOARD } from './dashboard.helper';
 
 describe('Dashboard load', () => {
-  const aliases = [];
   let dashboard;
-
+  let aliases;
   beforeEach(() => {
     cy.server();
     cy.login();
@@ -33,35 +36,31 @@ describe('Dashboard load', () => {
     cy.get('#app').then(data => {
       const bootstrapData = JSON.parse(data[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', () => {
-    const { slices } = dashboard;
-
-    // then define routes and create alias for each requests
-    slices.forEach(slice => {
-      const vizType = slice.form_data.viz_type;
-      const isLegacy = isLegacyChart(vizType);
-      // TODO(villebro): enable V1 charts
-      if (isLegacy) {
-        const alias = `getJson_${slice.slice_id}`;
-        const formData = `{"slice_id":${slice.slice_id}}`;
-        const route = `/superset/explore_json/?*${formData}*`;
-        cy.route('POST', `${route}`).as(alias);
-        aliases.push(`@${alias}`);
-      }
-    });
-
     // wait and verify one-by-one
     cy.wait(aliases).then(requests => {
       return Promise.all(
         requests.map(async xhr => {
           expect(xhr.status).to.eq(200);
           const responseBody = await readResponseBlob(xhr.response.body);
-          expect(responseBody).to.have.property('errors');
-          expect(responseBody.errors.length).to.eq(0);
-          const sliceId = responseBody.form_data.slice_id;
+          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(xhr.url);
+            responseBody.result.forEach(element => {
+              expect(element).to.have.property('error', null);
+              expect(element).to.have.property('status', 'success');
+            });
+          }
           cy.get('[data-test="grid-content"]')
             .find(`#chart-id-${sliceId}`)
             .should('be.visible');

superset-frontend/cypress-base/cypress/integration/explore/visualizations/box_plot.test.js

@@ -40,7 +40,7 @@ describe('Visualization > Box Plot', () => {
   beforeEach(() => {
     cy.server();
     cy.login();
-    cy.route('POST', '/api/v1/chart/data').as('getJson');
+    cy.route('POST', '/api/v1/chart/data*').as('getJson');
   });
 
   it('should work', () => {

superset-frontend/cypress-base/cypress/integration/explore/visualizations/pie.test.js

@@ -44,7 +44,7 @@ describe('Visualization > Pie', () => {
   beforeEach(() => {
     cy.server();
     cy.login();
-    cy.route('POST', '/api/v1/chart/data').as('getJson');
+    cy.route('POST', '/api/v1/chart/data*').as('getJson');
   });
 
   it('should work with ad-hoc metric', () => {

superset-frontend/cypress-base/cypress/utils/vizPlugins.ts

@@ -16,8 +16,36 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
 const V1_PLUGINS = ['box_plot', 'echarts_timeseries', 'word_cloud', 'pie'];
 
 export function isLegacyChart(vizType: string): boolean {
   return !V1_PLUGINS.includes(vizType);
 }
+export function isLegacyResponse(response: any): boolean {
+  return !response.result;
+}
+export function getSliceIdFromRequestUrl(url: string): string {
+  const address = new URL(url);
+  const query = address.searchParams.get('form_data');
+  return query?.match(/\d+/)[0];
+}
+export function getChartAliases(slices: any[]): string[] {
+  const aliases: string[] = [];
+  Array.from(slices).forEach(slice => {
+    const vizType = slice.form_data.viz_type;
+    const isLegacy = isLegacyChart(vizType);
+    const alias = `getJson_${slice.slice_id}`;
+    const formData = `{"slice_id":${slice.slice_id}}`;
+    if (isLegacy) {
+      const route = `/superset/explore_json/?*${formData}*`;
+      cy.route('POST', `${route}`).as(alias);
+      aliases.push(`@${alias}`);
+    } else {
+      const route = `/api/v1/chart/data?*${formData}*`;
+      cy.route('POST', `${route}`).as(alias);
+      aliases.push(`@${alias}`);
+    }
+  });
+  return aliases;
+}

superset-frontend/src/chart/chartAction.js

@@ -152,9 +152,12 @@ const v1ChartDataRequest = async (
   });
 
   // The dashboard id is added to query params for tracking purposes
-  const qs = requestParams.dashboard_id
-    ? { dashboard_id: requestParams.dashboard_id }
-    : {};
+  const { slice_id: sliceId } = formData;
+  const { dashboard_id: dashboardId } = requestParams;
+  const qs = {};
+  if (sliceId !== undefined) qs.form_data = `{"slice_id":${sliceId}}`;
+  if (dashboardId !== undefined) qs.dashboard_id = dashboardId;
+
   const allowDomainSharding =
     // eslint-disable-next-line camelcase
     domainShardingEnabled && requestParams?.dashboard_id;