mirror of
https://github.com/apache/superset.git
synced 2024-09-19 12:09:42 -04:00
299 lines
9.4 KiB
TypeScript
299 lines
9.4 KiB
TypeScript
/**
|
|
* 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.
|
|
*/
|
|
// ***********************************************
|
|
// Tests for setting controls in the UI
|
|
// ***********************************************
|
|
import { interceptChart } from 'cypress/utils';
|
|
import { FORM_DATA_DEFAULTS, NUM_METRIC } from './visualizations/shared.helper';
|
|
|
|
describe('Datasource control', () => {
|
|
const newMetricName = `abc${Date.now()}`;
|
|
|
|
it('should allow edit dataset', () => {
|
|
interceptChart({ legacy: true }).as('chartData');
|
|
|
|
cy.visitChartByName('Num Births Trend');
|
|
cy.verifySliceSuccess({ waitAlias: '@chartData' });
|
|
|
|
cy.get('[data-test="datasource-menu-trigger"]').click();
|
|
|
|
cy.get('[data-test="edit-dataset"]').click();
|
|
|
|
cy.get('[data-test="edit-dataset-tabs"]').within(() => {
|
|
cy.contains('Metrics').click();
|
|
});
|
|
// create new metric
|
|
cy.get('[data-test="crud-add-table-item"]', { timeout: 10000 }).click();
|
|
cy.wait(1000);
|
|
cy.get(
|
|
'[data-test="table-content-rows"] [data-test="editable-title-input"]',
|
|
)
|
|
.first()
|
|
.click();
|
|
|
|
cy.get(
|
|
'[data-test="table-content-rows"] [data-test="editable-title-input"]',
|
|
)
|
|
.first()
|
|
.focus()
|
|
.clear()
|
|
.type(`${newMetricName}{enter}`);
|
|
|
|
cy.get('[data-test="datasource-modal-save"]').click();
|
|
cy.get('.ant-modal-confirm-btns button').contains('OK').click();
|
|
// select new metric
|
|
cy.get('[data-test=metrics]')
|
|
.contains('Drop columns/metrics here or click')
|
|
.click();
|
|
|
|
cy.get('input[aria-label="Select saved metrics"]').type(
|
|
`${newMetricName}{enter}`,
|
|
);
|
|
// delete metric
|
|
cy.get('[data-test="datasource-menu-trigger"]').click();
|
|
cy.get('[data-test="edit-dataset"]').click();
|
|
cy.get('.ant-modal-content').within(() => {
|
|
cy.get('[data-test="collection-tab-Metrics"]')
|
|
.contains('Metrics')
|
|
.click();
|
|
});
|
|
cy.get(`input[value="${newMetricName}"]`)
|
|
.closest('tr')
|
|
.find('[data-test="crud-delete-icon"]')
|
|
.click();
|
|
cy.get('[data-test="datasource-modal-save"]').click();
|
|
cy.get('.ant-modal-confirm-btns button').contains('OK').click();
|
|
cy.get('[data-test="metrics"]').contains(newMetricName).should('not.exist');
|
|
});
|
|
});
|
|
|
|
describe('Color scheme control', () => {
|
|
beforeEach(() => {
|
|
interceptChart({ legacy: true }).as('chartData');
|
|
|
|
cy.visitChartByName('Num Births Trend');
|
|
cy.verifySliceSuccess({ waitAlias: '@chartData' });
|
|
});
|
|
|
|
it('should show color options with and without tooltips', () => {
|
|
cy.get('#controlSections-tab-display').click();
|
|
cy.get('.ant-select-selection-item .color-scheme-label').contains(
|
|
'Superset Colors',
|
|
);
|
|
cy.get('.ant-select-selection-item .color-scheme-label').trigger(
|
|
'mouseover',
|
|
);
|
|
cy.get('.color-scheme-tooltip').contains('Superset Colors');
|
|
cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
|
|
cy.get('.Control[data-test="color_scheme"] input[type="search"]')
|
|
.focus()
|
|
.type('lyftColors{enter}');
|
|
cy.get(
|
|
'.Control[data-test="color_scheme"] .ant-select-selection-item [data-test="lyftColors"]',
|
|
).should('exist');
|
|
cy.get('.ant-select-selection-item .color-scheme-label').trigger(
|
|
'mouseover',
|
|
);
|
|
cy.get('.color-scheme-tooltip').should('not.exist');
|
|
});
|
|
});
|
|
describe('VizType control', () => {
|
|
beforeEach(() => {
|
|
interceptChart({ legacy: false }).as('tableChartData');
|
|
interceptChart({ legacy: true }).as('lineChartData');
|
|
});
|
|
|
|
it('Can change vizType', () => {
|
|
cy.visitChartByName('Daily Totals');
|
|
cy.verifySliceSuccess({ waitAlias: '@tableChartData' });
|
|
|
|
cy.contains('View all charts').click();
|
|
|
|
cy.get('.ant-modal-content').within(() => {
|
|
cy.get('button').contains('Evolution').click(); // change categories
|
|
cy.get('[role="button"]').contains('Line Chart').click();
|
|
cy.get('button').contains('Select').click();
|
|
});
|
|
|
|
cy.get('button[data-test="run-query-button"]').click();
|
|
cy.verifySliceSuccess({
|
|
waitAlias: '@lineChartData',
|
|
chartSelector: 'svg',
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('Test datatable', () => {
|
|
beforeEach(() => {
|
|
interceptChart({ legacy: false }).as('tableChartData');
|
|
interceptChart({ legacy: true }).as('lineChartData');
|
|
cy.visitChartByName('Daily Totals');
|
|
});
|
|
it('Data Pane opens and loads results', () => {
|
|
cy.contains('Results').click();
|
|
cy.get('[data-test="row-count-label"]').contains('26 rows');
|
|
cy.get('.ant-empty-description').should('not.exist');
|
|
});
|
|
it('Datapane loads view samples', () => {
|
|
cy.intercept(
|
|
'datasource/samples?force=false&datasource_type=table&datasource_id=*',
|
|
).as('Samples');
|
|
cy.contains('Samples')
|
|
.click()
|
|
.then(() => {
|
|
cy.wait('@Samples');
|
|
cy.get('.ant-tabs-tab-active').contains('Samples');
|
|
cy.get('[data-test="row-count-label"]').contains('1k rows');
|
|
cy.get('.ant-empty-description').should('not.exist');
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('Time range filter', () => {
|
|
beforeEach(() => {
|
|
interceptChart({ legacy: true }).as('chartData');
|
|
});
|
|
|
|
it('Advanced time_range params', () => {
|
|
const formData = {
|
|
...FORM_DATA_DEFAULTS,
|
|
viz_type: 'line',
|
|
time_range: '100 years ago : now',
|
|
metrics: [NUM_METRIC],
|
|
};
|
|
|
|
cy.visitChartByParams(formData);
|
|
cy.verifySliceSuccess({ waitAlias: '@chartData' });
|
|
|
|
cy.get('[data-test=time-range-trigger]')
|
|
.click()
|
|
.then(() => {
|
|
cy.get('.footer').find('button').its('length').should('eq', 2);
|
|
cy.get('.ant-popover-content').within(() => {
|
|
cy.get('input[value="100 years ago"]');
|
|
cy.get('input[value="now"]');
|
|
});
|
|
cy.get('[data-test=cancel-button]').click();
|
|
cy.wait(500);
|
|
cy.get('.ant-popover').should('not.exist');
|
|
});
|
|
});
|
|
|
|
it('Common time_range params', () => {
|
|
const formData = {
|
|
...FORM_DATA_DEFAULTS,
|
|
viz_type: 'line',
|
|
metrics: [NUM_METRIC],
|
|
time_range: 'Last year',
|
|
};
|
|
|
|
cy.visitChartByParams(formData);
|
|
cy.verifySliceSuccess({ waitAlias: '@chartData' });
|
|
|
|
cy.get('[data-test=time-range-trigger]')
|
|
.click()
|
|
.then(() => {
|
|
cy.get('.ant-radio-group').children().its('length').should('eq', 5);
|
|
cy.get('.ant-radio-checked + span').contains('last year');
|
|
cy.get('[data-test=cancel-button]').click();
|
|
});
|
|
});
|
|
|
|
it('Previous time_range params', () => {
|
|
const formData = {
|
|
...FORM_DATA_DEFAULTS,
|
|
viz_type: 'line',
|
|
metrics: [NUM_METRIC],
|
|
time_range: 'previous calendar month',
|
|
};
|
|
|
|
cy.visitChartByParams(formData);
|
|
cy.verifySliceSuccess({ waitAlias: '@chartData' });
|
|
|
|
cy.get('[data-test=time-range-trigger]')
|
|
.click()
|
|
.then(() => {
|
|
cy.get('.ant-radio-group').children().its('length').should('eq', 3);
|
|
cy.get('.ant-radio-checked + span').contains('previous calendar month');
|
|
cy.get('[data-test=cancel-button]').click();
|
|
});
|
|
});
|
|
|
|
it('Custom time_range params', () => {
|
|
const formData = {
|
|
...FORM_DATA_DEFAULTS,
|
|
viz_type: 'line',
|
|
metrics: [NUM_METRIC],
|
|
time_range: 'DATEADD(DATETIME("today"), -7, day) : today',
|
|
};
|
|
|
|
cy.visitChartByParams(formData);
|
|
cy.verifySliceSuccess({ waitAlias: '@chartData' });
|
|
|
|
cy.get('[data-test=time-range-trigger]')
|
|
.click()
|
|
.then(() => {
|
|
cy.get('[data-test=custom-frame]').then(() => {
|
|
cy.get('.ant-input-number-input-wrap > input')
|
|
.invoke('attr', 'value')
|
|
.should('eq', '7');
|
|
});
|
|
cy.get('[data-test=cancel-button]').click();
|
|
});
|
|
});
|
|
|
|
it('No filter time_range params', () => {
|
|
const formData = {
|
|
...FORM_DATA_DEFAULTS,
|
|
viz_type: 'line',
|
|
metrics: [NUM_METRIC],
|
|
time_range: 'No filter',
|
|
};
|
|
|
|
cy.visitChartByParams(formData);
|
|
cy.verifySliceSuccess({ waitAlias: '@chartData' });
|
|
|
|
cy.get('[data-test=time-range-trigger]')
|
|
.click()
|
|
.then(() => {
|
|
cy.get('[data-test=no-filter]');
|
|
});
|
|
cy.get('[data-test=cancel-button]').click();
|
|
});
|
|
});
|
|
|
|
describe('Groupby control', () => {
|
|
it('Set groupby', () => {
|
|
interceptChart({ legacy: true }).as('chartData');
|
|
|
|
cy.visitChartByName('Num Births Trend');
|
|
cy.verifySliceSuccess({ waitAlias: '@chartData' });
|
|
|
|
cy.get('[data-test=groupby]')
|
|
.contains('Drop columns here or click')
|
|
.click();
|
|
cy.get('[id="adhoc-metric-edit-tabs-tab-simple"]').click();
|
|
cy.get('input[aria-label="Column"]').click().type('state{enter}');
|
|
cy.get('[data-test="ColumnEdit#save"]').contains('Save').click();
|
|
|
|
cy.get('button[data-test="run-query-button"]').click();
|
|
cy.verifySliceSuccess({ waitAlias: '@chartData', chartSelector: 'svg' });
|
|
});
|
|
});
|