mirror of https://github.com/apache/superset.git
test(maximize-chart): Add tests to maximize chart action (#14371)
* fixed FullSize charts broken #13600 * Update ChartHolder.jsx * fix:fix get permission function * test: adding tests to full screen * lint: fix lint * fix: fix CR notes * fix: fix CR notes * fix: fix CR notes Co-authored-by: toop <mytoop@163.com>
This commit is contained in:
parent
7466595563
commit
1f8de1d06c
|
@ -29,7 +29,7 @@ export default {
|
|||
chartUpdateStartTime: 1525852454838,
|
||||
latestQueryFormData: {},
|
||||
queryRequest: {},
|
||||
queryResponse: {},
|
||||
queriesResponse: [{}],
|
||||
triggerQuery: false,
|
||||
lastRendered: 0,
|
||||
form_data: {
|
||||
|
|
|
@ -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 && (
|
||||
<Icons.FullscreenExitOutlined
|
||||
style={{ fontSize: 22 }}
|
||||
onClick={() => {
|
||||
this.props.handleToggleFullSize();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<NoAnimationDropdown
|
||||
overlay={menu}
|
||||
trigger={['click']}
|
||||
|
|
|
@ -245,8 +245,8 @@ class ChartHolder extends React.Component {
|
|||
let chartHeight = 0;
|
||||
|
||||
if (this.state.isFullSize) {
|
||||
chartWidth = document.body.clientWidth - CHART_MARGIN;
|
||||
chartHeight = document.body.clientHeight - CHART_MARGIN;
|
||||
chartWidth = window.innerWidth - CHART_MARGIN;
|
||||
chartHeight = window.innerHeight - CHART_MARGIN;
|
||||
} else {
|
||||
chartWidth = Math.floor(
|
||||
widthMultiple * columnWidth +
|
||||
|
|
|
@ -0,0 +1,88 @@
|
|||
/**
|
||||
* 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 React from 'react';
|
||||
import { render, screen } from 'spec/helpers/testing-library';
|
||||
import mockState from 'spec/fixtures/mockState';
|
||||
import { sliceId as chartId } from 'spec/fixtures/mockChartQueries';
|
||||
import newComponentFactory from 'src/dashboard/util/newComponentFactory';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { waitFor } from '@testing-library/react';
|
||||
import { ChartHolder } from './index';
|
||||
import { CHART_TYPE, ROW_TYPE } from '../../util/componentTypes';
|
||||
|
||||
describe('ChartHolder', () => {
|
||||
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(<ChartHolder {...props} />, {
|
||||
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');
|
||||
});
|
||||
});
|
Loading…
Reference in New Issue