diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/tabs.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/tabs.test.ts index 6c8c559df18df..323a8e7f4da7d 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/tabs.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/tabs.test.ts @@ -22,6 +22,7 @@ import { getChartAliasBySpec, } from 'cypress/utils'; import { TABBED_DASHBOARD } from 'cypress/utils/urls'; +import { expandFilterOnLeftPanel } from './utils'; const TREEMAP = { name: 'Treemap', viz: 'treemap' }; const FILTER_BOX = { name: 'Region Filter', viz: 'filter_box' }; @@ -91,6 +92,7 @@ describe('Dashboard tabs', () => { cy.get('@row-level-tabs').last().click(); waitForChartLoad(LINE_CHART); cy.getBySel('grid-container').find('.line').should('be.visible'); + cy.get('@row-level-tabs').first().click(); }); it.skip('should send new queries when tab becomes visible', () => { @@ -166,4 +168,30 @@ describe('Dashboard tabs', () => { }); }); }); + + it('should update size when switch tab', () => { + cy.get('@top-level-tabs') + .last() + .click() + .should('have.class', 'ant-tabs-tab-active'); + + expandFilterOnLeftPanel(); + + cy.wait(1000); + + cy.get('@top-level-tabs') + .first() + .click() + .should('have.class', 'ant-tabs-tab-active'); + + cy.wait(1000); + + cy.get("[data-test-viz-type='treemap'] .chart-container").then( + $chartContainer => { + expect($chartContainer.get(0).scrollWidth).eq( + $chartContainer.get(0).offsetWidth, + ); + }, + ); + }); }); diff --git a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx index da01f493bec82..f5fa7fa4b34e3 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx +++ b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx @@ -190,7 +190,9 @@ class Chart extends React.Component { if ( nextProps.width !== this.props.width || - nextProps.height !== this.props.height + nextProps.height !== this.props.height || + nextProps.width !== this.state.width || + nextProps.height !== this.state.height ) { clearTimeout(this.resizeTimeout); this.resizeTimeout = setTimeout(this.resize, RESIZE_TIMEOUT);