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>
(cherry picked from commit 1f8de1d)

superset-frontend/spec/fixtures/mockChartQueries.js

@@ -29,7 +29,7 @@ export default {
     chartUpdateStartTime: 1525852454838,
     latestQueryFormData: {},
     queryRequest: {},
-    queryResponse: {},
+    queriesResponse: [{}],
     triggerQuery: false,
     lastRendered: 0,
     form_data: {

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']}

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 +

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');
+  });
+});