mirror of
https://github.com/apache/superset.git
synced 2024-09-19 20:19:37 -04:00
732e5891e5
* Copied changes from original PR, minus package-lock.json files * Reverted command name change * Fixed package.json in superset-frontend * Test adjustments
180 lines
5.9 KiB
TypeScript
180 lines
5.9 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 { parsePostForm } from 'cypress/utils';
|
|
import {
|
|
TABBED_DASHBOARD,
|
|
waitForChartLoad,
|
|
getChartAliasBySpec,
|
|
} from './dashboard.helper';
|
|
|
|
const TREEMAP = { name: 'Treemap', viz: 'treemap' };
|
|
const FILTER_BOX = { name: 'Region Filter', viz: 'filter_box' };
|
|
const LINE_CHART = { name: 'Growth Rate', viz: 'line' };
|
|
const BOX_PLOT = { name: 'Box plot', viz: 'box_plot' };
|
|
|
|
describe('Dashboard tabs', () => {
|
|
// 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);
|
|
});
|
|
|
|
it('should switch active tab on click', () => {
|
|
waitForChartLoad(FILTER_BOX);
|
|
waitForChartLoad(TREEMAP);
|
|
|
|
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
|
|
waitForChartLoad(FILTER_BOX);
|
|
waitForChartLoad(TREEMAP);
|
|
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();
|
|
|
|
waitForChartLoad(LINE_CHART);
|
|
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');
|
|
});
|
|
|
|
xit('should send new queries when tab becomes visible', () => {
|
|
// landing in first tab
|
|
waitForChartLoad(FILTER_BOX);
|
|
waitForChartLoad(TREEMAP);
|
|
|
|
getChartAliasBySpec(TREEMAP).then(treemapAlias => {
|
|
// 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(treemapAlias).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: 'IN',
|
|
val: ['South Asia'],
|
|
});
|
|
});
|
|
});
|
|
|
|
cy.intercept('/superset/explore_json/?*').as('legacyChartData');
|
|
// click row level tab, send 1 more query
|
|
cy.get('.ant-tabs-tab').contains('row tab 2').click();
|
|
|
|
cy.wait('@legacyChartData').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: 'IN',
|
|
val: ['South Asia'],
|
|
});
|
|
expect(requestParams.viz_type).eq(LINE_CHART.viz);
|
|
});
|
|
|
|
cy.intercept('POST', '/api/v1/chart/data?*').as('v1ChartData');
|
|
|
|
// click top level tab, send 1 more query
|
|
cy.get('.ant-tabs-tab').contains('Tab B').click();
|
|
|
|
cy.wait('@v1ChartData').then(({ request }) => {
|
|
expect(request.body.queries[0].filters[0]).deep.eq({
|
|
col: 'region',
|
|
op: 'IN',
|
|
val: ['South Asia'],
|
|
});
|
|
});
|
|
|
|
getChartAliasBySpec(BOX_PLOT).then(boxPlotAlias => {
|
|
// 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
|
|
waitForChartLoad(TREEMAP);
|
|
// make sure query API not requested multiple times
|
|
cy.on('fail', err => {
|
|
expect(err.message).to.include('timed out waiting');
|
|
return false;
|
|
});
|
|
|
|
cy.wait(boxPlotAlias, { timeout: 1000 }).then(() => {
|
|
throw new Error('Unexpected API call.');
|
|
});
|
|
});
|
|
});
|
|
});
|