This is an automated email from the ASF dual-hosted git repository. diegopucci pushed a commit to branch chore/cypress-runtime-enhancements in repository https://gitbox.apache.org/repos/asf/superset.git
commit ac2219aea38438e7a765d703b3ebcade1a3b5e69 Author: geido <[email protected]> AuthorDate: Mon Sep 5 18:06:05 2022 +0300 Lint --- .../chart_list/chartlist.applitools.test.ts | 2 +- .../cypress/integration/chart_list/filter.test.ts | 10 +- .../integration/dashboard/_skip.controls.test.ts | 2 +- .../integration/dashboard/_skip.filter.test.ts | 5 +- .../integration/dashboard/_skip.key_value.test.ts | 6 +- .../integration/dashboard/_skip.url_params.test.ts | 8 +- .../cypress/integration/dashboard/actions.test.js | 2 +- .../dashboard/dashboard.applitools.test.ts | 2 +- .../integration/dashboard/drilltodetail.test.ts | 21 +-- .../cypress/integration/dashboard/editmode.test.ts | 85 ++++++------ .../cypress/integration/dashboard/load.test.ts | 2 +- .../integration/dashboard/nativeFilters.test.ts | 16 +-- .../cypress/integration/dashboard/utils.ts | 45 ++++--- .../cypress-base/cypress/support/index.ts | 82 ++++++------ .../cypress-base/cypress/utils/index.ts | 146 ++++++++++----------- .../cypress-base/cypress/utils/urls.ts | 2 +- superset-frontend/cypress-base/package-lock.json | 11 ++ superset-frontend/cypress-base/package.json | 1 + .../src/components/Chart/DrillDetailModal.tsx | 7 +- 19 files changed, 230 insertions(+), 225 deletions(-) diff --git a/superset-frontend/cypress-base/cypress/integration/chart_list/chartlist.applitools.test.ts b/superset-frontend/cypress-base/cypress/integration/chart_list/chartlist.applitools.test.ts index 045a8b809a..60bf87ed1d 100644 --- a/superset-frontend/cypress-base/cypress/integration/chart_list/chartlist.applitools.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/chart_list/chartlist.applitools.test.ts @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ - import { CHART_LIST } from 'cypress/utils/urls'; +import { CHART_LIST } from 'cypress/utils/urls'; describe('charts list view', () => { beforeEach(() => { diff --git a/superset-frontend/cypress-base/cypress/integration/chart_list/filter.test.ts b/superset-frontend/cypress-base/cypress/integration/chart_list/filter.test.ts index 0418afd3ff..dffbebd472 100644 --- a/superset-frontend/cypress-base/cypress/integration/chart_list/filter.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/chart_list/filter.test.ts @@ -16,11 +16,11 @@ * specific language governing permissions and limitations * under the License. */ - import { CHART_LIST } from 'cypress/utils/urls'; - import { setGridMode, clearAllInputs } from 'cypress/utils'; - import { setFilter } from '../explore/utils'; +import { CHART_LIST } from 'cypress/utils/urls'; +import { setGridMode, clearAllInputs } from 'cypress/utils'; +import { setFilter } from '../explore/utils'; - describe('Charts filters', () => { +describe('Charts filters', () => { before(() => { cy.visit(CHART_LIST); }); @@ -97,4 +97,4 @@ cy.getBySel('table-row').should('have.length', 1); }); }); -}); \ No newline at end of file +}); diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/_skip.controls.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/_skip.controls.test.ts index 1fa60c7f69..085ebb1587 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/_skip.controls.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/_skip.controls.test.ts @@ -21,8 +21,8 @@ import { ChartSpec, getChartAliasesBySpec, } from 'cypress/utils'; -import { WORLD_HEALTH_CHARTS } from './utils'; import { WORLD_HEALTH_DASHBOARD } from 'cypress/utils/urls'; +import { WORLD_HEALTH_CHARTS } from './utils'; import { isLegacyResponse } from '../../utils/vizPlugins'; describe.skip('Dashboard top-level controls', () => { diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/_skip.filter.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/_skip.filter.test.ts index 25ed5a02a7..f5b617393a 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/_skip.filter.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/_skip.filter.test.ts @@ -16,13 +16,14 @@ * specific language governing permissions and limitations * under the License. */ -import { isLegacyResponse, parsePostForm } from 'cypress/utils'; import { + isLegacyResponse, + parsePostForm, getChartAliasesBySpec, waitForChartLoad, } from 'cypress/utils'; -import {WORLD_HEALTH_CHARTS } from './utils'; import { WORLD_HEALTH_DASHBOARD } from 'cypress/utils/urls'; +import { WORLD_HEALTH_CHARTS } from './utils'; describe.skip('Dashboard filter', () => { before(() => { diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/_skip.key_value.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/_skip.key_value.test.ts index 3b2b9ea2d4..52bc4cd60b 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/_skip.key_value.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/_skip.key_value.test.ts @@ -17,11 +17,9 @@ * under the License. */ import qs from 'querystringify'; -import { - waitForChartLoad, -} from 'cypress/utils'; -import {WORLD_HEALTH_CHARTS} from './utils'; +import { waitForChartLoad } from 'cypress/utils'; import { WORLD_HEALTH_DASHBOARD } from 'cypress/utils/urls'; +import { WORLD_HEALTH_CHARTS } from './utils'; interface QueryString { native_filters_key: string; diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/_skip.url_params.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/_skip.url_params.test.ts index b0fdff057a..a072cf1207 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/_skip.url_params.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/_skip.url_params.test.ts @@ -16,13 +16,9 @@ * specific language governing permissions and limitations * under the License. */ -import { parsePostForm, JsonObject } from 'cypress/utils'; -import { - waitForChartLoad, -} from 'cypress/utils'; - -import { WORLD_HEALTH_CHARTS } from './utils'; +import { parsePostForm, JsonObject, waitForChartLoad } from 'cypress/utils'; import { WORLD_HEALTH_DASHBOARD } from 'cypress/utils/urls'; +import { WORLD_HEALTH_CHARTS } from './utils'; describe.skip('Dashboard form data', () => { const urlParams = { param1: '123', param2: 'abc' }; diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/actions.test.js b/superset-frontend/cypress-base/cypress/integration/dashboard/actions.test.js index 32eca632ba..de7c412934 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/actions.test.js +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/actions.test.js @@ -41,4 +41,4 @@ describe('Dashboard actions', () => { .find("[aria-label='favorite-selected']") .should('not.exist'); }); -}) +}); diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.applitools.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.applitools.test.ts index a604ada58a..3269334e8c 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.applitools.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.applitools.test.ts @@ -16,9 +16,9 @@ * specific language governing permissions and limitations * under the License. */ -import { WORLD_HEALTH_CHARTS } from './utils'; import { WORLD_HEALTH_DASHBOARD } from 'cypress/utils/urls'; import { waitForChartLoad } from 'cypress/utils'; +import { WORLD_HEALTH_CHARTS } from './utils'; describe('Dashboard load', () => { beforeEach(() => { diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts index 55d52d0c57..a0d0a86434 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts @@ -16,13 +16,9 @@ * specific language governing permissions and limitations * under the License. */ -import { - waitForChartLoad, -} from 'cypress/utils'; -import { - ECHARTS_CHARTS, -} from './utils'; -import {ECHARTS_DASHBOARD} from 'cypress/utils/urls'; +import { waitForChartLoad } from 'cypress/utils'; +import { ECHARTS_DASHBOARD } from 'cypress/utils/urls'; +import { ECHARTS_CHARTS } from './utils'; function interceptSamples() { cy.intercept(`/datasource/samples*`).as('samples'); @@ -144,10 +140,7 @@ describe('Drill to detail modal', () => { openModalFromChartContext('Drill to detail by East Asia & Pacific'); // checking the filter - cy.getBySel('filter-val').should( - 'contain', - 'East Asia & Pacific', - ); + cy.getBySel('filter-val').should('contain', 'East Asia & Pacific'); cy.getBySel('row-count-label').should('contain', '1.98k rows'); cy.get(".pagination-container [role='navigation'] [role='button']") .should('have.length', 9) @@ -172,7 +165,6 @@ describe('Drill to detail modal', () => { }); }); }); - }); describe('Time-series Bar Chart V2', () => { @@ -224,10 +216,7 @@ describe('Drill to detail modal', () => { openModalFromChartContext('Drill to detail by East Asia & Pacific'); // checking the filter - cy.getBySel('filter-val').should( - 'contain', - 'East Asia & Pacific', - ); + cy.getBySel('filter-val').should('contain', 'East Asia & Pacific'); }); }); }); diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/editmode.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/editmode.test.ts index 90b06d408f..c4c05160c9 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/editmode.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/editmode.test.ts @@ -18,42 +18,39 @@ */ import { SAMPLE_DASHBOARD_1 } from 'cypress/utils/urls'; import { drag, resize } from 'cypress/utils'; -import { - interceptGet, - interceptUpdate, -} from './utils'; import * as ace from 'brace'; -import {interceptFiltering as interceptCharts} from '../explore/utils'; +import { interceptGet, interceptUpdate } from './utils'; +import { interceptFiltering as interceptCharts } from '../explore/utils'; function editDashboard() { cy.getBySel('edit-dashboard-button').click(); } function closeModal() { - cy.getBySel('properties-modal-cancel-button').click({force: true}); + cy.getBySel('properties-modal-cancel-button').click({ force: true }); } function openProperties() { - cy.get('body') - .then($body => { + cy.get('body').then($body => { if ($body.find('[data-test="properties-modal-cancel-button"]').length) { closeModal(); } - cy.getBySel('actions-trigger').click({ force: true} ); - cy.getBySel('header-actions-menu').contains('Edit properties').click({ force: true} ); + cy.getBySel('actions-trigger').click({ force: true }); + cy.getBySel('header-actions-menu') + .contains('Edit properties') + .click({ force: true }); cy.wait(500); }); } function openAdvancedProperties() { - cy - .get('.ant-modal-body') + cy.get('.ant-modal-body') .contains('Advanced') .should('be.visible') .click({ force: true }); } -function dragComponent(component = 'Unicode Cloud', target='card-title') { +function dragComponent(component = 'Unicode Cloud', target = 'card-title') { drag(`[data-test="${target}"]`, component).to( '[data-test="grid-content"] [data-test="dragdroppable-object"]', ); @@ -75,8 +72,12 @@ function visitEdit() { } function selectColorScheme(color: string) { - cy.get('[data-test="dashboard-edit-properties-form"] [aria-label="Select color scheme"]').first().click(); - cy.getBySel(color).click(); + cy.get( + '[data-test="dashboard-edit-properties-form"] [aria-label="Select color scheme"]', + ) + .first() + .click(); + cy.getBySel(color).click(); } function applyChanges() { @@ -102,14 +103,14 @@ function assertMetadata(text: string) { }); } function clearMetadata() { - cy.get('#json_metadata').then(($jsonmetadata) => { - cy.wrap($jsonmetadata).type('{selectall} {backspace}'); - }); + cy.get('#json_metadata').then($jsonmetadata => { + cy.wrap($jsonmetadata).type('{selectall} {backspace}'); + }); } function writeMetadata(metadata: string) { - cy.get('#json_metadata').then(($jsonmetadata) => { - cy.wrap($jsonmetadata).type(metadata, {parseSpecialCharSequences: false}); + cy.get('#json_metadata').then($jsonmetadata => { + cy.wrap($jsonmetadata).type(metadata, { parseSpecialCharSequences: false }); }); } @@ -130,7 +131,7 @@ describe('Dashboard edit', () => { it('should accept a valid color scheme', () => { openAdvancedProperties(); - clearMetadata() + clearMetadata(); writeMetadata('{"color_scheme":"lyftColors"}'); applyChanges(); openProperties(); @@ -155,12 +156,12 @@ describe('Dashboard edit', () => { it('should not accept an invalid color scheme', () => { openAdvancedProperties(); - clearMetadata() - writeMetadata('{"color_scheme":"wrongcolorscheme"}'); - applyChanges(); - cy.get('.ant-modal-body') - .contains('A valid color scheme is required') - .should('be.visible'); + clearMetadata(); + writeMetadata('{"color_scheme":"wrongcolorscheme"}'); + applyChanges(); + cy.get('.ant-modal-body') + .contains('A valid color scheme is required') + .should('be.visible'); }); it('should edit the title', () => { @@ -193,7 +194,9 @@ describe('Dashboard edit', () => { interceptCharts(); cy.getBySel('dashboard-charts-filter-search-input').type('Unicode'); cy.wait('@filtering'); - cy.getBySel('chart-card').should('have.length', 1).contains('Unicode Cloud'); + cy.getBySel('chart-card') + .should('have.length', 1) + .contains('Unicode Cloud'); cy.getBySel('dashboard-charts-filter-search-input').clear(); }); @@ -203,7 +206,6 @@ describe('Dashboard edit', () => { discardChanges(); cy.getBySel('header-save-button').should('be.disabled'); }); - }); describe('Components', () => { @@ -242,12 +244,11 @@ describe('Dashboard edit', () => { ) .click(); - cy.getBySel('dashboard-component-chart-holder') - .contains('Click here to edit [markdown](https://bit.ly/1dQOfRK)'); + cy.getBySel('dashboard-component-chart-holder').contains( + 'Click here to edit [markdown](https://bit.ly/1dQOfRK)', + ); - cy.getBySel('dashboard-markdown-editor') - .click() - .type('Test resize'); + cy.getBySel('dashboard-markdown-editor').click().type('Test resize'); resize( '[data-test="dashboard-markdown-editor"] .resizable-container span div:last-child', @@ -278,13 +279,15 @@ describe('Dashboard edit', () => { dragComponent('Top 10 California Names Timeseries'); openProperties(); openAdvancedProperties(); - clearMetadata() - writeMetadata('{"color_scheme":"lyftColors","label_colors":{"Anthony":"red"}}') - applyChanges(); - saveChanges(); - cy.get('.line .nv-legend-symbol') - .first() - .should('have.css', 'fill', 'rgb(255, 0, 0)'); + clearMetadata(); + writeMetadata( + '{"color_scheme":"lyftColors","label_colors":{"Anthony":"red"}}', + ); + applyChanges(); + saveChanges(); + cy.get('.line .nv-legend-symbol') + .first() + .should('have.css', 'fill', 'rgb(255, 0, 0)'); }); }); diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/load.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/load.test.ts index f1c374b158..cd8ab210c6 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/load.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/load.test.ts @@ -16,9 +16,9 @@ * specific language governing permissions and limitations * under the License. */ -import { WORLD_HEALTH_CHARTS, interceptLog } from './utils'; import { WORLD_HEALTH_DASHBOARD } from 'cypress/utils/urls'; import { waitForChartLoad } from 'cypress/utils'; +import { WORLD_HEALTH_CHARTS, interceptLog } from './utils'; describe('Dashboard load', () => { before(() => { diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts index 0f50d4dd9d..cde4f70613 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts @@ -23,14 +23,12 @@ import { exploreView, dataTestChartName, } from 'cypress/support/directories'; -import { - cleanUp, - copyTestDashboard, - testItems, -} from './dashboard.helper'; import { waitForChartLoad } from 'cypress/utils'; -import {WORLD_HEALTH_CHARTS} from './utils'; -import { WORLD_HEALTH_DASHBOARD } from 'cypress/utils/urls'; +import { + WORLD_HEALTH_DASHBOARD, + DASHBOARD_LIST, + CHART_LIST, +} from 'cypress/utils/urls'; import { addCountryCodeFilter, @@ -57,8 +55,8 @@ import { valueNativeFilterOptions, validateFilterNameOnDashboard, } from './nativeFilter.helper'; -import { DASHBOARD_LIST } from 'cypress/utils/urls'; -import { CHART_LIST } from 'cypress/utils/urls'; +import { WORLD_HEALTH_CHARTS } from './utils'; +import { cleanUp, copyTestDashboard, testItems } from './dashboard.helper'; // TODO: fix flaky init logic and re-enable const milliseconds = new Date().getTime(); diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/utils.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/utils.ts index 36dc54b89f..19335ed3de 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/utils.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/utils.ts @@ -17,29 +17,29 @@ * under the License. */ - export const WORLD_HEALTH_CHARTS = [ - { name: '% Rural', viz: 'world_map' }, - { name: 'Most Populated Countries', viz: 'table' }, - { name: 'Region Filter', viz: 'filter_box' }, - { name: "World's Population", viz: 'big_number' }, - { name: 'Growth Rate', viz: 'line' }, - { name: 'Rural Breakdown', viz: 'sunburst' }, - { name: "World's Pop Growth", viz: 'area' }, - { name: 'Life Expectancy VS Rural %', viz: 'bubble' }, - { name: 'Treemap', viz: 'treemap' }, - { name: 'Box plot', viz: 'box_plot' }, - ] as const; +export const WORLD_HEALTH_CHARTS = [ + { name: '% Rural', viz: 'world_map' }, + { name: 'Most Populated Countries', viz: 'table' }, + { name: 'Region Filter', viz: 'filter_box' }, + { name: "World's Population", viz: 'big_number' }, + { name: 'Growth Rate', viz: 'line' }, + { name: 'Rural Breakdown', viz: 'sunburst' }, + { name: "World's Pop Growth", viz: 'area' }, + { name: 'Life Expectancy VS Rural %', viz: 'bubble' }, + { name: 'Treemap', viz: 'treemap' }, + { name: 'Box plot', viz: 'box_plot' }, +] as const; - export const ECHARTS_CHARTS = [ - { name: 'Number of Girls', viz: 'big_number_total' }, - { name: 'Participants', viz: 'big_number' }, - { name: 'Box plot', viz: 'box_plot' }, - { name: 'Genders', viz: 'pie' }, - { name: 'Energy Force Layout', viz: 'graph_chart' }, - ] as const; +export const ECHARTS_CHARTS = [ + { name: 'Number of Girls', viz: 'big_number_total' }, + { name: 'Participants', viz: 'big_number' }, + { name: 'Box plot', viz: 'box_plot' }, + { name: 'Genders', viz: 'pie' }, + { name: 'Energy Force Layout', viz: 'graph_chart' }, +] as const; export function interceptGet() { -cy.intercept('/api/v1/dashboard/*').as('get'); + cy.intercept('/api/v1/dashboard/*').as('get'); } export function interceptFiltering() { @@ -67,11 +67,11 @@ export function interceptLog() { } export function interceptFav() { - cy.intercept(`/superset/favstar/Dashboard/*/select/`).as('select'); + cy.intercept(`/superset/favstar/Dashboard/*/select/`).as('select'); } export function interceptUnfav() { - cy.intercept(`/superset/favstar/Dashboard/*/unselect/`).as('unselect'); + cy.intercept(`/superset/favstar/Dashboard/*/unselect/`).as('unselect'); } export function setFilter(filter: string, option: string) { @@ -82,4 +82,3 @@ export function setFilter(filter: string, option: string) { cy.wait('@filtering'); } - diff --git a/superset-frontend/cypress-base/cypress/support/index.ts b/superset-frontend/cypress-base/cypress/support/index.ts index 1c374eafc6..8ddb1d082a 100644 --- a/superset-frontend/cypress-base/cypress/support/index.ts +++ b/superset-frontend/cypress-base/cypress/support/index.ts @@ -28,14 +28,14 @@ let CHART_FIXTURES: Record<string, any>[] = []; Cypress.Commands.add('loadChartFixtures', () => cy.fixture('charts.json').then(charts => { - CHART_FIXTURES = charts - }) + CHART_FIXTURES = charts; + }), ); Cypress.Commands.add('loadDashboardFixtures', () => cy.fixture('dashboards.json').then(dashboards => { - DASHBOARD_FIXTURES = dashboards - }) + DASHBOARD_FIXTURES = dashboards; + }), ); before(() => { @@ -50,14 +50,16 @@ Cypress.Commands.add('cleanDashboards', () => cy.getDashboards().then((sampleDashboards: any) => { const deletableDashboards = []; for (let i = 0; i < DASHBOARD_FIXTURES.length; i += 1) { - const isInDb = sampleDashboards.find((d: any) => d.dashboard_title === DASHBOARD_FIXTURES[i].dashboard_title); + const fixture = DASHBOARD_FIXTURES[i]; + const isInDb = sampleDashboards.find( + (d: any) => d.dashboard_title === fixture.dashboard_title, + ); if (isInDb) { deletableDashboards.push(isInDb.id); } } if (deletableDashboards.length) { - return cy - .request({ + cy.request({ failOnStatusCode: false, method: 'DELETE', url: `api/v1/dashboard/?q=!(${deletableDashboards.join(',')})`, @@ -70,24 +72,25 @@ Cypress.Commands.add('cleanDashboards', () => 'X-CSRFToken': `${window.localStorage.getItem('access_token')}`, Referer: `${Cypress.config().baseUrl}/`, }, - }) - .then(resp => resp) + }).then(resp => resp); } - }) + }), ); Cypress.Commands.add('cleanCharts', () => cy.getCharts().then((sampleCharts: any) => { const deletableCharts = []; for (let i = 0; i < CHART_FIXTURES.length; i += 1) { - const isInDb = sampleCharts.find((c: any) => c.slice_name === CHART_FIXTURES[i].slice_name); + const fixture = CHART_FIXTURES[i]; + const isInDb = sampleCharts.find( + (c: any) => c.slice_name === fixture.slice_name, + ); if (isInDb) { deletableCharts.push(isInDb.id); } } if (deletableCharts) { - return cy - .request({ + cy.request({ failOnStatusCode: false, method: 'DELETE', url: `api/v1/chart/?q=!(${deletableCharts.join(',')})`, @@ -100,10 +103,9 @@ Cypress.Commands.add('cleanCharts', () => 'X-CSRFToken': `${window.localStorage.getItem('access_token')}`, Referer: `${Cypress.config().baseUrl}/`, }, - }) - .then(resp => resp) + }).then(resp => resp); } - }) + }), ); Cypress.Commands.add('getBySel', (selector, ...args) => @@ -252,9 +254,9 @@ Cypress.Commands.add('createSampleDashboards', () => 'X-CSRFToken': `${window.localStorage.getItem('access_token')}`, Referer: `${Cypress.config().baseUrl}/`, }, - }) + }); } - }) + }), ); Cypress.Commands.add('createSampleCharts', () => @@ -274,9 +276,9 @@ Cypress.Commands.add('createSampleCharts', () => 'X-CSRFToken': `${window.localStorage.getItem('access_token')}`, Referer: `${Cypress.config().baseUrl}/`, }, - }) + }); } - }) + }), ); Cypress.Commands.add( @@ -289,26 +291,28 @@ Cypress.Commands.add( if (dashboard) { cy.deleteDashboard(dashboard.id, failOnStatusCode); } - }) + }), ); -Cypress.Commands.add('deleteDashboard', (id: number, failOnStatusCode = false) => - cy - .request({ - failOnStatusCode, - method: 'DELETE', - url: `api/v1/dashboard/${id}`, - headers: { - Cookie: `csrf_access_token=${window.localStorage.getItem( - 'access_token', - )}`, - 'Content-Type': 'application/json', - Authorization: `Bearer ${TokenName}`, - 'X-CSRFToken': `${window.localStorage.getItem('access_token')}`, - Referer: `${Cypress.config().baseUrl}/`, - }, - }) - .then(resp => resp), +Cypress.Commands.add( + 'deleteDashboard', + (id: number, failOnStatusCode = false) => + cy + .request({ + failOnStatusCode, + method: 'DELETE', + url: `api/v1/dashboard/${id}`, + headers: { + Cookie: `csrf_access_token=${window.localStorage.getItem( + 'access_token', + )}`, + 'Content-Type': 'application/json', + Authorization: `Bearer ${TokenName}`, + 'X-CSRFToken': `${window.localStorage.getItem('access_token')}`, + Referer: `${Cypress.config().baseUrl}/`, + }, + }) + .then(resp => resp), ); Cypress.Commands.add('getDashboards', () => @@ -364,5 +368,5 @@ Cypress.Commands.add( if (chart) { cy.deleteChart(chart.id, failOnStatusCode); } - }) + }), ); diff --git a/superset-frontend/cypress-base/cypress/utils/index.ts b/superset-frontend/cypress-base/cypress/utils/index.ts index 2b2b482803..b685cc01e8 100644 --- a/superset-frontend/cypress-base/cypress/utils/index.ts +++ b/superset-frontend/cypress-base/cypress/utils/index.ts @@ -21,9 +21,9 @@ import { getChartAlias, Slice } from 'cypress/utils/vizPlugins'; export * from './vizPlugins'; export { default as parsePostForm } from './parsePostForm'; export interface ChartSpec { - name: string; - viz: string; - } + name: string; + viz: string; +} export function setGridMode(type: 'card' | 'list') { cy.get(`[aria-label="${type}-view"]`).click(); @@ -34,89 +34,89 @@ export function toggleBulkSelect() { } export function clearAllInputs() { - cy.get('[aria-label="close-circle"]').click({ multiple: true, force: true }); + cy.get('[aria-label="close-circle"]').click({ multiple: true, force: true }); } - const toSlicelike = ($chart: JQuery<HTMLElement>): Slice => ({ - slice_id: parseInt($chart.attr('data-test-chart-id')!, 10), - form_data: { - viz_type: $chart.attr('data-test-viz-type')!, - }, - }); +const toSlicelike = ($chart: JQuery<HTMLElement>): Slice => ({ + slice_id: parseInt($chart.attr('data-test-chart-id')!, 10), + form_data: { + viz_type: $chart.attr('data-test-viz-type')!, + }, +}); - export function getChartAliasBySpec(chart: ChartSpec) { - return getChartGridComponent(chart).then($chart => - cy.wrap(getChartAlias(toSlicelike($chart))), - ); - } +export function getChartAliasBySpec(chart: ChartSpec) { + return getChartGridComponent(chart).then($chart => + cy.wrap(getChartAlias(toSlicelike($chart))), + ); +} - export function getChartAliasesBySpec(charts: readonly ChartSpec[]) { - const aliases: string[] = []; - charts.forEach(chart => - getChartAliasBySpec(chart).then(alias => { - aliases.push(alias); - }), - ); - // Wrapping the aliases is key. - // That way callers can chain off this function - // and actually get the list of aliases. - return cy.wrap(aliases); - } +export function getChartAliasesBySpec(charts: readonly ChartSpec[]) { + const aliases: string[] = []; + charts.forEach(chart => + getChartAliasBySpec(chart).then(alias => { + aliases.push(alias); + }), + ); + // Wrapping the aliases is key. + // That way callers can chain off this function + // and actually get the list of aliases. + return cy.wrap(aliases); +} export function getChartGridComponent({ name, viz }: ChartSpec) { - return cy - .get(`[data-test-chart-name="${name}"]`) - .should('have.attr', 'data-test-viz-type', viz); - } + return cy + .get(`[data-test-chart-name="${name}"]`) + .should('have.attr', 'data-test-viz-type', viz); +} export function waitForChartLoad(chart: ChartSpec) { - return getChartGridComponent(chart).then(gridComponent => { - const chartId = gridComponent.attr('data-test-chart-id'); - // the chart should load in under half a minute - return ( - cy - // this id only becomes visible when the chart is loaded - .get(`#chart-id-${chartId}`, { - timeout: 30000, - }) - .should('be.visible') - // return the chart grid component - .then(() => gridComponent) - ); - }); - } + return getChartGridComponent(chart).then(gridComponent => { + const chartId = gridComponent.attr('data-test-chart-id'); + // the chart should load in under half a minute + return ( + cy + // this id only becomes visible when the chart is loaded + .get(`#chart-id-${chartId}`, { + timeout: 30000, + }) + .should('be.visible') + // return the chart grid component + .then(() => gridComponent) + ); + }); +} /** * Drag an element and drop it to another element. * Usage: * drag(source).to(target); */ - export function drag(selector: string, content: string | number | RegExp) { - const dataTransfer = { data: {} }; - return { - to(target: string | Cypress.Chainable) { - cy.get('.dragdroppable') - .contains(selector, content) - .trigger('mousedown', { which: 1, force: true }) - .trigger('dragstart', { dataTransfer, force: true }) - .trigger('drag', {force: true}); +export function drag(selector: string, content: string | number | RegExp) { + const dataTransfer = { data: {} }; + return { + to(target: string | Cypress.Chainable) { + cy.get('.dragdroppable') + .contains(selector, content) + .trigger('mousedown', { which: 1, force: true }) + .trigger('dragstart', { dataTransfer, force: true }) + .trigger('drag', { force: true }); - (typeof target === 'string' ? cy.get(target) : target) - .trigger('dragover', { dataTransfer, force: true }) - .trigger('drop', { dataTransfer, force: true }) - .trigger('dragend', { dataTransfer, force: true }) - .trigger('mouseup', { which: 1, force: true }); - }, - }; - } + (typeof target === 'string' ? cy.get(target) : target) + .trigger('dragover', { dataTransfer, force: true }) + .trigger('drop', { dataTransfer, force: true }) + .trigger('dragend', { dataTransfer, force: true }) + .trigger('mouseup', { which: 1, force: true }); + }, + }; +} - export function resize(selector: string) { - return { - to(cordX: number, cordY: number) { - cy.get(selector) - .trigger('mousedown', { which: 1, force: true }) - .trigger('mousemove', { which: 1, cordX, cordY, force: true }) - .trigger('mouseup', { which: 1, force: true }); - }, - }; - } \ No newline at end of file +export function resize(selector: string) { + return { + to(cordX: number, cordY: number) { + cy.get(selector) + .trigger('mousedown', { which: 1, force: true }) + .trigger('mousemove', { which: 1, cordX, cordY, force: true }) + .trigger('mouseup', { which: 1, force: true }); + }, + }; +} diff --git a/superset-frontend/cypress-base/cypress/utils/urls.ts b/superset-frontend/cypress-base/cypress/utils/urls.ts index beed748e44..3e8a629428 100644 --- a/superset-frontend/cypress-base/cypress/utils/urls.ts +++ b/superset-frontend/cypress-base/cypress/utils/urls.ts @@ -21,4 +21,4 @@ export const DASHBOARD_LIST = '/dashboard/list/'; export const CHART_LIST = '/chart/list/'; export const WORLD_HEALTH_DASHBOARD = '/superset/dashboard/world_health/'; export const SAMPLE_DASHBOARD_1 = '/superset/dashboard/1-sample-dashboard/'; -export const ECHARTS_DASHBOARD = '/superset/dashboard/echarts_dash/'; \ No newline at end of file +export const ECHARTS_DASHBOARD = '/superset/dashboard/echarts_dash/'; diff --git a/superset-frontend/cypress-base/package-lock.json b/superset-frontend/cypress-base/package-lock.json index 873900f546..7b5b69eddb 100644 --- a/superset-frontend/cypress-base/package-lock.json +++ b/superset-frontend/cypress-base/package-lock.json @@ -12,6 +12,7 @@ "@applitools/eyes-cypress": "^3.25.3", "@cypress/code-coverage": "^3.9.11", "@superset-ui/core": "^0.18.8", + "brace": "^0.11.1", "cy-verify-downloads": "^0.1.6", "querystringify": "^2.2.0", "react-dom": "^16.13.0", @@ -3577,6 +3578,11 @@ "node": ">=0.6" } }, + "node_modules/brace": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/brace/-/brace-0.11.1.tgz";, + "integrity": "sha512-Fc8Ne62jJlKHiG/ajlonC4Sd66Pq68fFwK4ihJGNZpGqboc324SQk+lRvMzpPRuJOmfrJefdG8/7JdWX4bzJ2Q==" + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz";, @@ -13216,6 +13222,11 @@ } } }, + "brace": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/brace/-/brace-0.11.1.tgz";, + "integrity": "sha512-Fc8Ne62jJlKHiG/ajlonC4Sd66Pq68fFwK4ihJGNZpGqboc324SQk+lRvMzpPRuJOmfrJefdG8/7JdWX4bzJ2Q==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz";, diff --git a/superset-frontend/cypress-base/package.json b/superset-frontend/cypress-base/package.json index 02c126406c..b28c684544 100644 --- a/superset-frontend/cypress-base/package.json +++ b/superset-frontend/cypress-base/package.json @@ -13,6 +13,7 @@ "@applitools/eyes-cypress": "^3.25.3", "@cypress/code-coverage": "^3.9.11", "@superset-ui/core": "^0.18.8", + "brace": "^0.11.1", "cy-verify-downloads": "^0.1.6", "querystringify": "^2.2.0", "react-dom": "^16.13.0", diff --git a/superset-frontend/src/components/Chart/DrillDetailModal.tsx b/superset-frontend/src/components/Chart/DrillDetailModal.tsx index 365fe3abc2..448cc2566f 100644 --- a/superset-frontend/src/components/Chart/DrillDetailModal.tsx +++ b/superset-frontend/src/components/Chart/DrillDetailModal.tsx @@ -91,7 +91,12 @@ const DrillDetailModal: React.FC<{ > {t('Edit chart')} </Button> - <Button data-test="close-drilltodetail-modal" buttonStyle="primary" buttonSize="small" onClick={closeModal}> + <Button + data-test="close-drilltodetail-modal" + buttonStyle="primary" + buttonSize="small" + onClick={closeModal} + > {t('Close')} </Button> </>
