From 1f8de1d06c9de1bc659fa5729e322709051e4440 Mon Sep 17 00:00:00 2001
From: simcha90 <56388545+simcha90@users.noreply.github.com>
Date: Sun, 2 May 2021 09:27:38 +0300
Subject: [PATCH] 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>
---
 .../spec/fixtures/mockChartQueries.js         |  2 +-
 .../components/SliceHeaderControls/index.jsx  |  9 ++
 .../components/gridComponents/ChartHolder.jsx |  4 +-
 .../gridComponents/ChartHolder.test.tsx       | 88 +++++++++++++++++++
 4 files changed, 100 insertions(+), 3 deletions(-)
 create mode 100644 superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx

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 && (
+          <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 61a0cf2e45..f83c8a0f8e 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 0000000000..cd9f35cd5e
--- /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');
+  });
+});