add cy test for downloading chart as image (apache#19963)

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

@@ -0,0 +1,48 @@
+/**
+ * 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 { FORM_DATA_DEFAULTS, NUM_METRIC } from './shared.helper';
+
+describe('Download Chart > Distribution bar chart', () => {
+  const VIZ_DEFAULTS = { ...FORM_DATA_DEFAULTS, viz_type: 'dist_bar' };
+
+  beforeEach(() => {
+    cy.login();
+    cy.intercept('POST', '/superset/explore_json/**').as('getJson');
+  });
+
+  it('download chart with image works', () => {
+    const formData = {
+      ...VIZ_DEFAULTS,
+      metrics: NUM_METRIC,
+      groupby: ['state'],
+    };
+
+    cy.visitChartByParams(JSON.stringify(formData));
+    cy.get('.right-button-panel > .ant-dropdown-trigger').click();
+    cy.get(':nth-child(1) > .ant-dropdown-menu-submenu-title').click();
+    cy.get(
+      '.ant-dropdown-menu-submenu > .ant-dropdown-menu li:nth-child(3)',
+    ).click();
+    cy.verifyDownload('.jpg', {
+      contains: true,
+      timeout: 25000,
+      interval: 600,
+    });
+  });
+});

superset-frontend/cypress-base/cypress/plugins/index.js

@@ -19,8 +19,11 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
+const { isFileExist, findFiles } = require('cy-verify-downloads');
+
 module.exports = (on, config) => {
   // eslint-disable-next-line global-require
   require('@cypress/code-coverage/task')(on, config);
+  on('task', { isFileExist, findFiles });
   return config;
 };

superset-frontend/cypress-base/cypress/support/index.ts

@@ -21,6 +21,8 @@ import '@cypress/code-coverage/support';
 const BASE_EXPLORE_URL = '/superset/explore/?form_data=';
 const TokenName = Cypress.env('TOKEN_NAME');
 
+require('cy-verify-downloads').addCustomCommand();
+
 /* eslint-disable consistent-return */
 Cypress.on('uncaught:exception', err => {
   // ignore ResizeObserver client errors, as they are unrelated to operation

superset-frontend/cypress-base/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@cypress/code-coverage": "^3.9.11",
     "@superset-ui/core": "^0.18.8",
+    "cy-verify-downloads": "^0.1.6",
     "querystringify": "^2.2.0",
     "react-dom": "^16.13.0",
     "rison": "^0.1.1",