From 1fb5e00d841faf7e79c6e5eaeb25754ee9673797 Mon Sep 17 00:00:00 2001 From: Elizabeth Thompson Date: Fri, 20 Sep 2024 18:07:10 -0700 Subject: [PATCH 1/2] split cypress files for less memory --- .../e2e/dashboard/horizontalFilterBar.test.ts | 248 +++++++++++++ .../e2e/dashboard/nativeFilters.test.ts | 349 +----------------- .../dashboard/shared_dashboard_functions.ts | 148 ++++++++ 3 files changed, 400 insertions(+), 345 deletions(-) create mode 100644 superset-frontend/cypress-base/cypress/e2e/dashboard/horizontalFilterBar.test.ts create mode 100644 superset-frontend/cypress-base/cypress/e2e/dashboard/shared_dashboard_functions.ts diff --git a/superset-frontend/cypress-base/cypress/e2e/dashboard/horizontalFilterBar.test.ts b/superset-frontend/cypress-base/cypress/e2e/dashboard/horizontalFilterBar.test.ts new file mode 100644 index 0000000000000..d9ed21258f20a --- /dev/null +++ b/superset-frontend/cypress-base/cypress/e2e/dashboard/horizontalFilterBar.test.ts @@ -0,0 +1,248 @@ +/** + * 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 { nativeFilters } from 'cypress/support/directories'; + +import { + addCountryNameFilter, + applyNativeFilterValueWithIndex, + enterNativeFilterEditModal, + inputNativeFilterDefaultValue, + saveNativeFilterSettings, + validateFilterNameOnDashboard, + testItems, + interceptFilterState, +} from './utils'; +import { + prepareDashboardFilters, + SAMPLE_CHART, + visitDashboard, +} from './shared_dashboard_functions'; + +function openMoreFilters(waitFilterState = true) { + interceptFilterState(); + cy.getBySel('dropdown-container-btn').click(); + + if (waitFilterState) { + cy.wait('@postFilterState'); + } +} + +function openVerticalFilterBar() { + cy.getBySel('dashboard-filters-panel').should('exist'); + cy.getBySel('filter-bar__expand-button').click(); +} + +function setFilterBarOrientation(orientation: 'vertical' | 'horizontal') { + cy.getBySel('filterbar-orientation-icon').click(); + cy.wait(250); + cy.getBySel('dropdown-selectable-icon-submenu') + .contains('Orientation of filter bar') + .should('exist') + .trigger('mouseover'); + + if (orientation === 'vertical') { + cy.get('.ant-dropdown-menu-item-selected') + .contains('Horizontal (Top)') + .should('exist'); + cy.get('.ant-dropdown-menu-item').contains('Vertical (Left)').click(); + cy.getBySel('dashboard-filters-panel').should('exist'); + } else { + cy.get('.ant-dropdown-menu-item-selected') + .contains('Vertical (Left)') + .should('exist'); + cy.get('.ant-dropdown-menu-item').contains('Horizontal (Top)').click(); + cy.getBySel('loading-indicator').should('exist'); + cy.getBySel('filter-bar').should('exist'); + cy.getBySel('dashboard-filters-panel').should('not.exist'); + } +} + +describe('Horizontal FilterBar', () => { + it('should go from vertical to horizontal and the opposite', () => { + visitDashboard(); + openVerticalFilterBar(); + setFilterBarOrientation('horizontal'); + setFilterBarOrientation('vertical'); + }); + + it('should show all default actions in horizontal mode', () => { + visitDashboard(); + openVerticalFilterBar(); + setFilterBarOrientation('horizontal'); + cy.getBySel('horizontal-filterbar-empty') + .contains('No filters are currently added to this dashboard.') + .should('exist'); + cy.getBySel('filter-bar__create-filter').should('exist'); + cy.getBySel('filterbar-action-buttons').should('exist'); + }); + + it('should stay in horizontal mode when reloading', () => { + visitDashboard(); + openVerticalFilterBar(); + setFilterBarOrientation('horizontal'); + cy.reload(); + cy.getBySel('dashboard-filters-panel').should('not.exist'); + }); + + it('should show all filters in available space on load', () => { + prepareDashboardFilters([ + { name: 'test_1', column: 'country_name', datasetId: 2 }, + { name: 'test_2', column: 'country_code', datasetId: 2 }, + { name: 'test_3', column: 'region', datasetId: 2 }, + ]); + setFilterBarOrientation('horizontal'); + cy.get('.filter-item-wrapper').should('have.length', 3); + }); + + it('should show "more filters" on window resizing up and down', () => { + prepareDashboardFilters([ + { name: 'test_1', column: 'country_name', datasetId: 2 }, + { name: 'test_2', column: 'country_code', datasetId: 2 }, + { name: 'test_3', column: 'region', datasetId: 2 }, + ]); + setFilterBarOrientation('horizontal'); + + cy.getBySel('form-item-value').should('have.length', 3); + cy.viewport(768, 1024); + cy.getBySel('form-item-value').should('have.length', 0); + openMoreFilters(false); + cy.getBySel('form-item-value').should('have.length', 3); + + cy.getBySel('filter-bar').click(); + cy.viewport(1000, 1024); + openMoreFilters(false); + cy.getBySel('form-item-value').should('have.length', 3); + + cy.getBySel('filter-bar').click(); + cy.viewport(1300, 1024); + cy.getBySel('form-item-value').should('have.length', 3); + cy.getBySel('dropdown-container-btn').should('not.exist'); + }); + + it('should show "more filters" and scroll', () => { + prepareDashboardFilters([ + { name: 'test_1', column: 'country_name', datasetId: 2 }, + { name: 'test_2', column: 'country_code', datasetId: 2 }, + { name: 'test_3', column: 'region', datasetId: 2 }, + { name: 'test_4', column: 'year', datasetId: 2 }, + { name: 'test_5', column: 'country_name', datasetId: 2 }, + { name: 'test_6', column: 'country_code', datasetId: 2 }, + { name: 'test_7', column: 'region', datasetId: 2 }, + { name: 'test_8', column: 'year', datasetId: 2 }, + { name: 'test_9', column: 'country_name', datasetId: 2 }, + { name: 'test_10', column: 'country_code', datasetId: 2 }, + { name: 'test_11', column: 'region', datasetId: 2 }, + { name: 'test_12', column: 'year', datasetId: 2 }, + ]); + setFilterBarOrientation('horizontal'); + cy.get('.filter-item-wrapper').should('have.length', 3); + openMoreFilters(); + cy.getBySel('form-item-value').should('have.length', 12); + cy.getBySel('filter-control-name').contains('test_10').should('be.visible'); + cy.getBySel('filter-control-name') + .contains('test_12') + .should('not.be.visible'); + cy.get('.ant-popover-inner-content').scrollTo('bottom'); + cy.getBySel('filter-control-name').contains('test_12').should('be.visible'); + }); + + it('should display newly added filter', () => { + visitDashboard(); + openVerticalFilterBar(); + setFilterBarOrientation('horizontal'); + + enterNativeFilterEditModal(false); + addCountryNameFilter(); + saveNativeFilterSettings([]); + validateFilterNameOnDashboard(testItems.topTenChart.filterColumn); + }); + + it('should spot changes in "more filters" and apply their values', () => { + cy.intercept(`/api/v1/chart/data?form_data=**`).as('chart'); + prepareDashboardFilters([ + { name: 'test_1', column: 'country_name', datasetId: 2 }, + { name: 'test_2', column: 'country_code', datasetId: 2 }, + { name: 'test_3', column: 'region', datasetId: 2 }, + { name: 'test_4', column: 'year', datasetId: 2 }, + { name: 'test_5', column: 'country_name', datasetId: 2 }, + { name: 'test_6', column: 'country_code', datasetId: 2 }, + { name: 'test_7', column: 'region', datasetId: 2 }, + { name: 'test_8', column: 'year', datasetId: 2 }, + { name: 'test_9', column: 'country_name', datasetId: 2 }, + { name: 'test_10', column: 'country_code', datasetId: 2 }, + { name: 'test_11', column: 'region', datasetId: 2 }, + { name: 'test_12', column: 'year', datasetId: 2 }, + ]); + setFilterBarOrientation('horizontal'); + openMoreFilters(); + applyNativeFilterValueWithIndex(8, testItems.filterDefaultValue); + cy.get(nativeFilters.applyFilter).click({ force: true }); + cy.wait('@chart'); + cy.get('.antd5-scroll-number.antd5-badge-count').should( + 'have.attr', + 'title', + '1', + ); + }); + + it('should focus filter and open "more filters" programmatically', () => { + prepareDashboardFilters([ + { name: 'test_1', column: 'country_name', datasetId: 2 }, + { name: 'test_2', column: 'country_code', datasetId: 2 }, + { name: 'test_3', column: 'region', datasetId: 2 }, + { name: 'test_4', column: 'year', datasetId: 2 }, + { name: 'test_5', column: 'country_name', datasetId: 2 }, + { name: 'test_6', column: 'country_code', datasetId: 2 }, + { name: 'test_7', column: 'region', datasetId: 2 }, + { name: 'test_8', column: 'year', datasetId: 2 }, + { name: 'test_9', column: 'country_name', datasetId: 2 }, + { name: 'test_10', column: 'country_code', datasetId: 2 }, + { name: 'test_11', column: 'region', datasetId: 2 }, + { name: 'test_12', column: 'year', datasetId: 2 }, + ]); + setFilterBarOrientation('horizontal'); + openMoreFilters(); + applyNativeFilterValueWithIndex(8, testItems.filterDefaultValue); + cy.get(nativeFilters.applyFilter).click({ force: true }); + cy.getBySel('slice-header').within(() => { + cy.get('.filter-counts').trigger('mouseover'); + }); + cy.get('.filterStatusPopover').contains('test_9').click(); + cy.getBySel('dropdown-content').should('be.visible'); + cy.get('.ant-select-focused').should('be.visible'); + }); + + it('should show tag count and one plain tag on focus and only count on blur in select ', () => { + prepareDashboardFilters([ + { name: 'test_1', column: 'country_name', datasetId: 2 }, + ]); + setFilterBarOrientation('horizontal'); + enterNativeFilterEditModal(); + inputNativeFilterDefaultValue('Albania'); + cy.get('.ant-select-selection-search-input').clear({ force: true }); + inputNativeFilterDefaultValue('Algeria', true); + saveNativeFilterSettings([SAMPLE_CHART]); + cy.getBySel('filter-bar').within(() => { + cy.get(nativeFilters.filterItem).contains('Albania').should('be.visible'); + cy.get(nativeFilters.filterItem).contains('+ 1 ...').should('be.visible'); + cy.get('.ant-select-selection-search-input').click(); + cy.get(nativeFilters.filterItem).contains('+ 2 ...').should('be.visible'); + }); + }); +}); diff --git a/superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.test.ts b/superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.test.ts index 44b26be9ea67b..72d1e189bc1d5 100644 --- a/superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.test.ts +++ b/superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.test.ts @@ -23,7 +23,6 @@ import { exploreView, dataTestChartName, } from 'cypress/support/directories'; -import { SAMPLE_DASHBOARD_1 } from 'cypress/utils/urls'; import { addCountryNameFilter, @@ -48,138 +47,11 @@ import { validateFilterNameOnDashboard, testItems, WORLD_HEALTH_CHARTS, - interceptGet, - interceptCharts, - interceptDatasets, - interceptFilterState, } from './utils'; - -const SAMPLE_CHART = { name: 'Most Populated Countries', viz: 'table' }; - -function visitDashboard(createSample = true) { - interceptCharts(); - interceptGet(); - interceptDatasets(); - - if (createSample) { - cy.createSampleDashboards([0]); - } - - cy.visit(SAMPLE_DASHBOARD_1); - cy.wait('@get'); - cy.wait('@getCharts'); - cy.wait('@getDatasets'); - cy.url().should('contain', 'native_filters_key'); -} - -function prepareDashboardFilters( - filters: { name: string; column: string; datasetId: number }[], -) { - cy.createSampleDashboards([0]); - cy.request({ - method: 'GET', - url: `api/v1/dashboard/1-sample-dashboard`, - }).then(res => { - const { body } = res; - const dashboardId = body.result.id; - const allFilters: Record[] = []; - filters.forEach((f, i) => { - allFilters.push({ - id: `NATIVE_FILTER-fLH0pxFQ${i}`, - controlValues: { - enableEmptyFilter: false, - defaultToFirstItem: false, - multiSelect: true, - searchAllOptions: false, - inverseSelection: false, - }, - name: f.name, - filterType: 'filter_select', - targets: [ - { - datasetId: f.datasetId, - column: { name: f.column }, - }, - ], - defaultDataMask: { - extraFormData: {}, - filterState: {}, - ownState: {}, - }, - cascadeParentIds: [], - scope: { - rootPath: ['ROOT_ID'], - excluded: [], - }, - type: 'NATIVE_FILTER', - description: '', - chartsInScope: [5], - tabsInScope: [], - }); - }); - if (dashboardId) { - const jsonMetadata = { - native_filter_configuration: allFilters, - timed_refresh_immune_slices: [], - expanded_slices: {}, - refresh_frequency: 0, - color_scheme: '', - label_colors: {}, - shared_label_colors: {}, - color_scheme_domain: [], - cross_filters_enabled: false, - positions: { - DASHBOARD_VERSION_KEY: 'v2', - ROOT_ID: { type: 'ROOT', id: 'ROOT_ID', children: ['GRID_ID'] }, - GRID_ID: { - type: 'GRID', - id: 'GRID_ID', - children: ['ROW-0rHnUz4nMA'], - parents: ['ROOT_ID'], - }, - HEADER_ID: { - id: 'HEADER_ID', - type: 'HEADER', - meta: { text: '1 - Sample dashboard' }, - }, - 'CHART-DF6EfI55F-': { - type: 'CHART', - id: 'CHART-DF6EfI55F-', - children: [], - parents: ['ROOT_ID', 'GRID_ID', 'ROW-0rHnUz4nMA'], - meta: { - width: 4, - height: 50, - chartId: 5, - sliceName: 'Most Populated Countries', - }, - }, - 'ROW-0rHnUz4nMA': { - type: 'ROW', - id: 'ROW-0rHnUz4nMA', - children: ['CHART-DF6EfI55F-'], - parents: ['ROOT_ID', 'GRID_ID'], - meta: { background: 'BACKGROUND_TRANSPARENT' }, - }, - }, - default_filters: '{}', - filter_scopes: {}, - chart_configuration: {}, - }; - - return cy - .request({ - method: 'PUT', - url: `api/v1/dashboard/${dashboardId}`, - body: { - json_metadata: JSON.stringify(jsonMetadata), - }, - }) - .then(() => visitDashboard(false)); - } - return cy; - }); -} +import { + prepareDashboardFilters, + SAMPLE_CHART, +} from './shared_dashboard_functions'; function selectFilter(index: number) { cy.get("[data-test='filter-title-container'] [draggable='true']") @@ -195,219 +67,6 @@ function closeFilterModal() { }); } -function openVerticalFilterBar() { - cy.getBySel('dashboard-filters-panel').should('exist'); - cy.getBySel('filter-bar__expand-button').click(); -} - -function setFilterBarOrientation(orientation: 'vertical' | 'horizontal') { - cy.getBySel('filterbar-orientation-icon').click(); - cy.wait(250); - cy.getBySel('dropdown-selectable-icon-submenu') - .contains('Orientation of filter bar') - .should('exist') - .trigger('mouseover'); - - if (orientation === 'vertical') { - cy.get('.ant-dropdown-menu-item-selected') - .contains('Horizontal (Top)') - .should('exist'); - cy.get('.ant-dropdown-menu-item').contains('Vertical (Left)').click(); - cy.getBySel('dashboard-filters-panel').should('exist'); - } else { - cy.get('.ant-dropdown-menu-item-selected') - .contains('Vertical (Left)') - .should('exist'); - cy.get('.ant-dropdown-menu-item').contains('Horizontal (Top)').click(); - cy.getBySel('loading-indicator').should('exist'); - cy.getBySel('filter-bar').should('exist'); - cy.getBySel('dashboard-filters-panel').should('not.exist'); - } -} - -function openMoreFilters(waitFilterState = true) { - interceptFilterState(); - cy.getBySel('dropdown-container-btn').click(); - - if (waitFilterState) { - cy.wait('@postFilterState'); - } -} - -describe('Horizontal FilterBar', () => { - it('should go from vertical to horizontal and the opposite', () => { - visitDashboard(); - openVerticalFilterBar(); - setFilterBarOrientation('horizontal'); - setFilterBarOrientation('vertical'); - }); - - it('should show all default actions in horizontal mode', () => { - visitDashboard(); - openVerticalFilterBar(); - setFilterBarOrientation('horizontal'); - cy.getBySel('horizontal-filterbar-empty') - .contains('No filters are currently added to this dashboard.') - .should('exist'); - cy.getBySel('filter-bar__create-filter').should('exist'); - cy.getBySel('filterbar-action-buttons').should('exist'); - }); - - it('should stay in horizontal mode when reloading', () => { - visitDashboard(); - openVerticalFilterBar(); - setFilterBarOrientation('horizontal'); - cy.reload(); - cy.getBySel('dashboard-filters-panel').should('not.exist'); - }); - - it('should show all filters in available space on load', () => { - prepareDashboardFilters([ - { name: 'test_1', column: 'country_name', datasetId: 2 }, - { name: 'test_2', column: 'country_code', datasetId: 2 }, - { name: 'test_3', column: 'region', datasetId: 2 }, - ]); - setFilterBarOrientation('horizontal'); - cy.get('.filter-item-wrapper').should('have.length', 3); - }); - - it('should show "more filters" on window resizing up and down', () => { - prepareDashboardFilters([ - { name: 'test_1', column: 'country_name', datasetId: 2 }, - { name: 'test_2', column: 'country_code', datasetId: 2 }, - { name: 'test_3', column: 'region', datasetId: 2 }, - ]); - setFilterBarOrientation('horizontal'); - - cy.getBySel('form-item-value').should('have.length', 3); - cy.viewport(768, 1024); - cy.getBySel('form-item-value').should('have.length', 0); - openMoreFilters(false); - cy.getBySel('form-item-value').should('have.length', 3); - - cy.getBySel('filter-bar').click(); - cy.viewport(1000, 1024); - openMoreFilters(false); - cy.getBySel('form-item-value').should('have.length', 3); - - cy.getBySel('filter-bar').click(); - cy.viewport(1300, 1024); - cy.getBySel('form-item-value').should('have.length', 3); - cy.getBySel('dropdown-container-btn').should('not.exist'); - }); - - it('should show "more filters" and scroll', () => { - prepareDashboardFilters([ - { name: 'test_1', column: 'country_name', datasetId: 2 }, - { name: 'test_2', column: 'country_code', datasetId: 2 }, - { name: 'test_3', column: 'region', datasetId: 2 }, - { name: 'test_4', column: 'year', datasetId: 2 }, - { name: 'test_5', column: 'country_name', datasetId: 2 }, - { name: 'test_6', column: 'country_code', datasetId: 2 }, - { name: 'test_7', column: 'region', datasetId: 2 }, - { name: 'test_8', column: 'year', datasetId: 2 }, - { name: 'test_9', column: 'country_name', datasetId: 2 }, - { name: 'test_10', column: 'country_code', datasetId: 2 }, - { name: 'test_11', column: 'region', datasetId: 2 }, - { name: 'test_12', column: 'year', datasetId: 2 }, - ]); - setFilterBarOrientation('horizontal'); - cy.get('.filter-item-wrapper').should('have.length', 3); - openMoreFilters(); - cy.getBySel('form-item-value').should('have.length', 12); - cy.getBySel('filter-control-name').contains('test_10').should('be.visible'); - cy.getBySel('filter-control-name') - .contains('test_12') - .should('not.be.visible'); - cy.get('.ant-popover-inner-content').scrollTo('bottom'); - cy.getBySel('filter-control-name').contains('test_12').should('be.visible'); - }); - - it('should display newly added filter', () => { - visitDashboard(); - openVerticalFilterBar(); - setFilterBarOrientation('horizontal'); - - enterNativeFilterEditModal(false); - addCountryNameFilter(); - saveNativeFilterSettings([]); - validateFilterNameOnDashboard(testItems.topTenChart.filterColumn); - }); - - it('should spot changes in "more filters" and apply their values', () => { - cy.intercept(`/api/v1/chart/data?form_data=**`).as('chart'); - prepareDashboardFilters([ - { name: 'test_1', column: 'country_name', datasetId: 2 }, - { name: 'test_2', column: 'country_code', datasetId: 2 }, - { name: 'test_3', column: 'region', datasetId: 2 }, - { name: 'test_4', column: 'year', datasetId: 2 }, - { name: 'test_5', column: 'country_name', datasetId: 2 }, - { name: 'test_6', column: 'country_code', datasetId: 2 }, - { name: 'test_7', column: 'region', datasetId: 2 }, - { name: 'test_8', column: 'year', datasetId: 2 }, - { name: 'test_9', column: 'country_name', datasetId: 2 }, - { name: 'test_10', column: 'country_code', datasetId: 2 }, - { name: 'test_11', column: 'region', datasetId: 2 }, - { name: 'test_12', column: 'year', datasetId: 2 }, - ]); - setFilterBarOrientation('horizontal'); - openMoreFilters(); - applyNativeFilterValueWithIndex(8, testItems.filterDefaultValue); - cy.get(nativeFilters.applyFilter).click({ force: true }); - cy.wait('@chart'); - cy.get('.antd5-scroll-number.antd5-badge-count').should( - 'have.attr', - 'title', - '1', - ); - }); - - it('should focus filter and open "more filters" programmatically', () => { - prepareDashboardFilters([ - { name: 'test_1', column: 'country_name', datasetId: 2 }, - { name: 'test_2', column: 'country_code', datasetId: 2 }, - { name: 'test_3', column: 'region', datasetId: 2 }, - { name: 'test_4', column: 'year', datasetId: 2 }, - { name: 'test_5', column: 'country_name', datasetId: 2 }, - { name: 'test_6', column: 'country_code', datasetId: 2 }, - { name: 'test_7', column: 'region', datasetId: 2 }, - { name: 'test_8', column: 'year', datasetId: 2 }, - { name: 'test_9', column: 'country_name', datasetId: 2 }, - { name: 'test_10', column: 'country_code', datasetId: 2 }, - { name: 'test_11', column: 'region', datasetId: 2 }, - { name: 'test_12', column: 'year', datasetId: 2 }, - ]); - setFilterBarOrientation('horizontal'); - openMoreFilters(); - applyNativeFilterValueWithIndex(8, testItems.filterDefaultValue); - cy.get(nativeFilters.applyFilter).click({ force: true }); - cy.getBySel('slice-header').within(() => { - cy.get('.filter-counts').trigger('mouseover'); - }); - cy.get('.filterStatusPopover').contains('test_9').click(); - cy.getBySel('dropdown-content').should('be.visible'); - cy.get('.ant-select-focused').should('be.visible'); - }); - - it('should show tag count and one plain tag on focus and only count on blur in select ', () => { - prepareDashboardFilters([ - { name: 'test_1', column: 'country_name', datasetId: 2 }, - ]); - setFilterBarOrientation('horizontal'); - enterNativeFilterEditModal(); - inputNativeFilterDefaultValue('Albania'); - cy.get('.ant-select-selection-search-input').clear({ force: true }); - inputNativeFilterDefaultValue('Algeria', true); - saveNativeFilterSettings([SAMPLE_CHART]); - cy.getBySel('filter-bar').within(() => { - cy.get(nativeFilters.filterItem).contains('Albania').should('be.visible'); - cy.get(nativeFilters.filterItem).contains('+ 1 ...').should('be.visible'); - cy.get('.ant-select-selection-search-input').click(); - cy.get(nativeFilters.filterItem).contains('+ 2 ...').should('be.visible'); - }); - }); -}); - describe('Native filters', () => { describe('Nativefilters tests initial state required', () => { beforeEach(() => { diff --git a/superset-frontend/cypress-base/cypress/e2e/dashboard/shared_dashboard_functions.ts b/superset-frontend/cypress-base/cypress/e2e/dashboard/shared_dashboard_functions.ts new file mode 100644 index 0000000000000..ad47116d34546 --- /dev/null +++ b/superset-frontend/cypress-base/cypress/e2e/dashboard/shared_dashboard_functions.ts @@ -0,0 +1,148 @@ +/** + * 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 { SAMPLE_DASHBOARD_1 } from 'cypress/utils/urls'; +import { interceptCharts, interceptDatasets, interceptGet } from './utils'; + +export const SAMPLE_CHART = { name: 'Most Populated Countries', viz: 'table' }; + +export function visitDashboard(createSample = true) { + interceptCharts(); + interceptGet(); + interceptDatasets(); + + if (createSample) { + cy.createSampleDashboards([0]); + } + + cy.visit(SAMPLE_DASHBOARD_1); + cy.wait('@get'); + cy.wait('@getCharts'); + cy.wait('@getDatasets'); + cy.url().should('contain', 'native_filters_key'); +} + +export function prepareDashboardFilters( + filters: { name: string; column: string; datasetId: number }[], +) { + cy.createSampleDashboards([0]); + cy.request({ + method: 'GET', + url: `api/v1/dashboard/1-sample-dashboard`, + }).then(res => { + const { body } = res; + const dashboardId = body.result.id; + const allFilters: Record[] = []; + filters.forEach((f, i) => { + allFilters.push({ + id: `NATIVE_FILTER-fLH0pxFQ${i}`, + controlValues: { + enableEmptyFilter: false, + defaultToFirstItem: false, + multiSelect: true, + searchAllOptions: false, + inverseSelection: false, + }, + name: f.name, + filterType: 'filter_select', + targets: [ + { + datasetId: f.datasetId, + column: { name: f.column }, + }, + ], + defaultDataMask: { + extraFormData: {}, + filterState: {}, + ownState: {}, + }, + cascadeParentIds: [], + scope: { + rootPath: ['ROOT_ID'], + excluded: [], + }, + type: 'NATIVE_FILTER', + description: '', + chartsInScope: [5], + tabsInScope: [], + }); + }); + if (dashboardId) { + const jsonMetadata = { + native_filter_configuration: allFilters, + timed_refresh_immune_slices: [], + expanded_slices: {}, + refresh_frequency: 0, + color_scheme: '', + label_colors: {}, + shared_label_colors: {}, + color_scheme_domain: [], + cross_filters_enabled: false, + positions: { + DASHBOARD_VERSION_KEY: 'v2', + ROOT_ID: { type: 'ROOT', id: 'ROOT_ID', children: ['GRID_ID'] }, + GRID_ID: { + type: 'GRID', + id: 'GRID_ID', + children: ['ROW-0rHnUz4nMA'], + parents: ['ROOT_ID'], + }, + HEADER_ID: { + id: 'HEADER_ID', + type: 'HEADER', + meta: { text: '1 - Sample dashboard' }, + }, + 'CHART-DF6EfI55F-': { + type: 'CHART', + id: 'CHART-DF6EfI55F-', + children: [], + parents: ['ROOT_ID', 'GRID_ID', 'ROW-0rHnUz4nMA'], + meta: { + width: 4, + height: 50, + chartId: 5, + sliceName: 'Most Populated Countries', + }, + }, + 'ROW-0rHnUz4nMA': { + type: 'ROW', + id: 'ROW-0rHnUz4nMA', + children: ['CHART-DF6EfI55F-'], + parents: ['ROOT_ID', 'GRID_ID'], + meta: { background: 'BACKGROUND_TRANSPARENT' }, + }, + }, + default_filters: '{}', + filter_scopes: {}, + chart_configuration: {}, + }; + + return cy + .request({ + method: 'PUT', + url: `api/v1/dashboard/${dashboardId}`, + body: { + json_metadata: JSON.stringify(jsonMetadata), + }, + }) + .then(() => visitDashboard(false)); + } + return cy; + }); +} From 650b5c8d0d39458f221d19ff6d4ec663525c5dbd Mon Sep 17 00:00:00 2001 From: Elizabeth Thompson Date: Fri, 20 Sep 2024 18:15:22 -0700 Subject: [PATCH 2/2] stop using shared memory --- scripts/cypress_run.py | 7 ++++++- .../cypress/e2e/dashboard/nativeFilters.test.ts | 1 + 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/scripts/cypress_run.py b/scripts/cypress_run.py index 1154a3661dda3..e2bb5bb6982e7 100644 --- a/scripts/cypress_run.py +++ b/scripts/cypress_run.py @@ -54,6 +54,9 @@ def get_cypress_cmd( build_id = generate_build_id() browser = os.getenv("CYPRESS_BROWSER", "chrome") + # Add --disable-dev-shm-usage for Chrome browser + chrome_flags = "--disable-dev-shm-usage" + if use_dashboard: # Run using cypress.io service spec: str = "cypress/e2e/*/**/*" @@ -61,7 +64,8 @@ def get_cypress_cmd( f"{XVFB_PRE_CMD} " f'{cypress_cmd} --spec "{spec}" --browser {browser} ' f"--record --group {group} --tag {REPO},{GITHUB_EVENT_NAME} " - f"--parallel --ci-build-id {build_id}" + f"--parallel --ci-build-id {build_id} " + f"-- {chrome_flags}" ) else: # Run local, but split the execution @@ -73,6 +77,7 @@ def get_cypress_cmd( f"{XVFB_PRE_CMD} " f"{cypress_cmd} --browser {browser} " f'--spec "{spec_list_str}" ' + f"-- {chrome_flags}" ) return cmd diff --git a/superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.test.ts b/superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.test.ts index 72d1e189bc1d5..8a67841de12ae 100644 --- a/superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.test.ts +++ b/superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.test.ts @@ -51,6 +51,7 @@ import { import { prepareDashboardFilters, SAMPLE_CHART, + visitDashboard, } from './shared_dashboard_functions'; function selectFilter(index: number) {