From ee27a594bcf6e4db56174d029665b2ac2fc1df38 Mon Sep 17 00:00:00 2001 From: Jinghua Yao Date: Fri, 22 Apr 2022 09:40:25 -0700 Subject: [PATCH 01/13] refactor and add new test --- .../integration/dashboard/dashboard.helper.ts | 444 +++++++- .../dashboard/nativeFilters.test.ts | 987 +++++++++--------- .../cypress/support/directories.ts | 18 + 3 files changed, 959 insertions(+), 490 deletions(-) diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts index 9822f7035952d..fe653349ba3b3 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts @@ -2,8 +2,10 @@ import { getChartAlias, Slice } from 'cypress/utils/vizPlugins'; import { dashboardView, editDashboardView, + exploreView, nativeFilters, } from 'cypress/support/directories'; +import { FORM_DATA_DEFAULTS } from '../explore/visualizations/shared.helper'; /** * Licensed to the Apache Software Foundation (ASF) under one @@ -27,8 +29,9 @@ export const WORLD_HEALTH_DASHBOARD = '/superset/dashboard/world_health/'; export const TABBED_DASHBOARD = '/superset/dashboard/tabbed_dash/'; export const testItems = { - dashboard: 'Cypress Sales Dashboard', + dashboard: 'Cypress test Dashboard', dataset: 'Vehicle Sales', + datasetForNativeFilter: 'wb_health_population', chart: 'Cypress chart', newChart: 'New Cypress Chart', createdDashboard: 'New Dashboard', @@ -37,6 +40,26 @@ export const testItems = { bulkFirstNameDashboard: 'First Dash', bulkSecondNameDashboard: 'Second Dash', worldBanksDataCopy: `World Bank's Data [copy]`, + filterType: { + value: 'Value', + numerical: 'Numerical range', + timeColumn: 'Time column', + timeGrain: 'Time grain', + timeRange: 'Time range', + }, + topTenGamesChart: { + name: 'Most Populated Countries', + filterColumn: 'country_name', + filterColumnYear: 'year', + filterColumnRegion: 'region', + filterColumnCountryCode: 'country_code', + }, + filterDefaultValue: 'United States', + filterOtherCountry: 'China', + filterTimeGrain: 'Month', + filterTimeColumn: 'created', + filterNumericalColumn: 'SP_RUR_TOTL_ZS' + }; export const CHECK_DASHBOARD_FAVORITE_ENDPOINT = @@ -55,6 +78,39 @@ export const WORLD_HEALTH_CHARTS = [ { name: 'Box plot', viz: 'box_plot' }, ] as const; +export const nativeFilterTooltips = { + searchAllFilterOptions: + 'By default, each filter loads at most 1000 choices at the initial page load. Check this box if you have more than 1000 filter values and want to enable dynamically searching that loads filter values as users type (may add stress to your database).', + defaultToFirstItem: 'When using this option, default value can’t be set', + inverseSelection: 'Exclude selected values', + required: 'User must select a value before applying the filter', + multipleSelect: 'Allow selecting multiple values', + defaultValue: + 'Default value must be set when "Filter value is required" is checked', + }; + + export const nativeFilterOptions = [ + 'Filter has default value', + 'Multiple select', + 'Filter value is required', + 'Filter is hierarchical', + 'Default to first item', + 'Inverse selection', + 'Search all filter options', + 'Pre-filter available values', + 'Sort filter values', + ]; + export const valueNativeFilterOptions = [ + 'Pre-filter available values', + 'Sort filter values', + 'Filter has default value', + 'Select first filter value by default', + 'Can select multiple values', + 'Dynamically search all filter values', + 'Inverse selection', + 'Filter value is required', + ]; + /** Used to specify charts expected by the test suite */ export interface ChartSpec { name: string; @@ -158,6 +214,81 @@ export function cleanUp() { cy.deleteChartByName(testItems.newChart); } +/************************************************************************** + * Copy dashboard for testing purpose + * @returns {None} + * @summary helper for copy dashboard for testing purpose + **************************************************************************/ + export function copyTestDashboard(dashboard: string){ + cy.intercept('POST', '**/copy_dash/**').as('copy'); + cy.intercept('**/api/v1/dashboard/**').as('dashboard'); + cy.intercept('GET', '**/api/v1/dataset/**').as('datasetLoad'); + cy.intercept('**/api/v1/dashboard/?q=**').as('dashboardsList'); + cy.visit('dashboard/list/'); + cy.contains('Actions'); + cy.wait('@dashboardsList').then((xhr) => { + const dashboards = xhr.response?.body.result; + /* eslint-disable no-unused-expressions */ + expect(dashboards).not.to.be.undefined; + const testDashboard = dashboards.find( + (d: { dashboard_title: string }) => + d.dashboard_title === `${dashboard}`, + ); + cy.visit(testDashboard.url); + }); + cy.get(dashboardView.threeDotsMenuIcon).should('be.visible').click(); + cy.get(dashboardView.saveAsMenuOption).click(); + cy + .get(dashboardView.saveModal.dashboardNameInput) + .should('be.visible') + .clear() + .type(testItems.dashboard); + cy.get(dashboardView.saveModal.saveButton).click(); + cy + .wait('@copy', { timeout: 45000 }) + .its('response.statusCode') + .should('eq', 200); +} + +/************************************************************************** + * Expend Native filter from the left panel on dashboard + * @returns {None} + * @summary helper for expend native filter + **************************************************************************/ + export function expandFilterOnLeftPanel() { + return cy + .get(nativeFilters.filterFromDashboardView.expand) + .click({force: true}); + } + + /************************************************************************** + * Collapes Native Filter from the left panel on dashboard + * @returns {None} + * @summary helper for collape native filter + **************************************************************************/ + export function collapseFilterOnLeftPanel() { + cy + .get(nativeFilters.filterFromDashboardView.collapse) + .should('be.visible') + .click(); + cy + .get(nativeFilters.filterFromDashboardView.collapse) + .should('not.be.visible'); + } + + /************************************************************************** + * Enter Native Filter edit modal from the left panel on dashboard + * @returns {None} + * @summary helper for enter native filter edit modal + **************************************************************************/ + export function enterNativeFilterEditModal() { + cy + .get(nativeFilters.filterFromDashboardView.createFilterButton) + .should('be.visible') + .click(); + cy.get(nativeFilters.modal.container).should('be.visible'); + } + /** ************************************************************************ * Clicks on new filter button * @returns {None} @@ -175,40 +306,94 @@ export function clickOnAddFilterInModal() { }); } -/** ************************************************************************ +/************************************************************************** * Fills value native filter form with basic information + * @param {string} type type for filter: Value, Numerical range,Time column,Time grain,Time range * @param {string} name name for filter * @param {string} dataset which dataset should be used * @param {string} filterColumn which column should be used * @returns {None} * @summary helper for filling value native filter form - ************************************************************************* */ -export function fillValueNativeFilterForm( + **************************************************************************/ + export function fillNativeFilterForm( + type: string, name: string, - dataset: string, - filterColumn: string, -) { - cy.get(nativeFilters.modal.container) - .find(nativeFilters.filtersPanel.filterName) - .last() - .click({ scrollBehavior: false }) - .type(name, { scrollBehavior: false }); - cy.get(nativeFilters.modal.container) + dataset?: string, + filterColumn?: string + ) { + cy + .get(nativeFilters.filtersPanel.filterTypeInput) + .find(nativeFilters.filtersPanel.filterTypeItem) + .click({multiple: true ,force: true}); + cy.get(`[label="${type}"]`).click({ multiple: true, force: true }); + cy + .get(nativeFilters.modal.container) + .find(nativeFilters.filtersPanel.filterName) + .last() + .click({ scrollBehavior: false }) + .type(name, { scrollBehavior: false }); + if (dataset) { + cy + .get(nativeFilters.modal.container) .find(nativeFilters.filtersPanel.datasetName) .last() - .click({ scrollBehavior: false }) - .type(`${dataset}{enter}`, { scrollBehavior: false }); + .click({ force: true, scrollBehavior: false }) + .type(`${dataset}`, { scrollBehavior: false }); + cy.get(nativeFilters.silentLoading).should('not.exist'); + cy.get(`[label="${dataset}"]`).click( {multiple: true, force: true}); + } cy.get(nativeFilters.silentLoading).should('not.exist'); - cy.get(nativeFilters.filtersPanel.filterInfoInput) + if (filterColumn) { + cy + .get(nativeFilters.filtersPanel.filterInfoInput) .last() .should('be.visible') .click({ force: true }); - cy.get(nativeFilters.filtersPanel.filterInfoInput).last().type(filterColumn); - cy.get(nativeFilters.filtersPanel.inputDropdown) + cy.get(nativeFilters.filtersPanel.filterInfoInput).last().type(filterColumn); + cy + .get(nativeFilters.filtersPanel.inputDropdown) .should('be.visible', { timeout: 20000 }) .last() .click(); -} + } + cy.get(nativeFilters.silentLoading).should('not.exist'); + } + +// /** ************************************************************************ +// * Fills value native filter form with basic information +// * @param {string} name name for filter +// * @param {string} dataset which dataset should be used +// * @param {string} filterColumn which column should be used +// * @returns {None} +// * @summary helper for filling value native filter form +// ************************************************************************* */ +// export function fillValueNativeFilterForm( +// name: string, +// dataset: string, +// filterColumn: string, +// ) { +// cy.get(nativeFilters.modal.container) +// .find(nativeFilters.filtersPanel.filterName) +// .last() +// .click({ scrollBehavior: false }) +// .type(name, { scrollBehavior: false }); +// cy.get(nativeFilters.modal.container) +// .find(nativeFilters.filtersPanel.datasetName) +// .last() +// .click({ scrollBehavior: false }) +// .type(`${dataset}{enter}`, { scrollBehavior: false }); +// cy.get(nativeFilters.silentLoading).should('not.exist'); +// cy.get(nativeFilters.filtersPanel.filterInfoInput) +// .last() +// .should('be.visible') +// .click({ force: true }); +// cy.get(nativeFilters.filtersPanel.filterInfoInput).last().type(filterColumn); +// cy.get(nativeFilters.filtersPanel.inputDropdown) +// .should('be.visible', { timeout: 20000 }) +// .last() +// .click(); +// } + /** ************************************************************************ * Get native filter placeholder e.g 9 options * @param {number} index which input it fills @@ -253,3 +438,224 @@ export function addParentFilterWithValue(index: number, value: string) { .type(`${value}{enter}`, { delay: 30, force: true }); }); } + + +/************************************************************************** + * Create test chart for time column filter test + * @returns {null} + * @summary helper Create test chart for time column filter test + **************************************************************************/ + export function createTimeColumnTestChart(){ + const VIZ_DEFAULTS = { + ...FORM_DATA_DEFAULTS, + viz_type: 'echarts_timeseries', + datasource: '13__table', + granularity_sqla: 'purpose__last_set', + time_range_endpoints: ['inclusive', 'exclusive'], + time_grain_sqla: 'P1D', + time_range: 'No filter', + metrics: ['count'], + comparison_type: 'values', + forecastPeriods: 10, + forecastInterval: 0.8, + x_axis_title_margin: 15, + y_axis_title_margin: 15, + y_axis_title_position: 'Left', + color_scheme: 'supersetColors', + seriesType: 'line', + only_total: true, + opacity: 0.2, + markerSize: 6, + legendType: 'scroll', + legendOrientation: 'top', + x_axis_time_format: 'smart_date', + rich_tooltip: true, + tooltipTimeFormat: 'smart_date', + y_axis_format: 'SMART_NUMBER', + }; + cy.visitChartByParams({ + ...VIZ_DEFAULTS, + }); + cy + .get(exploreView.controlPanel.runButton) + .should('exist', { timeout: 10000 }); + cy.get(exploreView.controlPanel.saveQuery).click(); + cy.get(exploreView.saveModal.modal).within(() => { + cy + .get(exploreView.saveModal.chartNameInput) + .type(`${testItems.chart}{enter}`); + cy + .get(exploreView.saveModal.dashboardNameInput) + .type(`${testItems.dashboard}{enter}`, { delay: 100 }); + cy.get(exploreView.saveModal.saveAndGoToDashboard).click(); + }); +} + +/************************************************************************** + * Save Native Filter Settings + * @returns {None} + * @summary helper for save native filters settings + **************************************************************************/ +export function saveNativeFilterSettings() { + cy + .get(nativeFilters.modal.footer) + .contains('Save') + .should('be.visible') + .click(); + cy.get(nativeFilters.modal.container).should('not.exist'); +} + +/************************************************************************** + * Cancel Native fitler settings + * @returns {None} + * @summary helper for cancel native filters settings + **************************************************************************/ +export function cancelNativeFilterSettings(){ + cy + .get(nativeFilters.modal.footer) + .find(nativeFilters.modal.cancelButton) + .should('be.visible') + .click(); + cy + .get(nativeFilters.modal.alertXUnsavedFilters) + .should('have.text', 'There are unsaved changes.') + .should('be.visible'); + cy + .get(nativeFilters.modal.footer) + .find(nativeFilters.modal.yesCancelButton) + .contains('cancel') + .should('be.visible') + .click(); + cy.get(nativeFilters.modal.container).should('not.exist'); +} + +/************************************************************************** + * Close dashboard toast message + * @returns {None} + * @summary helper for close dashboard toast message in order to make test stable + **************************************************************************/ +export function closeDashboardToastMessage(){ + cy.get('body').then(($body) => { + if ($body.find(dashboardView.dashboardAlert.modal).length > 0) { + //evaluates as true if button exists at all + cy.get(dashboardView.dashboardAlert.modal).then(($header) => { + if ($header.is(':visible')) { + cy.get(dashboardView.dashboardAlert.closeButton).click({ force: true }); + cy + .get(dashboardView.dashboardAlert.closeButton) + .should('not.exist', { timeout: 10000 }); + } + }); + } + }); +} + +/************************************************************************** + * Validate filter name on dashboard + * @param name: filter name to validate + * @return {null} + * @summary helper for validate filter name on dashboard + **************************************************************************/ +export function validateFilterNameOnDashboard(name: string) { + cy + .get(nativeFilters.filterFromDashboardView.filterName) + .should('be.visible', { timeout: 40000 }) + .contains(`${name}`) +} + +/************************************************************************** + * Validate filter content on dashboard + * @param filterContent: filter content to validate + * @return {null} + * @summary helper for validate filter content on dashboard + **************************************************************************/ +export function validateFilterContentOnDashboard(filterContent: string){ + cy + .get(nativeFilters.filterFromDashboardView.filterContent) + .contains(`${filterContent}`) + .should('be.visible'); +} + +/************************************************************************** + * Delete Native filter + * @return {null} + * @summary helper for delete native filter + **************************************************************************/ +export function deleteNativeFilter() { + cy.get(nativeFilters.filtersList.removeIcon).first().click(); +} + +/************************************************************************** + * Undo delete Native filter + * @return {null} + * @summary helper for undo delete native filter + **************************************************************************/ +export function undoDeleteNativeFilter() { + deleteNativeFilter(); + cy.contains('Undo?').click(); +} + +/************************************************************************** + * Check Native Filter tooltip content + * @param index: tooltip indext to check + * @param value: tooltip value to check + * @return {null} + * @summary helper for checking native filter tooltip content by index + **************************************************************************/ +export function checkNativeFilterTooltip(index: number,value: string) { + cy + .get(nativeFilters.filterConfigurationSections.infoTooltip) + .eq(index) + .trigger('mouseover'); + cy.contains(`${value}`); +} + +/************************************************************************** + * Apply advanced time range filter on dashboard + * @param startRange: starting time range + * @param endRange: ending time range + * @return {null} + * @summary helper for applying advanced time range filter on dashboard with customize time range + **************************************************************************/ +export function applyAdvancedTimeRangeFilterOnDashboard(startRange?: string,endRange?: string){ + cy.get('.control-label').contains('RANGE TYPE').should('be.visible'); + cy + .get('.ant-popover-content .ant-select-selector') + .should('be.visible') + .click(); + cy.get(`[label="Advanced"]`).should('be.visible').click(); + cy.get('.section-title').contains('Advanced Time Range').should('be.visible'); + if(startRange){ + cy.get('.ant-popover-inner-content') + .find('[class^=ant-input]') + .first().type(`${startRange}`); + } + if(endRange){ + cy.get('.ant-popover-inner-content') + .find('[class^=ant-input]') + .last().type(`${endRange}`); + } + cy.get(dashboardView.timeRangeModal.applyButton).click(); + cy.get(nativeFilters.applyFilter).click(); +} + +/************************************************************************** + * Input default valule in Native filter in filter settings + * @param defaultValue: default value for native filter + * @return {null} + * @summary helper for input default valule in Native filter in filter settings + **************************************************************************/ +export function inputNativeFilterDefaultValue(defaultValue: string){ + cy.contains('Filter has default value').click(); + cy.contains('Default value is required').should('be.visible'); + cy + .get(nativeFilters.filterConfigurationSections.filterPlaceholder) + .contains('options') + .should('be.visible'); + cy + .get(nativeFilters.filterConfigurationSections.collapsedSectionContainer) + .first() + .get(nativeFilters.filtersPanel.columnEmptyInput) + .type(`${defaultValue}{enter}`); +} + 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 2177c9c4fe4cd..87de30b7483cc 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts @@ -21,21 +21,38 @@ import { dashboardView, nativeFilters, exploreView, + dataTestChartName, } from 'cypress/support/directories'; import { + addParentFilterWithValue, + applyAdvancedTimeRangeFilterOnDashboard, + applyNativeFilterValueWithIndex, + cancelNativeFilterSettings, + copyTestDashboard, + checkNativeFilterTooltip, cleanUp, - testItems, - WORLD_HEALTH_CHARTS, - waitForChartLoad, clickOnAddFilterInModal, - fillValueNativeFilterForm, + closeDashboardToastMessage, + collapseFilterOnLeftPanel, + createTimeColumnTestChart, + deleteNativeFilter, + enterNativeFilterEditModal, + expandFilterOnLeftPanel, + fillNativeFilterForm, getNativeFilterPlaceholderWithIndex, - addParentFilterWithValue, - applyNativeFilterValueWithIndex, -} from './dashboard.helper'; + inputNativeFilterDefaultValue, + nativeFilterTooltips, + saveNativeFilterSettings, + testItems, + undoDeleteNativeFilter, + validateFilterContentOnDashboard, + validateFilterNameOnDashboard, + waitForChartLoad, + WORLD_HEALTH_CHARTS, + valueNativeFilterOptions + } from './dashboard.helper'; import { DASHBOARD_LIST } from '../dashboard_list/dashboard_list.helper'; import { CHART_LIST } from '../chart_list/chart_list.helper'; -import { FORM_DATA_DEFAULTS } from '../explore/visualizations/shared.helper'; const getTestTitle = ( test: Mocha.Suite = (Cypress as any).mocha.getRunner().suite.ctx.test, @@ -52,62 +69,30 @@ describe('Nativefilters Sanity test', () => { beforeEach(() => { cy.login(); cleanUp(); - cy.intercept('/api/v1/dashboard/?q=**').as('dashboardsList'); - cy.intercept('POST', '**/copy_dash/*').as('copy'); - cy.intercept('/api/v1/dashboard/*').as('dashboard'); - cy.intercept('GET', '**/api/v1/dataset/**').as('datasetLoad'); - cy.intercept('**/api/v1/dashboard/?q=**').as('dashboardsList'); - cy.visit('dashboard/list/'); - cy.contains('Actions'); - cy.wait('@dashboardsList').then(xhr => { - const dashboards = xhr.response?.body.result; - /* eslint-disable no-unused-expressions */ - expect(dashboards).not.to.be.undefined; - const worldBankDashboard = dashboards.find( - (d: { dashboard_title: string }) => - d.dashboard_title === "World Bank's Data", - ); - cy.visit(worldBankDashboard.url); - }); + copyTestDashboard("World Bank's Data"); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); - cy.get(dashboardView.threeDotsMenuIcon).should('be.visible').click(); - cy.get(dashboardView.saveAsMenuOption).should('be.visible').click(); - cy.get(dashboardView.saveModal.dashboardNameInput) - .should('be.visible') - .clear() - .type(testItems.dashboard); - cy.get(dashboardView.saveModal.saveButton).click(); - cy.wait('@copy', { timeout: 45000 }) - .its('response.statusCode') - .should('eq', 200); + closeDashboardToastMessage() + }); afterEach(() => { cleanUp(); }); it('User can expand / retract native filter sidebar on a dashboard', () => { - cy.get(nativeFilters.createFilterButton).should('not.exist'); - cy.get(nativeFilters.filterFromDashboardView.expand) - .should('be.visible') - .click(); - cy.get(nativeFilters.createFilterButton).should('be.visible'); - cy.get(nativeFilters.filterFromDashboardView.expand).should( - 'not.be.visible', - ); - cy.get(nativeFilters.filterFromDashboardView.collapse) - .should('be.visible') - .click(); - cy.get(nativeFilters.filterFromDashboardView.collapse).should( - 'not.be.visible', - ); + cy.get(nativeFilters.addFilterButton.button).should('not.exist'); + expandFilterOnLeftPanel(); + cy + .get(nativeFilters.filterFromDashboardView.createFilterButton) + .should('be.visible'); + cy.get(nativeFilters.filterFromDashboardView.expand).should('not.be.visible'); + collapseFilterOnLeftPanel(); }); - it('User can enter filter edit pop-up by clicking on pencil icon', () => { - cy.get(nativeFilters.filterFromDashboardView.expand) - .should('be.visible') - .click(); - cy.get(nativeFilters.createFilterButton).should('be.visible').click(); - cy.get(nativeFilters.modal.container).should('be.visible'); + + it('User can enter filter edit pop-up by clicking on native filter edit icon', () => { + expandFilterOnLeftPanel(); + enterNativeFilterEditModal(); }); + it('User can add a new native filter', () => { let filterKey: string; const removeFirstChar = (search: string) => @@ -118,31 +103,15 @@ describe('Nativefilters Sanity test', () => { filterKey = queryParams.native_filters_key as string; expect(typeof filterKey).eq('string'); }); - cy.get(nativeFilters.filterFromDashboardView.expand).click({ force: true }); - cy.get(nativeFilters.createFilterButton).should('be.visible').click(); - cy.get(nativeFilters.modal.container) - .find(nativeFilters.filtersPanel.filterName) - .click({ force: true }) - .type('Country name'); - cy.get(nativeFilters.modal.container) - .find(nativeFilters.filtersPanel.datasetName) - .click({ force: true }) - .within(() => - cy.get('input').type('wb_health_population{enter}', { force: true }), - ); - - cy.get(`${nativeFilters.filtersPanel.filterInfoInput}:visible:last`) - .last() - .focus() - .type('country_name'); - cy.get(nativeFilters.filtersPanel.inputDropdown) - .should('be.visible', { timeout: 20000 }) - .last() - .click(); - cy.get(nativeFilters.modal.footer) - .contains('Save') - .should('be.visible') - .click(); + expandFilterOnLeftPanel(); + enterNativeFilterEditModal(); + cy.wait('@datasetLoad'); + fillNativeFilterForm( + testItems.filterType.value, + testItems.topTenGamesChart.filterColumn, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumn); + saveNativeFilterSettings(); cy.wait(3000); cy.location().then(loc => { const queryParams = qs.parse(removeFirstChar(loc.search)); @@ -152,416 +121,176 @@ describe('Nativefilters Sanity test', () => { cy.wait(3000); cy.get(nativeFilters.modal.container).should('not.exist'); }); - it('User can delete a native filter', () => { - cy.get(nativeFilters.createFilterButton).click({ force: true }); - cy.get(nativeFilters.modal.container).should('be.visible'); + it('User can delete a native filter', () => { + expandFilterOnLeftPanel(); + enterNativeFilterEditModal(); cy.get(nativeFilters.filtersList.removeIcon).first().click(); cy.contains('Restore Filter').should('not.exist', { timeout: 10000 }); - - cy.get(nativeFilters.modal.footer) - .contains('Save') - .should('be.visible') - .click(); - }); - it('User can cancel changes in native filter', () => { - cy.get(nativeFilters.createFilterButton).click({ force: true }); - cy.get(nativeFilters.modal.container) - .find(nativeFilters.filtersPanel.filterName) - .click({ force: true }) - .type('suffix'); - cy.get(nativeFilters.modal.container) - .find(nativeFilters.filtersPanel.datasetName) - .should('be.visible'); - cy.get(nativeFilters.modal.footer) - .find(nativeFilters.modal.cancelButton) - .should('be.visible') - .click(); - cy.get(nativeFilters.modal.alertXUnsavedFilters).should('be.visible'); - // remove native filter - cy.get(nativeFilters.modal.footer) - .find(nativeFilters.modal.yesCancelButton) - .contains('cancel') - .should('be.visible') - .click({ force: true }); - - cy.get(nativeFilters.createFilterButton).click({ force: true }); + saveNativeFilterSettings(); + }); + + it('User can cancel changes in native filter', () => { + expandFilterOnLeftPanel(); + enterNativeFilterEditModal(); + cy.wait(['@datasetLoad', '@datasetLoad']); + fillNativeFilterForm(testItems.filterType.value,'suffix',testItems.datasetForNativeFilter,) + cancelNativeFilterSettings(); + enterNativeFilterEditModal(); cy.get(nativeFilters.filtersList.removeIcon).first().click(); cy.contains('You have removed this filter.').should('be.visible'); - cy.get(nativeFilters.modal.footer) - .find(nativeFilters.modal.saveButton) - .should('be.visible') - .click(); - cy.get(nativeFilters.filtersPanel.filterName).should('not.exist'); - }); - it('User can cancel creating a new filter', () => { - cy.get(nativeFilters.filterFromDashboardView.expand) - .should('be.visible') - .click(); - cy.get(nativeFilters.createFilterButton).should('be.visible').click(); - cy.get(nativeFilters.modal.container).should('be.visible'); - - cy.get(nativeFilters.modal.footer) - .find(nativeFilters.modal.cancelButton) - .should('be.visible') - .click(); - cy.get(nativeFilters.modal.alertXUnsavedFilters) - .should('have.text', 'There are unsaved changes.') - .should('be.visible'); - cy.get(nativeFilters.modal.footer) - .find(nativeFilters.modal.yesCancelButton) - .contains('cancel') - .should('be.visible') - .click(); - cy.get(nativeFilters.modal.container).should('not.exist'); - }); - it('User can undo deleting a native filter', () => { - cy.get(nativeFilters.filterFromDashboardView.expand) - .should('be.visible') - .click(); - cy.get(nativeFilters.createFilterButton).should('be.visible').click(); - cy.get(nativeFilters.modal.container).should('be.visible'); - cy.get(nativeFilters.modal.container) - .find(nativeFilters.filtersPanel.filterName) - .click({ force: true }) - .type('Country name'); - cy.get(nativeFilters.modal.container) - .find(nativeFilters.filtersPanel.datasetName) - .click({ force: true }) - .within(() => - cy.get('input').type('wb_health_population{enter}', { force: true }), - ); - - cy.get('.loading inline-centered css-101mkpk').should('not.exist'); - // hack for unclickable country_name - cy.wait(5000); - cy.get(nativeFilters.filtersPanel.filterInfoInput) - .last() - .should('be.visible') - .click({ force: true }); - cy.get(nativeFilters.filtersPanel.filterInfoInput) - .last() - .type('country_name'); - cy.get(nativeFilters.filtersPanel.inputDropdown) - .should('be.visible', { timeout: 20000 }) - .last() - .click(); - cy.get(nativeFilters.modal.footer) - .contains('Save') - .should('be.visible') - .click(); - cy.get(nativeFilters.filterFromDashboardView.filterName) - .should('be.visible') - .contains('Country name'); - cy.get(nativeFilters.createFilterButton).should('be.visible').click(); - cy.get(nativeFilters.modal.container).should('be.visible'); - cy.get(nativeFilters.filtersList.removeIcon).first().click(); - cy.contains('Undo?').click(); - }); - it('Verify setting options and tooltips for value filter', () => { - cy.get(nativeFilters.filterFromDashboardView.expand).click({ force: true }); - cy.get(nativeFilters.createFilterButton).should('be.visible').click(); + saveNativeFilterSettings(); + }); + + it('User can cancel creating a new filter', () => { + expandFilterOnLeftPanel(); + enterNativeFilterEditModal(); + cancelNativeFilterSettings(); + }); + + it('User can undo deleting a native filter', () => { + expandFilterOnLeftPanel(); + enterNativeFilterEditModal(); + fillNativeFilterForm( + testItems.filterType.value, + testItems.topTenGamesChart.filterColumn, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumn); + saveNativeFilterSettings(); + WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); + validateFilterNameOnDashboard(testItems.topTenGamesChart.filterColumn); + enterNativeFilterEditModal(); + undoDeleteNativeFilter(); + }); + + it('Verify setting options and tooltips for value filter', () => { + expandFilterOnLeftPanel(); + enterNativeFilterEditModal(); + cy.contains('Filter value is required').should('be.visible').click(); + checkNativeFilterTooltip(0,nativeFilterTooltips.defaultValue); cy.get(nativeFilters.modal.container).should('be.visible'); - [ - 'Filter has default value', - 'Can select multiple values', - 'Filter value is required', - 'Select first filter value by default', - 'Inverse selection', - 'Dynamically search all filter values', - 'Pre-filter available values', - 'Sort filter values', - ].forEach(el => { - cy.contains(el); + valueNativeFilterOptions.forEach((el) => { + cy.contains(el); }); - cy.get(nativeFilters.filterConfigurationSections.checkedCheckbox).contains( - 'Can select multiple values', - ); - cy.get(nativeFilters.filterConfigurationSections.infoTooltip) - .eq(0) - .trigger('mouseover', { force: true }); - cy.contains('User must select a value before applying the filter'); - - cy.get(nativeFilters.filterConfigurationSections.infoTooltip) - .eq(1) - .trigger('mouseover', { force: true }); - cy.contains('When using this option, default value can’t be set'); - - cy.get(nativeFilters.filterConfigurationSections.infoTooltip) - .eq(2) - .trigger('mouseover', { force: true }); - cy.contains( - 'By default, each filter loads at most 1000 choices at the initial page load. Check this box if you have more than 1000 filter values and want to enable dynamically searching that loads filter values as users type (may add stress to your database).', - ); - cy.get(nativeFilters.filterConfigurationSections.infoTooltip) - .eq(3) - .trigger('mouseover', { force: true }); - cy.contains('Exclude selected values'); + cy.contains('Values are dependent on other filters').should('not.exist'); + cy + .get(nativeFilters.filterConfigurationSections.checkedCheckbox) + .contains('Can select multiple values'); + checkNativeFilterTooltip(1,nativeFilterTooltips.required); + checkNativeFilterTooltip(2,nativeFilterTooltips.defaultToFirstItem); + checkNativeFilterTooltip(3,nativeFilterTooltips.searchAllFilterOptions); + checkNativeFilterTooltip(4,nativeFilterTooltips.inverseSelection); + clickOnAddFilterInModal(); + cy.contains('Values are dependent on other filters').should('exist'); }); + it('User can create a time range filter', () => { - cy.get(nativeFilters.filterFromDashboardView.expand).click({ force: true }); - cy.get(nativeFilters.filterFromDashboardView.createFilterButton) - .should('be.visible') - .click(); - cy.get(nativeFilters.filtersPanel.filterTypeInput) - .find(nativeFilters.filtersPanel.filterTypeItem) - .click({ force: true }); - cy.get('[label="Time range"]').click(); - cy.get(nativeFilters.modal.container) - .find(nativeFilters.filtersPanel.filterName) - .click() - .clear() - .type('time range'); - cy.get(nativeFilters.modal.footer) - .contains('Save') - .should('be.visible') - .click(); + expandFilterOnLeftPanel(); + enterNativeFilterEditModal(); + fillNativeFilterForm(testItems.filterType.timeRange,testItems.filterType.timeRange,); cy.intercept(`/api/v1/chart/data?form_data=**`).as('chart'); - cy.get(dashboardView.salesDashboardSpecific.vehicleSalesFilterTimeRange) - .should('be.visible') - .click(); - cy.get('.control-label').contains('RANGE TYPE').should('be.visible'); - cy.get('.ant-popover-content .ant-select-selector') - .should('be.visible') - .click(); - cy.get('[label="Advanced"]').should('be.visible').click(); - cy.get('.section-title') - .contains('Advanced Time Range') - .should('be.visible'); - cy.get('.ant-popover-inner-content') - .find('[class^=ant-input]') - .first() - .type('2005-12-17'); - cy.get(dashboardView.timeRangeModal.applyButton).click(); - cy.get(nativeFilters.applyFilter).click(); + saveNativeFilterSettings(); + cy.wait('@chart'); + cy + .get(dashboardView.salesDashboardSpecific.vehicleSalesFilterTimeRange) + .should('be.visible') + .click(); + applyAdvancedTimeRangeFilterOnDashboard('2005-12-17','2006-12-17'); cy.wait('@chart'); - cy.url().then(u => { - const ur = new URL(u); - expect(ur.search).to.include('native_filters'); + cy.url().then((u) => { + const ur = new URL(u); + expect(ur.search).to.include('native_filters'); }); - cy.get(nativeFilters.filterFromDashboardView.filterName) - .contains('time range') - .should('be.visible'); - cy.get(nativeFilters.filterFromDashboardView.timeRangeFilterContent) - .contains('2005-12-17') - .should('be.visible'); + validateFilterNameOnDashboard(testItems.filterType.timeRange,); + validateFilterContentOnDashboard('2005-12-17'); }); it("User can check 'Filter has default value'", () => { - cy.get(nativeFilters.filterFromDashboardView.expand).click({ force: true }); - cy.get(nativeFilters.createFilterButton) - .should('be.visible') - .click({ force: true }); - cy.get(nativeFilters.modal.container).should('be.visible'); - cy.get(nativeFilters.filtersPanel.filterTypeInput) - .find(nativeFilters.filtersPanel.filterTypeItem) - .click({ force: true }); - cy.get('[label="Value"]').click(); - cy.get(nativeFilters.modal.container) - .find(nativeFilters.filtersPanel.filterName) - .click({ force: true }) - .clear() - .type('country_name'); - - cy.get(nativeFilters.modal.container) - .find(nativeFilters.filtersPanel.datasetName) - .click({ force: true }) - .within(() => - cy.get('input').type('wb_health_population{enter}', { force: true }), - ); - // hack for unclickable datetime - cy.wait(5000); - cy.get(nativeFilters.filtersPanel.filterInfoInput) - .last() - .click({ force: true }); - cy.get(nativeFilters.filtersPanel.filterInfoInput) - .last() - .type('country_name'); - cy.get(nativeFilters.filtersPanel.inputDropdown) - .should('be.visible', { timeout: 20000 }) - .last() - .click(); - cy.contains('Filter has default value').click(); - cy.contains('Default value is required'); - cy.get(nativeFilters.modal.defaultValueCheck).should('be.visible'); - cy.get(nativeFilters.filtersPanel.columnEmptyInput) - .last() - .type('United States{enter}'); - cy.get(nativeFilters.modal.footer) - .find(nativeFilters.modal.saveButton) - .should('be.visible') - .click({ force: true }); - cy.get(nativeFilters.filterFromDashboardView.filterContent).contains( - 'United States', - ); - cy.get('.line').within(() => { - cy.contains('United States').should('be.visible'); - }); + expandFilterOnLeftPanel(); + enterNativeFilterEditModal(); + fillNativeFilterForm( + testItems.filterType.value, + testItems.topTenGamesChart.filterColumn, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumn); + inputNativeFilterDefaultValue(testItems.filterDefaultValue); + saveNativeFilterSettings(); + validateFilterContentOnDashboard(testItems.filterDefaultValue); }); it('User can create a time grain filter', () => { - const VIZ_DEFAULTS = { - ...FORM_DATA_DEFAULTS, - viz_type: 'echarts_timeseries', - datasource: '3__table', - granularity_sqla: 'purpose__last_set', - time_grain_sqla: 'P1D', - time_range: 'No filter', - metrics: ['count'], - comparison_type: 'values', - forecastPeriods: 10, - forecastInterval: 0.8, - x_axis_title_margin: 15, - y_axis_title_margin: 15, - y_axis_title_position: 'Left', - color_scheme: 'supersetColors', - seriesType: 'line', - only_total: true, - opacity: 0.2, - markerSize: 6, - legendType: 'scroll', - legendOrientation: 'top', - x_axis_time_format: 'smart_date', - rich_tooltip: true, - tooltipTimeFormat: 'smart_date', - y_axis_format: 'SMART_NUMBER', - }; - cy.visitChartByParams({ - ...VIZ_DEFAULTS, - }); - cy.get(exploreView.controlPanel.runButton).should('be.visible', { - timeout: 10000, - }); - cy.get(exploreView.controlPanel.saveQuery).click(); - cy.get(exploreView.saveModal.modal).within(() => { - cy.get(exploreView.saveModal.chartNameInput).type( - `${testItems.chart}{enter}`, - ); - cy.get(exploreView.saveModal.dashboardNameInput).type( - `${testItems.dashboard}{enter}`, - { delay: 100, force: true }, - ); - cy.get(exploreView.saveModal.saveAndGoToDashboard).click(); - }); - - cy.get(nativeFilters.filterFromDashboardView.expand).click({ force: true }); - cy.get(nativeFilters.filterFromDashboardView.createFilterButton) - .should('be.visible') - .click(); - cy.get(nativeFilters.filtersPanel.filterTypeInput) - .find(nativeFilters.filtersPanel.filterTypeItem) - .click({ force: true }); - cy.get('[label="Time grain"]').click(); - cy.get(nativeFilters.modal.container) - .find(nativeFilters.filtersPanel.filterName) - .click() - .clear() - .type('time grain'); - cy.get(nativeFilters.modal.container) - .find(nativeFilters.filtersPanel.datasetName) - .click() - .type('wb_health_population'); - cy.get(nativeFilters.silentLoading).should('not.exist'); - cy.get('[label="wb_health_population"]').click(); - cy.get(nativeFilters.modal.footer) - .contains('Save') - .should('be.visible') - .click(); + expandFilterOnLeftPanel(); + enterNativeFilterEditModal(); + fillNativeFilterForm(testItems.filterType.timeGrain,testItems.filterType.timeGrain,testItems.datasetForNativeFilter); cy.intercept(`/api/v1/chart/data?form_data=**`).as('chart'); - cy.get(nativeFilters.modal.container).should('not.exist'); - cy.get(nativeFilters.filterFromDashboardView.filterValueInput) - .should('be.visible', { timeout: 10000 }) - .click() - .type('Month{enter}'); + saveNativeFilterSettings(); + cy.wait('@chart'); + applyNativeFilterValueWithIndex(0,testItems.filterTimeGrain); cy.get(nativeFilters.applyFilter).click(); cy.wait('@chart'); - cy.url().then(u => { - const ur = new URL(u); - expect(ur.search).to.include('native_filters'); + cy.url().then((u) => { + const ur = new URL(u); + expect(ur.search).to.include('native_filters'); }); - cy.get(nativeFilters.filterFromDashboardView.filterName) - .contains('time grain') - .should('be.visible'); - cy.get(nativeFilters.filterFromDashboardView.filterContent) - .contains('Month') - .should('be.visible'); + validateFilterNameOnDashboard(testItems.filterType.timeGrain); + validateFilterContentOnDashboard(testItems.filterTimeGrain); }); - it('User can create a time column filter', () => { - cy.get(nativeFilters.filterFromDashboardView.expand).click({ force: true }); - cy.get(nativeFilters.filterFromDashboardView.createFilterButton) - .should('be.visible') - .click(); - cy.get(nativeFilters.filtersPanel.filterTypeInput) - .find(nativeFilters.filtersPanel.filterTypeItem) - .click({ force: true }); - cy.get('[label="Time column"]').click({ force: true }); - cy.get(nativeFilters.modal.container) - .find(nativeFilters.filtersPanel.filterName) - .click({ force: true }) - .clear() - .type('time column'); - cy.get(nativeFilters.modal.container) - .find(nativeFilters.filtersPanel.datasetName) - .click() - .type('wb_health_population'); - cy.get(nativeFilters.silentLoading).should('not.exist'); - cy.get('[label="wb_health_population"]').click(); - cy.get(nativeFilters.modal.footer) - .contains('Save') - .should('be.visible') - .click(); + it('User can create a time column filter', () => { + createTimeColumnTestChart(); + expandFilterOnLeftPanel(); + enterNativeFilterEditModal(); + fillNativeFilterForm(testItems.filterType.timeColumn,testItems.filterType.timeColumn,testItems.datasetForNativeFilter); + saveNativeFilterSettings(); cy.intercept(`/api/v1/chart/data?form_data=**`).as('chart'); cy.get(nativeFilters.modal.container).should('not.exist'); // assert that native filter is created - cy.get(nativeFilters.filterFromDashboardView.filterName) - .should('be.visible') - .contains('time column'); - cy.get(nativeFilters.filterFromDashboardView.filterValueInput) - .should('be.visible', { timeout: 10000 }) - .click() - .type('year{enter}'); + validateFilterNameOnDashboard(testItems.filterType.timeColumn); + + applyNativeFilterValueWithIndex(0,testItems.topTenGamesChart.filterColumnYear); cy.get(nativeFilters.applyFilter).click({ force: true }); cy.wait('@chart'); - cy.get(nativeFilters.filterFromDashboardView.filterContent) - .contains('year') - .should('be.visible'); + validateFilterContentOnDashboard(testItems.topTenGamesChart.filterColumnYear); }); - it('User can create a value filter', () => { - cy.get(nativeFilters.filterFromDashboardView.expand).click({ force: true }); - cy.get(nativeFilters.filterFromDashboardView.createFilterButton) - .should('be.visible') - .click(); - cy.get(nativeFilters.modal.container).should('be.visible'); - cy.get('body').type('{home}'); - cy.get(nativeFilters.filtersPanel.filterTypeInput) - .click({ scrollBehavior: false }) - .type('{home}Value{enter}', { scrollBehavior: false }); + it('User can create a time range filter', () => { + expandFilterOnLeftPanel(); + enterNativeFilterEditModal(); + fillNativeFilterForm(testItems.filterType.timeRange,testItems.filterType.timeRange,); + cy.intercept(`/api/v1/chart/data?form_data=**`).as('chart'); + saveNativeFilterSettings(); + cy.wait('@chart'); + cy + .get(dashboardView.salesDashboardSpecific.vehicleSalesFilterTimeRange) + .should('be.visible') + .click(); + applyAdvancedTimeRangeFilterOnDashboard('2005-12-17'); + cy.wait('@chart'); + cy.url().then((u) => { + const ur = new URL(u); + expect(ur.search).to.include('native_filters'); + }); + validateFilterNameOnDashboard(testItems.filterType.timeRange,); + cy.get(nativeFilters.filterFromDashboardView.timeRangeFilterContent) + .contains('2005-12-17') + .should('be.visible'); + }); + + it('User can create a value filter', () => { + expandFilterOnLeftPanel(); + enterNativeFilterEditModal(); + cy.wait(['@datasetLoad', '@datasetLoad']); + cy.get('body').type('{home}'); + fillNativeFilterForm( + testItems.filterType.value, + testItems.topTenGamesChart.filterColumn, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumn); cy.get(nativeFilters.filtersPanel.filterTypeInput) .find(nativeFilters.filtersPanel.filterTypeItem) - .should('have.text', 'Value'); - cy.get(nativeFilters.modal.container) - .find(nativeFilters.filtersPanel.filterName) - .click({ scrollBehavior: false }) - .clear() - .type('country_name', { scrollBehavior: false }); - - cy.get(nativeFilters.silentLoading).should('not.exist'); - cy.get(nativeFilters.filtersPanel.filterInfoInput) - .last() - .should('be.visible') - .click({ force: true }); - cy.get(nativeFilters.filtersPanel.filterInfoInput) - .last() - .type('country_name {enter}'); - cy.get(nativeFilters.modal.footer) - .find(nativeFilters.modal.saveButton) - .should('be.visible') - .click({ force: true }); - cy.get(nativeFilters.filterFromDashboardView.filterName) - .should('be.visible', { timeout: 40000 }) - .contains('country_name'); + .should('have.text', testItems.filterType.value,); + saveNativeFilterSettings(); + validateFilterNameOnDashboard(testItems.topTenGamesChart.filterColumn); }); it('User can create parent filters using "Values are dependent on other filters"', () => { @@ -570,13 +299,18 @@ describe('Nativefilters Sanity test', () => { .click({ force: true }); cy.get(nativeFilters.filterFromDashboardView.createFilterButton).click(); // Create parent filter 'region'. - fillValueNativeFilterForm('region', 'wb_health_population', 'region'); + fillNativeFilterForm( + testItems.filterType.value, + testItems.topTenGamesChart.filterColumnRegion, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumnRegion); // Create filter 'country_name' depend on region filter. clickOnAddFilterInModal(); - fillValueNativeFilterForm( - 'country_name', - 'wb_health_population', - 'country_name', + fillNativeFilterForm( + testItems.filterType.value, + testItems.topTenGamesChart.filterColumn, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumn, ); cy.get(nativeFilters.filterConfigurationSections.displayedSection).within( () => { @@ -585,15 +319,12 @@ describe('Nativefilters Sanity test', () => { .click(); }, ); - addParentFilterWithValue(0, 'region'); + addParentFilterWithValue(0, testItems.topTenGamesChart.filterColumnRegion); cy.wait(1000); - cy.get(nativeFilters.modal.footer) - .contains('Save') - .should('be.visible') - .click(); + saveNativeFilterSettings() // Validate both filter in dashboard view. WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); - ['region', 'country_name'].forEach(it => { + [testItems.topTenGamesChart.filterColumnRegion, testItems.topTenGamesChart.filterColumn].forEach(it => { cy.get(nativeFilters.filterFromDashboardView.filterName) .contains(it) .should('be.visible'); @@ -602,12 +333,326 @@ describe('Nativefilters Sanity test', () => { .invoke('text') .should('equal', '214 options', { timeout: 20000 }); // apply first filter value and validate 2nd filter is depden on 1st filter. - applyNativeFilterValueWithIndex(0, 'East Asia & Pacific'); - - getNativeFilterPlaceholderWithIndex(0).should('have.text', '36 options', { + applyNativeFilterValueWithIndex(0, 'North America'); + getNativeFilterPlaceholderWithIndex(0).should('have.text', '3 options', { timeout: 20000, }); }); + + it('User can apply value filter with selected values', () => { + expandFilterOnLeftPanel(); + enterNativeFilterEditModal(); + fillNativeFilterForm( + testItems.filterType.value, + testItems.topTenGamesChart.filterColumn, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumn); + saveNativeFilterSettings(); + WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); + applyNativeFilterValueWithIndex(0,testItems.filterDefaultValue); + cy.get(nativeFilters.applyFilter).click(); + cy.get(dataTestChartName(testItems.topTenGamesChart.name)).within(() => { + cy.contains(testItems.filterDefaultValue).should('be.visible'); + cy.contains(testItems.filterOtherCountry).should('not.exist'); + }); + }); + + it('User can create a numerical range filter', () => { + expandFilterOnLeftPanel(); + enterNativeFilterEditModal(); + fillNativeFilterForm( + testItems.filterType.numerical, + testItems.filterNumericalColumn, + testItems.datasetForNativeFilter, + testItems.filterNumericalColumn); + saveNativeFilterSettings(); + // assertions + cy.get(nativeFilters.slider.slider).should('be.visible').click('center'); + // cy.get(sqlLabView.tooltip).should('be.visible'); + cy.intercept(`/superset/explore_json/*`).as('slices'); + cy.get(nativeFilters.applyFilter).click(); + cy.wait('@slices'); + // assert that the url contains 'native_filters' in the url + cy.url().then((u) => { + const ur = new URL(u); + expect(ur.search).to.include('native_filters'); + // assert that the start handle has a value + cy + .get(nativeFilters.slider.startHandle) + .invoke('attr', 'aria-valuenow') + .should('exist'); + // assert that the end handle has a value + cy + .get(nativeFilters.slider.endHandle) + .invoke('attr', 'aria-valuenow') + .should('exist'); + // assert slider text matches what we should have + cy.get(nativeFilters.slider.sliderText).should('have.text', '49'); + }); + }); + + it('User can create a time column filter', () => { + expandFilterOnLeftPanel(); + enterNativeFilterEditModal(); + fillNativeFilterForm(testItems.filterType.timeColumn,testItems.filterType.timeColumn,testItems.datasetForNativeFilter); + saveNativeFilterSettings(); + cy.intercept(`/api/v1/chart/data?form_data=**`).as('chart'); + cy.get(nativeFilters.modal.container).should('not.exist'); + // assert that native filter is created + validateFilterNameOnDashboard(testItems.filterType.timeColumn); + applyNativeFilterValueWithIndex(0,testItems.topTenGamesChart.filterColumnYear); + cy.get(nativeFilters.applyFilter).click({ force: true }); + cy.wait('@chart'); + validateFilterContentOnDashboard(testItems.topTenGamesChart.filterColumnYear); + }); + + it('Verify that default value is respected after revisit', () => { + expandFilterOnLeftPanel(); + enterNativeFilterEditModal(); + fillNativeFilterForm( + testItems.filterType.value, + testItems.topTenGamesChart.filterColumn, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumn); + inputNativeFilterDefaultValue(testItems.filterDefaultValue); + saveNativeFilterSettings(); + WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); + cy + .get(nativeFilters.filterItem) + .contains(testItems.filterDefaultValue) + .should('be.visible'); + cy.get(dataTestChartName(testItems.topTenGamesChart.name)).within(() => { + cy.contains(testItems.filterDefaultValue).should('be.visible'); + cy.contains(testItems.filterOtherCountry).should('not.exist'); + }); + cy + .request( + 'api/v1/dashboard/?q=(order_column:changed_on_delta_humanized,order_direction:desc,page:0,page_size:100)' + ) + .then((xhr) => { + const dashboards = xhr.body.result; + console.log(dashboards); + for (const element of dashboards) { + if (element['dashboard_title'] == testItems.dashboard) { + cy.visit(element['url']); + } + } + }); + WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); + cy.get(dataTestChartName(testItems.topTenGamesChart.name)).within(() => { + cy.contains(testItems.filterDefaultValue).should('be.visible'); + cy.contains(testItems.filterOtherCountry).should('not.exist'); + }); + cy + .get(nativeFilters.filterItem) + .contains(testItems.filterDefaultValue) + .should('be.visible'); + }); + + it('Verify that allow for deleted filter restore', () => { + expandFilterOnLeftPanel(); + enterNativeFilterEditModal(); + fillNativeFilterForm( + testItems.filterType.value, + testItems.topTenGamesChart.filterColumn, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumn); + saveNativeFilterSettings(); + WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); + validateFilterNameOnDashboard(testItems.topTenGamesChart.filterColumn); + enterNativeFilterEditModal(); + cy.get(nativeFilters.filtersList.removeIcon).first().click(); + cy.get('[data-test="restore-filter-button"]').should('be.visible').click(); + cy + .get(nativeFilters.modal.container) + .find(nativeFilters.filtersPanel.filterName) + .should('have.attr', 'value', testItems.topTenGamesChart.filterColumn); + }); + + it('User can stop filtering when filter is removed', () => { + expandFilterOnLeftPanel(); + enterNativeFilterEditModal(); + fillNativeFilterForm( + testItems.filterType.value, + testItems.topTenGamesChart.filterColumn, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumn); + inputNativeFilterDefaultValue(testItems.filterDefaultValue); + saveNativeFilterSettings(); + WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); + cy.get(dataTestChartName(testItems.topTenGamesChart.name)).within(() => { + cy.contains(testItems.filterDefaultValue).should('be.visible'); + cy.contains(testItems.filterOtherCountry).should('not.exist'); + }); + cy + .get(nativeFilters.filterItem) + .contains(testItems.filterDefaultValue) + .should('be.visible'); + validateFilterNameOnDashboard(testItems.topTenGamesChart.filterColumn); + enterNativeFilterEditModal(); + deleteNativeFilter(); + saveNativeFilterSettings(); + WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); + cy.get(dataTestChartName(testItems.topTenGamesChart.name)).within(() => { + cy.contains(testItems.filterDefaultValue).should('be.visible'); + cy.contains(testItems.filterOtherCountry).should('be.visible'); + }); + }); + + it('user can delete dependent filter', () => { + expandFilterOnLeftPanel(); + enterNativeFilterEditModal(); + fillNativeFilterForm( + testItems.filterType.value, + testItems.topTenGamesChart.filterColumnRegion, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumnRegion, + ); + clickOnAddFilterInModal(); + fillNativeFilterForm( + testItems.filterType.value, + testItems.topTenGamesChart.filterColumn, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumn, + ); + cy + .get(nativeFilters.filterConfigurationSections.displayedSection) + .within(() => { + cy + .contains('Values are dependent on other filters') + .should('be.visible') + .click(); + }); + addParentFilterWithValue(0, testItems.topTenGamesChart.filterColumnRegion); + // remove year native filter to cause it disappears from parent filter input in global sales + cy + .get(nativeFilters.modal.tabsList.removeTab) + .should('be.visible') + .first() + .click(); + // make sure you are seeing global sales filter which had parent filter + cy + .get(nativeFilters.modal.tabsList.filterItemsContainer) + .children() + .last() + .click(); + // + cy.wait(1000); + cy + .get(nativeFilters.filterConfigurationSections.displayedSection) + .within(() => { + cy.contains('Values are dependent on other filters').should('not.exist'); + }); + }); + + it('User can create filter depend on 2 other filters', () => { + expandFilterOnLeftPanel(); + enterNativeFilterEditModal(); + // add first filter + fillNativeFilterForm( + testItems.filterType.value, + testItems.topTenGamesChart.filterColumnRegion, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumnRegion); + + // add second filter + clickOnAddFilterInModal(); + fillNativeFilterForm( + testItems.filterType.value, + testItems.topTenGamesChart.filterColumn, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumn); + + // add third filter + clickOnAddFilterInModal(); + fillNativeFilterForm( + testItems.filterType.value, + testItems.topTenGamesChart.filterColumnCountryCode, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumnCountryCode); + cy.wait(1000); + cy + .get(nativeFilters.filterConfigurationSections.displayedSection) + .within(() => { + cy + .contains('Values are dependent on other filters') + .should('be.visible') + .click(); + cy.get(exploreView.controlPanel.addFieldValue).click(); + }); + // add value to the first input + addParentFilterWithValue(0, testItems.topTenGamesChart.filterColumnRegion); + // add value to the second input + addParentFilterWithValue(1, testItems.topTenGamesChart.filterColumn); + saveNativeFilterSettings(); + // wait for charts load + WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); + // filters should be displayed in the left panel + [testItems.topTenGamesChart.filterColumnRegion, testItems.topTenGamesChart.filterColumn, testItems.topTenGamesChart.filterColumnCountryCode].forEach((it) => { + validateFilterNameOnDashboard(it); + }); + + // initially first filter shows 39 options + getNativeFilterPlaceholderWithIndex(0).should('have.text', '7 options'); + // initially second filter shows 409 options + getNativeFilterPlaceholderWithIndex(1).should('have.text', '214 options'); + // verify third filter shows 409 options + getNativeFilterPlaceholderWithIndex(2).should('have.text', '214 options'); + + // apply first filter value + applyNativeFilterValueWithIndex(0, 'North America'); + + // verify second filter shows 409 options available still + getNativeFilterPlaceholderWithIndex(0).should('have.text', '214 options'); + + // verify second filter shows 69 options available still + getNativeFilterPlaceholderWithIndex(1).should('have.text', '3 options'); + + // apply second filter value + applyNativeFilterValueWithIndex(1, 'United States'); + + // verify number of available options for third filter - should be decreased to only one + getNativeFilterPlaceholderWithIndex(0).should('have.text', '1 option'); + }); + + + it('User can remove parent filters', () => { + expandFilterOnLeftPanel(); + enterNativeFilterEditModal(); + fillNativeFilterForm( + testItems.filterType.value, + testItems.topTenGamesChart.filterColumnRegion, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumnRegion); + clickOnAddFilterInModal(); + fillNativeFilterForm( + testItems.filterType.value, + testItems.topTenGamesChart.filterColumn, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumn); + cy.wait(1000); + // Select dependdent option and auto use platform for genre + cy + .get(nativeFilters.filterConfigurationSections.displayedSection) + .within(() => { + cy + .contains('Values are dependent on other filters') + .should('be.visible') + .click(); + }); + saveNativeFilterSettings(); + enterNativeFilterEditModal(); + cy.get(nativeFilters.modal.tabsList.removeTab).should('be.visible').first().click({ + force: true, + }); + saveNativeFilterSettings(); + WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); + cy.get(dataTestChartName(testItems.topTenGamesChart.name)).within(() => { + cy.contains(testItems.filterDefaultValue).should('be.visible'); + cy.contains(testItems.filterOtherCountry).should('be.visible'); + }); + }); + }); xdescribe('Nativefilters', () => { diff --git a/superset-frontend/cypress-base/cypress/support/directories.ts b/superset-frontend/cypress-base/cypress/support/directories.ts index d7755590b3d6c..6daeb340182fa 100644 --- a/superset-frontend/cypress-base/cypress/support/directories.ts +++ b/superset-frontend/cypress-base/cypress/support/directories.ts @@ -19,6 +19,10 @@ const dataTestLocator = (value: string) => `[data-test='${value}']`; +export function dataTestChartName(chartName : string) : string { + return `[data-test-chart-name='${chartName}']`; +} + export const pageHeader = { logo: '.navbar-brand > img', headerNavigationItem: '.ant-menu-submenu-title', @@ -320,6 +324,7 @@ export const nativeFilters = { yesCancelButton: '[type="button"]', alertXUnsavedFilters: '.ant-alert-message', tabsList: { + filterItemsContainer: dataTestLocator('filter-title-container'), tabsContainer: '[class="ant-tabs-nav-list"]', tab: '.ant-tabs-tab', removeTab: '[aria-label="trash"]', @@ -354,11 +359,14 @@ export const nativeFilters = { removeFilter: '[aria-label="remove"]', silentLoading: '.loading inline-centered css-101mkpk', filterConfigurationSections: { + sectionHeader: '.ant-collapse-header', displayedSection: 'div[style="height: 100%; overflow-y: auto;"]', collapseExpandButton: '.ant-collapse-arrow', checkedCheckbox: '.ant-checkbox-wrapper-checked', infoTooltip: '[aria-label="Show info tooltip"]', parentFilterInput: dataTestLocator('parent-filter-input'), + filterPlaceholder: '.ant-select-selection-placeholder', + collapsedSectionContainer: '[class="ant-collapse-content-box"]' }, filtersList: { list: '.ant-tabs-nav-list', @@ -372,6 +380,12 @@ export const nativeFilters = { applyFilter: dataTestLocator('filter-bar__apply-button'), defaultInput: dataTestLocator('default-input'), filterIcon: dataTestLocator('filter-icon'), + slider: { + slider: '[class="ant-slider"]', + startHandle: '[class="ant-slider-handle ant-slider-handle-1"]', + endHandle: '[class="ant-slider-handle ant-slider-handle-2"]', + sliderText: '[class="ant-slider-mark-text ant-slider-mark-text-active"]' + }, }; export const dashboardListView = { dashboardListView: dataTestLocator('dashboard-list-view'), @@ -598,6 +612,10 @@ export const editDashboardView = { }; export const dashboardView = { dashboardContainer: dataTestLocator('grid-container'), + dashboardAlert: { + modal: dataTestLocator('toast-container'), + closeButton: dataTestLocator('close-button') + }, saveModal: { modal: '.ant-modal-content', dashboardNameInput: '.ant-input', From 352a866855ffb21f48c50fe084771b124bf72653 Mon Sep 17 00:00:00 2001 From: Jinghua Yao Date: Fri, 22 Apr 2022 09:58:21 -0700 Subject: [PATCH 02/13] fix lint --- .../integration/dashboard/dashboard.helper.ts | 452 +++++++------- .../dashboard/nativeFilters.test.ts | 557 ++++++++++-------- .../cypress/support/directories.ts | 8 +- 3 files changed, 506 insertions(+), 511 deletions(-) diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts index fe653349ba3b3..ec34e1b6e656c 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts @@ -53,13 +53,12 @@ export const testItems = { filterColumnYear: 'year', filterColumnRegion: 'region', filterColumnCountryCode: 'country_code', - }, + }, filterDefaultValue: 'United States', filterOtherCountry: 'China', filterTimeGrain: 'Month', filterTimeColumn: 'created', - filterNumericalColumn: 'SP_RUR_TOTL_ZS' - + filterNumericalColumn: 'SP_RUR_TOTL_ZS', }; export const CHECK_DASHBOARD_FAVORITE_ENDPOINT = @@ -80,16 +79,16 @@ export const WORLD_HEALTH_CHARTS = [ export const nativeFilterTooltips = { searchAllFilterOptions: - 'By default, each filter loads at most 1000 choices at the initial page load. Check this box if you have more than 1000 filter values and want to enable dynamically searching that loads filter values as users type (may add stress to your database).', + 'By default, each filter loads at most 1000 choices at the initial page load. Check this box if you have more than 1000 filter values and want to enable dynamically searching that loads filter values as users type (may add stress to your database).', defaultToFirstItem: 'When using this option, default value can’t be set', inverseSelection: 'Exclude selected values', required: 'User must select a value before applying the filter', multipleSelect: 'Allow selecting multiple values', defaultValue: - 'Default value must be set when "Filter value is required" is checked', - }; - - export const nativeFilterOptions = [ + 'Default value must be set when "Filter value is required" is checked', +}; + +export const nativeFilterOptions = [ 'Filter has default value', 'Multiple select', 'Filter value is required', @@ -99,8 +98,8 @@ export const nativeFilterTooltips = { 'Search all filter options', 'Pre-filter available values', 'Sort filter values', - ]; - export const valueNativeFilterOptions = [ +]; +export const valueNativeFilterOptions = [ 'Pre-filter available values', 'Sort filter values', 'Filter has default value', @@ -109,7 +108,7 @@ export const nativeFilterTooltips = { 'Dynamically search all filter values', 'Inverse selection', 'Filter value is required', - ]; +]; /** Used to specify charts expected by the test suite */ export interface ChartSpec { @@ -214,81 +213,76 @@ export function cleanUp() { cy.deleteChartByName(testItems.newChart); } -/************************************************************************** +/** ************************************************************************ * Copy dashboard for testing purpose * @returns {None} * @summary helper for copy dashboard for testing purpose - **************************************************************************/ - export function copyTestDashboard(dashboard: string){ + ************************************************************************* */ +export function copyTestDashboard(dashboard: string) { cy.intercept('POST', '**/copy_dash/**').as('copy'); cy.intercept('**/api/v1/dashboard/**').as('dashboard'); cy.intercept('GET', '**/api/v1/dataset/**').as('datasetLoad'); cy.intercept('**/api/v1/dashboard/?q=**').as('dashboardsList'); cy.visit('dashboard/list/'); cy.contains('Actions'); - cy.wait('@dashboardsList').then((xhr) => { - const dashboards = xhr.response?.body.result; - /* eslint-disable no-unused-expressions */ - expect(dashboards).not.to.be.undefined; - const testDashboard = dashboards.find( - (d: { dashboard_title: string }) => - d.dashboard_title === `${dashboard}`, - ); - cy.visit(testDashboard.url); + cy.wait('@dashboardsList').then(xhr => { + const dashboards = xhr.response?.body.result; + /* eslint-disable no-unused-expressions */ + expect(dashboards).not.to.be.undefined; + const testDashboard = dashboards.find( + (d: { dashboard_title: string }) => d.dashboard_title === `${dashboard}`, + ); + cy.visit(testDashboard.url); }); cy.get(dashboardView.threeDotsMenuIcon).should('be.visible').click(); cy.get(dashboardView.saveAsMenuOption).click(); - cy - .get(dashboardView.saveModal.dashboardNameInput) - .should('be.visible') - .clear() - .type(testItems.dashboard); + cy.get(dashboardView.saveModal.dashboardNameInput) + .should('be.visible') + .clear() + .type(testItems.dashboard); cy.get(dashboardView.saveModal.saveButton).click(); - cy - .wait('@copy', { timeout: 45000 }) - .its('response.statusCode') - .should('eq', 200); + cy.wait('@copy', { timeout: 45000 }) + .its('response.statusCode') + .should('eq', 200); } -/************************************************************************** +/** ************************************************************************ * Expend Native filter from the left panel on dashboard * @returns {None} * @summary helper for expend native filter - **************************************************************************/ - export function expandFilterOnLeftPanel() { + ************************************************************************* */ +export function expandFilterOnLeftPanel() { return cy - .get(nativeFilters.filterFromDashboardView.expand) - .click({force: true}); - } - - /************************************************************************** - * Collapes Native Filter from the left panel on dashboard - * @returns {None} - * @summary helper for collape native filter - **************************************************************************/ - export function collapseFilterOnLeftPanel() { - cy - .get(nativeFilters.filterFromDashboardView.collapse) - .should('be.visible') - .click(); - cy - .get(nativeFilters.filterFromDashboardView.collapse) - .should('not.be.visible'); - } - - /************************************************************************** - * Enter Native Filter edit modal from the left panel on dashboard - * @returns {None} - * @summary helper for enter native filter edit modal - **************************************************************************/ - export function enterNativeFilterEditModal() { - cy - .get(nativeFilters.filterFromDashboardView.createFilterButton) + .get(nativeFilters.filterFromDashboardView.expand) + .click({ force: true }); +} + +/** ************************************************************************ + * Collapes Native Filter from the left panel on dashboard + * @returns {None} + * @summary helper for collape native filter + ************************************************************************* */ +export function collapseFilterOnLeftPanel() { + cy.get(nativeFilters.filterFromDashboardView.collapse) .should('be.visible') .click(); - cy.get(nativeFilters.modal.container).should('be.visible'); - } - + cy.get(nativeFilters.filterFromDashboardView.collapse).should( + 'not.be.visible', + ); +} + +/** ************************************************************************ + * Enter Native Filter edit modal from the left panel on dashboard + * @returns {None} + * @summary helper for enter native filter edit modal + ************************************************************************* */ +export function enterNativeFilterEditModal() { + cy.get(nativeFilters.filterFromDashboardView.createFilterButton) + .should('be.visible') + .click(); + cy.get(nativeFilters.modal.container).should('be.visible'); +} + /** ************************************************************************ * Clicks on new filter button * @returns {None} @@ -306,7 +300,7 @@ export function clickOnAddFilterInModal() { }); } -/************************************************************************** +/** ************************************************************************ * Fills value native filter form with basic information * @param {string} type type for filter: Value, Numerical range,Time column,Time grain,Time range * @param {string} name name for filter @@ -314,85 +308,47 @@ export function clickOnAddFilterInModal() { * @param {string} filterColumn which column should be used * @returns {None} * @summary helper for filling value native filter form - **************************************************************************/ - export function fillNativeFilterForm( + ************************************************************************* */ +export function fillNativeFilterForm( type: string, name: string, dataset?: string, - filterColumn?: string - ) { - cy - .get(nativeFilters.filtersPanel.filterTypeInput) - .find(nativeFilters.filtersPanel.filterTypeItem) - .click({multiple: true ,force: true}); + filterColumn?: string, +) { + cy.get(nativeFilters.filtersPanel.filterTypeInput) + .find(nativeFilters.filtersPanel.filterTypeItem) + .click({ multiple: true, force: true }); cy.get(`[label="${type}"]`).click({ multiple: true, force: true }); - cy - .get(nativeFilters.modal.container) - .find(nativeFilters.filtersPanel.filterName) - .last() - .click({ scrollBehavior: false }) - .type(name, { scrollBehavior: false }); - if (dataset) { - cy - .get(nativeFilters.modal.container) - .find(nativeFilters.filtersPanel.datasetName) + cy.get(nativeFilters.modal.container) + .find(nativeFilters.filtersPanel.filterName) .last() - .click({ force: true, scrollBehavior: false }) - .type(`${dataset}`, { scrollBehavior: false }); - cy.get(nativeFilters.silentLoading).should('not.exist'); - cy.get(`[label="${dataset}"]`).click( {multiple: true, force: true}); + .click({ scrollBehavior: false }) + .type(name, { scrollBehavior: false }); + if (dataset) { + cy.get(nativeFilters.modal.container) + .find(nativeFilters.filtersPanel.datasetName) + .last() + .click({ force: true, scrollBehavior: false }) + .type(`${dataset}`, { scrollBehavior: false }); + cy.get(nativeFilters.silentLoading).should('not.exist'); + cy.get(`[label="${dataset}"]`).click({ multiple: true, force: true }); } cy.get(nativeFilters.silentLoading).should('not.exist'); if (filterColumn) { - cy - .get(nativeFilters.filtersPanel.filterInfoInput) - .last() - .should('be.visible') - .click({ force: true }); - cy.get(nativeFilters.filtersPanel.filterInfoInput).last().type(filterColumn); - cy - .get(nativeFilters.filtersPanel.inputDropdown) - .should('be.visible', { timeout: 20000 }) - .last() - .click(); + cy.get(nativeFilters.filtersPanel.filterInfoInput) + .last() + .should('be.visible') + .click({ force: true }); + cy.get(nativeFilters.filtersPanel.filterInfoInput) + .last() + .type(filterColumn); + cy.get(nativeFilters.filtersPanel.inputDropdown) + .should('be.visible', { timeout: 20000 }) + .last() + .click(); } cy.get(nativeFilters.silentLoading).should('not.exist'); - } - -// /** ************************************************************************ -// * Fills value native filter form with basic information -// * @param {string} name name for filter -// * @param {string} dataset which dataset should be used -// * @param {string} filterColumn which column should be used -// * @returns {None} -// * @summary helper for filling value native filter form -// ************************************************************************* */ -// export function fillValueNativeFilterForm( -// name: string, -// dataset: string, -// filterColumn: string, -// ) { -// cy.get(nativeFilters.modal.container) -// .find(nativeFilters.filtersPanel.filterName) -// .last() -// .click({ scrollBehavior: false }) -// .type(name, { scrollBehavior: false }); -// cy.get(nativeFilters.modal.container) -// .find(nativeFilters.filtersPanel.datasetName) -// .last() -// .click({ scrollBehavior: false }) -// .type(`${dataset}{enter}`, { scrollBehavior: false }); -// cy.get(nativeFilters.silentLoading).should('not.exist'); -// cy.get(nativeFilters.filtersPanel.filterInfoInput) -// .last() -// .should('be.visible') -// .click({ force: true }); -// cy.get(nativeFilters.filtersPanel.filterInfoInput).last().type(filterColumn); -// cy.get(nativeFilters.filtersPanel.inputDropdown) -// .should('be.visible', { timeout: 20000 }) -// .last() -// .click(); -// } +} /** ************************************************************************ * Get native filter placeholder e.g 9 options @@ -439,13 +395,12 @@ export function addParentFilterWithValue(index: number, value: string) { }); } - -/************************************************************************** +/** ************************************************************************ * Create test chart for time column filter test * @returns {null} * @summary helper Create test chart for time column filter test - **************************************************************************/ - export function createTimeColumnTestChart(){ + ************************************************************************* */ +export function createTimeColumnTestChart() { const VIZ_DEFAULTS = { ...FORM_DATA_DEFAULTS, viz_type: 'echarts_timeseries', @@ -472,190 +427,187 @@ export function addParentFilterWithValue(index: number, value: string) { rich_tooltip: true, tooltipTimeFormat: 'smart_date', y_axis_format: 'SMART_NUMBER', - }; - cy.visitChartByParams({ + }; + cy.visitChartByParams({ ...VIZ_DEFAULTS, - }); - cy - .get(exploreView.controlPanel.runButton) - .should('exist', { timeout: 10000 }); - cy.get(exploreView.controlPanel.saveQuery).click(); - cy.get(exploreView.saveModal.modal).within(() => { - cy - .get(exploreView.saveModal.chartNameInput) - .type(`${testItems.chart}{enter}`); - cy - .get(exploreView.saveModal.dashboardNameInput) - .type(`${testItems.dashboard}{enter}`, { delay: 100 }); + }); + cy.get(exploreView.controlPanel.runButton).should('exist', { + timeout: 10000, + }); + cy.get(exploreView.controlPanel.saveQuery).click(); + cy.get(exploreView.saveModal.modal).within(() => { + cy.get(exploreView.saveModal.chartNameInput).type( + `${testItems.chart}{enter}`, + ); + cy.get(exploreView.saveModal.dashboardNameInput).type( + `${testItems.dashboard}{enter}`, + { delay: 100 }, + ); cy.get(exploreView.saveModal.saveAndGoToDashboard).click(); - }); + }); } -/************************************************************************** +/** ************************************************************************ * Save Native Filter Settings * @returns {None} * @summary helper for save native filters settings - **************************************************************************/ + ************************************************************************* */ export function saveNativeFilterSettings() { - cy - .get(nativeFilters.modal.footer) - .contains('Save') - .should('be.visible') - .click(); - cy.get(nativeFilters.modal.container).should('not.exist'); + cy.get(nativeFilters.modal.footer) + .contains('Save') + .should('be.visible') + .click(); + cy.get(nativeFilters.modal.container).should('not.exist'); } -/************************************************************************** +/** ************************************************************************ * Cancel Native fitler settings * @returns {None} * @summary helper for cancel native filters settings - **************************************************************************/ -export function cancelNativeFilterSettings(){ - cy - .get(nativeFilters.modal.footer) - .find(nativeFilters.modal.cancelButton) - .should('be.visible') - .click(); - cy - .get(nativeFilters.modal.alertXUnsavedFilters) - .should('have.text', 'There are unsaved changes.') - .should('be.visible'); - cy - .get(nativeFilters.modal.footer) - .find(nativeFilters.modal.yesCancelButton) - .contains('cancel') - .should('be.visible') - .click(); - cy.get(nativeFilters.modal.container).should('not.exist'); + ************************************************************************* */ +export function cancelNativeFilterSettings() { + cy.get(nativeFilters.modal.footer) + .find(nativeFilters.modal.cancelButton) + .should('be.visible') + .click(); + cy.get(nativeFilters.modal.alertXUnsavedFilters) + .should('have.text', 'There are unsaved changes.') + .should('be.visible'); + cy.get(nativeFilters.modal.footer) + .find(nativeFilters.modal.yesCancelButton) + .contains('cancel') + .should('be.visible') + .click(); + cy.get(nativeFilters.modal.container).should('not.exist'); } -/************************************************************************** +/** ************************************************************************ * Close dashboard toast message * @returns {None} * @summary helper for close dashboard toast message in order to make test stable - **************************************************************************/ -export function closeDashboardToastMessage(){ - cy.get('body').then(($body) => { + ************************************************************************* */ +export function closeDashboardToastMessage() { + cy.get('body').then($body => { if ($body.find(dashboardView.dashboardAlert.modal).length > 0) { - //evaluates as true if button exists at all - cy.get(dashboardView.dashboardAlert.modal).then(($header) => { - if ($header.is(':visible')) { - cy.get(dashboardView.dashboardAlert.closeButton).click({ force: true }); - cy - .get(dashboardView.dashboardAlert.closeButton) - .should('not.exist', { timeout: 10000 }); - } - }); + // evaluates as true if button exists at all + cy.get(dashboardView.dashboardAlert.modal).then($header => { + if ($header.is(':visible')) { + cy.get(dashboardView.dashboardAlert.closeButton).click({ + force: true, + }); + cy.get(dashboardView.dashboardAlert.closeButton).should('not.exist', { + timeout: 10000, + }); + } + }); } }); } -/************************************************************************** - * Validate filter name on dashboard +/** ************************************************************************ + * Validate filter name on dashboard * @param name: filter name to validate * @return {null} * @summary helper for validate filter name on dashboard - **************************************************************************/ + ************************************************************************* */ export function validateFilterNameOnDashboard(name: string) { - cy - .get(nativeFilters.filterFromDashboardView.filterName) - .should('be.visible', { timeout: 40000 }) - .contains(`${name}`) + cy.get(nativeFilters.filterFromDashboardView.filterName) + .should('be.visible', { timeout: 40000 }) + .contains(`${name}`); } -/************************************************************************** +/** ************************************************************************ * Validate filter content on dashboard * @param filterContent: filter content to validate * @return {null} * @summary helper for validate filter content on dashboard - **************************************************************************/ -export function validateFilterContentOnDashboard(filterContent: string){ - cy - .get(nativeFilters.filterFromDashboardView.filterContent) - .contains(`${filterContent}`) - .should('be.visible'); + ************************************************************************* */ +export function validateFilterContentOnDashboard(filterContent: string) { + cy.get(nativeFilters.filterFromDashboardView.filterContent) + .contains(`${filterContent}`) + .should('be.visible'); } -/************************************************************************** +/** ************************************************************************ * Delete Native filter * @return {null} - * @summary helper for delete native filter - **************************************************************************/ + * @summary helper for delete native filter + ************************************************************************* */ export function deleteNativeFilter() { cy.get(nativeFilters.filtersList.removeIcon).first().click(); } -/************************************************************************** +/** ************************************************************************ * Undo delete Native filter * @return {null} - * @summary helper for undo delete native filter - **************************************************************************/ + * @summary helper for undo delete native filter + ************************************************************************* */ export function undoDeleteNativeFilter() { - deleteNativeFilter(); - cy.contains('Undo?').click(); + deleteNativeFilter(); + cy.contains('Undo?').click(); } -/************************************************************************** +/** ************************************************************************ * Check Native Filter tooltip content * @param index: tooltip indext to check * @param value: tooltip value to check * @return {null} * @summary helper for checking native filter tooltip content by index - **************************************************************************/ -export function checkNativeFilterTooltip(index: number,value: string) { - cy - .get(nativeFilters.filterConfigurationSections.infoTooltip) - .eq(index) - .trigger('mouseover'); - cy.contains(`${value}`); + ************************************************************************* */ +export function checkNativeFilterTooltip(index: number, value: string) { + cy.get(nativeFilters.filterConfigurationSections.infoTooltip) + .eq(index) + .trigger('mouseover'); + cy.contains(`${value}`); } -/************************************************************************** +/** ************************************************************************ * Apply advanced time range filter on dashboard * @param startRange: starting time range * @param endRange: ending time range * @return {null} * @summary helper for applying advanced time range filter on dashboard with customize time range - **************************************************************************/ -export function applyAdvancedTimeRangeFilterOnDashboard(startRange?: string,endRange?: string){ + ************************************************************************* */ +export function applyAdvancedTimeRangeFilterOnDashboard( + startRange?: string, + endRange?: string, +) { cy.get('.control-label').contains('RANGE TYPE').should('be.visible'); - cy - .get('.ant-popover-content .ant-select-selector') - .should('be.visible') - .click(); + cy.get('.ant-popover-content .ant-select-selector') + .should('be.visible') + .click(); cy.get(`[label="Advanced"]`).should('be.visible').click(); cy.get('.section-title').contains('Advanced Time Range').should('be.visible'); - if(startRange){ - cy.get('.ant-popover-inner-content') - .find('[class^=ant-input]') - .first().type(`${startRange}`); + if (startRange) { + cy.get('.ant-popover-inner-content') + .find('[class^=ant-input]') + .first() + .type(`${startRange}`); } - if(endRange){ + if (endRange) { cy.get('.ant-popover-inner-content') .find('[class^=ant-input]') - .last().type(`${endRange}`); + .last() + .type(`${endRange}`); } cy.get(dashboardView.timeRangeModal.applyButton).click(); cy.get(nativeFilters.applyFilter).click(); } -/************************************************************************** +/** ************************************************************************ * Input default valule in Native filter in filter settings * @param defaultValue: default value for native filter * @return {null} * @summary helper for input default valule in Native filter in filter settings - **************************************************************************/ -export function inputNativeFilterDefaultValue(defaultValue: string){ + ************************************************************************* */ +export function inputNativeFilterDefaultValue(defaultValue: string) { cy.contains('Filter has default value').click(); cy.contains('Default value is required').should('be.visible'); - cy - .get(nativeFilters.filterConfigurationSections.filterPlaceholder) - .contains('options') - .should('be.visible'); - cy - .get(nativeFilters.filterConfigurationSections.collapsedSectionContainer) - .first() - .get(nativeFilters.filtersPanel.columnEmptyInput) - .type(`${defaultValue}{enter}`); + cy.get(nativeFilters.filterConfigurationSections.filterPlaceholder) + .contains('options') + .should('be.visible'); + cy.get(nativeFilters.filterConfigurationSections.collapsedSectionContainer) + .first() + .get(nativeFilters.filtersPanel.columnEmptyInput) + .type(`${defaultValue}{enter}`); } - 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 87de30b7483cc..37f3295bad0bf 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts @@ -49,8 +49,8 @@ import { validateFilterNameOnDashboard, waitForChartLoad, WORLD_HEALTH_CHARTS, - valueNativeFilterOptions - } from './dashboard.helper'; + valueNativeFilterOptions, +} from './dashboard.helper'; import { DASHBOARD_LIST } from '../dashboard_list/dashboard_list.helper'; import { CHART_LIST } from '../chart_list/chart_list.helper'; @@ -71,8 +71,7 @@ describe('Nativefilters Sanity test', () => { cleanUp(); copyTestDashboard("World Bank's Data"); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); - closeDashboardToastMessage() - + closeDashboardToastMessage(); }); afterEach(() => { cleanUp(); @@ -81,10 +80,12 @@ describe('Nativefilters Sanity test', () => { it('User can expand / retract native filter sidebar on a dashboard', () => { cy.get(nativeFilters.addFilterButton.button).should('not.exist'); expandFilterOnLeftPanel(); - cy - .get(nativeFilters.filterFromDashboardView.createFilterButton) - .should('be.visible'); - cy.get(nativeFilters.filterFromDashboardView.expand).should('not.be.visible'); + cy.get(nativeFilters.filterFromDashboardView.createFilterButton).should( + 'be.visible', + ); + cy.get(nativeFilters.filterFromDashboardView.expand).should( + 'not.be.visible', + ); collapseFilterOnLeftPanel(); }); @@ -110,7 +111,8 @@ describe('Nativefilters Sanity test', () => { testItems.filterType.value, testItems.topTenGamesChart.filterColumn, testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumn); + testItems.topTenGamesChart.filterColumn, + ); saveNativeFilterSettings(); cy.wait(3000); cy.location().then(loc => { @@ -128,58 +130,63 @@ describe('Nativefilters Sanity test', () => { cy.get(nativeFilters.filtersList.removeIcon).first().click(); cy.contains('Restore Filter').should('not.exist', { timeout: 10000 }); saveNativeFilterSettings(); - }); + }); - it('User can cancel changes in native filter', () => { + it('User can cancel changes in native filter', () => { expandFilterOnLeftPanel(); enterNativeFilterEditModal(); cy.wait(['@datasetLoad', '@datasetLoad']); - fillNativeFilterForm(testItems.filterType.value,'suffix',testItems.datasetForNativeFilter,) + fillNativeFilterForm( + testItems.filterType.value, + 'suffix', + testItems.datasetForNativeFilter, + ); cancelNativeFilterSettings(); enterNativeFilterEditModal(); cy.get(nativeFilters.filtersList.removeIcon).first().click(); cy.contains('You have removed this filter.').should('be.visible'); saveNativeFilterSettings(); - }); - - it('User can cancel creating a new filter', () => { + }); + + it('User can cancel creating a new filter', () => { expandFilterOnLeftPanel(); enterNativeFilterEditModal(); cancelNativeFilterSettings(); - }); - - it('User can undo deleting a native filter', () => { + }); + + it('User can undo deleting a native filter', () => { expandFilterOnLeftPanel(); enterNativeFilterEditModal(); fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenGamesChart.filterColumn, - testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumn); + testItems.filterType.value, + testItems.topTenGamesChart.filterColumn, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumn, + ); saveNativeFilterSettings(); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); validateFilterNameOnDashboard(testItems.topTenGamesChart.filterColumn); enterNativeFilterEditModal(); undoDeleteNativeFilter(); - }); + }); - it('Verify setting options and tooltips for value filter', () => { + it('Verify setting options and tooltips for value filter', () => { expandFilterOnLeftPanel(); enterNativeFilterEditModal(); cy.contains('Filter value is required').should('be.visible').click(); - checkNativeFilterTooltip(0,nativeFilterTooltips.defaultValue); + checkNativeFilterTooltip(0, nativeFilterTooltips.defaultValue); cy.get(nativeFilters.modal.container).should('be.visible'); - valueNativeFilterOptions.forEach((el) => { - cy.contains(el); + valueNativeFilterOptions.forEach(el => { + cy.contains(el); }); cy.contains('Values are dependent on other filters').should('not.exist'); - cy - .get(nativeFilters.filterConfigurationSections.checkedCheckbox) - .contains('Can select multiple values'); - checkNativeFilterTooltip(1,nativeFilterTooltips.required); - checkNativeFilterTooltip(2,nativeFilterTooltips.defaultToFirstItem); - checkNativeFilterTooltip(3,nativeFilterTooltips.searchAllFilterOptions); - checkNativeFilterTooltip(4,nativeFilterTooltips.inverseSelection); + cy.get(nativeFilters.filterConfigurationSections.checkedCheckbox).contains( + 'Can select multiple values', + ); + checkNativeFilterTooltip(1, nativeFilterTooltips.required); + checkNativeFilterTooltip(2, nativeFilterTooltips.defaultToFirstItem); + checkNativeFilterTooltip(3, nativeFilterTooltips.searchAllFilterOptions); + checkNativeFilterTooltip(4, nativeFilterTooltips.inverseSelection); clickOnAddFilterInModal(); cy.contains('Values are dependent on other filters').should('exist'); }); @@ -187,21 +194,23 @@ describe('Nativefilters Sanity test', () => { it('User can create a time range filter', () => { expandFilterOnLeftPanel(); enterNativeFilterEditModal(); - fillNativeFilterForm(testItems.filterType.timeRange,testItems.filterType.timeRange,); + fillNativeFilterForm( + testItems.filterType.timeRange, + testItems.filterType.timeRange, + ); cy.intercept(`/api/v1/chart/data?form_data=**`).as('chart'); saveNativeFilterSettings(); cy.wait('@chart'); - cy - .get(dashboardView.salesDashboardSpecific.vehicleSalesFilterTimeRange) - .should('be.visible') - .click(); - applyAdvancedTimeRangeFilterOnDashboard('2005-12-17','2006-12-17'); + cy.get(dashboardView.salesDashboardSpecific.vehicleSalesFilterTimeRange) + .should('be.visible') + .click(); + applyAdvancedTimeRangeFilterOnDashboard('2005-12-17', '2006-12-17'); cy.wait('@chart'); - cy.url().then((u) => { - const ur = new URL(u); - expect(ur.search).to.include('native_filters'); + cy.url().then(u => { + const ur = new URL(u); + expect(ur.search).to.include('native_filters'); }); - validateFilterNameOnDashboard(testItems.filterType.timeRange,); + validateFilterNameOnDashboard(testItems.filterType.timeRange); validateFilterContentOnDashboard('2005-12-17'); }); @@ -209,10 +218,11 @@ describe('Nativefilters Sanity test', () => { expandFilterOnLeftPanel(); enterNativeFilterEditModal(); fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenGamesChart.filterColumn, - testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumn); + testItems.filterType.value, + testItems.topTenGamesChart.filterColumn, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumn, + ); inputNativeFilterDefaultValue(testItems.filterDefaultValue); saveNativeFilterSettings(); validateFilterContentOnDashboard(testItems.filterDefaultValue); @@ -221,16 +231,20 @@ describe('Nativefilters Sanity test', () => { it('User can create a time grain filter', () => { expandFilterOnLeftPanel(); enterNativeFilterEditModal(); - fillNativeFilterForm(testItems.filterType.timeGrain,testItems.filterType.timeGrain,testItems.datasetForNativeFilter); + fillNativeFilterForm( + testItems.filterType.timeGrain, + testItems.filterType.timeGrain, + testItems.datasetForNativeFilter, + ); cy.intercept(`/api/v1/chart/data?form_data=**`).as('chart'); saveNativeFilterSettings(); cy.wait('@chart'); - applyNativeFilterValueWithIndex(0,testItems.filterTimeGrain); + applyNativeFilterValueWithIndex(0, testItems.filterTimeGrain); cy.get(nativeFilters.applyFilter).click(); cy.wait('@chart'); - cy.url().then((u) => { - const ur = new URL(u); - expect(ur.search).to.include('native_filters'); + cy.url().then(u => { + const ur = new URL(u); + expect(ur.search).to.include('native_filters'); }); validateFilterNameOnDashboard(testItems.filterType.timeGrain); validateFilterContentOnDashboard(testItems.filterTimeGrain); @@ -240,43 +254,54 @@ describe('Nativefilters Sanity test', () => { createTimeColumnTestChart(); expandFilterOnLeftPanel(); enterNativeFilterEditModal(); - fillNativeFilterForm(testItems.filterType.timeColumn,testItems.filterType.timeColumn,testItems.datasetForNativeFilter); + fillNativeFilterForm( + testItems.filterType.timeColumn, + testItems.filterType.timeColumn, + testItems.datasetForNativeFilter, + ); saveNativeFilterSettings(); cy.intercept(`/api/v1/chart/data?form_data=**`).as('chart'); cy.get(nativeFilters.modal.container).should('not.exist'); // assert that native filter is created validateFilterNameOnDashboard(testItems.filterType.timeColumn); - - applyNativeFilterValueWithIndex(0,testItems.topTenGamesChart.filterColumnYear); + + applyNativeFilterValueWithIndex( + 0, + testItems.topTenGamesChart.filterColumnYear, + ); cy.get(nativeFilters.applyFilter).click({ force: true }); cy.wait('@chart'); - validateFilterContentOnDashboard(testItems.topTenGamesChart.filterColumnYear); + validateFilterContentOnDashboard( + testItems.topTenGamesChart.filterColumnYear, + ); }); it('User can create a time range filter', () => { expandFilterOnLeftPanel(); enterNativeFilterEditModal(); - fillNativeFilterForm(testItems.filterType.timeRange,testItems.filterType.timeRange,); + fillNativeFilterForm( + testItems.filterType.timeRange, + testItems.filterType.timeRange, + ); cy.intercept(`/api/v1/chart/data?form_data=**`).as('chart'); saveNativeFilterSettings(); cy.wait('@chart'); - cy - .get(dashboardView.salesDashboardSpecific.vehicleSalesFilterTimeRange) - .should('be.visible') - .click(); + cy.get(dashboardView.salesDashboardSpecific.vehicleSalesFilterTimeRange) + .should('be.visible') + .click(); applyAdvancedTimeRangeFilterOnDashboard('2005-12-17'); cy.wait('@chart'); - cy.url().then((u) => { - const ur = new URL(u); - expect(ur.search).to.include('native_filters'); + cy.url().then(u => { + const ur = new URL(u); + expect(ur.search).to.include('native_filters'); }); - validateFilterNameOnDashboard(testItems.filterType.timeRange,); + validateFilterNameOnDashboard(testItems.filterType.timeRange); cy.get(nativeFilters.filterFromDashboardView.timeRangeFilterContent) - .contains('2005-12-17') - .should('be.visible'); - }); + .contains('2005-12-17') + .should('be.visible'); + }); - it('User can create a value filter', () => { + it('User can create a value filter', () => { expandFilterOnLeftPanel(); enterNativeFilterEditModal(); cy.wait(['@datasetLoad', '@datasetLoad']); @@ -285,10 +310,11 @@ describe('Nativefilters Sanity test', () => { testItems.filterType.value, testItems.topTenGamesChart.filterColumn, testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumn); + testItems.topTenGamesChart.filterColumn, + ); cy.get(nativeFilters.filtersPanel.filterTypeInput) .find(nativeFilters.filtersPanel.filterTypeItem) - .should('have.text', testItems.filterType.value,); + .should('have.text', testItems.filterType.value); saveNativeFilterSettings(); validateFilterNameOnDashboard(testItems.topTenGamesChart.filterColumn); }); @@ -300,16 +326,17 @@ describe('Nativefilters Sanity test', () => { cy.get(nativeFilters.filterFromDashboardView.createFilterButton).click(); // Create parent filter 'region'. fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenGamesChart.filterColumnRegion, - testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumnRegion); + testItems.filterType.value, + testItems.topTenGamesChart.filterColumnRegion, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumnRegion, + ); // Create filter 'country_name' depend on region filter. clickOnAddFilterInModal(); fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenGamesChart.filterColumn, - testItems.datasetForNativeFilter, + testItems.filterType.value, + testItems.topTenGamesChart.filterColumn, + testItems.datasetForNativeFilter, testItems.topTenGamesChart.filterColumn, ); cy.get(nativeFilters.filterConfigurationSections.displayedSection).within( @@ -321,10 +348,13 @@ describe('Nativefilters Sanity test', () => { ); addParentFilterWithValue(0, testItems.topTenGamesChart.filterColumnRegion); cy.wait(1000); - saveNativeFilterSettings() + saveNativeFilterSettings(); // Validate both filter in dashboard view. WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); - [testItems.topTenGamesChart.filterColumnRegion, testItems.topTenGamesChart.filterColumn].forEach(it => { + [ + testItems.topTenGamesChart.filterColumnRegion, + testItems.topTenGamesChart.filterColumn, + ].forEach(it => { cy.get(nativeFilters.filterFromDashboardView.filterName) .contains(it) .should('be.visible'); @@ -343,28 +373,30 @@ describe('Nativefilters Sanity test', () => { expandFilterOnLeftPanel(); enterNativeFilterEditModal(); fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenGamesChart.filterColumn, - testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumn); + testItems.filterType.value, + testItems.topTenGamesChart.filterColumn, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumn, + ); saveNativeFilterSettings(); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); - applyNativeFilterValueWithIndex(0,testItems.filterDefaultValue); + applyNativeFilterValueWithIndex(0, testItems.filterDefaultValue); cy.get(nativeFilters.applyFilter).click(); cy.get(dataTestChartName(testItems.topTenGamesChart.name)).within(() => { - cy.contains(testItems.filterDefaultValue).should('be.visible'); - cy.contains(testItems.filterOtherCountry).should('not.exist'); + cy.contains(testItems.filterDefaultValue).should('be.visible'); + cy.contains(testItems.filterOtherCountry).should('not.exist'); }); - }); + }); it('User can create a numerical range filter', () => { expandFilterOnLeftPanel(); enterNativeFilterEditModal(); fillNativeFilterForm( - testItems.filterType.numerical, - testItems.filterNumericalColumn, - testItems.datasetForNativeFilter, - testItems.filterNumericalColumn); + testItems.filterType.numerical, + testItems.filterNumericalColumn, + testItems.datasetForNativeFilter, + testItems.filterNumericalColumn, + ); saveNativeFilterSettings(); // assertions cy.get(nativeFilters.slider.slider).should('be.visible').click('center'); @@ -373,213 +405,218 @@ describe('Nativefilters Sanity test', () => { cy.get(nativeFilters.applyFilter).click(); cy.wait('@slices'); // assert that the url contains 'native_filters' in the url - cy.url().then((u) => { - const ur = new URL(u); - expect(ur.search).to.include('native_filters'); - // assert that the start handle has a value - cy - .get(nativeFilters.slider.startHandle) - .invoke('attr', 'aria-valuenow') - .should('exist'); - // assert that the end handle has a value - cy - .get(nativeFilters.slider.endHandle) - .invoke('attr', 'aria-valuenow') - .should('exist'); - // assert slider text matches what we should have - cy.get(nativeFilters.slider.sliderText).should('have.text', '49'); + cy.url().then(u => { + const ur = new URL(u); + expect(ur.search).to.include('native_filters'); + // assert that the start handle has a value + cy.get(nativeFilters.slider.startHandle) + .invoke('attr', 'aria-valuenow') + .should('exist'); + // assert that the end handle has a value + cy.get(nativeFilters.slider.endHandle) + .invoke('attr', 'aria-valuenow') + .should('exist'); + // assert slider text matches what we should have + cy.get(nativeFilters.slider.sliderText).should('have.text', '49'); }); - }); - - it('User can create a time column filter', () => { + }); + + it('User can create a time column filter', () => { expandFilterOnLeftPanel(); enterNativeFilterEditModal(); - fillNativeFilterForm(testItems.filterType.timeColumn,testItems.filterType.timeColumn,testItems.datasetForNativeFilter); + fillNativeFilterForm( + testItems.filterType.timeColumn, + testItems.filterType.timeColumn, + testItems.datasetForNativeFilter, + ); saveNativeFilterSettings(); cy.intercept(`/api/v1/chart/data?form_data=**`).as('chart'); cy.get(nativeFilters.modal.container).should('not.exist'); // assert that native filter is created validateFilterNameOnDashboard(testItems.filterType.timeColumn); - applyNativeFilterValueWithIndex(0,testItems.topTenGamesChart.filterColumnYear); + applyNativeFilterValueWithIndex( + 0, + testItems.topTenGamesChart.filterColumnYear, + ); cy.get(nativeFilters.applyFilter).click({ force: true }); cy.wait('@chart'); - validateFilterContentOnDashboard(testItems.topTenGamesChart.filterColumnYear); + validateFilterContentOnDashboard( + testItems.topTenGamesChart.filterColumnYear, + ); }); - - it('Verify that default value is respected after revisit', () => { + + it('Verify that default value is respected after revisit', () => { expandFilterOnLeftPanel(); enterNativeFilterEditModal(); fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenGamesChart.filterColumn, - testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumn); + testItems.filterType.value, + testItems.topTenGamesChart.filterColumn, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumn, + ); inputNativeFilterDefaultValue(testItems.filterDefaultValue); saveNativeFilterSettings(); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); - cy - .get(nativeFilters.filterItem) - .contains(testItems.filterDefaultValue) - .should('be.visible'); + cy.get(nativeFilters.filterItem) + .contains(testItems.filterDefaultValue) + .should('be.visible'); cy.get(dataTestChartName(testItems.topTenGamesChart.name)).within(() => { - cy.contains(testItems.filterDefaultValue).should('be.visible'); - cy.contains(testItems.filterOtherCountry).should('not.exist'); + cy.contains(testItems.filterDefaultValue).should('be.visible'); + cy.contains(testItems.filterOtherCountry).should('not.exist'); }); - cy - .request( - 'api/v1/dashboard/?q=(order_column:changed_on_delta_humanized,order_direction:desc,page:0,page_size:100)' - ) - .then((xhr) => { + cy.request( + 'api/v1/dashboard/?q=(order_column:changed_on_delta_humanized,order_direction:desc,page:0,page_size:100)', + ).then(xhr => { const dashboards = xhr.body.result; console.log(dashboards); for (const element of dashboards) { - if (element['dashboard_title'] == testItems.dashboard) { - cy.visit(element['url']); - } + if (element.dashboard_title == testItems.dashboard) { + cy.visit(element.url); + } } - }); - WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); + }); + WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); cy.get(dataTestChartName(testItems.topTenGamesChart.name)).within(() => { - cy.contains(testItems.filterDefaultValue).should('be.visible'); - cy.contains(testItems.filterOtherCountry).should('not.exist'); + cy.contains(testItems.filterDefaultValue).should('be.visible'); + cy.contains(testItems.filterOtherCountry).should('not.exist'); }); - cy - .get(nativeFilters.filterItem) - .contains(testItems.filterDefaultValue) - .should('be.visible'); - }); - - it('Verify that allow for deleted filter restore', () => { + cy.get(nativeFilters.filterItem) + .contains(testItems.filterDefaultValue) + .should('be.visible'); + }); + + it('Verify that allow for deleted filter restore', () => { expandFilterOnLeftPanel(); enterNativeFilterEditModal(); fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenGamesChart.filterColumn, - testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumn); + testItems.filterType.value, + testItems.topTenGamesChart.filterColumn, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumn, + ); saveNativeFilterSettings(); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); validateFilterNameOnDashboard(testItems.topTenGamesChart.filterColumn); enterNativeFilterEditModal(); cy.get(nativeFilters.filtersList.removeIcon).first().click(); cy.get('[data-test="restore-filter-button"]').should('be.visible').click(); - cy - .get(nativeFilters.modal.container) - .find(nativeFilters.filtersPanel.filterName) - .should('have.attr', 'value', testItems.topTenGamesChart.filterColumn); - }); - - it('User can stop filtering when filter is removed', () => { + cy.get(nativeFilters.modal.container) + .find(nativeFilters.filtersPanel.filterName) + .should('have.attr', 'value', testItems.topTenGamesChart.filterColumn); + }); + + it('User can stop filtering when filter is removed', () => { expandFilterOnLeftPanel(); enterNativeFilterEditModal(); fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenGamesChart.filterColumn, - testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumn); + testItems.filterType.value, + testItems.topTenGamesChart.filterColumn, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumn, + ); inputNativeFilterDefaultValue(testItems.filterDefaultValue); saveNativeFilterSettings(); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); cy.get(dataTestChartName(testItems.topTenGamesChart.name)).within(() => { - cy.contains(testItems.filterDefaultValue).should('be.visible'); - cy.contains(testItems.filterOtherCountry).should('not.exist'); + cy.contains(testItems.filterDefaultValue).should('be.visible'); + cy.contains(testItems.filterOtherCountry).should('not.exist'); }); - cy - .get(nativeFilters.filterItem) - .contains(testItems.filterDefaultValue) - .should('be.visible'); + cy.get(nativeFilters.filterItem) + .contains(testItems.filterDefaultValue) + .should('be.visible'); validateFilterNameOnDashboard(testItems.topTenGamesChart.filterColumn); enterNativeFilterEditModal(); deleteNativeFilter(); saveNativeFilterSettings(); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); cy.get(dataTestChartName(testItems.topTenGamesChart.name)).within(() => { - cy.contains(testItems.filterDefaultValue).should('be.visible'); - cy.contains(testItems.filterOtherCountry).should('be.visible'); + cy.contains(testItems.filterDefaultValue).should('be.visible'); + cy.contains(testItems.filterOtherCountry).should('be.visible'); }); - }); + }); it('user can delete dependent filter', () => { expandFilterOnLeftPanel(); enterNativeFilterEditModal(); fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenGamesChart.filterColumnRegion, - testItems.datasetForNativeFilter, + testItems.filterType.value, + testItems.topTenGamesChart.filterColumnRegion, + testItems.datasetForNativeFilter, testItems.topTenGamesChart.filterColumnRegion, ); clickOnAddFilterInModal(); fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenGamesChart.filterColumn, - testItems.datasetForNativeFilter, + testItems.filterType.value, + testItems.topTenGamesChart.filterColumn, + testItems.datasetForNativeFilter, testItems.topTenGamesChart.filterColumn, ); - cy - .get(nativeFilters.filterConfigurationSections.displayedSection) - .within(() => { - cy - .contains('Values are dependent on other filters') - .should('be.visible') - .click(); - }); + cy.get(nativeFilters.filterConfigurationSections.displayedSection).within( + () => { + cy.contains('Values are dependent on other filters') + .should('be.visible') + .click(); + }, + ); addParentFilterWithValue(0, testItems.topTenGamesChart.filterColumnRegion); // remove year native filter to cause it disappears from parent filter input in global sales - cy - .get(nativeFilters.modal.tabsList.removeTab) - .should('be.visible') - .first() - .click(); + cy.get(nativeFilters.modal.tabsList.removeTab) + .should('be.visible') + .first() + .click(); // make sure you are seeing global sales filter which had parent filter - cy - .get(nativeFilters.modal.tabsList.filterItemsContainer) - .children() - .last() - .click(); + cy.get(nativeFilters.modal.tabsList.filterItemsContainer) + .children() + .last() + .click(); // cy.wait(1000); - cy - .get(nativeFilters.filterConfigurationSections.displayedSection) - .within(() => { - cy.contains('Values are dependent on other filters').should('not.exist'); - }); - }); - - it('User can create filter depend on 2 other filters', () => { + cy.get(nativeFilters.filterConfigurationSections.displayedSection).within( + () => { + cy.contains('Values are dependent on other filters').should( + 'not.exist', + ); + }, + ); + }); + + it('User can create filter depend on 2 other filters', () => { expandFilterOnLeftPanel(); enterNativeFilterEditModal(); // add first filter fillNativeFilterForm( testItems.filterType.value, - testItems.topTenGamesChart.filterColumnRegion, - testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumnRegion); - + testItems.topTenGamesChart.filterColumnRegion, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumnRegion, + ); + // add second filter clickOnAddFilterInModal(); fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenGamesChart.filterColumn, - testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumn); - + testItems.filterType.value, + testItems.topTenGamesChart.filterColumn, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumn, + ); + // add third filter clickOnAddFilterInModal(); fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenGamesChart.filterColumnCountryCode, - testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumnCountryCode); + testItems.filterType.value, + testItems.topTenGamesChart.filterColumnCountryCode, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumnCountryCode, + ); cy.wait(1000); - cy - .get(nativeFilters.filterConfigurationSections.displayedSection) - .within(() => { - cy - .contains('Values are dependent on other filters') - .should('be.visible') - .click(); - cy.get(exploreView.controlPanel.addFieldValue).click(); - }); + cy.get(nativeFilters.filterConfigurationSections.displayedSection).within( + () => { + cy.contains('Values are dependent on other filters') + .should('be.visible') + .click(); + cy.get(exploreView.controlPanel.addFieldValue).click(); + }, + ); // add value to the first input addParentFilterWithValue(0, testItems.topTenGamesChart.filterColumnRegion); // add value to the second input @@ -588,71 +625,77 @@ describe('Nativefilters Sanity test', () => { // wait for charts load WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); // filters should be displayed in the left panel - [testItems.topTenGamesChart.filterColumnRegion, testItems.topTenGamesChart.filterColumn, testItems.topTenGamesChart.filterColumnCountryCode].forEach((it) => { + [ + testItems.topTenGamesChart.filterColumnRegion, + testItems.topTenGamesChart.filterColumn, + testItems.topTenGamesChart.filterColumnCountryCode, + ].forEach(it => { validateFilterNameOnDashboard(it); }); - + // initially first filter shows 39 options getNativeFilterPlaceholderWithIndex(0).should('have.text', '7 options'); // initially second filter shows 409 options getNativeFilterPlaceholderWithIndex(1).should('have.text', '214 options'); // verify third filter shows 409 options getNativeFilterPlaceholderWithIndex(2).should('have.text', '214 options'); - + // apply first filter value applyNativeFilterValueWithIndex(0, 'North America'); - + // verify second filter shows 409 options available still getNativeFilterPlaceholderWithIndex(0).should('have.text', '214 options'); - + // verify second filter shows 69 options available still getNativeFilterPlaceholderWithIndex(1).should('have.text', '3 options'); - + // apply second filter value applyNativeFilterValueWithIndex(1, 'United States'); - + // verify number of available options for third filter - should be decreased to only one getNativeFilterPlaceholderWithIndex(0).should('have.text', '1 option'); - }); - - - it('User can remove parent filters', () => { + }); + + it('User can remove parent filters', () => { expandFilterOnLeftPanel(); enterNativeFilterEditModal(); fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenGamesChart.filterColumnRegion, - testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumnRegion); + testItems.filterType.value, + testItems.topTenGamesChart.filterColumnRegion, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumnRegion, + ); clickOnAddFilterInModal(); fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenGamesChart.filterColumn, - testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumn); + testItems.filterType.value, + testItems.topTenGamesChart.filterColumn, + testItems.datasetForNativeFilter, + testItems.topTenGamesChart.filterColumn, + ); cy.wait(1000); // Select dependdent option and auto use platform for genre - cy - .get(nativeFilters.filterConfigurationSections.displayedSection) - .within(() => { - cy - .contains('Values are dependent on other filters') - .should('be.visible') - .click(); - }); + cy.get(nativeFilters.filterConfigurationSections.displayedSection).within( + () => { + cy.contains('Values are dependent on other filters') + .should('be.visible') + .click(); + }, + ); saveNativeFilterSettings(); enterNativeFilterEditModal(); - cy.get(nativeFilters.modal.tabsList.removeTab).should('be.visible').first().click({ - force: true, - }); + cy.get(nativeFilters.modal.tabsList.removeTab) + .should('be.visible') + .first() + .click({ + force: true, + }); saveNativeFilterSettings(); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); cy.get(dataTestChartName(testItems.topTenGamesChart.name)).within(() => { - cy.contains(testItems.filterDefaultValue).should('be.visible'); - cy.contains(testItems.filterOtherCountry).should('be.visible'); + cy.contains(testItems.filterDefaultValue).should('be.visible'); + cy.contains(testItems.filterOtherCountry).should('be.visible'); }); - }); - + }); }); xdescribe('Nativefilters', () => { diff --git a/superset-frontend/cypress-base/cypress/support/directories.ts b/superset-frontend/cypress-base/cypress/support/directories.ts index 6daeb340182fa..9c783a7220e80 100644 --- a/superset-frontend/cypress-base/cypress/support/directories.ts +++ b/superset-frontend/cypress-base/cypress/support/directories.ts @@ -19,7 +19,7 @@ const dataTestLocator = (value: string) => `[data-test='${value}']`; -export function dataTestChartName(chartName : string) : string { +export function dataTestChartName(chartName: string): string { return `[data-test-chart-name='${chartName}']`; } @@ -366,7 +366,7 @@ export const nativeFilters = { infoTooltip: '[aria-label="Show info tooltip"]', parentFilterInput: dataTestLocator('parent-filter-input'), filterPlaceholder: '.ant-select-selection-placeholder', - collapsedSectionContainer: '[class="ant-collapse-content-box"]' + collapsedSectionContainer: '[class="ant-collapse-content-box"]', }, filtersList: { list: '.ant-tabs-nav-list', @@ -384,7 +384,7 @@ export const nativeFilters = { slider: '[class="ant-slider"]', startHandle: '[class="ant-slider-handle ant-slider-handle-1"]', endHandle: '[class="ant-slider-handle ant-slider-handle-2"]', - sliderText: '[class="ant-slider-mark-text ant-slider-mark-text-active"]' + sliderText: '[class="ant-slider-mark-text ant-slider-mark-text-active"]', }, }; export const dashboardListView = { @@ -614,7 +614,7 @@ export const dashboardView = { dashboardContainer: dataTestLocator('grid-container'), dashboardAlert: { modal: dataTestLocator('toast-container'), - closeButton: dataTestLocator('close-button') + closeButton: dataTestLocator('close-button'), }, saveModal: { modal: '.ant-modal-content', From 5ed2acc50a5e78bdd8c12ccaffe0145ea49706c3 Mon Sep 17 00:00:00 2001 From: Jinghua Yao Date: Fri, 22 Apr 2022 14:25:27 -0700 Subject: [PATCH 03/13] fix fail test --- .../dashboard/nativeFilters.test.ts | 55 +------------------ 1 file changed, 3 insertions(+), 52 deletions(-) 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 37f3295bad0bf..aa4ac74dc4b0a 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts @@ -211,7 +211,9 @@ describe('Nativefilters Sanity test', () => { expect(ur.search).to.include('native_filters'); }); validateFilterNameOnDashboard(testItems.filterType.timeRange); - validateFilterContentOnDashboard('2005-12-17'); + cy.get(nativeFilters.filterFromDashboardView.timeRangeFilterContent) + .contains('2005-12-17') + .should('be.visible'); }); it("User can check 'Filter has default value'", () => { @@ -251,7 +253,6 @@ describe('Nativefilters Sanity test', () => { }); it('User can create a time column filter', () => { - createTimeColumnTestChart(); expandFilterOnLeftPanel(); enterNativeFilterEditModal(); fillNativeFilterForm( @@ -264,7 +265,6 @@ describe('Nativefilters Sanity test', () => { cy.get(nativeFilters.modal.container).should('not.exist'); // assert that native filter is created validateFilterNameOnDashboard(testItems.filterType.timeColumn); - applyNativeFilterValueWithIndex( 0, testItems.topTenGamesChart.filterColumnYear, @@ -276,31 +276,6 @@ describe('Nativefilters Sanity test', () => { ); }); - it('User can create a time range filter', () => { - expandFilterOnLeftPanel(); - enterNativeFilterEditModal(); - fillNativeFilterForm( - testItems.filterType.timeRange, - testItems.filterType.timeRange, - ); - cy.intercept(`/api/v1/chart/data?form_data=**`).as('chart'); - saveNativeFilterSettings(); - cy.wait('@chart'); - cy.get(dashboardView.salesDashboardSpecific.vehicleSalesFilterTimeRange) - .should('be.visible') - .click(); - applyAdvancedTimeRangeFilterOnDashboard('2005-12-17'); - cy.wait('@chart'); - cy.url().then(u => { - const ur = new URL(u); - expect(ur.search).to.include('native_filters'); - }); - validateFilterNameOnDashboard(testItems.filterType.timeRange); - cy.get(nativeFilters.filterFromDashboardView.timeRangeFilterContent) - .contains('2005-12-17') - .should('be.visible'); - }); - it('User can create a value filter', () => { expandFilterOnLeftPanel(); enterNativeFilterEditModal(); @@ -421,30 +396,6 @@ describe('Nativefilters Sanity test', () => { }); }); - it('User can create a time column filter', () => { - expandFilterOnLeftPanel(); - enterNativeFilterEditModal(); - fillNativeFilterForm( - testItems.filterType.timeColumn, - testItems.filterType.timeColumn, - testItems.datasetForNativeFilter, - ); - saveNativeFilterSettings(); - cy.intercept(`/api/v1/chart/data?form_data=**`).as('chart'); - cy.get(nativeFilters.modal.container).should('not.exist'); - // assert that native filter is created - validateFilterNameOnDashboard(testItems.filterType.timeColumn); - applyNativeFilterValueWithIndex( - 0, - testItems.topTenGamesChart.filterColumnYear, - ); - cy.get(nativeFilters.applyFilter).click({ force: true }); - cy.wait('@chart'); - validateFilterContentOnDashboard( - testItems.topTenGamesChart.filterColumnYear, - ); - }); - it('Verify that default value is respected after revisit', () => { expandFilterOnLeftPanel(); enterNativeFilterEditModal(); From da321317e4443422ea92703051e3a6da826fee03 Mon Sep 17 00:00:00 2001 From: Jinghua Yao Date: Fri, 22 Apr 2022 21:10:31 -0700 Subject: [PATCH 04/13] fix front end error --- .../integration/dashboard/dashboard.helper.ts | 52 ------------------- .../dashboard/nativeFilters.test.ts | 3 +- 2 files changed, 1 insertion(+), 54 deletions(-) diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts index ec34e1b6e656c..2c6f25c2c2097 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts @@ -395,58 +395,6 @@ export function addParentFilterWithValue(index: number, value: string) { }); } -/** ************************************************************************ - * Create test chart for time column filter test - * @returns {null} - * @summary helper Create test chart for time column filter test - ************************************************************************* */ -export function createTimeColumnTestChart() { - const VIZ_DEFAULTS = { - ...FORM_DATA_DEFAULTS, - viz_type: 'echarts_timeseries', - datasource: '13__table', - granularity_sqla: 'purpose__last_set', - time_range_endpoints: ['inclusive', 'exclusive'], - time_grain_sqla: 'P1D', - time_range: 'No filter', - metrics: ['count'], - comparison_type: 'values', - forecastPeriods: 10, - forecastInterval: 0.8, - x_axis_title_margin: 15, - y_axis_title_margin: 15, - y_axis_title_position: 'Left', - color_scheme: 'supersetColors', - seriesType: 'line', - only_total: true, - opacity: 0.2, - markerSize: 6, - legendType: 'scroll', - legendOrientation: 'top', - x_axis_time_format: 'smart_date', - rich_tooltip: true, - tooltipTimeFormat: 'smart_date', - y_axis_format: 'SMART_NUMBER', - }; - cy.visitChartByParams({ - ...VIZ_DEFAULTS, - }); - cy.get(exploreView.controlPanel.runButton).should('exist', { - timeout: 10000, - }); - cy.get(exploreView.controlPanel.saveQuery).click(); - cy.get(exploreView.saveModal.modal).within(() => { - cy.get(exploreView.saveModal.chartNameInput).type( - `${testItems.chart}{enter}`, - ); - cy.get(exploreView.saveModal.dashboardNameInput).type( - `${testItems.dashboard}{enter}`, - { delay: 100 }, - ); - cy.get(exploreView.saveModal.saveAndGoToDashboard).click(); - }); -} - /** ************************************************************************ * Save Native Filter Settings * @returns {None} 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 aa4ac74dc4b0a..ef7d4c9dea8dc 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts @@ -34,7 +34,6 @@ import { clickOnAddFilterInModal, closeDashboardToastMessage, collapseFilterOnLeftPanel, - createTimeColumnTestChart, deleteNativeFilter, enterNativeFilterEditModal, expandFilterOnLeftPanel, @@ -421,7 +420,7 @@ describe('Nativefilters Sanity test', () => { const dashboards = xhr.body.result; console.log(dashboards); for (const element of dashboards) { - if (element.dashboard_title == testItems.dashboard) { + if (element.dashboard_title === testItems.dashboard) { cy.visit(element.url); } } From 5fe72e0731c4540a5221ae0dacb4bb8342e7ac54 Mon Sep 17 00:00:00 2001 From: Jinghua Yao Date: Fri, 22 Apr 2022 23:25:34 -0700 Subject: [PATCH 05/13] fix frontend error --- .../integration/dashboard/dashboard.helper.ts | 3 +- .../dashboard/nativeFilters.test.ts | 132 +++++++++--------- 2 files changed, 65 insertions(+), 70 deletions(-) diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts index 2c6f25c2c2097..ddacd9a3af5ea 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts @@ -5,7 +5,6 @@ import { exploreView, nativeFilters, } from 'cypress/support/directories'; -import { FORM_DATA_DEFAULTS } from '../explore/visualizations/shared.helper'; /** * Licensed to the Apache Software Foundation (ASF) under one @@ -47,7 +46,7 @@ export const testItems = { timeGrain: 'Time grain', timeRange: 'Time range', }, - topTenGamesChart: { + topTenChart: { name: 'Most Populated Countries', filterColumn: 'country_name', filterColumnYear: 'year', 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 ef7d4c9dea8dc..991b92b137302 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts @@ -108,9 +108,9 @@ describe('Nativefilters Sanity test', () => { cy.wait('@datasetLoad'); fillNativeFilterForm( testItems.filterType.value, - testItems.topTenGamesChart.filterColumn, + testItems.topTenChart.filterColumn, testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumn, + testItems.topTenChart.filterColumn, ); saveNativeFilterSettings(); cy.wait(3000); @@ -158,13 +158,13 @@ describe('Nativefilters Sanity test', () => { enterNativeFilterEditModal(); fillNativeFilterForm( testItems.filterType.value, - testItems.topTenGamesChart.filterColumn, + testItems.topTenChart.filterColumn, testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumn, + testItems.topTenChart.filterColumn, ); saveNativeFilterSettings(); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); - validateFilterNameOnDashboard(testItems.topTenGamesChart.filterColumn); + validateFilterNameOnDashboard(testItems.topTenChart.filterColumn); enterNativeFilterEditModal(); undoDeleteNativeFilter(); }); @@ -220,9 +220,9 @@ describe('Nativefilters Sanity test', () => { enterNativeFilterEditModal(); fillNativeFilterForm( testItems.filterType.value, - testItems.topTenGamesChart.filterColumn, + testItems.topTenChart.filterColumn, testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumn, + testItems.topTenChart.filterColumn, ); inputNativeFilterDefaultValue(testItems.filterDefaultValue); saveNativeFilterSettings(); @@ -264,15 +264,10 @@ describe('Nativefilters Sanity test', () => { cy.get(nativeFilters.modal.container).should('not.exist'); // assert that native filter is created validateFilterNameOnDashboard(testItems.filterType.timeColumn); - applyNativeFilterValueWithIndex( - 0, - testItems.topTenGamesChart.filterColumnYear, - ); + applyNativeFilterValueWithIndex(0, testItems.topTenChart.filterColumnYear); cy.get(nativeFilters.applyFilter).click({ force: true }); cy.wait('@chart'); - validateFilterContentOnDashboard( - testItems.topTenGamesChart.filterColumnYear, - ); + validateFilterContentOnDashboard(testItems.topTenChart.filterColumnYear); }); it('User can create a value filter', () => { @@ -282,15 +277,15 @@ describe('Nativefilters Sanity test', () => { cy.get('body').type('{home}'); fillNativeFilterForm( testItems.filterType.value, - testItems.topTenGamesChart.filterColumn, + testItems.topTenChart.filterColumn, testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumn, + testItems.topTenChart.filterColumn, ); cy.get(nativeFilters.filtersPanel.filterTypeInput) .find(nativeFilters.filtersPanel.filterTypeItem) .should('have.text', testItems.filterType.value); saveNativeFilterSettings(); - validateFilterNameOnDashboard(testItems.topTenGamesChart.filterColumn); + validateFilterNameOnDashboard(testItems.topTenChart.filterColumn); }); it('User can create parent filters using "Values are dependent on other filters"', () => { @@ -301,17 +296,17 @@ describe('Nativefilters Sanity test', () => { // Create parent filter 'region'. fillNativeFilterForm( testItems.filterType.value, - testItems.topTenGamesChart.filterColumnRegion, + testItems.topTenChart.filterColumnRegion, testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumnRegion, + testItems.topTenChart.filterColumnRegion, ); // Create filter 'country_name' depend on region filter. clickOnAddFilterInModal(); fillNativeFilterForm( testItems.filterType.value, - testItems.topTenGamesChart.filterColumn, + testItems.topTenChart.filterColumn, testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumn, + testItems.topTenChart.filterColumn, ); cy.get(nativeFilters.filterConfigurationSections.displayedSection).within( () => { @@ -320,14 +315,14 @@ describe('Nativefilters Sanity test', () => { .click(); }, ); - addParentFilterWithValue(0, testItems.topTenGamesChart.filterColumnRegion); + addParentFilterWithValue(0, testItems.topTenChart.filterColumnRegion); cy.wait(1000); saveNativeFilterSettings(); // Validate both filter in dashboard view. WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); [ - testItems.topTenGamesChart.filterColumnRegion, - testItems.topTenGamesChart.filterColumn, + testItems.topTenChart.filterColumnRegion, + testItems.topTenChart.filterColumn, ].forEach(it => { cy.get(nativeFilters.filterFromDashboardView.filterName) .contains(it) @@ -348,15 +343,15 @@ describe('Nativefilters Sanity test', () => { enterNativeFilterEditModal(); fillNativeFilterForm( testItems.filterType.value, - testItems.topTenGamesChart.filterColumn, + testItems.topTenChart.filterColumn, testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumn, + testItems.topTenChart.filterColumn, ); saveNativeFilterSettings(); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); applyNativeFilterValueWithIndex(0, testItems.filterDefaultValue); cy.get(nativeFilters.applyFilter).click(); - cy.get(dataTestChartName(testItems.topTenGamesChart.name)).within(() => { + cy.get(dataTestChartName(testItems.topTenChart.name)).within(() => { cy.contains(testItems.filterDefaultValue).should('be.visible'); cy.contains(testItems.filterOtherCountry).should('not.exist'); }); @@ -400,9 +395,9 @@ describe('Nativefilters Sanity test', () => { enterNativeFilterEditModal(); fillNativeFilterForm( testItems.filterType.value, - testItems.topTenGamesChart.filterColumn, + testItems.topTenChart.filterColumn, testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumn, + testItems.topTenChart.filterColumn, ); inputNativeFilterDefaultValue(testItems.filterDefaultValue); saveNativeFilterSettings(); @@ -410,23 +405,24 @@ describe('Nativefilters Sanity test', () => { cy.get(nativeFilters.filterItem) .contains(testItems.filterDefaultValue) .should('be.visible'); - cy.get(dataTestChartName(testItems.topTenGamesChart.name)).within(() => { + cy.get(dataTestChartName(testItems.topTenChart.name)).within(() => { cy.contains(testItems.filterDefaultValue).should('be.visible'); cy.contains(testItems.filterOtherCountry).should('not.exist'); }); cy.request( 'api/v1/dashboard/?q=(order_column:changed_on_delta_humanized,order_direction:desc,page:0,page_size:100)', ).then(xhr => { - const dashboards = xhr.body.result; - console.log(dashboards); - for (const element of dashboards) { - if (element.dashboard_title === testItems.dashboard) { - cy.visit(element.url); - } - } + const dashboards = xhr.response?.body.result; + /* eslint-disable no-unused-expressions */ + expect(dashboards).not.to.be.undefined; + const testDashboard = dashboards.find( + (d: { dashboard_title: string }) => + d.dashboard_title === `${dashboard}`, + ); + cy.visit(testDashboard.url); }); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); - cy.get(dataTestChartName(testItems.topTenGamesChart.name)).within(() => { + cy.get(dataTestChartName(testItems.topTenChart.name)).within(() => { cy.contains(testItems.filterDefaultValue).should('be.visible'); cy.contains(testItems.filterOtherCountry).should('not.exist'); }); @@ -440,19 +436,19 @@ describe('Nativefilters Sanity test', () => { enterNativeFilterEditModal(); fillNativeFilterForm( testItems.filterType.value, - testItems.topTenGamesChart.filterColumn, + testItems.topTenChart.filterColumn, testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumn, + testItems.topTenChart.filterColumn, ); saveNativeFilterSettings(); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); - validateFilterNameOnDashboard(testItems.topTenGamesChart.filterColumn); + validateFilterNameOnDashboard(testItems.topTenChart.filterColumn); enterNativeFilterEditModal(); cy.get(nativeFilters.filtersList.removeIcon).first().click(); cy.get('[data-test="restore-filter-button"]').should('be.visible').click(); cy.get(nativeFilters.modal.container) .find(nativeFilters.filtersPanel.filterName) - .should('have.attr', 'value', testItems.topTenGamesChart.filterColumn); + .should('have.attr', 'value', testItems.topTenChart.filterColumn); }); it('User can stop filtering when filter is removed', () => { @@ -460,26 +456,26 @@ describe('Nativefilters Sanity test', () => { enterNativeFilterEditModal(); fillNativeFilterForm( testItems.filterType.value, - testItems.topTenGamesChart.filterColumn, + testItems.topTenChart.filterColumn, testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumn, + testItems.topTenChart.filterColumn, ); inputNativeFilterDefaultValue(testItems.filterDefaultValue); saveNativeFilterSettings(); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); - cy.get(dataTestChartName(testItems.topTenGamesChart.name)).within(() => { + cy.get(dataTestChartName(testItems.topTenChart.name)).within(() => { cy.contains(testItems.filterDefaultValue).should('be.visible'); cy.contains(testItems.filterOtherCountry).should('not.exist'); }); cy.get(nativeFilters.filterItem) .contains(testItems.filterDefaultValue) .should('be.visible'); - validateFilterNameOnDashboard(testItems.topTenGamesChart.filterColumn); + validateFilterNameOnDashboard(testItems.topTenChart.filterColumn); enterNativeFilterEditModal(); deleteNativeFilter(); saveNativeFilterSettings(); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); - cy.get(dataTestChartName(testItems.topTenGamesChart.name)).within(() => { + cy.get(dataTestChartName(testItems.topTenChart.name)).within(() => { cy.contains(testItems.filterDefaultValue).should('be.visible'); cy.contains(testItems.filterOtherCountry).should('be.visible'); }); @@ -490,16 +486,16 @@ describe('Nativefilters Sanity test', () => { enterNativeFilterEditModal(); fillNativeFilterForm( testItems.filterType.value, - testItems.topTenGamesChart.filterColumnRegion, + testItems.topTenChart.filterColumnRegion, testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumnRegion, + testItems.topTenChart.filterColumnRegion, ); clickOnAddFilterInModal(); fillNativeFilterForm( testItems.filterType.value, - testItems.topTenGamesChart.filterColumn, + testItems.topTenChart.filterColumn, testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumn, + testItems.topTenChart.filterColumn, ); cy.get(nativeFilters.filterConfigurationSections.displayedSection).within( () => { @@ -508,7 +504,7 @@ describe('Nativefilters Sanity test', () => { .click(); }, ); - addParentFilterWithValue(0, testItems.topTenGamesChart.filterColumnRegion); + addParentFilterWithValue(0, testItems.topTenChart.filterColumnRegion); // remove year native filter to cause it disappears from parent filter input in global sales cy.get(nativeFilters.modal.tabsList.removeTab) .should('be.visible') @@ -536,27 +532,27 @@ describe('Nativefilters Sanity test', () => { // add first filter fillNativeFilterForm( testItems.filterType.value, - testItems.topTenGamesChart.filterColumnRegion, + testItems.topTenChart.filterColumnRegion, testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumnRegion, + testItems.topTenChart.filterColumnRegion, ); // add second filter clickOnAddFilterInModal(); fillNativeFilterForm( testItems.filterType.value, - testItems.topTenGamesChart.filterColumn, + testItems.topTenChart.filterColumn, testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumn, + testItems.topTenChart.filterColumn, ); // add third filter clickOnAddFilterInModal(); fillNativeFilterForm( testItems.filterType.value, - testItems.topTenGamesChart.filterColumnCountryCode, + testItems.topTenChart.filterColumnCountryCode, testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumnCountryCode, + testItems.topTenChart.filterColumnCountryCode, ); cy.wait(1000); cy.get(nativeFilters.filterConfigurationSections.displayedSection).within( @@ -568,17 +564,17 @@ describe('Nativefilters Sanity test', () => { }, ); // add value to the first input - addParentFilterWithValue(0, testItems.topTenGamesChart.filterColumnRegion); + addParentFilterWithValue(0, testItems.topTenChart.filterColumnRegion); // add value to the second input - addParentFilterWithValue(1, testItems.topTenGamesChart.filterColumn); + addParentFilterWithValue(1, testItems.topTenChart.filterColumn); saveNativeFilterSettings(); // wait for charts load WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); // filters should be displayed in the left panel [ - testItems.topTenGamesChart.filterColumnRegion, - testItems.topTenGamesChart.filterColumn, - testItems.topTenGamesChart.filterColumnCountryCode, + testItems.topTenChart.filterColumnRegion, + testItems.topTenChart.filterColumn, + testItems.topTenChart.filterColumnCountryCode, ].forEach(it => { validateFilterNameOnDashboard(it); }); @@ -611,16 +607,16 @@ describe('Nativefilters Sanity test', () => { enterNativeFilterEditModal(); fillNativeFilterForm( testItems.filterType.value, - testItems.topTenGamesChart.filterColumnRegion, + testItems.topTenChart.filterColumnRegion, testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumnRegion, + testItems.topTenChart.filterColumnRegion, ); clickOnAddFilterInModal(); fillNativeFilterForm( testItems.filterType.value, - testItems.topTenGamesChart.filterColumn, + testItems.topTenChart.filterColumn, testItems.datasetForNativeFilter, - testItems.topTenGamesChart.filterColumn, + testItems.topTenChart.filterColumn, ); cy.wait(1000); // Select dependdent option and auto use platform for genre @@ -641,7 +637,7 @@ describe('Nativefilters Sanity test', () => { }); saveNativeFilterSettings(); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); - cy.get(dataTestChartName(testItems.topTenGamesChart.name)).within(() => { + cy.get(dataTestChartName(testItems.topTenChart.name)).within(() => { cy.contains(testItems.filterDefaultValue).should('be.visible'); cy.contains(testItems.filterOtherCountry).should('be.visible'); }); From 34cabfa69ca06a57067b3c56fd5cfdbf21efda87 Mon Sep 17 00:00:00 2001 From: Jinghua Yao Date: Mon, 25 Apr 2022 00:38:11 -0700 Subject: [PATCH 06/13] fix fail test for front end check --- .../cypress/integration/dashboard/nativeFilters.test.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) 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 991b92b137302..79c979510a111 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts @@ -412,12 +412,10 @@ describe('Nativefilters Sanity test', () => { cy.request( 'api/v1/dashboard/?q=(order_column:changed_on_delta_humanized,order_direction:desc,page:0,page_size:100)', ).then(xhr => { - const dashboards = xhr.response?.body.result; - /* eslint-disable no-unused-expressions */ - expect(dashboards).not.to.be.undefined; + const dashboards = xhr.body.result; const testDashboard = dashboards.find( (d: { dashboard_title: string }) => - d.dashboard_title === `${dashboard}`, + d.dashboard_title === testItems.dashboard, ); cy.visit(testDashboard.url); }); From b7ecaf3a20faf622aae1e5b8a9676b979a8c76d0 Mon Sep 17 00:00:00 2001 From: Jinghua Yao Date: Mon, 25 Apr 2022 20:39:15 -0700 Subject: [PATCH 07/13] add native filter helper --- .../integration/dashboard/dashboard.helper.ts | 354 +-------------- .../dashboard/nativeFilter.helper.ts | 411 ++++++++++++++++++ .../dashboard/nativeFilters.test.ts | 162 ++----- 3 files changed, 442 insertions(+), 485 deletions(-) create mode 100644 superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilter.helper.ts diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts index ddacd9a3af5ea..5b7fd64497f4d 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts @@ -1,10 +1,5 @@ import { getChartAlias, Slice } from 'cypress/utils/vizPlugins'; -import { - dashboardView, - editDashboardView, - exploreView, - nativeFilters, -} from 'cypress/support/directories'; +import { dashboardView } from 'cypress/support/directories'; /** * Licensed to the Apache Software Foundation (ASF) under one @@ -76,39 +71,6 @@ export const WORLD_HEALTH_CHARTS = [ { name: 'Box plot', viz: 'box_plot' }, ] as const; -export const nativeFilterTooltips = { - searchAllFilterOptions: - 'By default, each filter loads at most 1000 choices at the initial page load. Check this box if you have more than 1000 filter values and want to enable dynamically searching that loads filter values as users type (may add stress to your database).', - defaultToFirstItem: 'When using this option, default value can’t be set', - inverseSelection: 'Exclude selected values', - required: 'User must select a value before applying the filter', - multipleSelect: 'Allow selecting multiple values', - defaultValue: - 'Default value must be set when "Filter value is required" is checked', -}; - -export const nativeFilterOptions = [ - 'Filter has default value', - 'Multiple select', - 'Filter value is required', - 'Filter is hierarchical', - 'Default to first item', - 'Inverse selection', - 'Search all filter options', - 'Pre-filter available values', - 'Sort filter values', -]; -export const valueNativeFilterOptions = [ - 'Pre-filter available values', - 'Sort filter values', - 'Filter has default value', - 'Select first filter value by default', - 'Can select multiple values', - 'Dynamically search all filter values', - 'Inverse selection', - 'Filter value is required', -]; - /** Used to specify charts expected by the test suite */ export interface ChartSpec { name: string; @@ -244,317 +206,3 @@ export function copyTestDashboard(dashboard: string) { .its('response.statusCode') .should('eq', 200); } - -/** ************************************************************************ - * Expend Native filter from the left panel on dashboard - * @returns {None} - * @summary helper for expend native filter - ************************************************************************* */ -export function expandFilterOnLeftPanel() { - return cy - .get(nativeFilters.filterFromDashboardView.expand) - .click({ force: true }); -} - -/** ************************************************************************ - * Collapes Native Filter from the left panel on dashboard - * @returns {None} - * @summary helper for collape native filter - ************************************************************************* */ -export function collapseFilterOnLeftPanel() { - cy.get(nativeFilters.filterFromDashboardView.collapse) - .should('be.visible') - .click(); - cy.get(nativeFilters.filterFromDashboardView.collapse).should( - 'not.be.visible', - ); -} - -/** ************************************************************************ - * Enter Native Filter edit modal from the left panel on dashboard - * @returns {None} - * @summary helper for enter native filter edit modal - ************************************************************************* */ -export function enterNativeFilterEditModal() { - cy.get(nativeFilters.filterFromDashboardView.createFilterButton) - .should('be.visible') - .click(); - cy.get(nativeFilters.modal.container).should('be.visible'); -} - -/** ************************************************************************ - * Clicks on new filter button - * @returns {None} - * @summary helper for adding new filter - ************************************************************************* */ -export function clickOnAddFilterInModal() { - return cy - .get(nativeFilters.addFilterButton.button) - .first() - .click() - .then(() => { - cy.get(nativeFilters.addFilterButton.dropdownItem) - .contains('Filter') - .click({ force: true }); - }); -} - -/** ************************************************************************ - * Fills value native filter form with basic information - * @param {string} type type for filter: Value, Numerical range,Time column,Time grain,Time range - * @param {string} name name for filter - * @param {string} dataset which dataset should be used - * @param {string} filterColumn which column should be used - * @returns {None} - * @summary helper for filling value native filter form - ************************************************************************* */ -export function fillNativeFilterForm( - type: string, - name: string, - dataset?: string, - filterColumn?: string, -) { - cy.get(nativeFilters.filtersPanel.filterTypeInput) - .find(nativeFilters.filtersPanel.filterTypeItem) - .click({ multiple: true, force: true }); - cy.get(`[label="${type}"]`).click({ multiple: true, force: true }); - cy.get(nativeFilters.modal.container) - .find(nativeFilters.filtersPanel.filterName) - .last() - .click({ scrollBehavior: false }) - .type(name, { scrollBehavior: false }); - if (dataset) { - cy.get(nativeFilters.modal.container) - .find(nativeFilters.filtersPanel.datasetName) - .last() - .click({ force: true, scrollBehavior: false }) - .type(`${dataset}`, { scrollBehavior: false }); - cy.get(nativeFilters.silentLoading).should('not.exist'); - cy.get(`[label="${dataset}"]`).click({ multiple: true, force: true }); - } - cy.get(nativeFilters.silentLoading).should('not.exist'); - if (filterColumn) { - cy.get(nativeFilters.filtersPanel.filterInfoInput) - .last() - .should('be.visible') - .click({ force: true }); - cy.get(nativeFilters.filtersPanel.filterInfoInput) - .last() - .type(filterColumn); - cy.get(nativeFilters.filtersPanel.inputDropdown) - .should('be.visible', { timeout: 20000 }) - .last() - .click(); - } - cy.get(nativeFilters.silentLoading).should('not.exist'); -} - -/** ************************************************************************ - * Get native filter placeholder e.g 9 options - * @param {number} index which input it fills - * @returns cy object for assertions - * @summary helper for getting placeholder value - ************************************************************************* */ -export function getNativeFilterPlaceholderWithIndex(index: number) { - return cy.get(nativeFilters.filtersPanel.columnEmptyInput).eq(index); -} - -/** ************************************************************************ - * Apply native filter value from dashboard view - * @param {number} index which input it fills - * @param {string} value what is filter value - * @returns {null} - * @summary put value to nth native filter input in view - ************************************************************************* */ -export function applyNativeFilterValueWithIndex(index: number, value: string) { - cy.get(nativeFilters.filterFromDashboardView.filterValueInput) - .eq(index) - .parent() - .should('be.visible', { timeout: 10000 }) - .type(`${value}{enter}`); - // click the title to dismiss shown options - cy.get(nativeFilters.filterFromDashboardView.filterName).eq(index).click(); -} - -/** ************************************************************************ - * Fills parent filter input - * @param {number} index which input it fills - * @param {string} value on which filter it depends on - * @returns {null} - * @summary takes first or second input and modify the depends on filter value - ************************************************************************* */ -export function addParentFilterWithValue(index: number, value: string) { - return cy - .get(nativeFilters.filterConfigurationSections.displayedSection) - .within(() => { - cy.get('input[aria-label="Limit type"]') - .eq(index) - .click({ force: true }) - .type(`${value}{enter}`, { delay: 30, force: true }); - }); -} - -/** ************************************************************************ - * Save Native Filter Settings - * @returns {None} - * @summary helper for save native filters settings - ************************************************************************* */ -export function saveNativeFilterSettings() { - cy.get(nativeFilters.modal.footer) - .contains('Save') - .should('be.visible') - .click(); - cy.get(nativeFilters.modal.container).should('not.exist'); -} - -/** ************************************************************************ - * Cancel Native fitler settings - * @returns {None} - * @summary helper for cancel native filters settings - ************************************************************************* */ -export function cancelNativeFilterSettings() { - cy.get(nativeFilters.modal.footer) - .find(nativeFilters.modal.cancelButton) - .should('be.visible') - .click(); - cy.get(nativeFilters.modal.alertXUnsavedFilters) - .should('have.text', 'There are unsaved changes.') - .should('be.visible'); - cy.get(nativeFilters.modal.footer) - .find(nativeFilters.modal.yesCancelButton) - .contains('cancel') - .should('be.visible') - .click(); - cy.get(nativeFilters.modal.container).should('not.exist'); -} - -/** ************************************************************************ - * Close dashboard toast message - * @returns {None} - * @summary helper for close dashboard toast message in order to make test stable - ************************************************************************* */ -export function closeDashboardToastMessage() { - cy.get('body').then($body => { - if ($body.find(dashboardView.dashboardAlert.modal).length > 0) { - // evaluates as true if button exists at all - cy.get(dashboardView.dashboardAlert.modal).then($header => { - if ($header.is(':visible')) { - cy.get(dashboardView.dashboardAlert.closeButton).click({ - force: true, - }); - cy.get(dashboardView.dashboardAlert.closeButton).should('not.exist', { - timeout: 10000, - }); - } - }); - } - }); -} - -/** ************************************************************************ - * Validate filter name on dashboard - * @param name: filter name to validate - * @return {null} - * @summary helper for validate filter name on dashboard - ************************************************************************* */ -export function validateFilterNameOnDashboard(name: string) { - cy.get(nativeFilters.filterFromDashboardView.filterName) - .should('be.visible', { timeout: 40000 }) - .contains(`${name}`); -} - -/** ************************************************************************ - * Validate filter content on dashboard - * @param filterContent: filter content to validate - * @return {null} - * @summary helper for validate filter content on dashboard - ************************************************************************* */ -export function validateFilterContentOnDashboard(filterContent: string) { - cy.get(nativeFilters.filterFromDashboardView.filterContent) - .contains(`${filterContent}`) - .should('be.visible'); -} - -/** ************************************************************************ - * Delete Native filter - * @return {null} - * @summary helper for delete native filter - ************************************************************************* */ -export function deleteNativeFilter() { - cy.get(nativeFilters.filtersList.removeIcon).first().click(); -} - -/** ************************************************************************ - * Undo delete Native filter - * @return {null} - * @summary helper for undo delete native filter - ************************************************************************* */ -export function undoDeleteNativeFilter() { - deleteNativeFilter(); - cy.contains('Undo?').click(); -} - -/** ************************************************************************ - * Check Native Filter tooltip content - * @param index: tooltip indext to check - * @param value: tooltip value to check - * @return {null} - * @summary helper for checking native filter tooltip content by index - ************************************************************************* */ -export function checkNativeFilterTooltip(index: number, value: string) { - cy.get(nativeFilters.filterConfigurationSections.infoTooltip) - .eq(index) - .trigger('mouseover'); - cy.contains(`${value}`); -} - -/** ************************************************************************ - * Apply advanced time range filter on dashboard - * @param startRange: starting time range - * @param endRange: ending time range - * @return {null} - * @summary helper for applying advanced time range filter on dashboard with customize time range - ************************************************************************* */ -export function applyAdvancedTimeRangeFilterOnDashboard( - startRange?: string, - endRange?: string, -) { - cy.get('.control-label').contains('RANGE TYPE').should('be.visible'); - cy.get('.ant-popover-content .ant-select-selector') - .should('be.visible') - .click(); - cy.get(`[label="Advanced"]`).should('be.visible').click(); - cy.get('.section-title').contains('Advanced Time Range').should('be.visible'); - if (startRange) { - cy.get('.ant-popover-inner-content') - .find('[class^=ant-input]') - .first() - .type(`${startRange}`); - } - if (endRange) { - cy.get('.ant-popover-inner-content') - .find('[class^=ant-input]') - .last() - .type(`${endRange}`); - } - cy.get(dashboardView.timeRangeModal.applyButton).click(); - cy.get(nativeFilters.applyFilter).click(); -} - -/** ************************************************************************ - * Input default valule in Native filter in filter settings - * @param defaultValue: default value for native filter - * @return {null} - * @summary helper for input default valule in Native filter in filter settings - ************************************************************************* */ -export function inputNativeFilterDefaultValue(defaultValue: string) { - cy.contains('Filter has default value').click(); - cy.contains('Default value is required').should('be.visible'); - cy.get(nativeFilters.filterConfigurationSections.filterPlaceholder) - .contains('options') - .should('be.visible'); - cy.get(nativeFilters.filterConfigurationSections.collapsedSectionContainer) - .first() - .get(nativeFilters.filtersPanel.columnEmptyInput) - .type(`${defaultValue}{enter}`); -} diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilter.helper.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilter.helper.ts new file mode 100644 index 0000000000000..a9c39768aada1 --- /dev/null +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilter.helper.ts @@ -0,0 +1,411 @@ +/** + * 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 { dashboardView, nativeFilters } from 'cypress/support/directories'; +import { testItems } from './dashboard.helper'; + +export const nativeFilterTooltips = { + searchAllFilterOptions: + 'By default, each filter loads at most 1000 choices at the initial page load. Check this box if you have more than 1000 filter values and want to enable dynamically searching that loads filter values as users type (may add stress to your database).', + defaultToFirstItem: 'When using this option, default value can’t be set', + inverseSelection: 'Exclude selected values', + required: 'User must select a value before applying the filter', + multipleSelect: 'Allow selecting multiple values', + defaultValue: + 'Default value must be set when "Filter value is required" is checked', +}; + +export const nativeFilterOptions = [ + 'Filter has default value', + 'Multiple select', + 'Filter value is required', + 'Filter is hierarchical', + 'Default to first item', + 'Inverse selection', + 'Search all filter options', + 'Pre-filter available values', + 'Sort filter values', +]; + +export const valueNativeFilterOptions = [ + 'Pre-filter available values', + 'Sort filter values', + 'Filter has default value', + 'Select first filter value by default', + 'Can select multiple values', + 'Dynamically search all filter values', + 'Inverse selection', + 'Filter value is required', +]; + +/** ************************************************************************ + * Expend Native filter from the left panel on dashboard + * @returns {None} + * @summary helper for expend native filter + ************************************************************************* */ +export function expandFilterOnLeftPanel() { + return cy + .get(nativeFilters.filterFromDashboardView.expand) + .click({ force: true }); +} + +/** ************************************************************************ + * Collapes Native Filter from the left panel on dashboard + * @returns {None} + * @summary helper for collape native filter + ************************************************************************* */ +export function collapseFilterOnLeftPanel() { + cy.get(nativeFilters.filterFromDashboardView.collapse) + .should('be.visible') + .click(); + cy.get(nativeFilters.filterFromDashboardView.collapse).should( + 'not.be.visible', + ); +} + +/** ************************************************************************ + * Enter Native Filter edit modal from the left panel on dashboard + * @returns {None} + * @summary helper for enter native filter edit modal + ************************************************************************* */ +export function enterNativeFilterEditModal() { + expandFilterOnLeftPanel(); + cy.get(nativeFilters.filterFromDashboardView.createFilterButton) + .should('be.visible') + .click(); + cy.get(nativeFilters.modal.container).should('be.visible'); +} + +/** ************************************************************************ + * Clicks on new filter button + * @returns {None} + * @summary helper for adding new filter + ************************************************************************* */ +export function clickOnAddFilterInModal() { + return cy + .get(nativeFilters.addFilterButton.button) + .first() + .click() + .then(() => { + cy.get(nativeFilters.addFilterButton.dropdownItem) + .contains('Filter') + .click({ force: true }); + }); +} + +/** ************************************************************************ + * Fills value native filter form with basic information + * @param {string} type type for filter: Value, Numerical range,Time column,Time grain,Time range + * @param {string} name name for filter + * @param {string} dataset which dataset should be used + * @param {string} filterColumn which column should be used + * @returns {None} + * @summary helper for filling value native filter form + ************************************************************************* */ +export function fillNativeFilterForm( + type: string, + name: string, + dataset?: string, + filterColumn?: string, +) { + cy.get(nativeFilters.filtersPanel.filterTypeInput) + .find(nativeFilters.filtersPanel.filterTypeItem) + .click({ multiple: true, force: true }); + cy.get(`[label="${type}"]`).click({ multiple: true, force: true }); + cy.get(nativeFilters.modal.container) + .find(nativeFilters.filtersPanel.filterName) + .last() + .click({ scrollBehavior: false }) + .type(name, { scrollBehavior: false }); + if (dataset) { + cy.get(nativeFilters.modal.container) + .find(nativeFilters.filtersPanel.datasetName) + .last() + .click({ force: true, scrollBehavior: false }) + .type(`${dataset}`, { scrollBehavior: false }); + cy.get(nativeFilters.silentLoading).should('not.exist'); + cy.get(`[label="${dataset}"]`).click({ multiple: true, force: true }); + } + cy.get(nativeFilters.silentLoading).should('not.exist'); + if (filterColumn) { + cy.get(nativeFilters.filtersPanel.filterInfoInput) + .last() + .should('be.visible') + .click({ force: true }); + cy.get(nativeFilters.filtersPanel.filterInfoInput) + .last() + .type(filterColumn); + cy.get(nativeFilters.filtersPanel.inputDropdown) + .should('be.visible', { timeout: 20000 }) + .last() + .click(); + } + cy.get(nativeFilters.silentLoading).should('not.exist'); +} + +/** ************************************************************************ + * Get native filter placeholder e.g 9 options + * @param {number} index which input it fills + * @returns cy object for assertions + * @summary helper for getting placeholder value + ************************************************************************* */ +export function getNativeFilterPlaceholderWithIndex(index: number) { + return cy.get(nativeFilters.filtersPanel.columnEmptyInput).eq(index); +} + +/** ************************************************************************ + * Apply native filter value from dashboard view + * @param {number} index which input it fills + * @param {string} value what is filter value + * @returns {null} + * @summary put value to nth native filter input in view + ************************************************************************* */ +export function applyNativeFilterValueWithIndex(index: number, value: string) { + cy.get(nativeFilters.filterFromDashboardView.filterValueInput) + .eq(index) + .parent() + .should('be.visible', { timeout: 10000 }) + .type(`${value}{enter}`); + // click the title to dismiss shown options + cy.get(nativeFilters.filterFromDashboardView.filterName).eq(index).click(); +} + +/** ************************************************************************ + * Fills parent filter input + * @param {number} index which input it fills + * @param {string} value on which filter it depends on + * @returns {null} + * @summary takes first or second input and modify the depends on filter value + ************************************************************************* */ +export function addParentFilterWithValue(index: number, value: string) { + return cy + .get(nativeFilters.filterConfigurationSections.displayedSection) + .within(() => { + cy.get('input[aria-label="Limit type"]') + .eq(index) + .click({ force: true }) + .type(`${value}{enter}`, { delay: 30, force: true }); + }); +} + +/** ************************************************************************ + * Save Native Filter Settings + * @returns {None} + * @summary helper for save native filters settings + ************************************************************************* */ +export function saveNativeFilterSettings() { + cy.get(nativeFilters.modal.footer) + .contains('Save') + .should('be.visible') + .click(); + cy.get(nativeFilters.modal.container).should('not.exist'); +} + +/** ************************************************************************ + * Cancel Native fitler settings + * @returns {None} + * @summary helper for cancel native filters settings + ************************************************************************* */ +export function cancelNativeFilterSettings() { + cy.get(nativeFilters.modal.footer) + .find(nativeFilters.modal.cancelButton) + .should('be.visible') + .click(); + cy.get(nativeFilters.modal.alertXUnsavedFilters) + .should('have.text', 'There are unsaved changes.') + .should('be.visible'); + cy.get(nativeFilters.modal.footer) + .find(nativeFilters.modal.yesCancelButton) + .contains('cancel') + .should('be.visible') + .click(); + cy.get(nativeFilters.modal.container).should('not.exist'); +} + +/** ************************************************************************ + * Close dashboard toast message + * @returns {None} + * @summary helper for close dashboard toast message in order to make test stable + ************************************************************************* */ +export function closeDashboardToastMessage() { + cy.get('body').then($body => { + if ($body.find(dashboardView.dashboardAlert.modal).length > 0) { + // evaluates as true if button exists at all + cy.get(dashboardView.dashboardAlert.modal).then($header => { + if ($header.is(':visible')) { + cy.get(dashboardView.dashboardAlert.closeButton).click({ + force: true, + }); + cy.get(dashboardView.dashboardAlert.closeButton).should('not.exist', { + timeout: 10000, + }); + } + }); + } + }); +} + +/** ************************************************************************ + * Validate filter name on dashboard + * @param name: filter name to validate + * @return {null} + * @summary helper for validate filter name on dashboard + ************************************************************************* */ +export function validateFilterNameOnDashboard(name: string) { + cy.get(nativeFilters.filterFromDashboardView.filterName) + .should('be.visible', { timeout: 40000 }) + .contains(`${name}`); +} + +/** ************************************************************************ + * Validate filter content on dashboard + * @param filterContent: filter content to validate + * @return {null} + * @summary helper for validate filter content on dashboard + ************************************************************************* */ +export function validateFilterContentOnDashboard(filterContent: string) { + cy.get(nativeFilters.filterFromDashboardView.filterContent) + .contains(`${filterContent}`) + .should('be.visible'); +} + +/** ************************************************************************ + * Delete Native filter + * @return {null} + * @summary helper for delete native filter + ************************************************************************* */ +export function deleteNativeFilter() { + cy.get(nativeFilters.filtersList.removeIcon).first().click(); +} + +/** ************************************************************************ + * Undo delete Native filter + * @return {null} + * @summary helper for undo delete native filter + ************************************************************************ */ +export function undoDeleteNativeFilter() { + deleteNativeFilter(); + cy.contains('Undo?').click(); +} + +/** ************************************************************************ + * Check Native Filter tooltip content + * @param index: tooltip indext to check + * @param value: tooltip value to check + * @return {null} + * @summary helper for checking native filter tooltip content by index + ************************************************************************* */ +export function checkNativeFilterTooltip(index: number, value: string) { + cy.get(nativeFilters.filterConfigurationSections.infoTooltip) + .eq(index) + .trigger('mouseover'); + cy.contains(`${value}`); +} + +/** ************************************************************************ + * Apply advanced time range filter on dashboard + * @param startRange: starting time range + * @param endRange: ending time range + * @return {null} + * @summary helper for applying advanced time range filter on dashboard with customize time range + ************************************************************************* */ +export function applyAdvancedTimeRangeFilterOnDashboard( + startRange?: string, + endRange?: string, +) { + cy.get('.control-label').contains('RANGE TYPE').should('be.visible'); + cy.get('.ant-popover-content .ant-select-selector') + .should('be.visible') + .click(); + cy.get(`[label="Advanced"]`).should('be.visible').click(); + cy.get('.section-title').contains('Advanced Time Range').should('be.visible'); + if (startRange) { + cy.get('.ant-popover-inner-content') + .find('[class^=ant-input]') + .first() + .type(`${startRange}`); + } + if (endRange) { + cy.get('.ant-popover-inner-content') + .find('[class^=ant-input]') + .last() + .type(`${endRange}`); + } + cy.get(dashboardView.timeRangeModal.applyButton).click(); + cy.get(nativeFilters.applyFilter).click(); +} + +/** ************************************************************************ + * Input default valule in Native filter in filter settings + * @param defaultValue: default value for native filter + * @return {null} + * @summary helper for input default valule in Native filter in filter settings + ************************************************************************* */ +export function inputNativeFilterDefaultValue(defaultValue: string) { + cy.contains('Filter has default value').click(); + cy.contains('Default value is required').should('be.visible'); + cy.get(nativeFilters.filterConfigurationSections.filterPlaceholder) + .contains('options') + .should('be.visible'); + cy.get(nativeFilters.filterConfigurationSections.collapsedSectionContainer) + .first() + .get(nativeFilters.filtersPanel.columnEmptyInput) + .type(`${defaultValue}{enter}`); +} + +/** ************************************************************************ + * add filter for test column 'Country name' + * @return {null} + * @summary helper for add filter for test column 'Country name' + ************************************************************************* */ +export function addCountryNameFilter() { + fillNativeFilterForm( + testItems.filterType.value, + testItems.topTenChart.filterColumn, + testItems.datasetForNativeFilter, + testItems.topTenChart.filterColumn, + ); +} + +/** ************************************************************************ + * add filter for test column 'Region' + * @return {null} + * @summary helper for add filter for test column 'Region' + ************************************************************************* */ +export function addRegionFilter() { + fillNativeFilterForm( + testItems.filterType.value, + testItems.topTenChart.filterColumnRegion, + testItems.datasetForNativeFilter, + testItems.topTenChart.filterColumnRegion, + ); +} + +/** ************************************************************************ + * add filter for test column 'Country Code' + * @return {null} + * @summary helper for add filter for test column 'Country Code' + ************************************************************************* */ +export function addCountryCodeFilter() { + fillNativeFilterForm( + testItems.filterType.value, + testItems.topTenChart.filterColumnCountryCode, + testItems.datasetForNativeFilter, + testItems.topTenChart.filterColumnCountryCode, + ); +} 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 79c979510a111..6612c05733583 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts @@ -24,13 +24,21 @@ import { dataTestChartName, } from 'cypress/support/directories'; import { + cleanUp, + copyTestDashboard, + testItems, + waitForChartLoad, + WORLD_HEALTH_CHARTS, +} from './dashboard.helper'; +import { + addCountryCodeFilter, + addCountryNameFilter, addParentFilterWithValue, + addRegionFilter, applyAdvancedTimeRangeFilterOnDashboard, applyNativeFilterValueWithIndex, cancelNativeFilterSettings, - copyTestDashboard, checkNativeFilterTooltip, - cleanUp, clickOnAddFilterInModal, closeDashboardToastMessage, collapseFilterOnLeftPanel, @@ -40,16 +48,13 @@ import { fillNativeFilterForm, getNativeFilterPlaceholderWithIndex, inputNativeFilterDefaultValue, - nativeFilterTooltips, saveNativeFilterSettings, - testItems, + nativeFilterTooltips, undoDeleteNativeFilter, validateFilterContentOnDashboard, - validateFilterNameOnDashboard, - waitForChartLoad, - WORLD_HEALTH_CHARTS, valueNativeFilterOptions, -} from './dashboard.helper'; + validateFilterNameOnDashboard, +} from './nativeFilter.helper'; import { DASHBOARD_LIST } from '../dashboard_list/dashboard_list.helper'; import { CHART_LIST } from '../chart_list/chart_list.helper'; @@ -89,7 +94,6 @@ describe('Nativefilters Sanity test', () => { }); it('User can enter filter edit pop-up by clicking on native filter edit icon', () => { - expandFilterOnLeftPanel(); enterNativeFilterEditModal(); }); @@ -103,15 +107,9 @@ describe('Nativefilters Sanity test', () => { filterKey = queryParams.native_filters_key as string; expect(typeof filterKey).eq('string'); }); - expandFilterOnLeftPanel(); enterNativeFilterEditModal(); cy.wait('@datasetLoad'); - fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenChart.filterColumn, - testItems.datasetForNativeFilter, - testItems.topTenChart.filterColumn, - ); + addCountryNameFilter(); saveNativeFilterSettings(); cy.wait(3000); cy.location().then(loc => { @@ -124,7 +122,6 @@ describe('Nativefilters Sanity test', () => { }); it('User can delete a native filter', () => { - expandFilterOnLeftPanel(); enterNativeFilterEditModal(); cy.get(nativeFilters.filtersList.removeIcon).first().click(); cy.contains('Restore Filter').should('not.exist', { timeout: 10000 }); @@ -132,7 +129,6 @@ describe('Nativefilters Sanity test', () => { }); it('User can cancel changes in native filter', () => { - expandFilterOnLeftPanel(); enterNativeFilterEditModal(); cy.wait(['@datasetLoad', '@datasetLoad']); fillNativeFilterForm( @@ -148,20 +144,13 @@ describe('Nativefilters Sanity test', () => { }); it('User can cancel creating a new filter', () => { - expandFilterOnLeftPanel(); enterNativeFilterEditModal(); cancelNativeFilterSettings(); }); it('User can undo deleting a native filter', () => { - expandFilterOnLeftPanel(); enterNativeFilterEditModal(); - fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenChart.filterColumn, - testItems.datasetForNativeFilter, - testItems.topTenChart.filterColumn, - ); + addCountryNameFilter(); saveNativeFilterSettings(); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); validateFilterNameOnDashboard(testItems.topTenChart.filterColumn); @@ -170,7 +159,6 @@ describe('Nativefilters Sanity test', () => { }); it('Verify setting options and tooltips for value filter', () => { - expandFilterOnLeftPanel(); enterNativeFilterEditModal(); cy.contains('Filter value is required').should('be.visible').click(); checkNativeFilterTooltip(0, nativeFilterTooltips.defaultValue); @@ -191,7 +179,6 @@ describe('Nativefilters Sanity test', () => { }); it('User can create a time range filter', () => { - expandFilterOnLeftPanel(); enterNativeFilterEditModal(); fillNativeFilterForm( testItems.filterType.timeRange, @@ -216,21 +203,14 @@ describe('Nativefilters Sanity test', () => { }); it("User can check 'Filter has default value'", () => { - expandFilterOnLeftPanel(); enterNativeFilterEditModal(); - fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenChart.filterColumn, - testItems.datasetForNativeFilter, - testItems.topTenChart.filterColumn, - ); + addCountryNameFilter(); inputNativeFilterDefaultValue(testItems.filterDefaultValue); saveNativeFilterSettings(); validateFilterContentOnDashboard(testItems.filterDefaultValue); }); it('User can create a time grain filter', () => { - expandFilterOnLeftPanel(); enterNativeFilterEditModal(); fillNativeFilterForm( testItems.filterType.timeGrain, @@ -252,7 +232,6 @@ describe('Nativefilters Sanity test', () => { }); it('User can create a time column filter', () => { - expandFilterOnLeftPanel(); enterNativeFilterEditModal(); fillNativeFilterForm( testItems.filterType.timeColumn, @@ -271,16 +250,10 @@ describe('Nativefilters Sanity test', () => { }); it('User can create a value filter', () => { - expandFilterOnLeftPanel(); enterNativeFilterEditModal(); cy.wait(['@datasetLoad', '@datasetLoad']); cy.get('body').type('{home}'); - fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenChart.filterColumn, - testItems.datasetForNativeFilter, - testItems.topTenChart.filterColumn, - ); + addCountryNameFilter(); cy.get(nativeFilters.filtersPanel.filterTypeInput) .find(nativeFilters.filtersPanel.filterTypeItem) .should('have.text', testItems.filterType.value); @@ -294,20 +267,10 @@ describe('Nativefilters Sanity test', () => { .click({ force: true }); cy.get(nativeFilters.filterFromDashboardView.createFilterButton).click(); // Create parent filter 'region'. - fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenChart.filterColumnRegion, - testItems.datasetForNativeFilter, - testItems.topTenChart.filterColumnRegion, - ); + addRegionFilter(); // Create filter 'country_name' depend on region filter. clickOnAddFilterInModal(); - fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenChart.filterColumn, - testItems.datasetForNativeFilter, - testItems.topTenChart.filterColumn, - ); + addCountryNameFilter(); cy.get(nativeFilters.filterConfigurationSections.displayedSection).within( () => { cy.contains('Values are dependent on other filters') @@ -339,14 +302,8 @@ describe('Nativefilters Sanity test', () => { }); it('User can apply value filter with selected values', () => { - expandFilterOnLeftPanel(); enterNativeFilterEditModal(); - fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenChart.filterColumn, - testItems.datasetForNativeFilter, - testItems.topTenChart.filterColumn, - ); + addCountryNameFilter(); saveNativeFilterSettings(); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); applyNativeFilterValueWithIndex(0, testItems.filterDefaultValue); @@ -358,7 +315,6 @@ describe('Nativefilters Sanity test', () => { }); it('User can create a numerical range filter', () => { - expandFilterOnLeftPanel(); enterNativeFilterEditModal(); fillNativeFilterForm( testItems.filterType.numerical, @@ -391,14 +347,8 @@ describe('Nativefilters Sanity test', () => { }); it('Verify that default value is respected after revisit', () => { - expandFilterOnLeftPanel(); enterNativeFilterEditModal(); - fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenChart.filterColumn, - testItems.datasetForNativeFilter, - testItems.topTenChart.filterColumn, - ); + addCountryNameFilter(); inputNativeFilterDefaultValue(testItems.filterDefaultValue); saveNativeFilterSettings(); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); @@ -430,14 +380,8 @@ describe('Nativefilters Sanity test', () => { }); it('Verify that allow for deleted filter restore', () => { - expandFilterOnLeftPanel(); enterNativeFilterEditModal(); - fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenChart.filterColumn, - testItems.datasetForNativeFilter, - testItems.topTenChart.filterColumn, - ); + addCountryNameFilter(); saveNativeFilterSettings(); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); validateFilterNameOnDashboard(testItems.topTenChart.filterColumn); @@ -450,14 +394,8 @@ describe('Nativefilters Sanity test', () => { }); it('User can stop filtering when filter is removed', () => { - expandFilterOnLeftPanel(); enterNativeFilterEditModal(); - fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenChart.filterColumn, - testItems.datasetForNativeFilter, - testItems.topTenChart.filterColumn, - ); + addCountryNameFilter(); inputNativeFilterDefaultValue(testItems.filterDefaultValue); saveNativeFilterSettings(); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); @@ -480,21 +418,10 @@ describe('Nativefilters Sanity test', () => { }); it('user can delete dependent filter', () => { - expandFilterOnLeftPanel(); enterNativeFilterEditModal(); - fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenChart.filterColumnRegion, - testItems.datasetForNativeFilter, - testItems.topTenChart.filterColumnRegion, - ); + addRegionFilter(); clickOnAddFilterInModal(); - fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenChart.filterColumn, - testItems.datasetForNativeFilter, - testItems.topTenChart.filterColumn, - ); + addCountryNameFilter(); cy.get(nativeFilters.filterConfigurationSections.displayedSection).within( () => { cy.contains('Values are dependent on other filters') @@ -525,33 +452,15 @@ describe('Nativefilters Sanity test', () => { }); it('User can create filter depend on 2 other filters', () => { - expandFilterOnLeftPanel(); enterNativeFilterEditModal(); // add first filter - fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenChart.filterColumnRegion, - testItems.datasetForNativeFilter, - testItems.topTenChart.filterColumnRegion, - ); - + addRegionFilter(); // add second filter clickOnAddFilterInModal(); - fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenChart.filterColumn, - testItems.datasetForNativeFilter, - testItems.topTenChart.filterColumn, - ); - + addCountryNameFilter(); // add third filter clickOnAddFilterInModal(); - fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenChart.filterColumnCountryCode, - testItems.datasetForNativeFilter, - testItems.topTenChart.filterColumnCountryCode, - ); + addCountryCodeFilter(); cy.wait(1000); cy.get(nativeFilters.filterConfigurationSections.displayedSection).within( () => { @@ -601,21 +510,10 @@ describe('Nativefilters Sanity test', () => { }); it('User can remove parent filters', () => { - expandFilterOnLeftPanel(); enterNativeFilterEditModal(); - fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenChart.filterColumnRegion, - testItems.datasetForNativeFilter, - testItems.topTenChart.filterColumnRegion, - ); + addRegionFilter(); clickOnAddFilterInModal(); - fillNativeFilterForm( - testItems.filterType.value, - testItems.topTenChart.filterColumn, - testItems.datasetForNativeFilter, - testItems.topTenChart.filterColumn, - ); + addCountryNameFilter(); cy.wait(1000); // Select dependdent option and auto use platform for genre cy.get(nativeFilters.filterConfigurationSections.displayedSection).within( From 50874db9239a0f329a11b020f6854801d06562e3 Mon Sep 17 00:00:00 2001 From: Jinghua Yao Date: Mon, 25 Apr 2022 20:44:05 -0700 Subject: [PATCH 08/13] more changes --- .../cypress/integration/dashboard/nativeFilters.test.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) 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 6612c05733583..e06bff4ee24f8 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts @@ -262,10 +262,7 @@ describe('Nativefilters Sanity test', () => { }); it('User can create parent filters using "Values are dependent on other filters"', () => { - cy.get(nativeFilters.filterFromDashboardView.expand) - .should('be.visible') - .click({ force: true }); - cy.get(nativeFilters.filterFromDashboardView.createFilterButton).click(); + enterNativeFilterEditModal(); // Create parent filter 'region'. addRegionFilter(); // Create filter 'country_name' depend on region filter. From 90fb52025e93d62f293a8e76d5096a50c537f85c Mon Sep 17 00:00:00 2001 From: Jinghua Yao Date: Tue, 26 Apr 2022 22:48:07 -0700 Subject: [PATCH 09/13] seperated test for different state --- .../integration/dashboard/dashboard.helper.ts | 2 +- .../dashboard/nativeFilter.helper.ts | 1 + .../dashboard/nativeFilters.test.ts | 101 ++++++++++-------- 3 files changed, 57 insertions(+), 47 deletions(-) diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts index 5b7fd64497f4d..442b41f094d42 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts @@ -181,9 +181,9 @@ export function cleanUp() { ************************************************************************* */ export function copyTestDashboard(dashboard: string) { cy.intercept('POST', '**/copy_dash/**').as('copy'); - cy.intercept('**/api/v1/dashboard/**').as('dashboard'); cy.intercept('GET', '**/api/v1/dataset/**').as('datasetLoad'); cy.intercept('**/api/v1/dashboard/?q=**').as('dashboardsList'); + cy.intercept('**/api/v1/dashboard/**').as('dashboard'); cy.visit('dashboard/list/'); cy.contains('Actions'); cy.wait('@dashboardsList').then(xhr => { diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilter.helper.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilter.helper.ts index a9c39768aada1..69a50061676d6 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilter.helper.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilter.helper.ts @@ -131,6 +131,7 @@ export function fillNativeFilterForm( .find(nativeFilters.filtersPanel.filterName) .last() .click({ scrollBehavior: false }) + .clear() .type(name, { scrollBehavior: false }); if (dataset) { cy.get(nativeFilters.modal.container) 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 e06bff4ee24f8..f636a2cd50558 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts @@ -28,6 +28,7 @@ import { copyTestDashboard, testItems, waitForChartLoad, + WORLD_HEALTH_DASHBOARD, WORLD_HEALTH_CHARTS, } from './dashboard.helper'; import { @@ -69,16 +70,10 @@ const getTestTitle = ( const milliseconds = new Date().getTime(); const dashboard = `Test Dashboard${milliseconds}`; -describe('Nativefilters Sanity test', () => { +describe('Nativefilters read only tests', ()=> { beforeEach(() => { cy.login(); - cleanUp(); - copyTestDashboard("World Bank's Data"); - WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); - closeDashboardToastMessage(); - }); - afterEach(() => { - cleanUp(); + cy.visit(WORLD_HEALTH_DASHBOARD); }); it('User can expand / retract native filter sidebar on a dashboard', () => { @@ -97,6 +92,51 @@ describe('Nativefilters Sanity test', () => { enterNativeFilterEditModal(); }); + it('User can delete a native filter', () => { + enterNativeFilterEditModal(); + cy.get(nativeFilters.filtersList.removeIcon).first().click(); + cy.contains('Restore Filter').should('not.exist', { timeout: 10000 }); + saveNativeFilterSettings(); + }); + + it('User can cancel creating a new filter', () => { + enterNativeFilterEditModal(); + cancelNativeFilterSettings(); + }); + + it('Verify setting options and tooltips for value filter', () => { + enterNativeFilterEditModal(); + cy.contains('Filter value is required').should('be.visible').click(); + checkNativeFilterTooltip(0, nativeFilterTooltips.defaultValue); + cy.get(nativeFilters.modal.container).should('be.visible'); + valueNativeFilterOptions.forEach(el => { + cy.contains(el); + }); + cy.contains('Values are dependent on other filters').should('not.exist'); + cy.get(nativeFilters.filterConfigurationSections.checkedCheckbox).contains( + 'Can select multiple values', + ); + checkNativeFilterTooltip(1, nativeFilterTooltips.required); + checkNativeFilterTooltip(2, nativeFilterTooltips.defaultToFirstItem); + checkNativeFilterTooltip(3, nativeFilterTooltips.searchAllFilterOptions); + checkNativeFilterTooltip(4, nativeFilterTooltips.inverseSelection); + clickOnAddFilterInModal(); + cy.contains('Values are dependent on other filters').should('exist'); + }); +}); + +describe('Nativefilters tests initial state required', () => { + beforeEach(() => { + cy.login(); + cleanUp(); + copyTestDashboard("World Bank's Data"); + WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); + closeDashboardToastMessage(); + }); + afterEach(() => { + cleanUp(); + }); + it('User can add a new native filter', () => { let filterKey: string; const removeFirstChar = (search: string) => @@ -121,11 +161,14 @@ describe('Nativefilters Sanity test', () => { cy.get(nativeFilters.modal.container).should('not.exist'); }); - it('User can delete a native filter', () => { + it('User can undo deleting a native filter', () => { enterNativeFilterEditModal(); - cy.get(nativeFilters.filtersList.removeIcon).first().click(); - cy.contains('Restore Filter').should('not.exist', { timeout: 10000 }); + addCountryNameFilter(); saveNativeFilterSettings(); + WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); + validateFilterNameOnDashboard(testItems.topTenChart.filterColumn); + enterNativeFilterEditModal(); + undoDeleteNativeFilter(); }); it('User can cancel changes in native filter', () => { @@ -143,41 +186,6 @@ describe('Nativefilters Sanity test', () => { saveNativeFilterSettings(); }); - it('User can cancel creating a new filter', () => { - enterNativeFilterEditModal(); - cancelNativeFilterSettings(); - }); - - it('User can undo deleting a native filter', () => { - enterNativeFilterEditModal(); - addCountryNameFilter(); - saveNativeFilterSettings(); - WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); - validateFilterNameOnDashboard(testItems.topTenChart.filterColumn); - enterNativeFilterEditModal(); - undoDeleteNativeFilter(); - }); - - it('Verify setting options and tooltips for value filter', () => { - enterNativeFilterEditModal(); - cy.contains('Filter value is required').should('be.visible').click(); - checkNativeFilterTooltip(0, nativeFilterTooltips.defaultValue); - cy.get(nativeFilters.modal.container).should('be.visible'); - valueNativeFilterOptions.forEach(el => { - cy.contains(el); - }); - cy.contains('Values are dependent on other filters').should('not.exist'); - cy.get(nativeFilters.filterConfigurationSections.checkedCheckbox).contains( - 'Can select multiple values', - ); - checkNativeFilterTooltip(1, nativeFilterTooltips.required); - checkNativeFilterTooltip(2, nativeFilterTooltips.defaultToFirstItem); - checkNativeFilterTooltip(3, nativeFilterTooltips.searchAllFilterOptions); - checkNativeFilterTooltip(4, nativeFilterTooltips.inverseSelection); - clickOnAddFilterInModal(); - cy.contains('Values are dependent on other filters').should('exist'); - }); - it('User can create a time range filter', () => { enterNativeFilterEditModal(); fillNativeFilterForm( @@ -537,6 +545,7 @@ describe('Nativefilters Sanity test', () => { }); }); + xdescribe('Nativefilters', () => { before(() => { cy.login(); From a0cbb838e64e07c5a56048c9d9970c2eba0522a7 Mon Sep 17 00:00:00 2001 From: Jinghua Yao Date: Wed, 27 Apr 2022 01:46:10 -0700 Subject: [PATCH 10/13] seperated tests by initail state --- .../integration/dashboard/dashboard.helper.ts | 1 + .../dashboard/nativeFilter.helper.ts | 9 +- .../dashboard/nativeFilters.test.ts | 548 +++++++++--------- 3 files changed, 277 insertions(+), 281 deletions(-) diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts index 442b41f094d42..8d29d20d091dc 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts @@ -20,6 +20,7 @@ import { dashboardView } from 'cypress/support/directories'; * under the License. */ export const WORLD_HEALTH_DASHBOARD = '/superset/dashboard/world_health/'; +export const testDashboard = '/superset/dashboard/538/'; export const TABBED_DASHBOARD = '/superset/dashboard/tabbed_dash/'; export const testItems = { diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilter.helper.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilter.helper.ts index 69a50061676d6..1bd10bb4f1a0a 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilter.helper.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilter.helper.ts @@ -61,6 +61,7 @@ export const valueNativeFilterOptions = [ export function expandFilterOnLeftPanel() { return cy .get(nativeFilters.filterFromDashboardView.expand) + .should('be.visible') .click({ force: true }); } @@ -84,10 +85,9 @@ export function collapseFilterOnLeftPanel() { * @summary helper for enter native filter edit modal ************************************************************************* */ export function enterNativeFilterEditModal() { - expandFilterOnLeftPanel(); - cy.get(nativeFilters.filterFromDashboardView.createFilterButton) - .should('be.visible') - .click(); + cy.get(nativeFilters.filterFromDashboardView.createFilterButton).click({ + force: true, + }); cy.get(nativeFilters.modal.container).should('be.visible'); } @@ -146,7 +146,6 @@ export function fillNativeFilterForm( if (filterColumn) { cy.get(nativeFilters.filtersPanel.filterInfoInput) .last() - .should('be.visible') .click({ force: true }); cy.get(nativeFilters.filtersPanel.filterInfoInput) .last() 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 f636a2cd50558..275e329922dca 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts @@ -70,12 +70,228 @@ const getTestTitle = ( const milliseconds = new Date().getTime(); const dashboard = `Test Dashboard${milliseconds}`; -describe('Nativefilters read only tests', ()=> { +describe('Nativefilters tests initial state required', () => { + beforeEach(() => { + cy.login(); + cleanUp(); + copyTestDashboard("World Bank's Data"); + WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); + closeDashboardToastMessage(); + }); + afterEach(() => { + cleanUp(); + }); + + it('User can create parent filters using "Values are dependent on other filters"', () => { + enterNativeFilterEditModal(); + // Create parent filter 'region'. + addRegionFilter(); + // Create filter 'country_name' depend on region filter. + clickOnAddFilterInModal(); + addCountryNameFilter(); + cy.get(nativeFilters.filterConfigurationSections.displayedSection).within( + () => { + cy.contains('Values are dependent on other filters') + .should('be.visible') + .click(); + }, + ); + addParentFilterWithValue(0, testItems.topTenChart.filterColumnRegion); + cy.wait(1000); + saveNativeFilterSettings(); + // Validate both filter in dashboard view. + WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); + [ + testItems.topTenChart.filterColumnRegion, + testItems.topTenChart.filterColumn, + ].forEach(it => { + cy.get(nativeFilters.filterFromDashboardView.filterName) + .contains(it) + .should('be.visible'); + }); + getNativeFilterPlaceholderWithIndex(1) + .invoke('text') + .should('equal', '214 options', { timeout: 20000 }); + // apply first filter value and validate 2nd filter is depden on 1st filter. + applyNativeFilterValueWithIndex(0, 'North America'); + getNativeFilterPlaceholderWithIndex(0).should('have.text', '3 options', { + timeout: 20000, + }); + }); + + it('user can delete dependent filter', () => { + enterNativeFilterEditModal(); + addRegionFilter(); + clickOnAddFilterInModal(); + addCountryNameFilter(); + cy.get(nativeFilters.filterConfigurationSections.displayedSection).within( + () => { + cy.contains('Values are dependent on other filters') + .should('be.visible') + .click(); + }, + ); + addParentFilterWithValue(0, testItems.topTenChart.filterColumnRegion); + // remove year native filter to cause it disappears from parent filter input in global sales + cy.get(nativeFilters.modal.tabsList.removeTab) + .should('be.visible') + .first() + .click(); + // make sure you are seeing global sales filter which had parent filter + cy.get(nativeFilters.modal.tabsList.filterItemsContainer) + .children() + .last() + .click(); + // + cy.wait(1000); + cy.get(nativeFilters.filterConfigurationSections.displayedSection).within( + () => { + cy.contains('Values are dependent on other filters').should( + 'not.exist', + ); + }, + ); + }); + + it('User can create filter depend on 2 other filters', () => { + enterNativeFilterEditModal(); + // add first filter + addRegionFilter(); + // add second filter + clickOnAddFilterInModal(); + addCountryNameFilter(); + // add third filter + clickOnAddFilterInModal(); + addCountryCodeFilter(); + cy.wait(1000); + cy.get(nativeFilters.filterConfigurationSections.displayedSection).within( + () => { + cy.contains('Values are dependent on other filters') + .should('be.visible') + .click(); + cy.get(exploreView.controlPanel.addFieldValue).click(); + }, + ); + // add value to the first input + addParentFilterWithValue(0, testItems.topTenChart.filterColumnRegion); + // add value to the second input + addParentFilterWithValue(1, testItems.topTenChart.filterColumn); + saveNativeFilterSettings(); + // wait for charts load + WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); + // filters should be displayed in the left panel + [ + testItems.topTenChart.filterColumnRegion, + testItems.topTenChart.filterColumn, + testItems.topTenChart.filterColumnCountryCode, + ].forEach(it => { + validateFilterNameOnDashboard(it); + }); + + // initially first filter shows 39 options + getNativeFilterPlaceholderWithIndex(0).should('have.text', '7 options'); + // initially second filter shows 409 options + getNativeFilterPlaceholderWithIndex(1).should('have.text', '214 options'); + // verify third filter shows 409 options + getNativeFilterPlaceholderWithIndex(2).should('have.text', '214 options'); + + // apply first filter value + applyNativeFilterValueWithIndex(0, 'North America'); + + // verify second filter shows 409 options available still + getNativeFilterPlaceholderWithIndex(0).should('have.text', '214 options'); + + // verify second filter shows 69 options available still + getNativeFilterPlaceholderWithIndex(1).should('have.text', '3 options'); + + // apply second filter value + applyNativeFilterValueWithIndex(1, 'United States'); + + // verify number of available options for third filter - should be decreased to only one + getNativeFilterPlaceholderWithIndex(0).should('have.text', '1 option'); + }); + + it('User can remove parent filters', () => { + enterNativeFilterEditModal(); + addRegionFilter(); + clickOnAddFilterInModal(); + addCountryNameFilter(); + cy.wait(1000); + // Select dependdent option and auto use platform for genre + cy.get(nativeFilters.filterConfigurationSections.displayedSection).within( + () => { + cy.contains('Values are dependent on other filters') + .should('be.visible') + .click(); + }, + ); + saveNativeFilterSettings(); + enterNativeFilterEditModal(); + cy.get(nativeFilters.modal.tabsList.removeTab) + .should('be.visible') + .first() + .click({ + force: true, + }); + saveNativeFilterSettings(); + WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); + cy.get(dataTestChartName(testItems.topTenChart.name)).within(() => { + cy.contains(testItems.filterDefaultValue).should('be.visible'); + cy.contains(testItems.filterOtherCountry).should('be.visible'); + }); + }); + + it("User can check 'Filter has default value'", () => { + enterNativeFilterEditModal(); + addCountryNameFilter(); + inputNativeFilterDefaultValue(testItems.filterDefaultValue); + saveNativeFilterSettings(); + validateFilterContentOnDashboard(testItems.filterDefaultValue); + }); + + it('Verify that default value is respected after revisit', () => { + enterNativeFilterEditModal(); + addCountryNameFilter(); + inputNativeFilterDefaultValue(testItems.filterDefaultValue); + saveNativeFilterSettings(); + WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); + cy.get(nativeFilters.filterItem) + .contains(testItems.filterDefaultValue) + .should('be.visible'); + cy.get(dataTestChartName(testItems.topTenChart.name)).within(() => { + cy.contains(testItems.filterDefaultValue).should('be.visible'); + cy.contains(testItems.filterOtherCountry).should('not.exist'); + }); + cy.request( + 'api/v1/dashboard/?q=(order_column:changed_on_delta_humanized,order_direction:desc,page:0,page_size:100)', + ).then(xhr => { + const dashboards = xhr.body.result; + const testDashboard = dashboards.find( + (d: { dashboard_title: string }) => + d.dashboard_title === testItems.dashboard, + ); + cy.visit(testDashboard.url); + }); + WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); + cy.get(dataTestChartName(testItems.topTenChart.name)).within(() => { + cy.contains(testItems.filterDefaultValue).should('be.visible'); + cy.contains(testItems.filterOtherCountry).should('not.exist'); + }); + validateFilterContentOnDashboard(testItems.filterDefaultValue); + }); +}); + +describe('Nativefilters initial state not required', () => { beforeEach(() => { cy.login(); cy.visit(WORLD_HEALTH_DASHBOARD); }); + after(() => { + enterNativeFilterEditModal(); + deleteNativeFilter(); + }); + it('User can expand / retract native filter sidebar on a dashboard', () => { cy.get(nativeFilters.addFilterButton.button).should('not.exist'); expandFilterOnLeftPanel(); @@ -123,19 +339,6 @@ describe('Nativefilters read only tests', ()=> { clickOnAddFilterInModal(); cy.contains('Values are dependent on other filters').should('exist'); }); -}); - -describe('Nativefilters tests initial state required', () => { - beforeEach(() => { - cy.login(); - cleanUp(); - copyTestDashboard("World Bank's Data"); - WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); - closeDashboardToastMessage(); - }); - afterEach(() => { - cleanUp(); - }); it('User can add a new native filter', () => { let filterKey: string; @@ -148,7 +351,6 @@ describe('Nativefilters tests initial state required', () => { expect(typeof filterKey).eq('string'); }); enterNativeFilterEditModal(); - cy.wait('@datasetLoad'); addCountryNameFilter(); saveNativeFilterSettings(); cy.wait(3000); @@ -163,27 +365,38 @@ describe('Nativefilters tests initial state required', () => { it('User can undo deleting a native filter', () => { enterNativeFilterEditModal(); - addCountryNameFilter(); + addCountryCodeFilter(); saveNativeFilterSettings(); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); validateFilterNameOnDashboard(testItems.topTenChart.filterColumn); enterNativeFilterEditModal(); - undoDeleteNativeFilter(); + cy.get(nativeFilters.filtersList.removeIcon).first().click(); + cy.get('[data-test="restore-filter-button"]').should('be.visible').click(); + cy.get(nativeFilters.modal.container) + .find(nativeFilters.filtersPanel.filterName) + .should( + 'have.attr', + 'value', + testItems.topTenChart.filterColumnCountryCode, + ); }); - it('User can cancel changes in native filter', () => { + it('User can create a time grain filter', () => { enterNativeFilterEditModal(); - cy.wait(['@datasetLoad', '@datasetLoad']); fillNativeFilterForm( - testItems.filterType.value, - 'suffix', + testItems.filterType.timeGrain, + testItems.filterType.timeGrain, testItems.datasetForNativeFilter, ); - cancelNativeFilterSettings(); - enterNativeFilterEditModal(); - cy.get(nativeFilters.filtersList.removeIcon).first().click(); - cy.contains('You have removed this filter.').should('be.visible'); saveNativeFilterSettings(); + applyNativeFilterValueWithIndex(0, testItems.filterTimeGrain); + cy.get(nativeFilters.applyFilter).click(); + cy.url().then(u => { + const ur = new URL(u); + expect(ur.search).to.include('native_filters'); + }); + validateFilterNameOnDashboard(testItems.filterType.timeGrain); + validateFilterContentOnDashboard(testItems.filterTimeGrain); }); it('User can create a time range filter', () => { @@ -192,14 +405,11 @@ describe('Nativefilters tests initial state required', () => { testItems.filterType.timeRange, testItems.filterType.timeRange, ); - cy.intercept(`/api/v1/chart/data?form_data=**`).as('chart'); saveNativeFilterSettings(); - cy.wait('@chart'); cy.get(dashboardView.salesDashboardSpecific.vehicleSalesFilterTimeRange) .should('be.visible') .click(); applyAdvancedTimeRangeFilterOnDashboard('2005-12-17', '2006-12-17'); - cy.wait('@chart'); cy.url().then(u => { const ur = new URL(u); expect(ur.search).to.include('native_filters'); @@ -210,35 +420,6 @@ describe('Nativefilters tests initial state required', () => { .should('be.visible'); }); - it("User can check 'Filter has default value'", () => { - enterNativeFilterEditModal(); - addCountryNameFilter(); - inputNativeFilterDefaultValue(testItems.filterDefaultValue); - saveNativeFilterSettings(); - validateFilterContentOnDashboard(testItems.filterDefaultValue); - }); - - it('User can create a time grain filter', () => { - enterNativeFilterEditModal(); - fillNativeFilterForm( - testItems.filterType.timeGrain, - testItems.filterType.timeGrain, - testItems.datasetForNativeFilter, - ); - cy.intercept(`/api/v1/chart/data?form_data=**`).as('chart'); - saveNativeFilterSettings(); - cy.wait('@chart'); - applyNativeFilterValueWithIndex(0, testItems.filterTimeGrain); - cy.get(nativeFilters.applyFilter).click(); - cy.wait('@chart'); - cy.url().then(u => { - const ur = new URL(u); - expect(ur.search).to.include('native_filters'); - }); - validateFilterNameOnDashboard(testItems.filterType.timeGrain); - validateFilterContentOnDashboard(testItems.filterTimeGrain); - }); - it('User can create a time column filter', () => { enterNativeFilterEditModal(); fillNativeFilterForm( @@ -257,68 +438,6 @@ describe('Nativefilters tests initial state required', () => { validateFilterContentOnDashboard(testItems.topTenChart.filterColumnYear); }); - it('User can create a value filter', () => { - enterNativeFilterEditModal(); - cy.wait(['@datasetLoad', '@datasetLoad']); - cy.get('body').type('{home}'); - addCountryNameFilter(); - cy.get(nativeFilters.filtersPanel.filterTypeInput) - .find(nativeFilters.filtersPanel.filterTypeItem) - .should('have.text', testItems.filterType.value); - saveNativeFilterSettings(); - validateFilterNameOnDashboard(testItems.topTenChart.filterColumn); - }); - - it('User can create parent filters using "Values are dependent on other filters"', () => { - enterNativeFilterEditModal(); - // Create parent filter 'region'. - addRegionFilter(); - // Create filter 'country_name' depend on region filter. - clickOnAddFilterInModal(); - addCountryNameFilter(); - cy.get(nativeFilters.filterConfigurationSections.displayedSection).within( - () => { - cy.contains('Values are dependent on other filters') - .should('be.visible') - .click(); - }, - ); - addParentFilterWithValue(0, testItems.topTenChart.filterColumnRegion); - cy.wait(1000); - saveNativeFilterSettings(); - // Validate both filter in dashboard view. - WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); - [ - testItems.topTenChart.filterColumnRegion, - testItems.topTenChart.filterColumn, - ].forEach(it => { - cy.get(nativeFilters.filterFromDashboardView.filterName) - .contains(it) - .should('be.visible'); - }); - getNativeFilterPlaceholderWithIndex(1) - .invoke('text') - .should('equal', '214 options', { timeout: 20000 }); - // apply first filter value and validate 2nd filter is depden on 1st filter. - applyNativeFilterValueWithIndex(0, 'North America'); - getNativeFilterPlaceholderWithIndex(0).should('have.text', '3 options', { - timeout: 20000, - }); - }); - - it('User can apply value filter with selected values', () => { - enterNativeFilterEditModal(); - addCountryNameFilter(); - saveNativeFilterSettings(); - WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); - applyNativeFilterValueWithIndex(0, testItems.filterDefaultValue); - cy.get(nativeFilters.applyFilter).click(); - cy.get(dataTestChartName(testItems.topTenChart.name)).within(() => { - cy.contains(testItems.filterDefaultValue).should('be.visible'); - cy.contains(testItems.filterOtherCountry).should('not.exist'); - }); - }); - it('User can create a numerical range filter', () => { enterNativeFilterEditModal(); fillNativeFilterForm( @@ -351,191 +470,69 @@ describe('Nativefilters tests initial state required', () => { }); }); - it('Verify that default value is respected after revisit', () => { + it('User can undo deleting a native filter', () => { enterNativeFilterEditModal(); addCountryNameFilter(); - inputNativeFilterDefaultValue(testItems.filterDefaultValue); saveNativeFilterSettings(); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); - cy.get(nativeFilters.filterItem) - .contains(testItems.filterDefaultValue) - .should('be.visible'); - cy.get(dataTestChartName(testItems.topTenChart.name)).within(() => { - cy.contains(testItems.filterDefaultValue).should('be.visible'); - cy.contains(testItems.filterOtherCountry).should('not.exist'); - }); - cy.request( - 'api/v1/dashboard/?q=(order_column:changed_on_delta_humanized,order_direction:desc,page:0,page_size:100)', - ).then(xhr => { - const dashboards = xhr.body.result; - const testDashboard = dashboards.find( - (d: { dashboard_title: string }) => - d.dashboard_title === testItems.dashboard, - ); - cy.visit(testDashboard.url); - }); - WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); - cy.get(dataTestChartName(testItems.topTenChart.name)).within(() => { - cy.contains(testItems.filterDefaultValue).should('be.visible'); - cy.contains(testItems.filterOtherCountry).should('not.exist'); - }); - cy.get(nativeFilters.filterItem) - .contains(testItems.filterDefaultValue) - .should('be.visible'); + validateFilterNameOnDashboard(testItems.topTenChart.filterColumn); + enterNativeFilterEditModal(); + undoDeleteNativeFilter(); }); - it('Verify that allow for deleted filter restore', () => { + it('User can cancel changes in native filter', () => { enterNativeFilterEditModal(); - addCountryNameFilter(); - saveNativeFilterSettings(); - WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); - validateFilterNameOnDashboard(testItems.topTenChart.filterColumn); + fillNativeFilterForm( + testItems.filterType.value, + 'suffix', + testItems.datasetForNativeFilter, + ); + cancelNativeFilterSettings(); enterNativeFilterEditModal(); cy.get(nativeFilters.filtersList.removeIcon).first().click(); - cy.get('[data-test="restore-filter-button"]').should('be.visible').click(); - cy.get(nativeFilters.modal.container) - .find(nativeFilters.filtersPanel.filterName) - .should('have.attr', 'value', testItems.topTenChart.filterColumn); + cy.contains('You have removed this filter.').should('be.visible'); + saveNativeFilterSettings(); }); - it('User can stop filtering when filter is removed', () => { + it('User can create a value filter', () => { enterNativeFilterEditModal(); addCountryNameFilter(); - inputNativeFilterDefaultValue(testItems.filterDefaultValue); + cy.get(nativeFilters.filtersPanel.filterTypeInput) + .find(nativeFilters.filtersPanel.filterTypeItem) + .should('have.text', testItems.filterType.value); saveNativeFilterSettings(); - WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); - cy.get(dataTestChartName(testItems.topTenChart.name)).within(() => { - cy.contains(testItems.filterDefaultValue).should('be.visible'); - cy.contains(testItems.filterOtherCountry).should('not.exist'); - }); - cy.get(nativeFilters.filterItem) - .contains(testItems.filterDefaultValue) - .should('be.visible'); validateFilterNameOnDashboard(testItems.topTenChart.filterColumn); + }); + + it('User can apply value filter with selected values', () => { enterNativeFilterEditModal(); - deleteNativeFilter(); + addCountryNameFilter(); saveNativeFilterSettings(); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); + applyNativeFilterValueWithIndex(0, testItems.filterDefaultValue); + cy.get(nativeFilters.applyFilter).click(); cy.get(dataTestChartName(testItems.topTenChart.name)).within(() => { cy.contains(testItems.filterDefaultValue).should('be.visible'); - cy.contains(testItems.filterOtherCountry).should('be.visible'); + cy.contains(testItems.filterOtherCountry).should('not.exist'); }); }); - it('user can delete dependent filter', () => { - enterNativeFilterEditModal(); - addRegionFilter(); - clickOnAddFilterInModal(); - addCountryNameFilter(); - cy.get(nativeFilters.filterConfigurationSections.displayedSection).within( - () => { - cy.contains('Values are dependent on other filters') - .should('be.visible') - .click(); - }, - ); - addParentFilterWithValue(0, testItems.topTenChart.filterColumnRegion); - // remove year native filter to cause it disappears from parent filter input in global sales - cy.get(nativeFilters.modal.tabsList.removeTab) - .should('be.visible') - .first() - .click(); - // make sure you are seeing global sales filter which had parent filter - cy.get(nativeFilters.modal.tabsList.filterItemsContainer) - .children() - .last() - .click(); - // - cy.wait(1000); - cy.get(nativeFilters.filterConfigurationSections.displayedSection).within( - () => { - cy.contains('Values are dependent on other filters').should( - 'not.exist', - ); - }, - ); - }); - - it('User can create filter depend on 2 other filters', () => { + it('User can stop filtering when filter is removed', () => { enterNativeFilterEditModal(); - // add first filter - addRegionFilter(); - // add second filter - clickOnAddFilterInModal(); addCountryNameFilter(); - // add third filter - clickOnAddFilterInModal(); - addCountryCodeFilter(); - cy.wait(1000); - cy.get(nativeFilters.filterConfigurationSections.displayedSection).within( - () => { - cy.contains('Values are dependent on other filters') - .should('be.visible') - .click(); - cy.get(exploreView.controlPanel.addFieldValue).click(); - }, - ); - // add value to the first input - addParentFilterWithValue(0, testItems.topTenChart.filterColumnRegion); - // add value to the second input - addParentFilterWithValue(1, testItems.topTenChart.filterColumn); + inputNativeFilterDefaultValue(testItems.filterDefaultValue); saveNativeFilterSettings(); - // wait for charts load WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); - // filters should be displayed in the left panel - [ - testItems.topTenChart.filterColumnRegion, - testItems.topTenChart.filterColumn, - testItems.topTenChart.filterColumnCountryCode, - ].forEach(it => { - validateFilterNameOnDashboard(it); + cy.get(dataTestChartName(testItems.topTenChart.name)).within(() => { + cy.contains(testItems.filterDefaultValue).should('be.visible'); + cy.contains(testItems.filterOtherCountry).should('not.exist'); }); - - // initially first filter shows 39 options - getNativeFilterPlaceholderWithIndex(0).should('have.text', '7 options'); - // initially second filter shows 409 options - getNativeFilterPlaceholderWithIndex(1).should('have.text', '214 options'); - // verify third filter shows 409 options - getNativeFilterPlaceholderWithIndex(2).should('have.text', '214 options'); - - // apply first filter value - applyNativeFilterValueWithIndex(0, 'North America'); - - // verify second filter shows 409 options available still - getNativeFilterPlaceholderWithIndex(0).should('have.text', '214 options'); - - // verify second filter shows 69 options available still - getNativeFilterPlaceholderWithIndex(1).should('have.text', '3 options'); - - // apply second filter value - applyNativeFilterValueWithIndex(1, 'United States'); - - // verify number of available options for third filter - should be decreased to only one - getNativeFilterPlaceholderWithIndex(0).should('have.text', '1 option'); - }); - - it('User can remove parent filters', () => { - enterNativeFilterEditModal(); - addRegionFilter(); - clickOnAddFilterInModal(); - addCountryNameFilter(); - cy.wait(1000); - // Select dependdent option and auto use platform for genre - cy.get(nativeFilters.filterConfigurationSections.displayedSection).within( - () => { - cy.contains('Values are dependent on other filters') - .should('be.visible') - .click(); - }, - ); - saveNativeFilterSettings(); + cy.get(nativeFilters.filterItem) + .contains(testItems.filterDefaultValue) + .should('be.visible'); + validateFilterNameOnDashboard(testItems.topTenChart.filterColumn); enterNativeFilterEditModal(); - cy.get(nativeFilters.modal.tabsList.removeTab) - .should('be.visible') - .first() - .click({ - force: true, - }); + deleteNativeFilter(); saveNativeFilterSettings(); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); cy.get(dataTestChartName(testItems.topTenChart.name)).within(() => { @@ -545,7 +542,6 @@ describe('Nativefilters tests initial state required', () => { }); }); - xdescribe('Nativefilters', () => { before(() => { cy.login(); From 7135e4276f3c4bbf0eb74951e11a6b56267e4fdf Mon Sep 17 00:00:00 2001 From: Jinghua Yao Date: Wed, 27 Apr 2022 10:32:54 -0700 Subject: [PATCH 11/13] fix failure --- .../dashboard/nativeFilters.test.ts | 81 ++++++++++--------- 1 file changed, 41 insertions(+), 40 deletions(-) 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 275e329922dca..01dc4b3495264 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts @@ -82,6 +82,38 @@ describe('Nativefilters tests initial state required', () => { cleanUp(); }); + it('Verify that default value is respected after revisit', () => { + expandFilterOnLeftPanel(); + enterNativeFilterEditModal(); + addCountryNameFilter(); + inputNativeFilterDefaultValue(testItems.filterDefaultValue); + saveNativeFilterSettings(); + WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); + cy.get(nativeFilters.filterItem) + .contains(testItems.filterDefaultValue) + .should('be.visible'); + cy.get(dataTestChartName(testItems.topTenChart.name)).within(() => { + cy.contains(testItems.filterDefaultValue).should('be.visible'); + cy.contains(testItems.filterOtherCountry).should('not.exist'); + }); + cy.request( + 'api/v1/dashboard/?q=(order_column:changed_on_delta_humanized,order_direction:desc,page:0,page_size:100)', + ).then(xhr => { + const dashboards = xhr.body.result; + const testDashboard = dashboards.find( + (d: { dashboard_title: string }) => + d.dashboard_title === testItems.dashboard, + ); + cy.visit(testDashboard.url); + }); + WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); + cy.get(dataTestChartName(testItems.topTenChart.name)).within(() => { + cy.contains(testItems.filterDefaultValue).should('be.visible'); + cy.contains(testItems.filterOtherCountry).should('not.exist'); + }); + validateFilterContentOnDashboard(testItems.filterDefaultValue); + }); + it('User can create parent filters using "Values are dependent on other filters"', () => { enterNativeFilterEditModal(); // Create parent filter 'region'. @@ -240,45 +272,6 @@ describe('Nativefilters tests initial state required', () => { cy.contains(testItems.filterOtherCountry).should('be.visible'); }); }); - - it("User can check 'Filter has default value'", () => { - enterNativeFilterEditModal(); - addCountryNameFilter(); - inputNativeFilterDefaultValue(testItems.filterDefaultValue); - saveNativeFilterSettings(); - validateFilterContentOnDashboard(testItems.filterDefaultValue); - }); - - it('Verify that default value is respected after revisit', () => { - enterNativeFilterEditModal(); - addCountryNameFilter(); - inputNativeFilterDefaultValue(testItems.filterDefaultValue); - saveNativeFilterSettings(); - WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); - cy.get(nativeFilters.filterItem) - .contains(testItems.filterDefaultValue) - .should('be.visible'); - cy.get(dataTestChartName(testItems.topTenChart.name)).within(() => { - cy.contains(testItems.filterDefaultValue).should('be.visible'); - cy.contains(testItems.filterOtherCountry).should('not.exist'); - }); - cy.request( - 'api/v1/dashboard/?q=(order_column:changed_on_delta_humanized,order_direction:desc,page:0,page_size:100)', - ).then(xhr => { - const dashboards = xhr.body.result; - const testDashboard = dashboards.find( - (d: { dashboard_title: string }) => - d.dashboard_title === testItems.dashboard, - ); - cy.visit(testDashboard.url); - }); - WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); - cy.get(dataTestChartName(testItems.topTenChart.name)).within(() => { - cy.contains(testItems.filterDefaultValue).should('be.visible'); - cy.contains(testItems.filterOtherCountry).should('not.exist'); - }); - validateFilterContentOnDashboard(testItems.filterDefaultValue); - }); }); describe('Nativefilters initial state not required', () => { @@ -340,6 +333,12 @@ describe('Nativefilters initial state not required', () => { cy.contains('Values are dependent on other filters').should('exist'); }); + it("User can check 'Filter has default value'", () => { + enterNativeFilterEditModal(); + addCountryNameFilter(); + inputNativeFilterDefaultValue(testItems.filterDefaultValue); + }); + it('User can add a new native filter', () => { let filterKey: string; const removeFirstChar = (search: string) => @@ -368,7 +367,9 @@ describe('Nativefilters initial state not required', () => { addCountryCodeFilter(); saveNativeFilterSettings(); WORLD_HEALTH_CHARTS.forEach(waitForChartLoad); - validateFilterNameOnDashboard(testItems.topTenChart.filterColumn); + validateFilterNameOnDashboard( + testItems.topTenChart.filterColumnCountryCode, + ); enterNativeFilterEditModal(); cy.get(nativeFilters.filtersList.removeIcon).first().click(); cy.get('[data-test="restore-filter-button"]').should('be.visible').click(); From 7d462d2c78672021ada012fad75bbd795799ff53 Mon Sep 17 00:00:00 2001 From: Jinghua Yao Date: Wed, 27 Apr 2022 11:35:12 -0700 Subject: [PATCH 12/13] one more fix --- .../integration/dashboard/nativeFilter.helper.ts | 16 +++++++++------- .../integration/dashboard/nativeFilters.test.ts | 2 +- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilter.helper.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilter.helper.ts index 1bd10bb4f1a0a..5f43b330ceeac 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilter.helper.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilter.helper.ts @@ -359,13 +359,15 @@ export function applyAdvancedTimeRangeFilterOnDashboard( export function inputNativeFilterDefaultValue(defaultValue: string) { cy.contains('Filter has default value').click(); cy.contains('Default value is required').should('be.visible'); - cy.get(nativeFilters.filterConfigurationSections.filterPlaceholder) - .contains('options') - .should('be.visible'); - cy.get(nativeFilters.filterConfigurationSections.collapsedSectionContainer) - .first() - .get(nativeFilters.filtersPanel.columnEmptyInput) - .type(`${defaultValue}{enter}`); + cy.get(nativeFilters.modal.container).within(() => { + cy.get(nativeFilters.filterConfigurationSections.filterPlaceholder) + .contains('options') + .should('be.visible'); + cy.get(nativeFilters.filterConfigurationSections.collapsedSectionContainer) + .first() + .get(nativeFilters.filtersPanel.columnEmptyInput) + .type(`${defaultValue}{enter}`); + }); } /** ************************************************************************ 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 01dc4b3495264..902a2c52774f6 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts @@ -70,7 +70,7 @@ const getTestTitle = ( const milliseconds = new Date().getTime(); const dashboard = `Test Dashboard${milliseconds}`; -describe('Nativefilters tests initial state required', () => { +xdescribe('Nativefilters tests initial state required', () => { beforeEach(() => { cy.login(); cleanUp(); From a1bbfb2ed81c03ffd2c91dbc9d1c919095e6798d Mon Sep 17 00:00:00 2001 From: Jinghua Yao Date: Wed, 27 Apr 2022 21:50:48 -0700 Subject: [PATCH 13/13] enable test --- .../cypress/integration/dashboard/nativeFilters.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 902a2c52774f6..01dc4b3495264 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts @@ -70,7 +70,7 @@ const getTestTitle = ( const milliseconds = new Date().getTime(); const dashboard = `Test Dashboard${milliseconds}`; -xdescribe('Nativefilters tests initial state required', () => { +describe('Nativefilters tests initial state required', () => { beforeEach(() => { cy.login(); cleanUp();