You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by am...@apache.org on 2021/05/04 11:39:25 UTC
[superset] 02/06: test(maximize-chart): Add tests to maximize chart
action (#14371)
This is an automated email from the ASF dual-hosted git repository.
amitmiran pushed a commit to branch 1.2
in repository https://gitbox.apache.org/repos/asf/superset.git
commit a9b83d3871c017686022ff72fb21068a995405a8
Author: simcha90 <56...@users.noreply.github.com>
AuthorDate: Sun May 2 09:27:38 2021 +0300
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 <my...@163.com>
(cherry picked from commit 1f8de1d06c9de1bc659fa5729e322709051e4440)
---
.../spec/fixtures/mockChartQueries.js | 2 +-
.../components/SliceHeaderControls/index.jsx | 9 +++
.../components/gridComponents/ChartHolder.jsx | 4 +-
.../components/gridComponents/ChartHolder.test.tsx | 88 ++++++++++++++++++++++
4 files changed, 100 insertions(+), 3 deletions(-)
diff --git a/superset-frontend/spec/fixtures/mockChartQueries.js b/superset-frontend/spec/fixtures/mockChartQueries.js
index a16354c..e4fa224 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 2c66bca..422e915 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 && (
+ <Icons.FullscreenExitOutlined
+ style={{ fontSize: 22 }}
+ onClick={() => {
+ this.props.handleToggleFullSize();
+ }}
+ />
+ )}
<NoAnimationDropdown
overlay={menu}
trigger={['click']}
diff --git a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx
index 61a0cf2..f83c8a0 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx
@@ -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 +
diff --git a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx
new file mode 100644
index 0000000..cd9f35c
--- /dev/null
+++ b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx
@@ -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');
+ });
+});