ADM-927:[frontend]feat: add metrics board and pipeline failed status handle logic

frontend/__tests__/client/PipelineToolClient.test.ts

@@ -79,22 +79,22 @@ describe('PipelineToolClient', () => {
         },
         {
           code: HttpStatusCode.BadRequest,
-          errorTitle: 'Invalid input!',
+          errorTitle: 'Failed to get Pipeline configuration!',
           errorMessage,
         },
         {
           code: HttpStatusCode.Unauthorized,
-          errorTitle: 'Unauthorized request!',
+          errorTitle: 'Failed to get Pipeline configuration!',
           errorMessage,
         },
         {
           code: HttpStatusCode.Forbidden,
-          errorTitle: 'Forbidden request!',
+          errorTitle: 'Failed to get Pipeline configuration!',
           errorMessage,
         },
         {
           code: HttpStatusCode.NotFound,
-          errorTitle: 'Not found!',
+          errorTitle: 'Failed to get Pipeline configuration!',
           errorMessage,
         },
       ];

frontend/__tests__/containers/MetricsStep/DeploymentFrequencySettings/PipelineMetricSelectionPopupTestPartialFailed.test.tsx

@@ -0,0 +1,85 @@
+import { render, waitFor } from '@testing-library/react';
+import { setupStore } from '@test/utils/setupStoreUtil';
+import { Provider } from 'react-redux';
+
+import { PipelineMetricSelection } from '@src/containers/MetricsStep/DeploymentFrequencySettings/PipelineMetricSelection';
+import { IPipelineConfig, updateShouldGetPipelineConfig } from '@src/context/Metrics/metricsSlice';
+import { addNotification } from '@src/context/notification/NotificationSlice';
+import { METRICS_DATA_FAIL_STATUS } from '@src/constants/commons';
+import { PIPELINE_SETTING_TYPES } from '@test/fixtures';
+
+const store = setupStore();
+let stepFailStatus = METRICS_DATA_FAIL_STATUS.NOT_FAILED;
+
+jest.mock('@src/context/notification/NotificationSlice', () => ({
+  ...jest.requireActual('@src/context/notification/NotificationSlice'),
+  addNotification: jest.fn().mockReturnValue({ type: 'ADD_NEW_NOTIFICATION' }),
+}));
+
+jest.mock('@src/hooks/useGetMetricsStepsEffect', () => ({
+  ...jest.requireActual('@src/hooks/useGetMetricsStepsEffect'),
+
+  useGetMetricsStepsEffect: jest.fn().mockImplementation(() => {
+    return {
+      stepFailedStatus: stepFailStatus,
+    };
+  }),
+}));
+
+describe('PipelineMetricSelection', () => {
+  const deploymentFrequencySetting = {
+    id: 0,
+    organization: '',
+    pipelineName: '',
+    step: '',
+    branches: [],
+  };
+  const mockHandleClickRemoveButton = jest.fn();
+  const mockUpdatePipeline = jest.fn();
+  const mockSetLoadingCompletedNumber = jest.fn();
+
+  const setup = async (
+    deploymentFrequencySetting: IPipelineConfig,
+    isShowRemoveButton: boolean,
+    isDuplicated: boolean,
+  ) => {
+    store.dispatch(updateShouldGetPipelineConfig(true));
+    return render(
+      <Provider store={store}>
+        <PipelineMetricSelection
+          type={PIPELINE_SETTING_TYPES.DEPLOYMENT_FREQUENCY_SETTINGS_TYPE}
+          pipelineSetting={deploymentFrequencySetting}
+          isShowRemoveButton={isShowRemoveButton}
+          onRemovePipeline={mockHandleClickRemoveButton}
+          onUpdatePipeline={mockUpdatePipeline}
+          isDuplicated={isDuplicated}
+          isInfoLoading={false}
+          totalPipelineNumber={2}
+          setLoadingCompletedNumber={mockSetLoadingCompletedNumber}
+        />
+      </Provider>,
+    );
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should show 4xx popup when call pipeline step to get partial 4xx error', async () => {
+    stepFailStatus = METRICS_DATA_FAIL_STATUS.PARTIAL_FAILED_4XX;
+    await setup(deploymentFrequencySetting, true, false);
+
+    await waitFor(() => {
+      expect(addNotification).toHaveBeenCalled();
+    });
+  });
+
+  it('should show timeout popup when call pipeline step to get partial timeout error', async () => {
+    stepFailStatus = METRICS_DATA_FAIL_STATUS.PARTIAL_FAILED_TIMEOUT;
+    await setup(deploymentFrequencySetting, true, false);
+
+    await waitFor(() => {
+      expect(addNotification).toHaveBeenCalled();
+    });
+  });
+});

frontend/__tests__/containers/MetricsStep/MetricsStep.test.tsx

