mirror of
https://github.com/apache/superset.git
synced 2024-09-19 20:19:37 -04:00
e3db935c62
* refactor: migrate table chart to new API * chore: bump superset-ui to 0.17.0 * Fix Cypress tests * Apply soft-conversion to numeric metrics Fix time column formatting test * Add translation to chart does not exist error * Bump to 0.17.1
202 lines
6.6 KiB
TypeScript
202 lines
6.6 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.
|
|
*/
|
|
import { interceptChart, parsePostForm, Slice } from 'cypress/utils';
|
|
import { TABBED_DASHBOARD } from './dashboard.helper';
|
|
|
|
describe('Dashboard tabs', () => {
|
|
let filterId;
|
|
let treemapId;
|
|
let linechartId;
|
|
let boxplotId;
|
|
|
|
// cypress can not handle window.scrollTo
|
|
// https://github.com/cypress-io/cypress/issues/2761
|
|
// add this exception handler to pass test
|
|
const handleException = () => {
|
|
// return false to prevent the error from
|
|
// failing this test
|
|
cy.on('uncaught:exception', () => false);
|
|
};
|
|
|
|
beforeEach(() => {
|
|
cy.login();
|
|
|
|
cy.visit(TABBED_DASHBOARD);
|
|
|
|
cy.get('#app').then(data => {
|
|
const bootstrapData = JSON.parse(data[0].dataset.bootstrap || '');
|
|
const dashboard = bootstrapData.dashboard_data as { slices: Slice[] };
|
|
filterId = dashboard.slices.find(
|
|
slice => slice.form_data.viz_type === 'filter_box',
|
|
)?.slice_id;
|
|
boxplotId = dashboard.slices.find(
|
|
slice => slice.form_data.viz_type === 'box_plot',
|
|
)?.slice_id;
|
|
treemapId = dashboard.slices.find(
|
|
slice => slice.form_data.viz_type === 'treemap',
|
|
)?.slice_id;
|
|
linechartId = dashboard.slices.find(
|
|
slice => slice.form_data.viz_type === 'line',
|
|
)?.slice_id;
|
|
interceptChart({ sliceId: filterId, legacy: true }).as('filterRequest');
|
|
interceptChart({ sliceId: treemapId, legacy: true }).as('treemapRequest');
|
|
interceptChart({ sliceId: linechartId, legacy: true }).as(
|
|
'linechartRequest',
|
|
);
|
|
interceptChart({ sliceId: boxplotId, legacy: false }).as(
|
|
'boxplotRequest',
|
|
);
|
|
});
|
|
});
|
|
|
|
it('should switch active tab on click', () => {
|
|
cy.wait('@filterRequest');
|
|
cy.wait('@treemapRequest');
|
|
|
|
cy.get('[data-test="dashboard-component-tabs"]')
|
|
.first()
|
|
.find('[data-test="nav-list"] .ant-tabs-nav-list > .ant-tabs-tab')
|
|
.as('top-level-tabs');
|
|
|
|
cy.get('@top-level-tabs')
|
|
.first()
|
|
.click()
|
|
.should('have.class', 'ant-tabs-tab-active');
|
|
cy.get('@top-level-tabs')
|
|
.last()
|
|
.should('not.have.class', 'ant-tabs-tab-active');
|
|
|
|
cy.get('@top-level-tabs')
|
|
.last()
|
|
.click()
|
|
.should('have.class', 'ant-tabs-tab-active');
|
|
cy.get('@top-level-tabs')
|
|
.first()
|
|
.should('not.have.class', 'ant-tabs-tab-active');
|
|
});
|
|
|
|
it('should load charts when tab is visible', () => {
|
|
// landing in first tab, should see 2 charts
|
|
cy.wait('@filterRequest');
|
|
cy.get('[data-test="grid-container"]')
|
|
.find('.filter_box')
|
|
.should('be.visible');
|
|
cy.wait('@treemapRequest');
|
|
cy.get('[data-test="grid-container"]')
|
|
.find('.treemap')
|
|
.should('be.visible');
|
|
cy.get('[data-test="grid-container"]')
|
|
.find('.box_plot')
|
|
.should('not.exist');
|
|
cy.get('[data-test="grid-container"]').find('.line').should('not.exist');
|
|
|
|
// click row level tab, see 1 more chart
|
|
cy.get('[data-test="dashboard-component-tabs"]')
|
|
.last()
|
|
.find('[data-test="nav-list"] .ant-tabs-nav-list > .ant-tabs-tab')
|
|
.as('row-level-tabs');
|
|
|
|
cy.get('@row-level-tabs').last().click();
|
|
|
|
cy.wait('@linechartRequest');
|
|
cy.get('[data-test="grid-container"]').find('.line').should('be.visible');
|
|
|
|
// click top level tab, see 1 more chart
|
|
handleException();
|
|
cy.get('[data-test="dashboard-component-tabs"]')
|
|
.first()
|
|
.find('[data-test="nav-list"] .ant-tabs-nav-list > .ant-tabs-tab')
|
|
.as('top-level-tabs');
|
|
|
|
cy.get('@top-level-tabs').last().click();
|
|
|
|
// should exist a visible box_plot element
|
|
cy.get('[data-test="grid-container"]').find('.box_plot');
|
|
});
|
|
|
|
it('should send new queries when tab becomes visible', () => {
|
|
// landing in first tab
|
|
cy.wait('@filterRequest');
|
|
cy.wait('@treemapRequest');
|
|
|
|
// apply filter
|
|
cy.get('.Select__control').first().should('be.visible').click();
|
|
cy.get('.Select__control input[type=text]').first().focus().type('South');
|
|
cy.get('.Select__option').contains('South Asia').click();
|
|
cy.get('.filter_box button:not(:disabled)').contains('Apply').click();
|
|
|
|
// send new query from same tab
|
|
cy.wait('@treemapRequest').then(({ request }) => {
|
|
const requestBody = parsePostForm(request.body);
|
|
const requestParams = JSON.parse(requestBody.form_data as string);
|
|
expect(requestParams.extra_filters[0]).deep.eq({
|
|
col: 'region',
|
|
op: '==',
|
|
val: 'South Asia',
|
|
});
|
|
});
|
|
|
|
// click row level tab, send 1 more query
|
|
cy.get('.ant-tabs-tab').contains('row tab 2').click();
|
|
|
|
cy.wait('@linechartRequest').then(({ request }) => {
|
|
const requestBody = parsePostForm(request.body);
|
|
const requestParams = JSON.parse(requestBody.form_data as string);
|
|
expect(requestParams.extra_filters[0]).deep.eq({
|
|
col: 'region',
|
|
op: '==',
|
|
val: 'South Asia',
|
|
});
|
|
});
|
|
|
|
// click top level tab, send 1 more query
|
|
cy.get('.ant-tabs-tab').contains('Tab B').click();
|
|
|
|
cy.wait('@boxplotRequest').then(({ request }) => {
|
|
const requestBody = request.body;
|
|
const requestParams = requestBody.queries[0];
|
|
expect(requestParams.filters[0]).deep.eq({
|
|
col: 'region',
|
|
op: '==',
|
|
val: 'South Asia',
|
|
});
|
|
});
|
|
|
|
// navigate to filter and clear filter
|
|
cy.get('.ant-tabs-tab').contains('Tab A').click();
|
|
cy.get('.ant-tabs-tab').contains('row tab 1').click();
|
|
|
|
cy.get('.Select__clear-indicator').click();
|
|
cy.get('.filter_box button:not(:disabled)').contains('Apply').click();
|
|
|
|
// trigger 1 new query
|
|
cy.wait('@treemapRequest');
|
|
|
|
// make sure query API not requested multiple times
|
|
cy.on('fail', err => {
|
|
expect(err.message).to.include('timed out waiting');
|
|
return false;
|
|
});
|
|
|
|
cy.wait('@boxplotRequest', { timeout: 1000 }).then(() => {
|
|
throw new Error('Unexpected API call.');
|
|
});
|
|
});
|
|
});
|