Merge pull request #163 from actiontech/feature_test_report_statistics

[test](sqle/ReportStatistics): review code & unit test component

packages/base/src/hooks/useSystemConfig.tsx/index.test.tsx

@@ -8,7 +8,6 @@ import dayjs from 'dayjs';
 import { renderHook } from '@testing-library/react-hooks';
 import useSystemConfig from '.';
 import { render } from '@testing-library/react';
-import { getBySelector } from '@actiontech/shared/lib/testUtil/customQuery';
 
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),

packages/base/src/page/Account/__snapshots__/index.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`test base/page/Account should match snapshot 1`] = `
   <div>
     <div>
       <div
-        class="actiontech-page-header-namespace css-14fwawz"
+        class="actiontech-page-header-namespace css-1xspr0w"
       >
         <div
           class="title"
@@ -283,7 +283,7 @@ exports[`test base/page/Account should match snapshot 2`] = `
   <div>
     <div>
       <div
-        class="actiontech-page-header-namespace css-14fwawz"
+        class="actiontech-page-header-namespace css-1xspr0w"
       >
         <div
           class="title"
@@ -885,7 +885,7 @@ exports[`test base/page/Account should match snapshot when "getUserInfoLoading"
   <div>
     <div>
       <div
-        class="actiontech-page-header-namespace css-14fwawz"
+        class="actiontech-page-header-namespace css-1xspr0w"
       >
         <div
           class="title"

packages/base/src/page/CloudBeaver/__snapshots__/index.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`test base/page/CloudBeaver should match snapshot when sql query is disabled 1`] = `
 <div>
   <div
-    class="actiontech-page-header-namespace css-14fwawz"
+    class="actiontech-page-header-namespace css-1xspr0w"
   >
     <div
       class="title"
@@ -116,7 +116,7 @@ exports[`test base/page/CloudBeaver should match snapshot when sql query is disa
 exports[`test base/page/CloudBeaver should match snapshot when sql query is disabled 2`] = `
 <div>
   <div
-    class="actiontech-page-header-namespace css-14fwawz"
+    class="actiontech-page-header-namespace css-1xspr0w"
   >
     <div
       class="title"
@@ -205,7 +205,7 @@ exports[`test base/page/CloudBeaver should match snapshot when sql query is disa
 exports[`test base/page/CloudBeaver should render jump to cloud beaver when sql query is enable 1`] = `
 <div>
   <div
-    class="actiontech-page-header-namespace css-14fwawz"
+    class="actiontech-page-header-namespace css-1xspr0w"
   >
     <div
       class="title"

packages/base/src/page/Member/__snapshots__/index.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`base/Member should render member list when it first entered the member
       class="css-1pyzu59"
     >
       <div
-        class="actiontech-page-header-namespace css-14fwawz"
+        class="actiontech-page-header-namespace css-1xspr0w"
       >
         <div
           class="title"
@@ -624,7 +624,7 @@ exports[`base/Member should update content when change segmented value 1`] = `
       class="css-1pyzu59"
     >
       <div
-        class="actiontech-page-header-namespace css-14fwawz"
+        class="actiontech-page-header-namespace css-1xspr0w"
       >
         <div
           class="title"

packages/base/src/page/Project/__snapshots__/index.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`test base/page/project should match snapshot 1`] = `
   <div>
     <section>
       <div
-        class="actiontech-page-header-namespace css-14fwawz"
+        class="actiontech-page-header-namespace css-1xspr0w"
       >
         <div
           class="title"
@@ -259,7 +259,7 @@ exports[`test base/page/project should match snapshot 2`] = `
   <div>
     <section>
       <div
-        class="actiontech-page-header-namespace css-14fwawz"
+        class="actiontech-page-header-namespace css-1xspr0w"
       >
         <div
           class="title"

packages/base/src/page/UserCenter/__snapshots__/index.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`base/UserCenter should render user list when it first entered the user
   <div>
     <section>
       <div
-        class="actiontech-page-header-namespace css-14fwawz"
+        class="actiontech-page-header-namespace css-1xspr0w"
       >
         <div
           class="title"

packages/shared/lib/components/PageHeader/__snapshots__/index.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`lib/PageHeader should render full params 1`] = `
 <div>
   <div
-    class="actiontech-page-header-namespace fixed-style css-14fwawz"
+    class="actiontech-page-header-namespace fixed-style css-1xspr0w"
   >
     <div
       class="title"
@@ -22,7 +22,7 @@ exports[`lib/PageHeader should render full params 1`] = `
 exports[`lib/PageHeader should render no fixed 1`] = `
 <div>
   <div
-    class="actiontech-page-header-namespace css-14fwawz"
+    class="actiontech-page-header-namespace css-1xspr0w"
   >
     <div
       class="title"
@@ -41,7 +41,7 @@ exports[`lib/PageHeader should render no fixed 1`] = `
 exports[`lib/PageHeader should render title 1`] = `
 <div>
   <div
-    class="actiontech-page-header-namespace css-14fwawz"
+    class="actiontech-page-header-namespace css-1xspr0w"
   >
     <div
       class="title"
@@ -58,7 +58,7 @@ exports[`lib/PageHeader should render title 1`] = `
 exports[`lib/PageHeader should render title 2`] = `
 <div>
   <div
-    class="actiontech-page-header-namespace fixed-style css-14fwawz"
+    class="actiontech-page-header-namespace fixed-style css-1xspr0w"
   >
     <div
       class="title"

packages/shared/lib/components/PageHeader/style.ts

@@ -19,6 +19,18 @@ export const PageHeaderStyleWrapper = styled('div')`
       theme.sharedTheme.components.pageHeader.title.color};
   }
 
+  .refresh-icon {
+    width: 28px;
+    height: 28px;
+    display: flex;
+    justify-content: center;
+
+    svg {
+      color: ${({ theme }) => theme.sharedTheme.uiToken.colorTextTertiary};
+      font-size: 16px;
+    }
+  }
+
   &.fixed-style {
     position: fixed;
     width: calc(100% - 220px);

packages/shared/lib/testUtil/common.tsx

@@ -82,6 +82,27 @@ export const ignoreComponentCustomAttr = () => {
   });
 };
 
+export const ignoreAntdPlotsAttr = () => {
+  const error = console.error;
+  beforeAll(() => {
+    console.error = (...arg) => {
+      if (
+        typeof arg[0] === 'string' &&
+        arg[0].includes(
+          'If you accidentally passed it from a parent component, remove it from the DOM element.'
+        )
+      ) {
+        return;
+      }
+      error(...arg);
+    };
+  });
+
+  afterAll(() => {
+    console.error = error;
+  });
+};
+
 /**
  * @description: 在选择 date-range-pick 组件的结束日期 input 元素时，实际选择到了，报此 warning
  */

packages/shared/lib/testUtil/mockAntDesignPlots.jsx

@@ -1,26 +1,47 @@
 import { cloneDeep, isObject } from 'lodash';
+
+// 不适合作为 html 属性元素出现的 key 的数据集合
+const customDomKeyData = ['label', 'legend'];
+
 const MockPlots = (props) => {
-  const cloneProps = cloneDeep(props);
+  const { onReady, ref, ...othersParams } = cloneDeep(props);
 
-  Object.keys(cloneProps).forEach((key) => {
-    if (isObject(cloneProps[key])) {
-      cloneProps[key] = JSON.stringify(cloneProps[key]);
+  Object.keys(othersParams).forEach((key) => {
+    if (customDomKeyData.includes(key)) {
+      delete othersParams[key];
+      return;
+    }
+    if (isObject(othersParams[key])) {
+      othersParams[key] = JSON.stringify(othersParams[key]);
     }
   });
-  return <div {...cloneProps} />;
+
+  return <div {...othersParams} />;
 };
 
 const Line = MockPlots;
 const Pie = MockPlots;
 const RadialBar = MockPlots;
 const Gauge = MockPlots;
 const Column = MockPlots;
+const Treemap = MockPlots;
+const Area = MockPlots;
 const mockRegisterShape = jest.fn();
 const G2 = {
   registerShape: jest.fn()
 };
 
-export { Line, Pie, RadialBar, Gauge, Column, G2, mockRegisterShape };
+export {
+  Line,
+  Pie,
+  RadialBar,
+  Gauge,
+  Column,
+  G2,
+  mockRegisterShape,
+  Treemap,
+  Area
+};
 
 // eslint-disable-next-line import/no-anonymous-default-export
 export default {

packages/shared/lib/utils/Common.ts

@@ -18,11 +18,14 @@ export const integerValidate = (value: string): boolean => {
   return reg.test(value);
 };
 
-export const formatTime = (timeString?: string, defaultVal = ''): string => {
-  if (!timeString) {
+export const formatTime = (
+  timeVal?: string | Date,
+  defaultVal = ''
+): string => {
+  if (!timeVal) {
     return defaultVal;
   }
-  return moment(timeString).format('YYYY-MM-DD HH:mm:ss');
+  return moment(timeVal).format('YYYY-MM-DD HH:mm:ss');
 };
 
 export function translateTimeForRequest(time: undefined): undefined;

packages/shared/lib/utils/__tests__/Common.test.ts

@@ -27,6 +27,17 @@ describe('utils/Common', () => {
     expect(emailValidate('')).toBe(false);
   });
 
+  test('should format date now to YYYY-MM-DD HH:mm:ss', () => {
+    const mockDate = new Date('2010-01-01T00:00:00Z');
+    const spy = jest
+      .spyOn(global, 'Date')
+      .mockImplementation(() => mockDate as any);
+
+    expect(formatTime(new Date())).toBe('2010-01-01 08:00:00');
+
+    spy.mockRestore();
+  });
+
   test('should format moment to YYYY-MM-DD HH:mm:ss', () => {
     expect(formatTime('2021-06-09T08:11:52Z')).toBe('2021-06-09 16:11:52');
     expect(formatTime('2021-06-09T08:11:52Z', '--')).toBe(

packages/sqle/src/page/Home/__snapshots__/index.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`page/Home render Home page 1`] = `
 <body>
   <div>
     <div
-      class="actiontech-page-header-namespace css-14fwawz"
+      class="actiontech-page-header-namespace css-1xspr0w"
     >
       <div
         class="title"

packages/sqle/src/page/ProjectManage/Overview/index.tsx

@@ -5,7 +5,6 @@ import { SyncOutlined } from '@ant-design/icons';
 
 import useThemeStyleData from '../../../hooks/useThemeStyleData';
 import { OverviewStyleWrapper } from './style';
-import { PageHeaderStyleWrapper } from '../../../style/layout';
 
 import ProjectScore from './component/ProjectScore';
 import SqlCount from './component/SqlCount';
@@ -45,16 +44,15 @@ const Overview = () => {
         }
       }}
     >
-      <PageHeaderStyleWrapper>
-        <PageHeader
-          title={
-            <Space size={10}>
-              <div>{t('projectManage.projectOverview.pageTitle')}</div>
-              <SyncOutlined onClick={onRefreshPage} className="refresh-icon" />
-            </Space>
-          }
-        />
-      </PageHeaderStyleWrapper>
+      <PageHeader
+        fixed
+        title={
+          <Space size={10}>
+            <div>{t('projectManage.projectOverview.pageTitle')}</div>
+            <SyncOutlined onClick={onRefreshPage} className="refresh-icon" />
+          </Space>
+        }
+      />
       <OverviewStyleWrapper>
         <Row
           justify="center"

packages/sqle/src/page/ProjectManage/Overview/style.ts

@@ -1,7 +1,7 @@
 import { styled } from '@mui/material/styles';
 
 export const OverviewStyleWrapper = styled('section')`
-  padding: 30px 40px;
+  padding: 80px 40px 30px;
   min-width: 880px;
   background-color: ${({ theme }) =>
     theme.sharedTheme.uiToken.colorFillTertiary};