@@ -195,7 +195,6 @@ describe('MetricsStep', () => {
         { key: 'done', value: { name: 'Done', statuses: ['PRE-DONE,', 'DONE', 'CANCEL'] } },
       ];
 
-      store.dispatch(updateShouldGetBoardConfig(true));
       store.dispatch(updateMetrics(REQUIRED_DATA_LIST));
       store.dispatch(updateCycleTimeSettings(cycleTimeSettingsWithTwoDoneValue));
       store.dispatch(saveDoneColumn(doneColumn));
@@ -286,6 +285,7 @@ describe('MetricsStep', () => {
     });
 
     it('should be render no card container when get board card when no data', async () => {
+      store.dispatch(updateShouldGetBoardConfig(true));
       server.use(
         rest.post(MOCK_BOARD_INFO_URL, (_, res, ctx) => {
           return res(ctx.status(HttpStatusCode.Ok));
@@ -304,7 +304,35 @@ describe('MetricsStep', () => {
       ).toBeInTheDocument();
     });
 
+    it('should be render failed message container when get 4xx error', async () => {
+      store.dispatch(updateShouldGetBoardConfig(true));
+      server.use(
+        rest.post(MOCK_BOARD_INFO_URL, (_, res, ctx) => {
+          return res(ctx.status(HttpStatusCode.BadRequest));
+        }),
+      );
+
+      setup();
+
+      await waitFor(() => {
+        expect(screen.getByText('Failed to get Board configuration!')).toBeInTheDocument();
+      });
+      expect(screen.getByText('Please go back to the previous page and check your board info!')).toBeInTheDocument();
+    });
+
+    it('should be render popup when get partial 4xx error', async () => {
+      store.dispatch(updateShouldGetBoardConfig(true));
+
+      setup();
+
+      await waitFor(() => {
+        expect(screen.getByText('Failed to get Board configuration!')).toBeInTheDocument();
+      });
+      expect(screen.getByText('Please go back to the previous page and check your board info!')).toBeInTheDocument();
+    });
+
     it('should be render form container when got board card success', async () => {
+      store.dispatch(updateShouldGetBoardConfig(true));
       server.use(
         rest.post(MOCK_BOARD_INFO_URL, (_, res, ctx) => {
           return res(
@@ -374,6 +402,7 @@ describe('MetricsStep', () => {
     });
 
     it('should show retry button when call get info timeout', async () => {
+      store.dispatch(updateShouldGetBoardConfig(true));
       server.use(
         rest.post(MOCK_BOARD_INFO_URL, (_, res) => {
           return res.networkError('NETWORK_TIMEOUT');

frontend/__tests__/containers/MetricsStep/MetricsStepPopupTestPartialFailed.test.tsx

@@ -0,0 +1,60 @@
+import { render, waitFor } from '@testing-library/react';
+import { setupStore } from '../../utils/setupStoreUtil';
+import MetricsStep from '@src/containers/MetricsStep';
+import { Provider } from 'react-redux';
+
+import { addNotification } from '@src/context/notification/NotificationSlice';
+import { METRICS_DATA_FAIL_STATUS } from '@src/constants/commons';
+
+let store = setupStore();
+const setup = () =>
+  render(
+    <Provider store={store}>
+      <MetricsStep />
+    </Provider>,
+  );
+
+jest.mock('@src/context/notification/NotificationSlice', () => ({
+  ...jest.requireActual('@src/context/notification/NotificationSlice'),
+  addNotification: jest.fn().mockReturnValue({ type: 'ADD_NEW_NOTIFICATION' }),
+}));
+
+let boardInfoFailStatus = METRICS_DATA_FAIL_STATUS.NOT_FAILED;
+
+jest.mock('@src/hooks/useGetBoardInfo', () => ({
+  ...jest.requireActual('@src/hooks/useGetBoardInfo'),
+
+  useGetBoardInfoEffect: jest.fn().mockImplementation(() => {
+    return {
+      boardInfoFailedStatus: boardInfoFailStatus,
+    };
+  }),
+}));
+
+describe('MetricsStep', () => {
+  beforeEach(() => {
+    store = setupStore();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should show 4xx popup when call get partial 4xx error', async () => {
+    boardInfoFailStatus = METRICS_DATA_FAIL_STATUS.PARTIAL_FAILED_4XX;
+    setup();
+
+    await waitFor(() => {
+      expect(addNotification).toHaveBeenCalled();
+    });
+  });
+
+  it('should show no cards popup when call get partial no cards error', async () => {
+    boardInfoFailStatus = METRICS_DATA_FAIL_STATUS.PARTIAL_FAILED_NO_CARDS;
+    setup();
+
+    await waitFor(() => {
+      expect(addNotification).toHaveBeenCalled();
+    });
+  });
+});

frontend/__tests__/hooks/useGetBoardInfo.test.tsx

@@ -1,4 +1,5 @@
 import { MOCK_BOARD_INFO_URL, FAKE_TOKEN, FAKE_DATE_EARLIER, FAKE_DATE_LATER } from '@test/fixtures';
+import { AXIOS_REQUEST_ERROR_CODE } from '@src/constants/resources';
 import { useGetBoardInfoEffect } from '@src/hooks/useGetBoardInfo';
 import { renderHook, act, waitFor } from '@testing-library/react';
 import { setupServer } from 'msw/node';
@@ -46,23 +47,23 @@ describe('use get board info', () => {
     ],
     [
       HttpStatusCode.BadRequest,
-      'Failed to get the board configuration!',
-      'Please go back to the previous page to check your board info, or change your time range!',
+      'Failed to get Board configuration!',
+      'Please go back to the previous page and check your board info!',
     ],
     [
       HttpStatusCode.Unauthorized,
-      'Failed to get the board configuration!',
-      'Please go back to the previous page to check your board info, or change your time range!',
+      'Failed to get Board configuration!',
+      'Please go back to the previous page and check your board info!',
     ],
     [
       HttpStatusCode.Forbidden,
-      'Failed to get the board configuration!',
-      'Please go back to the previous page to check your board info, or change your time range!',
+      'Failed to get Board configuration!',
+      'Please go back to the previous page and check your board info!',
     ],
     [
       HttpStatusCode.NotFound,
-      'Failed to get the board configuration!',
-      'Please go back to the previous page to check your board info, or change your time range!',
+      'Failed to get Board configuration!',
+      'Please go back to the previous page and check your board info!',
     ],
   ])('should got error message when got code is %s', async (code, title, message) => {
     server.use(
@@ -81,4 +82,115 @@ describe('use get board info', () => {
     });
     expect(result.current.errorMessage.message).toEqual(message);
   });
+
+  it('should get data when mock 4xx error', async () => {
+    server.use(
+      rest.post(MOCK_BOARD_INFO_URL, (_, res, ctx) => {
+        return res(
+          ctx.status(HttpStatusCode.BadRequest),
+          ctx.json({
+            ignoredTargetFields: [
+              {
+                key: 'description',
+                name: 'Description',
+                flag: false,
+              },
+            ],
+            jiraColumns: [
+              {
+                key: 'To Do',
+                value: {
+                  name: 'TODO',
+                  statuses: ['TODO'],
+                },
+              },
+            ],
+            targetFields: [
+              {
+                key: 'issuetype',
+                name: 'Issue Type',
+                flag: false,
+              },
+            ],
+            users: ['heartbeat user'],
+          }),
+        );
+      }),
+    );
+    const { result } = renderHook(() => useGetBoardInfoEffect());
+    await act(() => {
+      result.current.getBoardInfo(mockBoardConfig);
+    });
+
+    await waitFor(() => {
+      expect(result.current.errorMessage.title).toEqual('Failed to get Board configuration!');
+    });
+    expect(result.current.errorMessage.message).toEqual(
+      'Please go back to the previous page and check your board info!',
+    );
+  });
+
+  it('should get data when mock 3xx error', async () => {
+    server.use(
+      rest.post(MOCK_BOARD_INFO_URL, (_, res, ctx) => {
+        return res(
+          ctx.status(HttpStatusCode.Unused),
+          ctx.json({
+            code: AXIOS_REQUEST_ERROR_CODE.TIMEOUT,
+          }),
+        );
+      }),
+    );
+    const { result } = renderHook(() => useGetBoardInfoEffect());
+    await act(() => {
+      result.current.getBoardInfo(mockBoardConfig);
+    });
+
+    await waitFor(() => {
+      expect(result.current.errorMessage.title).toEqual('Failed to get Board configuration!');
+    });
+    expect(result.current.errorMessage.message).toEqual(
+      'Please go back to the previous page and check your board info!',
+    );
+  });
+
+  it('should get data when status is OK', async () => {
+    server.use(
+      rest.post(MOCK_BOARD_INFO_URL, (_, res, ctx) => {
+        return res.once(
+          ctx.status(HttpStatusCode.Ok),
+          ctx.json({
+            ignoredTargetFields: [
+              {
+                key: 'description',
+                name: 'Description',
+                flag: false,
+              },
+            ],
+            jiraColumns: [
+              {
+                key: 'To Do',
+                value: {
+                  name: 'TODO',
+                  statuses: ['TODO'],
+                },
+              },
+            ],
+            targetFields: [
+              {
+                key: 'issuetype',
+                name: 'Issue Type',
+                flag: false,
+              },
+            ],
+            users: ['heartbeat user'],
+          }),
+        );
+      }),
+    );
+    const { result } = renderHook(() => useGetBoardInfoEffect());
+    await act(() => {
+      result.current.getBoardInfo(mockBoardConfig);
+    });
+  });
 });