diff --git a/superset-frontend/spec/fixtures/mockChartQueries.js b/superset-frontend/spec/fixtures/mockChartQueries.js index a16354c931..e4fa224ad8 100644 --- a/superset-frontend/spec/fixtures/mockChartQueries.js +++ b/superset-frontend/spec/fixtures/mockChartQueries.js @@ -29,7 +29,7 @@ export default { chartUpdateStartTime: 1525852454838, latestQueryFormData: {}, queryRequest: {}, - queryResponse: {}, + queriesResponse: [{}], triggerQuery: false, lastRendered: 0, form_data: { diff --git a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.jsx b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.jsx index 2c66bca193..422e91591e 100644 --- a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.jsx +++ b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.jsx @@ -32,6 +32,7 @@ import getDashboardUrl from 'src/dashboard/util/getDashboardUrl'; import { getActiveFilters } from 'src/dashboard/util/activeDashboardFilters'; import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags'; import CrossFilterScopingModal from 'src/dashboard/components/CrossFilterScopingModal/CrossFilterScopingModal'; +import Icons from 'src/components/Icons'; const propTypes = { slice: PropTypes.object.isRequired, @@ -295,6 +296,14 @@ class SliceHeaderControls extends React.PureComponent { isOpen={this.state.showCrossFilterScopingModal} onClose={() => this.setState({ showCrossFilterScopingModal: false })} /> + {isFullSize && ( + { + this.props.handleToggleFullSize(); + }} + /> + )} { + const defaultProps = { + component: { + ...newComponentFactory(CHART_TYPE), + id: 'CHART_ID', + parents: ['ROOT_ID', 'TABS_ID', 'TAB_ID', 'ROW_ID'], + meta: { + chartId, + width: 3, + height: 10, + chartName: 'Mock chart name', + }, + }, + parentComponent: { + ...newComponentFactory(ROW_TYPE), + id: 'ROW_ID', + children: ['COLUMN_ID'], + }, + index: 0, + depth: 0, + id: 'CHART_ID', + parentId: 'ROW_ID', + availableColumnCount: 12, + columnWidth: 300, + onResizeStart: () => {}, + onResize: () => {}, + onResizeStop: () => {}, + handleComponentDrop: () => {}, + deleteComponent: () => {}, + updateComponents: () => {}, + editMode: false, + isComponentVisible: true, + dashboardId: 123, + }; + + const renderWrapper = (props = defaultProps, state = mockState) => + render(, { + useRedux: true, + initialState: state, + useDnd: true, + }); + + it('toggle full size', async () => { + renderWrapper(); + + let chart = (screen.getByTestId('slice-container') + .firstChild as HTMLElement).style; + expect(chart?.width).toBe('900px'); + expect(chart?.height).toBe('26px'); + + userEvent.click(screen.getByRole('button')); + userEvent.click(screen.getByText('Maximize chart')); + + chart = (screen.getByTestId('slice-container').firstChild as HTMLElement) + .style; + await waitFor(() => expect(chart?.width).toBe('992px')); + expect(chart?.height).toBe('714px'); + }); +});