[frontend]ADM-728: extra const and change type for placement (#957)

* ADM-728 [frontend] refactor: extra const and change type for Placement * ADM-728 [frontend] refactor: use const from fixtures * ADM-728 [frontend] refactor: add onBack function * ADM-728 [frontend] refactor: rename
au-heartbeat · Jan 18, 2024 · bf5840c · bf5840c
1 parent 2f49b93
commit bf5840c
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 36 deletions.
diff --git a/frontend/__tests__/src/components/Common/ReportForThreeColumns.test.tsx b/frontend/__tests__/src/components/Common/ReportForThreeColumns.test.tsx
@@ -1,29 +1,25 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import ReportForThreeColumns from '@src/components/Common/ReportForThreeColumns';
-import clearAllMocks = jest.clearAllMocks;
+import { LOADING, VELOCITY } from '../../fixtures';
 
 describe('Report for three columns', () => {
-  afterEach(() => {
-    clearAllMocks();
-  });
-
   it('should show loading when data is empty', () => {
-    render(<ReportForThreeColumns title='title' fieldName='fieldName' listName='listName' data={undefined} />);
+    render(<ReportForThreeColumns title={VELOCITY} fieldName='fieldName' listName='listName' data={null} />);
 
-    expect(screen.getByTestId('loading')).toBeInTheDocument();
-    expect(screen.getByText('title')).toBeInTheDocument();
+    expect(screen.getByTestId(LOADING)).toBeInTheDocument();
+    expect(screen.getByText(VELOCITY)).toBeInTheDocument();
   });
 
-  it('should show table when has data', () => {
+  it('should show table when data is not empty', () => {
     const mockData = [
       { id: 0, name: 'name1', valuesList: [{ name: 'test1', value: '1' }] },
       { id: 1, name: 'name2', valuesList: [{ name: 'test2', value: '2' }] },
       { id: 2, name: 'name3', valuesList: [{ name: 'test3', value: '3' }] },
     ];
 
-    render(<ReportForThreeColumns title='title' fieldName='fieldName' listName='listName' data={mockData} />);
+    render(<ReportForThreeColumns title={VELOCITY} fieldName='fieldName' listName='listName' data={mockData} />);
 
-    expect(screen.getByTestId('title')).toBeInTheDocument();
+    expect(screen.getByTestId(VELOCITY)).toBeInTheDocument();
   });
 });
diff --git a/frontend/__tests__/src/components/Loading/Loading.test.tsx b/frontend/__tests__/src/components/Loading/Loading.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Loading } from '@src/components/Loading';
+import { LOADING } from '../../fixtures';
 
 describe('Loading', () => {
   it('should show Loading', () => {
@@ -11,20 +12,20 @@ describe('Loading', () => {
   });
 
   it('should show Loading message when has message', () => {
-    render(<Loading message={'loading...'} />);
+    render(<Loading message={LOADING} />);
 
-    expect(screen.getByText('loading...')).toBeInTheDocument();
+    expect(screen.getByText(LOADING)).toBeInTheDocument();
   });
 
   it('should in page center when placement is center', () => {
     render(<Loading placement={'center'} />);
 
-    expect(screen.getByTestId('loading')).toHaveStyle({ 'align-items': 'center' });
+    expect(screen.getByTestId(LOADING)).toHaveStyle({ 'align-items': 'center' });
   });
 
-  it('should in page start when placement is start', () => {
-    render(<Loading placement={'start'} />);
+  it('should in page start when placement is left', () => {
+    render(<Loading placement={'left'} />);
 
-    expect(screen.getByTestId('loading')).toHaveStyle({ 'align-items': 'flex-start' });
+    expect(screen.getByTestId(LOADING)).toHaveStyle({ 'align-items': 'flex-start' });
   });
 });
diff --git a/frontend/__tests__/src/containers/ReportStep/ReportDetail/board.test.tsx b/frontend/__tests__/src/containers/ReportStep/ReportDetail/board.test.tsx
@@ -20,7 +20,7 @@ describe('board', () => {
 
     render(
       <Provider store={setupStore()}>
-        <BoardDetail data={data} onBack={jest.fn()} />
+        <BoardDetail data={data} onBack={() => 'back'} />
       </Provider>
     );
 
@@ -39,7 +39,7 @@ describe('board', () => {
 
       render(
         <Provider store={setupStore()}>
-          <BoardDetail data={data} onBack={jest.fn()} />
+          <BoardDetail data={data} onBack={() => 'back'} />
         </Provider>
       );
 
@@ -56,7 +56,7 @@ describe('board', () => {
 
       render(
         <Provider store={setupStore()}>
-          <BoardDetail data={data} onBack={jest.fn()} />
+          <BoardDetail data={data} onBack={() => 'back'} />
         </Provider>
       );
 
@@ -76,7 +76,7 @@ describe('board', () => {
 
       render(
         <Provider store={setupStore()}>
-          <BoardDetail data={data} onBack={jest.fn()} />
+          <BoardDetail data={data} onBack={() => 'back'} />
         </Provider>
       );
 
@@ -93,7 +93,7 @@ describe('board', () => {
 
       render(
         <Provider store={setupStore()}>
-          <BoardDetail data={data} onBack={jest.fn()} />
+          <BoardDetail data={data} onBack={() => 'back'} />
         </Provider>
       );
 
@@ -116,7 +116,7 @@ describe('board', () => {
 
       render(
         <Provider store={store}>
-          <BoardDetail data={data} onBack={jest.fn()} />
+          <BoardDetail data={data} onBack={() => 'back'} />
         </Provider>
       );
 
@@ -133,7 +133,7 @@ describe('board', () => {
 
       render(
         <Provider store={setupStore()}>
-          <BoardDetail data={data} onBack={jest.fn()} />
+          <BoardDetail data={data} onBack={() => 'back'} />
         </Provider>
       );
 
@@ -159,7 +159,7 @@ describe('board', () => {
 
     render(
       <Provider store={store}>
-        <BoardDetail data={data} onBack={jest.fn()} />
+        <BoardDetail data={data} onBack={() => 'back'} />
       </Provider>
     );
 

diff --git a/frontend/__tests__/src/fixtures.ts b/frontend/__tests__/src/fixtures.ts
@@ -13,6 +13,8 @@ export const CHINA_CALENDAR = 'Calendar with Chinese Holiday';
 
 export const NEXT = 'Next';
 
+export const LOADING = 'loading';
+
 export const PREVIOUS = 'Previous';
 
 export const SAVE = 'Save';

diff --git a/frontend/src/components/Loading/index.tsx b/frontend/src/components/Loading/index.tsx
@@ -2,7 +2,7 @@ import { CircularProgress } from '@mui/material';
 import { LoadingDrop, LoadingTypography } from './style';
 import React from 'react';
 
-export type Placement = 'start' | 'center';
+export type Placement = 'left' | 'center';
 
 export interface LoadingProps {
   message?: string;

diff --git a/frontend/src/containers/ReportStep/BoradMetrics/index.tsx b/frontend/src/containers/ReportStep/BoradMetrics/index.tsx
@@ -140,14 +140,11 @@ const BoardMetrics = ({
     startToRequestBoardData(getBoardReportRequestBody());
   };
 
-  const isShowShowMoreLoading = () => {
-    return (
-      boardMetrics.length === 1 &&
-      boardMetrics[0] === REQUIRED_DATA.CLASSIFICATION &&
-      !(timeoutError || getErrorMessage()) &&
-      !boardReport?.boardMetricsCompleted
-    );
-  };
+  const isShowMoreLoadingDisplay = () =>
+    boardMetrics.length === 1 &&
+    boardMetrics[0] === REQUIRED_DATA.CLASSIFICATION &&
+    !(timeoutError || getErrorMessage()) &&
+    !boardReport?.boardMetricsCompleted;
 
   useEffect(() => {
     !isBackFromDetail && startToRequestBoardData(getBoardReportRequestBody());
@@ -161,9 +158,9 @@ const BoardMetrics = ({
           {!(timeoutError || getErrorMessage()) && boardReport?.boardMetricsCompleted && (
             <StyledShowMore onClick={onShowDetail}>{SHOW_MORE}</StyledShowMore>
           )}
-          {isShowShowMoreLoading() && (
+          {isShowMoreLoadingDisplay() && (
             <StyledLoading>
-              <Loading placement='start' size='0.8rem' backgroundColor='transparent' />
+              <Loading placement='left' size='0.8rem' backgroundColor='transparent' />
             </StyledLoading>
           )}
           {(timeoutError || getErrorMessage()) && <StyledRetry onClick={handleRetry}>{RETRY}</StyledRetry>}