chore: enabled v1 verification in filter and url_params test files (#11712)

* enabled v1 verification in filter test file

* added v1 support in url_params tests

* review fix

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

@@ -17,7 +17,12 @@
  * under the License.
  */
 import { WORLD_HEALTH_DASHBOARD } from './dashboard.helper';
-import { isLegacyChart } from '../../utils/vizPlugins';
+import {
+  getChartAliases,
+  DASHBOARD_CHART_ALIAS_PREFIX,
+  isLegacyResponse,
+} from '../../utils/vizPlugins';
+import readResponseBlob from '../../utils/readResponseBlob';
 
 interface Slice {
   slice_id: number;
@@ -36,7 +41,7 @@ describe('Dashboard filter', () => {
   let aliases: string[];
 
   const getAlias = (id: number) => {
-    return `@slice_${id}`;
+    return `@${DASHBOARD_CHART_ALIAS_PREFIX}${id}`;
   };
 
   beforeEach(() => {
@@ -53,16 +58,8 @@ describe('Dashboard filter', () => {
         dashboard.slices.find(
           slice => slice.form_data.viz_type === 'filter_box',
         )?.slice_id || 0;
-      aliases = slices
+
-        // TODO(villebro): enable V1 charts
+      aliases = getChartAliases(slices);
-        .filter(slice => isLegacyChart(slice.form_data.viz_type))
-        .map(slice => {
-          const id = slice.slice_id;
-          const alias = getAlias(id);
-          const url = `/superset/explore_json/?*{"slice_id":${id}}*`;
-          cy.route('POST', url).as(alias.slice(1));
-          return alias;
-        });
 
       // wait the initial page load requests
       cy.wait(aliases);
@@ -93,20 +90,28 @@ describe('Dashboard filter', () => {
     cy.get('.Select__menu').first().contains('South Asia').click();
 
     cy.get('.filter_box button').click({ force: true });
-
-    // wait again after applied filters
     cy.wait(aliases.filter(x => x !== getAlias(filterId))).then(requests => {
-      requests.forEach(xhr => {
+      return Promise.all(
-        const requestFormData = xhr.request.body as FormData;
+        requests.map(async xhr => {
-        const requestParams = JSON.parse(
+          expect(xhr.status).to.eq(200);
-          requestFormData.get('form_data') as string,
+          const responseBody = await readResponseBlob(xhr.response.body);
-        );
+          let requestFilter;
-        expect(requestParams.extra_filters[0]).deep.eq({
+          if (isLegacyResponse(responseBody)) {
-          col: 'region',
+            const requestFormData = xhr.request.body as FormData;
-          op: '==',
+            const requestParams = JSON.parse(
-          val: 'South Asia',
+              requestFormData.get('form_data') as string,
-        });
+            );
-      });
+            requestFilter = requestParams.extra_filters[0];
+          } else {
+            requestFilter = xhr.request.body.queries[0].filters[0];
+          }
+          expect(requestFilter).deep.eq({
+            col: 'region',
+            op: '==',
+            val: 'South Asia',
+          });
+        }),
+      );
     });
 
     // TODO add test with South Asia{enter} type action to select filter

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

@@ -17,7 +17,8 @@
  * under the License.
  */
 import { WORLD_HEALTH_DASHBOARD } from './dashboard.helper';
-import { isLegacyChart } from '../../utils/vizPlugins';
+import { isLegacyResponse, getChartAliases } from '../../utils/vizPlugins';
+import readResponseBlob from '../../utils/readResponseBlob';
 
 describe('Dashboard form data', () => {
   const urlParams = { param1: '123', param2: 'abc' };
@@ -36,26 +37,26 @@ describe('Dashboard form data', () => {
   });
 
   it('should apply url params and queryFields to slice requests', () => {
-    const aliases = [];
+    const aliases = getChartAliases(dashboard.slices);
-    dashboard.slices.forEach(slice => {
+    // wait and verify one-by-one
-      const { slice_id: id } = slice;
-      const isLegacy = isLegacyChart(slice.form_data.viz_type);
-      const route = `/superset/explore_json/?form_data={"slice_id":${id}}&dashboard_id=${dashboard.id}`;
-      const alias = `getJson_${id}`;
-      // TODO(villebro): enable V1 charts
-      if (isLegacy) {
-        aliases.push(`@${alias}`);
-        cy.route('POST', route).as(alias);
-      }
-    });
-
     cy.wait(aliases).then(requests => {
-      requests.forEach(xhr => {
+      return Promise.all(
-        const requestFormData = xhr.request.body;
+        requests.map(async xhr => {
-        const requestParams = JSON.parse(requestFormData.get('form_data'));
+          expect(xhr.status).to.eq(200);
-        expect(requestParams).to.have.property('queryFields');
+          const responseBody = await readResponseBlob(xhr.response.body);
-        expect(requestParams.url_params).deep.eq(urlParams);
+
-      });
+          if (isLegacyResponse(responseBody)) {
+            const requestFormData = xhr.request.body;
+            const requestParams = JSON.parse(requestFormData.get('form_data'));
+            expect(requestParams).to.have.property('queryFields');
+            expect(requestParams.url_params).deep.eq(urlParams);
+          } else {
+            xhr.request.body.queries.forEach(query => {
+              expect(query.url_params).deep.eq(urlParams);
+            });
+          }
+        }),
+      );
     });
   });
 });

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

@@ -18,6 +18,7 @@
  */
 
 const V1_PLUGINS = ['box_plot', 'echarts_timeseries', 'word_cloud', 'pie'];
+export const DASHBOARD_CHART_ALIAS_PREFIX = 'getJson_';
 
 export function isLegacyChart(vizType: string): boolean {
   return !V1_PLUGINS.includes(vizType);
@@ -35,7 +36,7 @@ export function getChartAliases(slices: any[]): string[] {
   Array.from(slices).forEach(slice => {
     const vizType = slice.form_data.viz_type;
     const isLegacy = isLegacyChart(vizType);
-    const alias = `getJson_${slice.slice_id}`;
+    const alias = `${DASHBOARD_CHART_ALIAS_PREFIX}${slice.slice_id}`;
     const formData = `{"slice_id":${slice.slice_id}}`;
     if (isLegacy) {
       const route = `/superset/explore_json/?*${formData}*`;