From be5e027b37e8d9eaf0981245a6e89dc9f15fd22b Mon Sep 17 00:00:00 2001 From: Jinghua Yao Date: Wed, 10 Nov 2021 23:24:51 -0800 Subject: [PATCH] fix lint --- .../dashboard/nativeFilters.test.ts | 1136 +++++++-------- .../cypress/support/directories.ts | 1256 ++++++++--------- 2 files changed, 1196 insertions(+), 1196 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 21e861b46bb3c..9f6e0ca4ac196 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts @@ -16,571 +16,571 @@ * specific language governing permissions and limitations * under the License. */ - import { dashboardView, nativeFilters } from 'cypress/support/directories'; - import { testItems } from './dashboard.helper'; - import { DASHBOARD_LIST } from '../dashboard_list/dashboard_list.helper'; - - const getTestTitle = ( - test: Mocha.Suite = (Cypress as any).mocha.getRunner().suite.ctx.test, - ): string => - test.parent?.title - ? `${getTestTitle(test.parent)} -- ${test.title}` - : test.title; - - // TODO: fix flaky init logic and re-enable - const milliseconds = new Date().getTime(); - const dashboard = `Test Dashboard${milliseconds}`; - - describe('Nativefilters Sanity test', () => { - before(() => { - cy.login(); - cy.intercept('/api/v1/dashboard/?q=**').as('dashboardsList'); - cy.intercept('POST', '**/copy_dash/*').as('copy'); - cy.intercept('/api/v1/dashboard/*').as('dashboard'); - 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 worldBankDashboard = dashboards.find( - d => d.dashboard_title === "World Bank's Data", - ); - cy.visit(worldBankDashboard.url); - }); - 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); - }); - beforeEach(() => { - cy.login(); - 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 => d.dashboard_title === testItems.dashboard, - ); - cy.visit(testDashboard.url); - }); - }); - 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', - ); - }); - 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 add a new native filter', () => { - 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() - .type('Country name'); - cy.get(nativeFilters.modal.container) - .find(nativeFilters.filtersPanel.datasetName) - .click() - .type('wb_health_population{enter}'); - - // Add following step to avoid flaky enter value in line 177 - cy.get(nativeFilters.filtersPanel.inputDropdown) - .should('be.visible', { timeout: 20000 }) - .last() - .click(); - - 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.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'); - - 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() - .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 }); - 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() - .type('Country name'); - cy.get(nativeFilters.modal.container) - .find(nativeFilters.filtersPanel.datasetName) - .click() - .type('wb_health_population{enter}'); - - 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(); - cy.get(nativeFilters.modal.container).should('be.visible'); - cy.get(nativeFilters.filterConfigurationSections.collapseExpandButton) - .last() - .click(); - [ - 'Filter has default value', - 'Multiple select', - 'Required', - 'Filter is hierarchical', - 'Default to first item', - 'Inverse selection', - 'Search all filter options', - 'Pre-filter available values', - 'Sort filter values', - ].forEach(el => { - cy.contains(el); - }); - cy.get(nativeFilters.filterConfigurationSections.checkedCheckbox).contains( - 'Multiple select', - ); - cy.get(nativeFilters.filterConfigurationSections.infoTooltip) - .eq(0) - .trigger('mouseover'); - cy.contains('Allow selecting multiple values'); - - cy.get(nativeFilters.filterConfigurationSections.infoTooltip) - .eq(1) - .trigger('mouseover'); - cy.contains('User must select a value before applying the filter'); - - cy.get(nativeFilters.filterConfigurationSections.infoTooltip) - .eq(2) - .trigger('mouseover'); - cy.contains( - 'Select first item by default (when using this option, default value can’t be set)', - ); - - cy.get(nativeFilters.filterConfigurationSections.infoTooltip) - .eq(3) - .trigger('mouseover'); - cy.contains('Exclude selected values'); - - cy.get(nativeFilters.filterConfigurationSections.infoTooltip) - .eq(4) - .trigger('mouseover'); - 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).', - ); - }); - 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.modal.container) - .find(nativeFilters.filtersPanel.datasetName) - .click() - .type('wb_health_population{enter}'); - cy.get(nativeFilters.modal.container) - .find(nativeFilters.filtersPanel.filterName) - .click() - .type('country_name'); - cy.get('.loading inline-centered css-101mkpk').should('not.exist'); - // 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'); - }); - }); - }); - - xdescribe('Nativefilters', () => { - before(() => { - cy.login(); - cy.visit(DASHBOARD_LIST); - cy.get('[data-test="new-dropdown"]').click(); - cy.get('[data-test="menu-item-Dashboard"]').click({ force: true }); - cy.get('[data-test="editable-title-input"]') - .click() - .clear() - .type(`${dashboard}{enter}`); - cy.get('[data-test="header-save-button"]').click(); - cy.visit(CHART_LIST); - cy.get('[data-test="search-input"]').type('Treemap{enter}'); - cy.get('[data-test="Treemap-list-chart-title"]') - .should('be.visible', { timeout: 5000 }) - .click(); - cy.get('[data-test="query-save-button"]').click(); - cy.get('[data-test="save-chart-modal-select-dashboard-form"]') - .find('input[aria-label="Select a dashboard"]') - .type(`${dashboard}`, { force: true }); - cy.get('[data-test="btn-modal-save"]').click(); - }); - beforeEach(() => { - cy.login(); - cy.visit(DASHBOARD_LIST); - cy.get('[data-test="search-input"]').click().type(`${dashboard}{enter}`); - cy.contains('[data-test="cell-text"]', `${dashboard}`).click(); - }); - - it('should show filter bar and allow user to create filters ', () => { - cy.get('[data-test="filter-bar"]').should('be.visible'); - cy.get('[data-test="filter-bar__expand-button"]').click(); - cy.get('[data-test="filter-bar__create-filter"]').click(); - cy.get('.ant-modal').should('be.visible'); - - cy.get('.ant-modal') - .find('[data-test="filters-config-modal__name-input"]') - .click() - .type('Country name'); - - cy.get('.ant-modal') - .find('[data-test="filters-config-modal__datasource-input"]') - .click() - .type('wb_health_population'); - - cy.get( - '.ant-modal [data-test="filters-config-modal__datasource-input"] .Select__menu', - ) - .contains('wb_health_population') - .click(); - - // hack for unclickable country_name - cy.get('.ant-modal').find('[data-test="field-input"]').type('country_name'); - cy.get('.ant-modal') - .find('[data-test="field-input"]') - .type('{downarrow}{downarrow}{enter}'); - cy.get('[data-test="apply-changes-instantly-checkbox"]').check(); - cy.get('.ant-modal-footer') - .find('[data-test="native-filter-modal-save-button"]') - .should('be.visible') - .click(); - }); - - it('should show newly added filter in filter bar menu', () => { - cy.get('[data-test="filter-bar"]').should('be.visible'); - cy.get('[data-test="filter-control-name"]').should('be.visible'); - cy.get('[data-test="form-item-value"]').should('be.visible'); - }); - it('should filter dashboard with selected filter value', () => { - cy.get('[data-test="form-item-value"]').should('be.visible').click(); - cy.get('.ant-select-selection-search').type('Hong Kong{enter}'); - cy.get('[data-test="filter-bar__apply-button"]').click(); - cy.get('.treemap').within(() => { - cy.contains('HKG').should('be.visible'); - cy.contains('USA').should('not.exist'); - }); - }); - xit('default value is respected after revisit', () => { - cy.get('[data-test="filter-bar__create-filter"]').click(); - cy.get('.ant-modal').should('be.visible'); - // TODO: replace with proper wait for filter to finish loading - cy.wait(1000); - cy.get('[data-test="default-input"]').click(); - cy.get('.ant-modal') - .find('[data-test="default-input"]') - .type('Sweden{enter}'); - cy.get('[data-test="native-filter-modal-save-button"]') - .should('be.visible') - .click(); - cy.visit(DASHBOARD_LIST); - cy.get('[data-test="search-input"]').click().type(`${dashboard}{enter}`); - cy.contains('[data-test="cell-text"]', `${dashboard}`).click(); - cy.get('.treemap').within(() => { - cy.contains('SWE').should('be.visible'); - cy.contains('USA').should('not.exist'); - }); - cy.contains('Sweden'); - }); - it('should allow for deleted filter restore', () => { - cy.get('[data-test="filter-bar__create-filter"]').click(); - cy.get('.ant-modal').should('be.visible'); - cy.get('.ant-tabs-nav-list').within(() => { - cy.get('.ant-tabs-tab-remove').click(); - }); - - cy.get('[data-test="undo-button"]').should('be.visible').click(); - cy.get('.ant-tabs-nav-list').within(() => { - cy.get('.ant-tabs-tab-remove').click(); - }); - cy.get('[data-test="restore-filter-button"]').should('be.visible').click(); - }); - - it('should stop filtering when filter is removed', () => { - cy.get('[data-test="filter-bar__create-filter"]').click(); - cy.get('.ant-modal').should('be.visible'); - cy.get('.ant-tabs-nav-list').within(() => { - cy.get('.ant-tabs-tab-remove').click(); - }); - cy.get('.ant-modal-footer') - .find('[data-test="native-filter-modal-save-button"]') - .should('be.visible') - .click(); - cy.get('.treemap').within(() => { - cy.contains('HKG').should('be.visible'); - cy.contains('USA').should('be.visible'); - }); - }); - describe('Parent Filters', () => { - it('should allow for creating parent filters ', () => { - cy.get('[data-test="filter-bar"]').should('be.visible'); - cy.get('[data-test="filter-bar__expand-button"]').click(); - cy.get('[data-test="filter-bar__create-filter"]').click(); - cy.get('.ant-modal').should('be.visible'); - - cy.get('.ant-modal') - .find('[data-test="filters-config-modal__name-input"]') - .click() - .type('Country name'); - - cy.get('.ant-modal') - .find('[data-test="filters-config-modal__datasource-input"]') - .click() - .type('wb_health_population'); - - cy.get( - '.ant-modal [data-test="filters-config-modal__datasource-input"] .Select__menu', - ) - .contains('wb_health_population') - .click(); - - // hack for unclickable country_name - cy.get('.ant-modal') - .find('[data-test="field-input"]') - .type('country_name'); - cy.get('.ant-modal') - .find('[data-test="field-input"]') - .type('{downarrow}{downarrow}{enter}'); - cy.get('[data-test="apply-changes-instantly-checkbox"]').check(); - cy.get('.ant-modal-footer') - .find('[data-test="native-filter-modal-save-button"]') - .should('be.visible') - .click(); - - cy.get('[data-test="filter-bar__create-filter"]').click(); - cy.get('.ant-modal').first().should('be.visible'); - cy.get('[data-test=add-filter-button]').first().click(); - - cy.get('.ant-modal') - .find('[data-test="filters-config-modal__name-input"]') - .last() - .click() - .type('Region Name'); - - cy.get('.ant-modal') - .find('[data-test="filters-config-modal__datasource-input"]') - .last() - .click() - .type('wb_health_population'); - - cy.get( - '.ant-modal [data-test="filters-config-modal__datasource-input"] .Select__menu', - ) - .last() - .contains('wb_health_population') - .click(); - - // hack for unclickable country_name - cy.get('.ant-modal') - .find('[data-test="field-input"]') - .last() - .type('region'); - cy.get('.ant-modal') - .find('[data-test="field-input"]') - .last() - .type('{downarrow}{downarrow}{downarrow}{downarrow}{enter}'); - - cy.get('[data-test="apply-changes-instantly-checkbox"]').last().check(); - cy.get('.ant-modal') - .find('[data-test="parent-filter-input"]') - .last() - .type('{downarrow}{enter}'); - - cy.get('.ant-modal-footer') - .find('[data-test="native-filter-modal-save-button"]') - .first() - .should('be.visible') - .click(); - cy.get('[data-test="filter-icon"]').should('be.visible'); - }); - xit('should parent filter be working', () => { - cy.get('.treemap').within(() => { - cy.contains('SMR').should('be.visible'); - cy.contains('Europe & Central Asia').should('be.visible'); - cy.contains('South Asia').should('be.visible'); - }); - - cy.get('[data-test="form-item-value"]').should('be.visible').click(); - cy.get('.ant-popover-inner-content').within(() => { - cy.get('[data-test="form-item-value"]') - .should('be.visible') - .first() - .type('San Marino{enter}'); - cy.get('[data-test="form-item-value"]') - .should('be.visible') - .last() - .type('Europe & Central Asia{enter}'); - }); - cy.get('.treemap').within(() => { - cy.contains('SMR').should('be.visible'); - cy.contains('Europe & Central Asia').should('be.visible'); - cy.contains('South Asia').should('not.exist'); - }); - }); - - it('should stop filtering when parent filter is removed', () => { - cy.get('[data-test="filter-bar__create-filter"]').click(); - cy.get('.ant-modal').should('be.visible'); - cy.get('.ant-tabs-nav-list').within(() => { - cy.get('.ant-tabs-tab-remove').click({ multiple: true }); - }); - cy.get('.ant-modal-footer') - .find('[data-test="native-filter-modal-save-button"]') - .should('be.visible') - .click(); - cy.get('.treemap').within(() => { - cy.contains('HKG').should('be.visible'); - cy.contains('USA').should('be.visible'); - }); - }); - }); - }); \ No newline at end of file +import { dashboardView, nativeFilters } from 'cypress/support/directories'; +import { testItems } from './dashboard.helper'; +import { DASHBOARD_LIST } from '../dashboard_list/dashboard_list.helper'; + +const getTestTitle = ( + test: Mocha.Suite = (Cypress as any).mocha.getRunner().suite.ctx.test, +): string => + test.parent?.title + ? `${getTestTitle(test.parent)} -- ${test.title}` + : test.title; + +// TODO: fix flaky init logic and re-enable +const milliseconds = new Date().getTime(); +const dashboard = `Test Dashboard${milliseconds}`; + +describe('Nativefilters Sanity test', () => { + before(() => { + cy.login(); + cy.intercept('/api/v1/dashboard/?q=**').as('dashboardsList'); + cy.intercept('POST', '**/copy_dash/*').as('copy'); + cy.intercept('/api/v1/dashboard/*').as('dashboard'); + 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 worldBankDashboard = dashboards.find( + d => d.dashboard_title === "World Bank's Data", + ); + cy.visit(worldBankDashboard.url); + }); + 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); + }); + beforeEach(() => { + cy.login(); + 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 => d.dashboard_title === testItems.dashboard, + ); + cy.visit(testDashboard.url); + }); + }); + 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', + ); + }); + 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 add a new native filter', () => { + 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() + .type('Country name'); + cy.get(nativeFilters.modal.container) + .find(nativeFilters.filtersPanel.datasetName) + .click() + .type('wb_health_population{enter}'); + + // Add following step to avoid flaky enter value in line 177 + cy.get(nativeFilters.filtersPanel.inputDropdown) + .should('be.visible', { timeout: 20000 }) + .last() + .click(); + + 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.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'); + + 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() + .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 }); + 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() + .type('Country name'); + cy.get(nativeFilters.modal.container) + .find(nativeFilters.filtersPanel.datasetName) + .click() + .type('wb_health_population{enter}'); + + 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(); + cy.get(nativeFilters.modal.container).should('be.visible'); + cy.get(nativeFilters.filterConfigurationSections.collapseExpandButton) + .last() + .click(); + [ + 'Filter has default value', + 'Multiple select', + 'Required', + 'Filter is hierarchical', + 'Default to first item', + 'Inverse selection', + 'Search all filter options', + 'Pre-filter available values', + 'Sort filter values', + ].forEach(el => { + cy.contains(el); + }); + cy.get(nativeFilters.filterConfigurationSections.checkedCheckbox).contains( + 'Multiple select', + ); + cy.get(nativeFilters.filterConfigurationSections.infoTooltip) + .eq(0) + .trigger('mouseover'); + cy.contains('Allow selecting multiple values'); + + cy.get(nativeFilters.filterConfigurationSections.infoTooltip) + .eq(1) + .trigger('mouseover'); + cy.contains('User must select a value before applying the filter'); + + cy.get(nativeFilters.filterConfigurationSections.infoTooltip) + .eq(2) + .trigger('mouseover'); + cy.contains( + 'Select first item by default (when using this option, default value can’t be set)', + ); + + cy.get(nativeFilters.filterConfigurationSections.infoTooltip) + .eq(3) + .trigger('mouseover'); + cy.contains('Exclude selected values'); + + cy.get(nativeFilters.filterConfigurationSections.infoTooltip) + .eq(4) + .trigger('mouseover'); + 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).', + ); + }); + 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.modal.container) + .find(nativeFilters.filtersPanel.datasetName) + .click() + .type('wb_health_population{enter}'); + cy.get(nativeFilters.modal.container) + .find(nativeFilters.filtersPanel.filterName) + .click() + .type('country_name'); + cy.get('.loading inline-centered css-101mkpk').should('not.exist'); + // 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'); + }); + }); +}); + +xdescribe('Nativefilters', () => { + before(() => { + cy.login(); + cy.visit(DASHBOARD_LIST); + cy.get('[data-test="new-dropdown"]').click(); + cy.get('[data-test="menu-item-Dashboard"]').click({ force: true }); + cy.get('[data-test="editable-title-input"]') + .click() + .clear() + .type(`${dashboard}{enter}`); + cy.get('[data-test="header-save-button"]').click(); + cy.visit(CHART_LIST); + cy.get('[data-test="search-input"]').type('Treemap{enter}'); + cy.get('[data-test="Treemap-list-chart-title"]') + .should('be.visible', { timeout: 5000 }) + .click(); + cy.get('[data-test="query-save-button"]').click(); + cy.get('[data-test="save-chart-modal-select-dashboard-form"]') + .find('input[aria-label="Select a dashboard"]') + .type(`${dashboard}`, { force: true }); + cy.get('[data-test="btn-modal-save"]').click(); + }); + beforeEach(() => { + cy.login(); + cy.visit(DASHBOARD_LIST); + cy.get('[data-test="search-input"]').click().type(`${dashboard}{enter}`); + cy.contains('[data-test="cell-text"]', `${dashboard}`).click(); + }); + + it('should show filter bar and allow user to create filters ', () => { + cy.get('[data-test="filter-bar"]').should('be.visible'); + cy.get('[data-test="filter-bar__expand-button"]').click(); + cy.get('[data-test="filter-bar__create-filter"]').click(); + cy.get('.ant-modal').should('be.visible'); + + cy.get('.ant-modal') + .find('[data-test="filters-config-modal__name-input"]') + .click() + .type('Country name'); + + cy.get('.ant-modal') + .find('[data-test="filters-config-modal__datasource-input"]') + .click() + .type('wb_health_population'); + + cy.get( + '.ant-modal [data-test="filters-config-modal__datasource-input"] .Select__menu', + ) + .contains('wb_health_population') + .click(); + + // hack for unclickable country_name + cy.get('.ant-modal').find('[data-test="field-input"]').type('country_name'); + cy.get('.ant-modal') + .find('[data-test="field-input"]') + .type('{downarrow}{downarrow}{enter}'); + cy.get('[data-test="apply-changes-instantly-checkbox"]').check(); + cy.get('.ant-modal-footer') + .find('[data-test="native-filter-modal-save-button"]') + .should('be.visible') + .click(); + }); + + it('should show newly added filter in filter bar menu', () => { + cy.get('[data-test="filter-bar"]').should('be.visible'); + cy.get('[data-test="filter-control-name"]').should('be.visible'); + cy.get('[data-test="form-item-value"]').should('be.visible'); + }); + it('should filter dashboard with selected filter value', () => { + cy.get('[data-test="form-item-value"]').should('be.visible').click(); + cy.get('.ant-select-selection-search').type('Hong Kong{enter}'); + cy.get('[data-test="filter-bar__apply-button"]').click(); + cy.get('.treemap').within(() => { + cy.contains('HKG').should('be.visible'); + cy.contains('USA').should('not.exist'); + }); + }); + xit('default value is respected after revisit', () => { + cy.get('[data-test="filter-bar__create-filter"]').click(); + cy.get('.ant-modal').should('be.visible'); + // TODO: replace with proper wait for filter to finish loading + cy.wait(1000); + cy.get('[data-test="default-input"]').click(); + cy.get('.ant-modal') + .find('[data-test="default-input"]') + .type('Sweden{enter}'); + cy.get('[data-test="native-filter-modal-save-button"]') + .should('be.visible') + .click(); + cy.visit(DASHBOARD_LIST); + cy.get('[data-test="search-input"]').click().type(`${dashboard}{enter}`); + cy.contains('[data-test="cell-text"]', `${dashboard}`).click(); + cy.get('.treemap').within(() => { + cy.contains('SWE').should('be.visible'); + cy.contains('USA').should('not.exist'); + }); + cy.contains('Sweden'); + }); + it('should allow for deleted filter restore', () => { + cy.get('[data-test="filter-bar__create-filter"]').click(); + cy.get('.ant-modal').should('be.visible'); + cy.get('.ant-tabs-nav-list').within(() => { + cy.get('.ant-tabs-tab-remove').click(); + }); + + cy.get('[data-test="undo-button"]').should('be.visible').click(); + cy.get('.ant-tabs-nav-list').within(() => { + cy.get('.ant-tabs-tab-remove').click(); + }); + cy.get('[data-test="restore-filter-button"]').should('be.visible').click(); + }); + + it('should stop filtering when filter is removed', () => { + cy.get('[data-test="filter-bar__create-filter"]').click(); + cy.get('.ant-modal').should('be.visible'); + cy.get('.ant-tabs-nav-list').within(() => { + cy.get('.ant-tabs-tab-remove').click(); + }); + cy.get('.ant-modal-footer') + .find('[data-test="native-filter-modal-save-button"]') + .should('be.visible') + .click(); + cy.get('.treemap').within(() => { + cy.contains('HKG').should('be.visible'); + cy.contains('USA').should('be.visible'); + }); + }); + describe('Parent Filters', () => { + it('should allow for creating parent filters ', () => { + cy.get('[data-test="filter-bar"]').should('be.visible'); + cy.get('[data-test="filter-bar__expand-button"]').click(); + cy.get('[data-test="filter-bar__create-filter"]').click(); + cy.get('.ant-modal').should('be.visible'); + + cy.get('.ant-modal') + .find('[data-test="filters-config-modal__name-input"]') + .click() + .type('Country name'); + + cy.get('.ant-modal') + .find('[data-test="filters-config-modal__datasource-input"]') + .click() + .type('wb_health_population'); + + cy.get( + '.ant-modal [data-test="filters-config-modal__datasource-input"] .Select__menu', + ) + .contains('wb_health_population') + .click(); + + // hack for unclickable country_name + cy.get('.ant-modal') + .find('[data-test="field-input"]') + .type('country_name'); + cy.get('.ant-modal') + .find('[data-test="field-input"]') + .type('{downarrow}{downarrow}{enter}'); + cy.get('[data-test="apply-changes-instantly-checkbox"]').check(); + cy.get('.ant-modal-footer') + .find('[data-test="native-filter-modal-save-button"]') + .should('be.visible') + .click(); + + cy.get('[data-test="filter-bar__create-filter"]').click(); + cy.get('.ant-modal').first().should('be.visible'); + cy.get('[data-test=add-filter-button]').first().click(); + + cy.get('.ant-modal') + .find('[data-test="filters-config-modal__name-input"]') + .last() + .click() + .type('Region Name'); + + cy.get('.ant-modal') + .find('[data-test="filters-config-modal__datasource-input"]') + .last() + .click() + .type('wb_health_population'); + + cy.get( + '.ant-modal [data-test="filters-config-modal__datasource-input"] .Select__menu', + ) + .last() + .contains('wb_health_population') + .click(); + + // hack for unclickable country_name + cy.get('.ant-modal') + .find('[data-test="field-input"]') + .last() + .type('region'); + cy.get('.ant-modal') + .find('[data-test="field-input"]') + .last() + .type('{downarrow}{downarrow}{downarrow}{downarrow}{enter}'); + + cy.get('[data-test="apply-changes-instantly-checkbox"]').last().check(); + cy.get('.ant-modal') + .find('[data-test="parent-filter-input"]') + .last() + .type('{downarrow}{enter}'); + + cy.get('.ant-modal-footer') + .find('[data-test="native-filter-modal-save-button"]') + .first() + .should('be.visible') + .click(); + cy.get('[data-test="filter-icon"]').should('be.visible'); + }); + xit('should parent filter be working', () => { + cy.get('.treemap').within(() => { + cy.contains('SMR').should('be.visible'); + cy.contains('Europe & Central Asia').should('be.visible'); + cy.contains('South Asia').should('be.visible'); + }); + + cy.get('[data-test="form-item-value"]').should('be.visible').click(); + cy.get('.ant-popover-inner-content').within(() => { + cy.get('[data-test="form-item-value"]') + .should('be.visible') + .first() + .type('San Marino{enter}'); + cy.get('[data-test="form-item-value"]') + .should('be.visible') + .last() + .type('Europe & Central Asia{enter}'); + }); + cy.get('.treemap').within(() => { + cy.contains('SMR').should('be.visible'); + cy.contains('Europe & Central Asia').should('be.visible'); + cy.contains('South Asia').should('not.exist'); + }); + }); + + it('should stop filtering when parent filter is removed', () => { + cy.get('[data-test="filter-bar__create-filter"]').click(); + cy.get('.ant-modal').should('be.visible'); + cy.get('.ant-tabs-nav-list').within(() => { + cy.get('.ant-tabs-tab-remove').click({ multiple: true }); + }); + cy.get('.ant-modal-footer') + .find('[data-test="native-filter-modal-save-button"]') + .should('be.visible') + .click(); + cy.get('.treemap').within(() => { + cy.contains('HKG').should('be.visible'); + cy.contains('USA').should('be.visible'); + }); + }); + }); +}); diff --git a/superset-frontend/cypress-base/cypress/support/directories.ts b/superset-frontend/cypress-base/cypress/support/directories.ts index 5c6e20365bdde..63f4a01213323 100644 --- a/superset-frontend/cypress-base/cypress/support/directories.ts +++ b/superset-frontend/cypress-base/cypress/support/directories.ts @@ -17,632 +17,632 @@ * under the License. */ - const dataTestLocator = (value: string) => `[data-test='${value}']`; +const dataTestLocator = (value: string) => `[data-test='${value}']`; - export const pageHeader = { - logo: '.navbar-brand > img', - headerNavigationItem: '.ant-menu-submenu-title', - headerNavigationDropdown: "[aria-label='triangle-down']", - headerNavigationItemMenu: '.ant-menu-item-group-list', - plusIcon: ':nth-child(2) > .ant-menu-submenu-title', - plusIconMenuOptions: { - sqlQueryOption: dataTestLocator('menu-item-SQL query'), - chartOption: dataTestLocator('menu-item-Chart'), - dashboardOption: dataTestLocator('menu-item-Dashboard'), - }, - plusMenu: '.ant-menu-submenu-popup', - barButtons: '[role="presentation"]', - sqlLabMenu: '[id="item_3$Menu"]', - dataMenu: '[id="item_4$Menu"]', - }; - - export const profile = { - activeTab: '.ant-tabs-tab-active', - inactiveTab: '.ant-tabs-tab', - emptyFavoritedPlaceholder: '.ant-empty-normal', - tableRow: '.table-row', - favoritesSpace: '#rc-tabs-0-panel-2', - }; - export const securityAccess = { - rolesBubble: '.ant-badge-count', - }; - export const homePage = { - homeSection: { - sectionArea: '.ant-collapse-content-box', - sectionElement: '.ant-card-meta-title', - }, - sections: { - expandedSection: '.ant-collapse-item-active', - expandedSectionHeader: '[aria-expanded="true"]', - collapseExpandButton: '.ant-collapse-arrow', - collapsedSection: '[class="ant-collapse-item"]', - collapsedSectionHeader: '[aria-expanded="false"]', - section: '[class^="ant-collapse-item"]', - sectionsMenuContainer: "[role='navigation']", - sectionsMenuItem: "[role='menuitem']", - card: dataTestLocator('styled-card'), - }, - thumbnailsSection: { - container: "[class='switch']", - toggle: "[role ='switch']", - }, - }; - export const databasesPage = { - addDatabaseButton: dataTestLocator('btn-create-database'), - searchInput: dataTestLocator('search-input'), - table: { - tableRow: dataTestLocator('table-row'), - tableCell: dataTestLocator('table-row-cell'), - editButton: dataTestLocator('edit-alt'), - }, - modal: { - header: '#rcDialogTitle0 > h4', - step: '.helper-top', - selectDbStepTitle: '.select-db > h4', - preferredBlockBigQuery: '.preferred > :nth-child(1)', - prefferedBlockPostgreSQL: '.preferred > :nth-child(2)', - prefferedBlockSnowflake: '.preferred > :nth-child(3)', - prefferedBlockMySQL: '.preferred > :nth-child(4)', - prefferedBlockAthena: '.preferred > :nth-child(5)', - prefferedBlockSheets: '.preferred > :nth-child(6)', - supportedDatabasesText: '.control-label', - orChoose: '.available-label', - dbDropdown: '[class="ant-select-selection-search-input"]', - dbDropdownMenu: '.rc-virtual-list-holder-inner', - dbDropdownMenuItem: '[class="ant-select-item-option-content"]', - infoAlert: '.ant-alert', - serviceAccountInput: '[name="credentials_info"]', - connectionStep: { - modal: '.ant-modal-content', - modalBody: '.ant-modal-body', - stepTitle: '.css-7x6kk > h4', - helperBottom: '.helper-bottom', - postgresDatabase: '[name="database"]', - dbInput: '[name="database_name"]', - alertMessage: '.ant-alert-message', - errorField: '[role="alert"]', - uploadJson: '[title="Upload JSON file"]', - chooseFile: '[class="ant-btn input-upload-btn"]', - additionalParameters: '[name="query_input"]', - sqlAlchemyUriInput: dataTestLocator('sqlalchemy-uri-input'), - advancedTab: '#rc-tabs-0-tab-2', - activeTab: '.ant-tabs-tab-active', - securitySubMenu: - ':nth-child(3) > .ant-collapse-header > .anticon > svg > path', - aceTextInput: '.ace_text-input', - aceContent: '.ace_content', - connectButton: '.css-16i3wh7', - hostInput: '[name="host"]', - portInput: '[name="port"]', - usernameInput: '[name="username"]', - passwordInput: '[name="password"]', - switch: '.ant-switch', - }, - }, - }; - - export const sqlLabView = { - sqlEditorLeftBar: { - sqlEditorLeftBar: '[class="SqlEditorLeftBar"]', - databaseSchemaTableSection: '[class="SqlEditorLeftBar"] > :nth-child(1)', - tableSchemaSection: - '[class="SqlEditorLeftBar"] > :nth-child(1) > :nth-child(3) > :nth-child(1)', - tableSchemaInputEmpty: '[aria-label="Select table or type table name"]', - }, - databaseInput: '[data-test=DatabaseSelector] > :nth-child(1)', - emptyMenuOptionsPlaceholder: '[class="ant-empty-img-simple"]', - removeTabButton: '.ant-tabs-tab-remove > .anticon > svg', - tabsNavList: "[class='ant-tabs-nav-list']", - tab: "[class='ant-tabs-tab-btn']", - addTabButton: dataTestLocator('add-tab-icon'), - tooltip: '.ant-tooltip-content', - tabName: '.css-1suejie', - schemaInput: '[data-test=DatabaseSelector] > :nth-child(2)', - loadingIndicator: '.Select__loading-indicator', - menuItem: '[class="ant-select-item-option-content"]', - examplesMenuItem: '[title="examples"]', - tableInput: ':nth-child(4) > .select > :nth-child(1)', - sqlEditor: '#brace-editor textarea', - saveAsButton: '.SaveQuery > .ant-btn', - saveAsModal: { - footer: '.ant-modal-footer', - queryNameInput: 'input[class^="ant-input"]', - }, - sqlToolbar: { - toolbar: '#js-sql-toolbar', - runButton: '.css-d3dxop', - }, - rowsLimit: { - dropdown: '.ant-dropdown-menu', - limitButton: '.ant-dropdown-menu-item', - limitButtonText: '.css-151uxnz', - limitTextWithValue: '[class="ant-dropdown-trigger"]', - }, - renderedTableHeader: '.ReactVirtualized__Table__headerRow', - renderedTableRow: '.ReactVirtualized__Table__row', - errorBody: '.error-body', - alertMessage: '.ant-alert-message', - historyTable: { - header: '[role=columnheader]', - table: '.QueryTable', - row: dataTestLocator('table-row'), - failureMarkIcon: '[aria-label=x-small]', - successMarkIcon: '[aria-label=check]', - }, - }; - export const queryHistory = { - tableHeader: dataTestLocator('sort-header'), - row: dataTestLocator('table-row'), - cell: dataTestLocator('table-row-cell'), - action: '[aria-label=full]', - }; - export const savedQuery = { - tableHeader: dataTestLocator('sort-header'), - row: dataTestLocator('table-row'), - cell: dataTestLocator('table-row-cell'), - trash: dataTestLocator('delete-action'), - deleteQueryIcon: '[data-test="delete-action"]', - deleteModal: { - deleteInput: dataTestLocator('delete-modal-input'), - deleteButton: dataTestLocator('modal-confirm-button'), - }, - }; - export const annotationLayersView = { - emptyDescription: { - description: '.ant-empty-description', - addAnnotationLayerButton: '.ant-empty-footer > .ant-btn', - }, - modal: { - content: { - content: '.ant-modal-body', - title: '.ant-modal-body > :nth-child(2) > input', - description: "[name='descr']", - }, - footer: { - footer: '.ant-modal-footer', - addButton: dataTestLocator('modal-confirm-button'), - cancelButton: dataTestLocator('modal-cancel-button'), - }, - }, - }; - export const datasetsList = { - newDatasetButton: '.css-yff34v', - searchInput: dataTestLocator('filters-search'), - newDatasetModal: { - inputField: '[class="section"]', - addButton: dataTestLocator('modal-confirm-button'), - body: '.ant-modal-body', - }, - table: { - tableRow: { - row: dataTestLocator('table-row'), - rowText: dataTestLocator('cell-text'), - rowCell: dataTestLocator('table-row-cell'), - }, - tableRowHeader: { - header: dataTestLocator('sort-header'), - unsorted: '[aria-label="sort"]', - sortAsc: '[aria-label="sort-asc"]', - sortDesc: '[aria-label="sort-desc"]', - }, - rowActionItems: dataTestLocator('table-row-cell'), - actionButton: '.action-button', - editButton: '[aria-label="edit-alt"]', - }, - editDatasetModal: { - modal: dataTestLocator('edit-dataset-tabs'), - sourceNavigationTab: '#table-tabs-tab-0', - metricsNavigationTab: dataTestLocator('collection-tab-Metrics'), - columnsNavigationTab: dataTestLocator('collection-tab-Columns'), - calculatedColumnsNavigationTab: dataTestLocator( - 'collection-tab-Calculated columns', - ), - settingsNavigationTab: '#table-tabs-tab-4', - saveButton: dataTestLocator('datasource-modal-save'), - sourceContent: '#table-tabs-panel-0', - metricsContent: '#table-tabs-panel-1', - columnsContent: '#table-tabs-panel-2', - calculatedColumnsContent: '#table-tabs-panel-3', - settingsContent: '#table-tabs-panel-4', - aceTextInput: '.ace_text-input', - sourceSQLInput: '.ace_content', - sourceVirtualSQLRadio: ':nth-child(2) > .ant-radio > .ant-radio-inner', - sourcePadlock: '[aria-label=lock-locked]', - legacy: { - panel: '.panel-body', - sqlInput: '#sql', - save: '.well > .btn-primary', - description: '#description', - }, - }, - deleteDatasetModal: { - modal: '.ant-modal-content', - deleteInput: dataTestLocator('delete-modal-input'), - deleteButton: dataTestLocator('modal-confirm-button'), - text: '.css-kxmt87', - }, - }; - export const chartListView = { - filtersBar: { - searchField: dataTestLocator('filters-search'), - }, - top: { - bulkSelect: dataTestLocator('bulk-select'), - }, - header: { - cardView: '[aria-label="card-view"]', - listView: '[aria-label="list-view"]', - sort: '[class="ant-select-selection-search-input"][aria-label="Sort"]', - sortRecentlyModifiedMenuOption: '[label="Recently modified"]', - sortAlphabeticalMenuOption: '[label="Alphabetical"]', - sortDropdown: '.Select__menu', - }, - card: { - card: dataTestLocator('styled-card'), - cardCover: '[class="ant-card-cover"]', - cardImage: '[class="gradient-container"]', - selectedStarIcon: "[aria-label='favorite-selected']", - unselectedStarIcon: "[aria-label='favorite-unselected']", - starIcon: dataTestLocator('fave-unfave-icon'), - }, - deleteModal: { - deleteInput: dataTestLocator('delete-modal-input'), - deleteButton: dataTestLocator('modal-confirm-button'), - }, - table: { - bulkSelect: { - checkboxOff: '[aria-label="checkbox-off"]', - checkboxOn: '[aria-label="checkbox-on"]', - action: dataTestLocator('bulk-select-action'), - }, - tableList: dataTestLocator('listview-table'), - table: '[role="rowgroup"]', - tableRowHeader: { - header: dataTestLocator('sort-header'), - unsorted: '[aria-label="sort"]', - sortAsc: '[aria-label="sort-asc"]', - sortDesc: '[aria-label="sort-desc"]', - }, - tableRow: { - row: dataTestLocator('table-row'), - rowText: dataTestLocator('cell-text'), - rowCell: dataTestLocator('table-row-cell'), - }, - }, - addChartButton: '.css-yff34v', - }; - export const nativeFilters = { - modal: { - container: '.ant-modal', - footer: '.ant-modal-footer', - saveButton: dataTestLocator('native-filter-modal-save-button'), - cancelButton: dataTestLocator('native-filter-modal-cancel-button'), - yesCancelButton: '[type="button"]', - alertXUnsavedFilters: '.ant-alert-message', - tabsList: { - tabsContainer: '[class="ant-tabs-nav-list"]', - tab: '.ant-tabs-tab', - removeTab: '[aria-label="trash"]', - }, - addFilter: dataTestLocator('add-filter-button'), - defaultValueCheck: '.ant-checkbox-checked', - }, - filtersPanel: { - filterName: dataTestLocator('filters-config-modal__name-input'), - datasetName: dataTestLocator('filters-config-modal__datasource-input'), - filterInfoInput: '.ant-select-selection-search-input', - inputDropdown: '.ant-select-item-option-content', - columnEmptyInput: '.ant-select-selection-placeholder', - filterTypeInput: dataTestLocator('filters-config-modal__filter-type'), - fieldInput: dataTestLocator('field-input'), - }, - filterFromDashboardView: { - expand: dataTestLocator('filter-bar__expand-button'), - collapse: dataTestLocator('filter-bar__collapse-button'), - filterName: dataTestLocator('filter-control-name'), - filterContent: '.ant-select-selection-item-content', - }, - createFilterButton: dataTestLocator('filter-bar__create-filter'), - removeFilter: '[aria-label="remove"]', - filterConfigurationSections: { - collapseExpandButton: '.ant-collapse-arrow', - checkedCheckbox: '.ant-checkbox-wrapper-checked', - infoTooltip: '[aria-label="Show info tooltip"]', - parentFilterInput: dataTestLocator('parent-filter-input'), - }, - filtersList: { - list: '.ant-tabs-nav-list', - listItemNotActive: '[class="ant-tabs-tab ant-tabs-tab-with-remove"]', - listItemActive: - '[class="ant-tabs-tab ant-tabs-tab-with-remove ant-tabs-tab-active"]', - removeIcon: '[aria-label="trash"]', - }, - filterItem: dataTestLocator('form-item-value'), - filterItemDropdown: '.ant-select-selection-search', - applyFilter: dataTestLocator('filter-bar__apply-button'), - defaultInput: dataTestLocator('default-input'), - filterIcon: dataTestLocator('filter-icon'), - }; - export const dashboardListView = { - dashboardListView: dataTestLocator('dashboard-list-view'), - editItemAction: dataTestLocator('edit-alt'), - filtersBar: { - searchField: dataTestLocator('filters-search'), - }, - top: { - bulkSelect: dataTestLocator('bulk-select'), - }, - card: { - card: dataTestLocator('styled-card'), - cardCover: '[class="ant-card-cover"]', - cardImage: '[class="gradient-container"]', - selectedStarIcon: "[aria-label='favorite-selected']", - unselectedStarIcon: "[aria-label='favorite-unselected']", - starIcon: dataTestLocator('fave-unfave-icon'), - }, - deleteModal: { - deleteInput: dataTestLocator('delete-modal-input'), - deleteButton: dataTestLocator('modal-confirm-button'), - }, - table: { - starIcon: dataTestLocator('fave-unfave-icon'), - selectedStarIcon: "[aria-label='favorite-selected']", - unselectedStarIcon: "[aria-label='favorite-unselected']", - bulkSelect: { - checkboxOff: '[aria-label="checkbox-off"]', - checkboxOn: '[aria-label="checkbox-on"]', - action: dataTestLocator('bulk-select-action'), - }, - tableRow: { - sortHeader: dataTestLocator('sort-header'), - row: dataTestLocator('table-row'), - rowText: dataTestLocator('cell-text'), - rowCell: dataTestLocator('table-row-cell'), - }, - tableRowList: '[role="rowgroup"]', - tableList: dataTestLocator('listview-table'), - trashIcon: dataTestLocator('dashboard-list-trash-icon'), - }, - actions: { - importButton: dataTestLocator('import-button'), - newDashboardButton: '.css-yff34v', - }, - importModal: { - selectFileButton: '.ant-upload > .ant-btn > span', - importButton: dataTestLocator('modal-confirm-button'), - }, - header: { - cardView: '[aria-label="card-view"]', - listView: '[aria-label="list-view"]', - sort: dataTestLocator('sort-header'), - sortDropdown: '.Select__menu', - statusFilterInput: `${dataTestLocator( - 'filters-select', - )}[aria-label='Status']`, - ownerFilterInput: `${dataTestLocator( - 'filters-select', - )}[aria-label='Owner']`, - createdByFilterInput: `${dataTestLocator( - 'filters-select', - )}[aria-label='Created by']`, - FavoriteFilterInput: `${dataTestLocator( - 'filters-select', - )}[aria-label='Favorite']`, - searchFilterInput: `${dataTestLocator( - 'filters-search', - )}[name='dashboard_title']`, - draftStatusFilterOption: "[title='Draft']", - }, - }; - export const exploreView = { - openDatasourceMenu: dataTestLocator('open-datasource-tab'), - sectionsHeader: '.ant-collapse-header', - datasourceMenuThreeDots: dataTestLocator('datasource-menu-trigger'), - threeDotsMenuDropdown: { - editDataset: dataTestLocator('edit-dataset'), - }, - chartContainer: dataTestLocator('chart-container'), - chartHeading: { - queryMenu: '#query', - viewQueryButton: dataTestLocator('view-query-menu-item'), - shortLinkButton: dataTestLocator('short-link-button'), - embedCodeButton: dataTestLocator('embed-code-button'), - }, - chartAreaItem: '.nv-legend-text', - viewQueryModal: { - container: '.ant-modal-content', - closeButton: 'button.ant-modal-close', - }, - embedCodeModal: { - container: dataTestLocator('embed-code-popover'), - textfield: dataTestLocator('embed-code-textarea'), - }, - saveModal: { - modal: '.ant-modal-content', - chartNameInput: dataTestLocator('new-chart-name'), - dashboardNameInput: '#dashboard-creatable-select', - addToDashboardInput: dataTestLocator( - 'save-chart-modal-select-dashboard-form', - ), - saveButton: dataTestLocator('btn-modal-save'), - saveAsCircle: dataTestLocator('saveas-radio'), - overwriteCircle: dataTestLocator('save-overwrite-radio'), - }, - controlPanel: { - panel: dataTestLocator('control-tabs'), - categoryArea: '.ant-collapse-content-box', - dragField: dataTestLocator('datasource'), - metricsField: dataTestLocator('metrics'), - optionField: dataTestLocator('option-label'), - fieldInput: '.Select__control input', - removeFieldValue: dataTestLocator('remove-control-button'), - addFieldValue: '[aria-label="plus-small"]', - vizType: dataTestLocator('visualization-type'), - runButton: dataTestLocator('run-query-button'), - saveQuery: dataTestLocator('query-save-button'), - fieldValue: dataTestLocator('control-label'), - addMetricModal: { - container: dataTestLocator('metrics-edit-popover'), - metricNameEdit: { - editButton: dataTestLocator('AdhocMetricEditTitle#trigger'), - input: dataTestLocator('AdhocMetricEditTitle#input'), - }, - simpleTab: { - tab: '#adhoc-metric-edit-tabs-tab-SIMPLE', - columnInput: '[name="select-column"]', - aggregateInput: '[name="select-aggregate"]', - }, - customSQLTab: { - tab: '#adhoc-metric-edit-tabs-tab-SQL', - inputContainerField: '.ace_content', - input: '.ace_text-input', - }, - saveButton: dataTestLocator('AdhocMetricEdit#save'), - }, - querySection: { - groupByField: dataTestLocator('groupby'), - filtersField: dataTestLocator('adhoc_filters'), - filterValue: dataTestLocator('adhoc-filter-simple-value'), - filterModal: { - customSQL: { - tab: '#adhoc-filter-edit-tabs-tab-SQL', - inputArea: '.ace_content', - input: '.ace_text-input', - }, - simple: { - tab: '#adhoc-filter-edit-tabs-tab-SIMPLE', - }, - container: dataTestLocator('filter-edit-popover'), - saveButton: dataTestLocator('adhoc-filter-edit-popover-save-button'), - }, - }, - annotationLayerSection: { - addAnnotationLayer: dataTestLocator('annotation_layers'), - addAnnotationLayerModal: { - container: dataTestLocator('popover-content'), - name: dataTestLocator('annotation-layer-name-header'), - formula: dataTestLocator('annotation-layer-value-header'), - input: dataTestLocator(''), - }, - }, - timeSection: { - timeRangeFilter: dataTestLocator('time-range-trigger'), - timeRangeFilterModal: { - container: '.ant-popover-content', - footer: '.footer', - cancelButton: dataTestLocator('cancel-button'), - configureLastTimeRange: { - container: '.ant-radio-group', - checkedItem: '.ant-radio-checked + span', - }, - configureCustomTimeRange: { - container: dataTestLocator('custom-frame'), - timeInput: '.ant-input-number-input-wrap > input', - }, - configureNoFilterTimeRange: { - container: dataTestLocator('no-filter'), - }, - }, - }, - advancedAnalyticsSection: { - timeShift: { - container: dataTestLocator('time_compare'), - input: 'input[type=text]', - selectedValues: '.Select__multi-value__label', - }, - }, - }, - editDatasetModal: { - container: '.ant-modal-content', - datasetTabsContainer: dataTestLocator('edit-dataset-tabs'), - saveButton: dataTestLocator('datasource-modal-save'), - metricsTab: { - addItem: dataTestLocator('crud-add-table-item'), - rowsContainer: dataTestLocator('table-content-rows'), - }, - confirmModal: { - okButton: '.ant-modal-confirm-btns .ant-btn-primary', - }, - }, - vizualizationTypeModal: { - vizTypeButton: dataTestLocator('viztype-selector-container'), - }, - }; - export const createChartView = { - chooseDatasetInput: '.ant-select-selection-search-input', - chooseDatasetOption: '.ant-select-item-option-content', - chooseDatasetList: '.rc-virtual-list-holder-inner', - tableVizType: "[alt='Table']", - }; - export const editDashboardView = { - dashboardName: dataTestLocator('dashboard-title-input'), - dashboardEditingContainer: dataTestLocator('dashboard-content'), - editComponent: dataTestLocator('new-component'), - discardChanges: dataTestLocator('discard-changes-button'), - chartBox: dataTestLocator('chart-grid-component'), - tabsList: { - tabsContainer: '[class="ant-tabs-nav-list"]', - tab: '.ant-tabs-tab', - }, - }; - export const dashboardView = { - dashboardContainer: dataTestLocator('grid-container'), - saveModal: { - modal: '.ant-modal-content', - dashboardNameInput: '.ant-input', - saveButton: dataTestLocator('modal-save-dashboard-button'), - }, - dashboardProperties: { - modal: '.ant-modal-content', - dashboardTitleInput: dataTestLocator('dashboard-title-input'), - modalButton: '[type="button"]', - }, - chart: { - trashIcon: dataTestLocator('dashboard-delete-component-button'), - refreshChart: dataTestLocator('refresh-chart-menu-item'), - }, - threeDotsMenuIcon: '#save-dash-split-button', - threeDotsMenuDropdown: dataTestLocator('header-actions-menu'), - refreshDashboard: dataTestLocator('refresh-dashboard-menu-item'), - saveAsMenuOption: dataTestLocator('save-as-menu-item'), - dashboardTab: dataTestLocator('dragdroppable-object'), - salesDashboardSpecific: { - vehicleSalesFilterTimeRange: dataTestLocator('time-range-trigger'), - secondTabSalesDashboard: dataTestLocator('dragdroppable-object'), - }, - timeRangeModal: { - rangeTypeField: '.ant-select-selection-item', - startTimeInputNumber: '.ant-input-number-input', - datePicker: '.ant-picker-input', - applyButton: dataTestLocator('date-filter-control__apply-button'), - radioGroup: '.ant-radio-group', - radioButton: '.ant-radio', - finalFilterRangePreviewCustom: - '.css-c2bup7 > :nth-child(6) > :nth-child(2)', - finalFilterRangePreviewLast: '.css-c2bup7 > :nth-child(7) > :nth-child(2)', - finalFilterRangePreviewPrevious: - '.css-c2bup7 > :nth-child(7) > :nth-child(2)', - }, - treeMapChartModal: { - selectItem: '.Select_control', - selectItemInput: '.Select__control input[type=text]', - applyButton: '.filter_box button:not(:disabled)', - clearItemIcon: '.Select__clear-indicator', - }, - sliceThreeDots: '[aria-label="More Options"]', - sliceThreeDotsDropdown: '[role="menu"]', - editDashboardButton: '[aria-label=edit-alt]', - starIcon: dataTestLocator('fave-unfave-icon'), - dashboardHeader: dataTestLocator('dashboard-header'), - dashboardSectionContainer: dataTestLocator( - 'grid-row-background--transparent', - ), - markdownEditor: dataTestLocator('dashboard-markdown-editor'), - dashboardComponent: dataTestLocator('dashboard-component-chart-holder'), - tabsList: { - tabsContainer: dataTestLocator('dashboard-component-tabs'), - tabsNavList: dataTestLocator('nav-list'), - tabs: '.ant-tabs-nav-list', - tab: '.ant-tabs-tab', - }, - }; \ No newline at end of file +export const pageHeader = { + logo: '.navbar-brand > img', + headerNavigationItem: '.ant-menu-submenu-title', + headerNavigationDropdown: "[aria-label='triangle-down']", + headerNavigationItemMenu: '.ant-menu-item-group-list', + plusIcon: ':nth-child(2) > .ant-menu-submenu-title', + plusIconMenuOptions: { + sqlQueryOption: dataTestLocator('menu-item-SQL query'), + chartOption: dataTestLocator('menu-item-Chart'), + dashboardOption: dataTestLocator('menu-item-Dashboard'), + }, + plusMenu: '.ant-menu-submenu-popup', + barButtons: '[role="presentation"]', + sqlLabMenu: '[id="item_3$Menu"]', + dataMenu: '[id="item_4$Menu"]', +}; + +export const profile = { + activeTab: '.ant-tabs-tab-active', + inactiveTab: '.ant-tabs-tab', + emptyFavoritedPlaceholder: '.ant-empty-normal', + tableRow: '.table-row', + favoritesSpace: '#rc-tabs-0-panel-2', +}; +export const securityAccess = { + rolesBubble: '.ant-badge-count', +}; +export const homePage = { + homeSection: { + sectionArea: '.ant-collapse-content-box', + sectionElement: '.ant-card-meta-title', + }, + sections: { + expandedSection: '.ant-collapse-item-active', + expandedSectionHeader: '[aria-expanded="true"]', + collapseExpandButton: '.ant-collapse-arrow', + collapsedSection: '[class="ant-collapse-item"]', + collapsedSectionHeader: '[aria-expanded="false"]', + section: '[class^="ant-collapse-item"]', + sectionsMenuContainer: "[role='navigation']", + sectionsMenuItem: "[role='menuitem']", + card: dataTestLocator('styled-card'), + }, + thumbnailsSection: { + container: "[class='switch']", + toggle: "[role ='switch']", + }, +}; +export const databasesPage = { + addDatabaseButton: dataTestLocator('btn-create-database'), + searchInput: dataTestLocator('search-input'), + table: { + tableRow: dataTestLocator('table-row'), + tableCell: dataTestLocator('table-row-cell'), + editButton: dataTestLocator('edit-alt'), + }, + modal: { + header: '#rcDialogTitle0 > h4', + step: '.helper-top', + selectDbStepTitle: '.select-db > h4', + preferredBlockBigQuery: '.preferred > :nth-child(1)', + prefferedBlockPostgreSQL: '.preferred > :nth-child(2)', + prefferedBlockSnowflake: '.preferred > :nth-child(3)', + prefferedBlockMySQL: '.preferred > :nth-child(4)', + prefferedBlockAthena: '.preferred > :nth-child(5)', + prefferedBlockSheets: '.preferred > :nth-child(6)', + supportedDatabasesText: '.control-label', + orChoose: '.available-label', + dbDropdown: '[class="ant-select-selection-search-input"]', + dbDropdownMenu: '.rc-virtual-list-holder-inner', + dbDropdownMenuItem: '[class="ant-select-item-option-content"]', + infoAlert: '.ant-alert', + serviceAccountInput: '[name="credentials_info"]', + connectionStep: { + modal: '.ant-modal-content', + modalBody: '.ant-modal-body', + stepTitle: '.css-7x6kk > h4', + helperBottom: '.helper-bottom', + postgresDatabase: '[name="database"]', + dbInput: '[name="database_name"]', + alertMessage: '.ant-alert-message', + errorField: '[role="alert"]', + uploadJson: '[title="Upload JSON file"]', + chooseFile: '[class="ant-btn input-upload-btn"]', + additionalParameters: '[name="query_input"]', + sqlAlchemyUriInput: dataTestLocator('sqlalchemy-uri-input'), + advancedTab: '#rc-tabs-0-tab-2', + activeTab: '.ant-tabs-tab-active', + securitySubMenu: + ':nth-child(3) > .ant-collapse-header > .anticon > svg > path', + aceTextInput: '.ace_text-input', + aceContent: '.ace_content', + connectButton: '.css-16i3wh7', + hostInput: '[name="host"]', + portInput: '[name="port"]', + usernameInput: '[name="username"]', + passwordInput: '[name="password"]', + switch: '.ant-switch', + }, + }, +}; + +export const sqlLabView = { + sqlEditorLeftBar: { + sqlEditorLeftBar: '[class="SqlEditorLeftBar"]', + databaseSchemaTableSection: '[class="SqlEditorLeftBar"] > :nth-child(1)', + tableSchemaSection: + '[class="SqlEditorLeftBar"] > :nth-child(1) > :nth-child(3) > :nth-child(1)', + tableSchemaInputEmpty: '[aria-label="Select table or type table name"]', + }, + databaseInput: '[data-test=DatabaseSelector] > :nth-child(1)', + emptyMenuOptionsPlaceholder: '[class="ant-empty-img-simple"]', + removeTabButton: '.ant-tabs-tab-remove > .anticon > svg', + tabsNavList: "[class='ant-tabs-nav-list']", + tab: "[class='ant-tabs-tab-btn']", + addTabButton: dataTestLocator('add-tab-icon'), + tooltip: '.ant-tooltip-content', + tabName: '.css-1suejie', + schemaInput: '[data-test=DatabaseSelector] > :nth-child(2)', + loadingIndicator: '.Select__loading-indicator', + menuItem: '[class="ant-select-item-option-content"]', + examplesMenuItem: '[title="examples"]', + tableInput: ':nth-child(4) > .select > :nth-child(1)', + sqlEditor: '#brace-editor textarea', + saveAsButton: '.SaveQuery > .ant-btn', + saveAsModal: { + footer: '.ant-modal-footer', + queryNameInput: 'input[class^="ant-input"]', + }, + sqlToolbar: { + toolbar: '#js-sql-toolbar', + runButton: '.css-d3dxop', + }, + rowsLimit: { + dropdown: '.ant-dropdown-menu', + limitButton: '.ant-dropdown-menu-item', + limitButtonText: '.css-151uxnz', + limitTextWithValue: '[class="ant-dropdown-trigger"]', + }, + renderedTableHeader: '.ReactVirtualized__Table__headerRow', + renderedTableRow: '.ReactVirtualized__Table__row', + errorBody: '.error-body', + alertMessage: '.ant-alert-message', + historyTable: { + header: '[role=columnheader]', + table: '.QueryTable', + row: dataTestLocator('table-row'), + failureMarkIcon: '[aria-label=x-small]', + successMarkIcon: '[aria-label=check]', + }, +}; +export const queryHistory = { + tableHeader: dataTestLocator('sort-header'), + row: dataTestLocator('table-row'), + cell: dataTestLocator('table-row-cell'), + action: '[aria-label=full]', +}; +export const savedQuery = { + tableHeader: dataTestLocator('sort-header'), + row: dataTestLocator('table-row'), + cell: dataTestLocator('table-row-cell'), + trash: dataTestLocator('delete-action'), + deleteQueryIcon: '[data-test="delete-action"]', + deleteModal: { + deleteInput: dataTestLocator('delete-modal-input'), + deleteButton: dataTestLocator('modal-confirm-button'), + }, +}; +export const annotationLayersView = { + emptyDescription: { + description: '.ant-empty-description', + addAnnotationLayerButton: '.ant-empty-footer > .ant-btn', + }, + modal: { + content: { + content: '.ant-modal-body', + title: '.ant-modal-body > :nth-child(2) > input', + description: "[name='descr']", + }, + footer: { + footer: '.ant-modal-footer', + addButton: dataTestLocator('modal-confirm-button'), + cancelButton: dataTestLocator('modal-cancel-button'), + }, + }, +}; +export const datasetsList = { + newDatasetButton: '.css-yff34v', + searchInput: dataTestLocator('filters-search'), + newDatasetModal: { + inputField: '[class="section"]', + addButton: dataTestLocator('modal-confirm-button'), + body: '.ant-modal-body', + }, + table: { + tableRow: { + row: dataTestLocator('table-row'), + rowText: dataTestLocator('cell-text'), + rowCell: dataTestLocator('table-row-cell'), + }, + tableRowHeader: { + header: dataTestLocator('sort-header'), + unsorted: '[aria-label="sort"]', + sortAsc: '[aria-label="sort-asc"]', + sortDesc: '[aria-label="sort-desc"]', + }, + rowActionItems: dataTestLocator('table-row-cell'), + actionButton: '.action-button', + editButton: '[aria-label="edit-alt"]', + }, + editDatasetModal: { + modal: dataTestLocator('edit-dataset-tabs'), + sourceNavigationTab: '#table-tabs-tab-0', + metricsNavigationTab: dataTestLocator('collection-tab-Metrics'), + columnsNavigationTab: dataTestLocator('collection-tab-Columns'), + calculatedColumnsNavigationTab: dataTestLocator( + 'collection-tab-Calculated columns', + ), + settingsNavigationTab: '#table-tabs-tab-4', + saveButton: dataTestLocator('datasource-modal-save'), + sourceContent: '#table-tabs-panel-0', + metricsContent: '#table-tabs-panel-1', + columnsContent: '#table-tabs-panel-2', + calculatedColumnsContent: '#table-tabs-panel-3', + settingsContent: '#table-tabs-panel-4', + aceTextInput: '.ace_text-input', + sourceSQLInput: '.ace_content', + sourceVirtualSQLRadio: ':nth-child(2) > .ant-radio > .ant-radio-inner', + sourcePadlock: '[aria-label=lock-locked]', + legacy: { + panel: '.panel-body', + sqlInput: '#sql', + save: '.well > .btn-primary', + description: '#description', + }, + }, + deleteDatasetModal: { + modal: '.ant-modal-content', + deleteInput: dataTestLocator('delete-modal-input'), + deleteButton: dataTestLocator('modal-confirm-button'), + text: '.css-kxmt87', + }, +}; +export const chartListView = { + filtersBar: { + searchField: dataTestLocator('filters-search'), + }, + top: { + bulkSelect: dataTestLocator('bulk-select'), + }, + header: { + cardView: '[aria-label="card-view"]', + listView: '[aria-label="list-view"]', + sort: '[class="ant-select-selection-search-input"][aria-label="Sort"]', + sortRecentlyModifiedMenuOption: '[label="Recently modified"]', + sortAlphabeticalMenuOption: '[label="Alphabetical"]', + sortDropdown: '.Select__menu', + }, + card: { + card: dataTestLocator('styled-card'), + cardCover: '[class="ant-card-cover"]', + cardImage: '[class="gradient-container"]', + selectedStarIcon: "[aria-label='favorite-selected']", + unselectedStarIcon: "[aria-label='favorite-unselected']", + starIcon: dataTestLocator('fave-unfave-icon'), + }, + deleteModal: { + deleteInput: dataTestLocator('delete-modal-input'), + deleteButton: dataTestLocator('modal-confirm-button'), + }, + table: { + bulkSelect: { + checkboxOff: '[aria-label="checkbox-off"]', + checkboxOn: '[aria-label="checkbox-on"]', + action: dataTestLocator('bulk-select-action'), + }, + tableList: dataTestLocator('listview-table'), + table: '[role="rowgroup"]', + tableRowHeader: { + header: dataTestLocator('sort-header'), + unsorted: '[aria-label="sort"]', + sortAsc: '[aria-label="sort-asc"]', + sortDesc: '[aria-label="sort-desc"]', + }, + tableRow: { + row: dataTestLocator('table-row'), + rowText: dataTestLocator('cell-text'), + rowCell: dataTestLocator('table-row-cell'), + }, + }, + addChartButton: '.css-yff34v', +}; +export const nativeFilters = { + modal: { + container: '.ant-modal', + footer: '.ant-modal-footer', + saveButton: dataTestLocator('native-filter-modal-save-button'), + cancelButton: dataTestLocator('native-filter-modal-cancel-button'), + yesCancelButton: '[type="button"]', + alertXUnsavedFilters: '.ant-alert-message', + tabsList: { + tabsContainer: '[class="ant-tabs-nav-list"]', + tab: '.ant-tabs-tab', + removeTab: '[aria-label="trash"]', + }, + addFilter: dataTestLocator('add-filter-button'), + defaultValueCheck: '.ant-checkbox-checked', + }, + filtersPanel: { + filterName: dataTestLocator('filters-config-modal__name-input'), + datasetName: dataTestLocator('filters-config-modal__datasource-input'), + filterInfoInput: '.ant-select-selection-search-input', + inputDropdown: '.ant-select-item-option-content', + columnEmptyInput: '.ant-select-selection-placeholder', + filterTypeInput: dataTestLocator('filters-config-modal__filter-type'), + fieldInput: dataTestLocator('field-input'), + }, + filterFromDashboardView: { + expand: dataTestLocator('filter-bar__expand-button'), + collapse: dataTestLocator('filter-bar__collapse-button'), + filterName: dataTestLocator('filter-control-name'), + filterContent: '.ant-select-selection-item-content', + }, + createFilterButton: dataTestLocator('filter-bar__create-filter'), + removeFilter: '[aria-label="remove"]', + filterConfigurationSections: { + collapseExpandButton: '.ant-collapse-arrow', + checkedCheckbox: '.ant-checkbox-wrapper-checked', + infoTooltip: '[aria-label="Show info tooltip"]', + parentFilterInput: dataTestLocator('parent-filter-input'), + }, + filtersList: { + list: '.ant-tabs-nav-list', + listItemNotActive: '[class="ant-tabs-tab ant-tabs-tab-with-remove"]', + listItemActive: + '[class="ant-tabs-tab ant-tabs-tab-with-remove ant-tabs-tab-active"]', + removeIcon: '[aria-label="trash"]', + }, + filterItem: dataTestLocator('form-item-value'), + filterItemDropdown: '.ant-select-selection-search', + applyFilter: dataTestLocator('filter-bar__apply-button'), + defaultInput: dataTestLocator('default-input'), + filterIcon: dataTestLocator('filter-icon'), +}; +export const dashboardListView = { + dashboardListView: dataTestLocator('dashboard-list-view'), + editItemAction: dataTestLocator('edit-alt'), + filtersBar: { + searchField: dataTestLocator('filters-search'), + }, + top: { + bulkSelect: dataTestLocator('bulk-select'), + }, + card: { + card: dataTestLocator('styled-card'), + cardCover: '[class="ant-card-cover"]', + cardImage: '[class="gradient-container"]', + selectedStarIcon: "[aria-label='favorite-selected']", + unselectedStarIcon: "[aria-label='favorite-unselected']", + starIcon: dataTestLocator('fave-unfave-icon'), + }, + deleteModal: { + deleteInput: dataTestLocator('delete-modal-input'), + deleteButton: dataTestLocator('modal-confirm-button'), + }, + table: { + starIcon: dataTestLocator('fave-unfave-icon'), + selectedStarIcon: "[aria-label='favorite-selected']", + unselectedStarIcon: "[aria-label='favorite-unselected']", + bulkSelect: { + checkboxOff: '[aria-label="checkbox-off"]', + checkboxOn: '[aria-label="checkbox-on"]', + action: dataTestLocator('bulk-select-action'), + }, + tableRow: { + sortHeader: dataTestLocator('sort-header'), + row: dataTestLocator('table-row'), + rowText: dataTestLocator('cell-text'), + rowCell: dataTestLocator('table-row-cell'), + }, + tableRowList: '[role="rowgroup"]', + tableList: dataTestLocator('listview-table'), + trashIcon: dataTestLocator('dashboard-list-trash-icon'), + }, + actions: { + importButton: dataTestLocator('import-button'), + newDashboardButton: '.css-yff34v', + }, + importModal: { + selectFileButton: '.ant-upload > .ant-btn > span', + importButton: dataTestLocator('modal-confirm-button'), + }, + header: { + cardView: '[aria-label="card-view"]', + listView: '[aria-label="list-view"]', + sort: dataTestLocator('sort-header'), + sortDropdown: '.Select__menu', + statusFilterInput: `${dataTestLocator( + 'filters-select', + )}[aria-label='Status']`, + ownerFilterInput: `${dataTestLocator( + 'filters-select', + )}[aria-label='Owner']`, + createdByFilterInput: `${dataTestLocator( + 'filters-select', + )}[aria-label='Created by']`, + FavoriteFilterInput: `${dataTestLocator( + 'filters-select', + )}[aria-label='Favorite']`, + searchFilterInput: `${dataTestLocator( + 'filters-search', + )}[name='dashboard_title']`, + draftStatusFilterOption: "[title='Draft']", + }, +}; +export const exploreView = { + openDatasourceMenu: dataTestLocator('open-datasource-tab'), + sectionsHeader: '.ant-collapse-header', + datasourceMenuThreeDots: dataTestLocator('datasource-menu-trigger'), + threeDotsMenuDropdown: { + editDataset: dataTestLocator('edit-dataset'), + }, + chartContainer: dataTestLocator('chart-container'), + chartHeading: { + queryMenu: '#query', + viewQueryButton: dataTestLocator('view-query-menu-item'), + shortLinkButton: dataTestLocator('short-link-button'), + embedCodeButton: dataTestLocator('embed-code-button'), + }, + chartAreaItem: '.nv-legend-text', + viewQueryModal: { + container: '.ant-modal-content', + closeButton: 'button.ant-modal-close', + }, + embedCodeModal: { + container: dataTestLocator('embed-code-popover'), + textfield: dataTestLocator('embed-code-textarea'), + }, + saveModal: { + modal: '.ant-modal-content', + chartNameInput: dataTestLocator('new-chart-name'), + dashboardNameInput: '#dashboard-creatable-select', + addToDashboardInput: dataTestLocator( + 'save-chart-modal-select-dashboard-form', + ), + saveButton: dataTestLocator('btn-modal-save'), + saveAsCircle: dataTestLocator('saveas-radio'), + overwriteCircle: dataTestLocator('save-overwrite-radio'), + }, + controlPanel: { + panel: dataTestLocator('control-tabs'), + categoryArea: '.ant-collapse-content-box', + dragField: dataTestLocator('datasource'), + metricsField: dataTestLocator('metrics'), + optionField: dataTestLocator('option-label'), + fieldInput: '.Select__control input', + removeFieldValue: dataTestLocator('remove-control-button'), + addFieldValue: '[aria-label="plus-small"]', + vizType: dataTestLocator('visualization-type'), + runButton: dataTestLocator('run-query-button'), + saveQuery: dataTestLocator('query-save-button'), + fieldValue: dataTestLocator('control-label'), + addMetricModal: { + container: dataTestLocator('metrics-edit-popover'), + metricNameEdit: { + editButton: dataTestLocator('AdhocMetricEditTitle#trigger'), + input: dataTestLocator('AdhocMetricEditTitle#input'), + }, + simpleTab: { + tab: '#adhoc-metric-edit-tabs-tab-SIMPLE', + columnInput: '[name="select-column"]', + aggregateInput: '[name="select-aggregate"]', + }, + customSQLTab: { + tab: '#adhoc-metric-edit-tabs-tab-SQL', + inputContainerField: '.ace_content', + input: '.ace_text-input', + }, + saveButton: dataTestLocator('AdhocMetricEdit#save'), + }, + querySection: { + groupByField: dataTestLocator('groupby'), + filtersField: dataTestLocator('adhoc_filters'), + filterValue: dataTestLocator('adhoc-filter-simple-value'), + filterModal: { + customSQL: { + tab: '#adhoc-filter-edit-tabs-tab-SQL', + inputArea: '.ace_content', + input: '.ace_text-input', + }, + simple: { + tab: '#adhoc-filter-edit-tabs-tab-SIMPLE', + }, + container: dataTestLocator('filter-edit-popover'), + saveButton: dataTestLocator('adhoc-filter-edit-popover-save-button'), + }, + }, + annotationLayerSection: { + addAnnotationLayer: dataTestLocator('annotation_layers'), + addAnnotationLayerModal: { + container: dataTestLocator('popover-content'), + name: dataTestLocator('annotation-layer-name-header'), + formula: dataTestLocator('annotation-layer-value-header'), + input: dataTestLocator(''), + }, + }, + timeSection: { + timeRangeFilter: dataTestLocator('time-range-trigger'), + timeRangeFilterModal: { + container: '.ant-popover-content', + footer: '.footer', + cancelButton: dataTestLocator('cancel-button'), + configureLastTimeRange: { + container: '.ant-radio-group', + checkedItem: '.ant-radio-checked + span', + }, + configureCustomTimeRange: { + container: dataTestLocator('custom-frame'), + timeInput: '.ant-input-number-input-wrap > input', + }, + configureNoFilterTimeRange: { + container: dataTestLocator('no-filter'), + }, + }, + }, + advancedAnalyticsSection: { + timeShift: { + container: dataTestLocator('time_compare'), + input: 'input[type=text]', + selectedValues: '.Select__multi-value__label', + }, + }, + }, + editDatasetModal: { + container: '.ant-modal-content', + datasetTabsContainer: dataTestLocator('edit-dataset-tabs'), + saveButton: dataTestLocator('datasource-modal-save'), + metricsTab: { + addItem: dataTestLocator('crud-add-table-item'), + rowsContainer: dataTestLocator('table-content-rows'), + }, + confirmModal: { + okButton: '.ant-modal-confirm-btns .ant-btn-primary', + }, + }, + vizualizationTypeModal: { + vizTypeButton: dataTestLocator('viztype-selector-container'), + }, +}; +export const createChartView = { + chooseDatasetInput: '.ant-select-selection-search-input', + chooseDatasetOption: '.ant-select-item-option-content', + chooseDatasetList: '.rc-virtual-list-holder-inner', + tableVizType: "[alt='Table']", +}; +export const editDashboardView = { + dashboardName: dataTestLocator('dashboard-title-input'), + dashboardEditingContainer: dataTestLocator('dashboard-content'), + editComponent: dataTestLocator('new-component'), + discardChanges: dataTestLocator('discard-changes-button'), + chartBox: dataTestLocator('chart-grid-component'), + tabsList: { + tabsContainer: '[class="ant-tabs-nav-list"]', + tab: '.ant-tabs-tab', + }, +}; +export const dashboardView = { + dashboardContainer: dataTestLocator('grid-container'), + saveModal: { + modal: '.ant-modal-content', + dashboardNameInput: '.ant-input', + saveButton: dataTestLocator('modal-save-dashboard-button'), + }, + dashboardProperties: { + modal: '.ant-modal-content', + dashboardTitleInput: dataTestLocator('dashboard-title-input'), + modalButton: '[type="button"]', + }, + chart: { + trashIcon: dataTestLocator('dashboard-delete-component-button'), + refreshChart: dataTestLocator('refresh-chart-menu-item'), + }, + threeDotsMenuIcon: '#save-dash-split-button', + threeDotsMenuDropdown: dataTestLocator('header-actions-menu'), + refreshDashboard: dataTestLocator('refresh-dashboard-menu-item'), + saveAsMenuOption: dataTestLocator('save-as-menu-item'), + dashboardTab: dataTestLocator('dragdroppable-object'), + salesDashboardSpecific: { + vehicleSalesFilterTimeRange: dataTestLocator('time-range-trigger'), + secondTabSalesDashboard: dataTestLocator('dragdroppable-object'), + }, + timeRangeModal: { + rangeTypeField: '.ant-select-selection-item', + startTimeInputNumber: '.ant-input-number-input', + datePicker: '.ant-picker-input', + applyButton: dataTestLocator('date-filter-control__apply-button'), + radioGroup: '.ant-radio-group', + radioButton: '.ant-radio', + finalFilterRangePreviewCustom: + '.css-c2bup7 > :nth-child(6) > :nth-child(2)', + finalFilterRangePreviewLast: '.css-c2bup7 > :nth-child(7) > :nth-child(2)', + finalFilterRangePreviewPrevious: + '.css-c2bup7 > :nth-child(7) > :nth-child(2)', + }, + treeMapChartModal: { + selectItem: '.Select_control', + selectItemInput: '.Select__control input[type=text]', + applyButton: '.filter_box button:not(:disabled)', + clearItemIcon: '.Select__clear-indicator', + }, + sliceThreeDots: '[aria-label="More Options"]', + sliceThreeDotsDropdown: '[role="menu"]', + editDashboardButton: '[aria-label=edit-alt]', + starIcon: dataTestLocator('fave-unfave-icon'), + dashboardHeader: dataTestLocator('dashboard-header'), + dashboardSectionContainer: dataTestLocator( + 'grid-row-background--transparent', + ), + markdownEditor: dataTestLocator('dashboard-markdown-editor'), + dashboardComponent: dataTestLocator('dashboard-component-chart-holder'), + tabsList: { + tabsContainer: dataTestLocator('dashboard-component-tabs'), + tabsNavList: dataTestLocator('nav-list'), + tabs: '.ant-tabs-nav-list', + tab: '.ant-tabs-tab', + }, +};