mirror of
https://github.com/apache/superset.git
synced 2024-09-12 16:49:40 -04:00
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,
|
chartUpdateStartTime: 1525852454838,
|
||||||
latestQueryFormData: {},
|
latestQueryFormData: {},
|
||||||
queryRequest: {},
|
queryRequest: {},
|
||||||
queryResponse: {},
|
queriesResponse: [{}],
|
||||||
triggerQuery: false,
|
triggerQuery: false,
|
||||||
lastRendered: 0,
|
lastRendered: 0,
|
||||||
form_data: {
|
form_data: {
|
||||||
|
@ -32,6 +32,7 @@ import getDashboardUrl from 'src/dashboard/util/getDashboardUrl';
|
|||||||
import { getActiveFilters } from 'src/dashboard/util/activeDashboardFilters';
|
import { getActiveFilters } from 'src/dashboard/util/activeDashboardFilters';
|
||||||
import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
|
import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
|
||||||
import CrossFilterScopingModal from 'src/dashboard/components/CrossFilterScopingModal/CrossFilterScopingModal';
|
import CrossFilterScopingModal from 'src/dashboard/components/CrossFilterScopingModal/CrossFilterScopingModal';
|
||||||
|
import Icons from 'src/components/Icons';
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
slice: PropTypes.object.isRequired,
|
slice: PropTypes.object.isRequired,
|
||||||
@ -295,6 +296,14 @@ class SliceHeaderControls extends React.PureComponent {
|
|||||||
isOpen={this.state.showCrossFilterScopingModal}
|
isOpen={this.state.showCrossFilterScopingModal}
|
||||||
onClose={() => this.setState({ showCrossFilterScopingModal: false })}
|
onClose={() => this.setState({ showCrossFilterScopingModal: false })}
|
||||||
/>
|
/>
|
||||||
|
{isFullSize && (
|
||||||
|
<Icons.FullscreenExitOutlined
|
||||||
|
style={{ fontSize: 22 }}
|
||||||
|
onClick={() => {
|
||||||
|
this.props.handleToggleFullSize();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
<NoAnimationDropdown
|
<NoAnimationDropdown
|
||||||
overlay={menu}
|
overlay={menu}
|
||||||
trigger={['click']}
|
trigger={['click']}
|
||||||
|
@ -245,8 +245,8 @@ class ChartHolder extends React.Component {
|
|||||||
let chartHeight = 0;
|
let chartHeight = 0;
|
||||||
|
|
||||||
if (this.state.isFullSize) {
|
if (this.state.isFullSize) {
|
||||||
chartWidth = document.body.clientWidth - CHART_MARGIN;
|
chartWidth = window.innerWidth - CHART_MARGIN;
|
||||||
chartHeight = document.body.clientHeight - CHART_MARGIN;
|
chartHeight = window.innerHeight - CHART_MARGIN;
|
||||||
} else {
|
} else {
|
||||||
chartWidth = Math.floor(
|
chartWidth = Math.floor(
|
||||||
widthMultiple * columnWidth +
|
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
Block a user