ADM-999 [frontend]: fix frontend error when get data error in the met…

…rics page (#1606) * ADM-999 [frontend]: fix the error style * ADM-999 [frontend]: fix frontend test * ADM-999 [frontend]: fix sonar issues * ADM-999 [frontend]: fix test
au-heartbeat · Sep 13, 2024 · 3d501d0 · 3d501d0
1 parent f2b85cc
commit 3d501d0
Show file tree

Hide file tree

Showing 15 changed files with 494 additions and 409 deletions.
diff --git a/frontend/__tests__/client/SourceControlClient.test.ts b/frontend/__tests__/client/SourceControlClient.test.ts
@@ -7,7 +7,10 @@ import {
   MOCK_SOURCE_CONTROL_VERIFY_TOKEN_URL,
 } from '../fixtures';
 import { sourceControlClient } from '@src/clients/sourceControl/SourceControlClient';
+import { InternalServerError } from '@src/errors/InternalServerError';
+import { UnauthorizedError } from '@src/errors/UnauthorizedError';
 import { SourceControlTypes } from '@src/constants/resources';
+import { ForbiddenError } from '@src/errors/ForbiddenError';
 import { http, HttpResponse } from 'msw';
 import { setupServer } from 'msw/node';
 import { HttpStatusCode } from 'axios';
@@ -164,8 +167,7 @@ describe('verify sourceControl request', () => {
       endTime: 123,
     });
 
-    expect(result.code).toEqual(200);
-    expect(result.data?.name).toEqual(expectedNames);
+    expect(result.name).toEqual(expectedNames);
   });
 
   it('should set default error title when get repositories api return 401', async () => {
@@ -177,17 +179,16 @@ describe('verify sourceControl request', () => {
       }),
     );
 
-    const result = await sourceControlClient.getRepo({
-      type: SourceControlTypes.GitHub,
-      token: 'mock-token',
-      organization: 'org',
-      endTime: 123,
-    });
-
-    expect(result.code).toEqual(401);
-    expect(result.errorMessage).toEqual(
-      'Please go back to the previous page and change your source control token with correct access permission.',
-    );
+    try {
+      await sourceControlClient.getRepo({
+        type: SourceControlTypes.GitHub,
+        token: 'mock-token',
+        organization: 'org',
+        endTime: 123,
+      });
+    } catch (error) {
+      expect(error).toBeInstanceOf(UnauthorizedError);
+    }
   });
 
   it('should set default error title when get repositories api return 403', async () => {
@@ -199,17 +200,16 @@ describe('verify sourceControl request', () => {
       }),
     );
 
-    const result = await sourceControlClient.getRepo({
-      type: SourceControlTypes.GitHub,
-      token: 'mock-token',
-      organization: 'org',
-      endTime: 123,
-    });
-
-    expect(result.code).toEqual(403);
-    expect(result.errorMessage).toEqual(
-      'Please go back to the previous page and change your source control token with correct access permission.',
-    );
+    try {
+      await sourceControlClient.getRepo({
+        type: SourceControlTypes.GitHub,
+        token: 'mock-token',
+        organization: 'org',
+        endTime: 123,
+      });
+    } catch (error) {
+      expect(error).toBeInstanceOf(ForbiddenError);
+    }
   });
 
   it('should set default error title when get repositories api return 500', async () => {
@@ -221,17 +221,16 @@ describe('verify sourceControl request', () => {
       }),
     );
 
-    const result = await sourceControlClient.getRepo({
-      type: SourceControlTypes.GitHub,
-      token: 'mock-token',
-      organization: 'org',
-      endTime: 123,
-    });
-
-    expect(result.code).toEqual(500);
-    expect(result.errorMessage).toEqual(
-      'Please go back to the previous page and change your source control token with correct access permission.',
-    );
+    try {
+      await sourceControlClient.getRepo({
+        type: SourceControlTypes.GitHub,
+        token: 'mock-token',
+        organization: 'org',
+        endTime: 123,
+      });
+    } catch (error) {
+      expect(error).toBeInstanceOf(InternalServerError);
+    }
   });
 
   it('should return branches when get branches api return ok', async () => {
@@ -351,8 +350,7 @@ describe('verify sourceControl request', () => {
       endTime: 123,
     });
 
-    expect(result.code).toEqual(200);
-    expect(result.data?.crews).toEqual(expectedNames);
+    expect(result.crews).toEqual(expectedNames);
   });
 
   it('should set default error title when get crews api return 401', async () => {
@@ -364,20 +362,19 @@ describe('verify sourceControl request', () => {
       }),
     );
 
-    const result = await sourceControlClient.getCrew({
-      type: SourceControlTypes.GitHub,
-      token: 'mock-token',
-      repo: 'repo',
-      organization: 'org',
-      branch: 'branch',
-      startTime: 123,
-      endTime: 123,
-    });
-
-    expect(result.code).toEqual(401);
-    expect(result.errorMessage).toEqual(
-      'Please go back to the previous page and change your source control token with correct access permission.',
-    );
+    try {
+      await sourceControlClient.getCrew({
+        type: SourceControlTypes.GitHub,
+        token: 'mock-token',
+        repo: 'repo',
+        organization: 'org',
+        branch: 'branch',
+        startTime: 123,
+        endTime: 123,
+      });
+    } catch (error) {
+      expect(error).toBeInstanceOf(UnauthorizedError);
+    }
   });
 
   it('should set default error title when get crews api return 403', async () => {
@@ -389,20 +386,19 @@ describe('verify sourceControl request', () => {
       }),
     );
 
-    const result = await sourceControlClient.getCrew({
-      type: SourceControlTypes.GitHub,
-      repo: 'repo',
-      branch: 'branch',
-      startTime: 123,
-      endTime: 123,
-      token: 'mock-token',
-      organization: 'org',
-    });
-
-    expect(result.code).toEqual(403);
-    expect(result.errorMessage).toEqual(
-      'Please go back to the previous page and change your source control token with correct access permission.',
-    );
+    try {
+      await sourceControlClient.getCrew({
+        type: SourceControlTypes.GitHub,
+        repo: 'repo',
+        branch: 'branch',
+        startTime: 123,
+        endTime: 123,
+        token: 'mock-token',
+        organization: 'org',
+      });
+    } catch (error) {
+      expect(error).toBeInstanceOf(ForbiddenError);
+    }
   });
 
   it('should set default error title when get crews api return 500', async () => {
@@ -414,19 +410,18 @@ describe('verify sourceControl request', () => {
       }),
     );
 
-    const result = await sourceControlClient.getCrew({
-      type: SourceControlTypes.GitHub,
-      token: 'mock-token',
-      repo: 'repo',
-      branch: 'branch',
-      startTime: 123,
-      endTime: 123,
-      organization: 'org',
-    });
-
-    expect(result.code).toEqual(500);
-    expect(result.errorMessage).toEqual(
-      'Please go back to the previous page and change your source control token with correct access permission.',
-    );
+    try {
+      await sourceControlClient.getCrew({
+        type: SourceControlTypes.GitHub,
+        token: 'mock-token',
+        repo: 'repo',
+        branch: 'branch',
+        startTime: 123,
+        endTime: 123,
+        organization: 'org',
+      });
+    } catch (error) {
+      expect(error).toBeInstanceOf(InternalServerError);
+    }
   });
 });
diff --git a/...s__/containers/MetricsStep/DeploymentFrequencySettings/PresentationForErrorCases.test.tsx b/...s__/containers/MetricsStep/DeploymentFrequencySettings/PresentationForErrorCases.test.tsx
@@ -28,7 +28,13 @@ describe('<PresentationForErrorCases />', () => {
   it.each(commonErrors)(
     'should properly render error UI with title:$title and corresponding message',
     ({ code, title: errorTitle }) => {
-      const props = { code, errorTitle, errorMessage, isLoading: false, retry: () => '' };
+      const props: IPresentationForErrorCasesProps = {
+        code,
+        errorTitle,
+        errorMessage,
+        isLoading: false,
+        retry: () => Promise.resolve(),
+      };
       setup(props);
 
       const titleNode = screen.getByText(errorTitle);

diff --git a/...s__/containers/MetricsStep/SourceControlConfiguration/SourceControlConfiguration.test.tsx b/...s__/containers/MetricsStep/SourceControlConfiguration/SourceControlConfiguration.test.tsx
@@ -17,7 +17,7 @@ import { Provider } from 'react-redux';
 
 const mockInitSourceControlSettings = [
   { id: 0, organization: 'mockOrgName', repo: 'mockRepoName', branches: ['mockBranch1'] },
-  { id: 1, organization: '', repo: '', steps: '', branches: [] },
+  { id: 1, organization: '', repo: '', branches: [] },
 ];
 const mockInitOrganizationEffectResponse = {
   isFirstFetch: false,
@@ -37,10 +37,7 @@ const mockInitRepoEffectResponse = {
   isLoading: false,
   getSourceControlRepoInfo: jest.fn(),
   info: {
-    code: 200,
-    data: undefined,
-    errorTitle: '',
-    errorMessage: '',
+    name: [],
   },
   stepFailedStatus: MetricsDataFailStatus.NotFailed,
 };
@@ -49,10 +46,7 @@ const mockInitBranchEffectResponse = {
   getSourceControlBranchInfo: jest.fn(),
   isGetBranch: true,
   info: {
-    code: 200,
-    data: undefined,
-    errorTitle: '',
-    errorMessage: '',
+    name: [],
   },
   stepFailedStatus: MetricsDataFailStatus.NotFailed,
 };
@@ -61,10 +55,7 @@ const mockInitCrewEffectResponse = {
   getSourceControlCrewInfo: jest.fn(),
   isGetAllCrews: true,
   info: {
-    code: 200,
-    data: undefined,
-    errorTitle: '',
-    errorMessage: '',
+    crews: [],
   },
   stepFailedStatus: MetricsDataFailStatus.NotFailed,
 };
@@ -144,6 +135,7 @@ describe('SourceControlConfiguration', () => {
     mockBranchEffectResponse = mockInitBranchEffectResponse;
     mockCrewEffectResponse = mockInitCrewEffectResponse;
   });
+
   it('should show loading when isLoading is true', () => {
     mockOrganizationEffectResponse = {
       ...mockOrganizationEffectResponse,
@@ -257,4 +249,71 @@ describe('SourceControlConfiguration', () => {
 
     expect(screen.getByLabelText('Error UI for pipeline settings')).toBeInTheDocument();
   });
+
+  it('should display error UI and retry when get repo failed status returns AllFailedTimeout', async () => {
+    const getSourceControlRepoInfo = jest.fn();
+    mockRepoEffectResponse = {
+      ...mockInitRepoEffectResponse,
+      stepFailedStatus: MetricsDataFailStatus.AllFailedTimeout,
+      getSourceControlRepoInfo,
+    };
+    setup();
+
+    const retryButton = screen.getByLabelText('retry button');
+
+    expect(screen.getByLabelText('Error UI for pipeline settings')).toBeInTheDocument();
+    expect(retryButton).toBeInTheDocument();
+
+    await act(async () => {
+      await userEvent.click(retryButton);
+    });
+
+    expect(getSourceControlRepoInfo).toHaveBeenCalledTimes(1);
+  });
+
+  it('should display error UI and retry when get branch failed status returns AllFailedTimeout', async () => {
+    const getSourceControlBranchInfo = jest.fn();
+    mockBranchEffectResponse = {
+      ...mockInitBranchEffectResponse,
+      stepFailedStatus: MetricsDataFailStatus.AllFailedTimeout,
+      getSourceControlBranchInfo,
+    };
+    setup();
+
+    const retryButton = screen.getByLabelText('retry button');
+
+    expect(screen.getByLabelText('Error UI for pipeline settings')).toBeInTheDocument();
+    expect(retryButton).toBeInTheDocument();
+
+    await act(async () => {
+      await userEvent.click(retryButton);
+    });
+
+    expect(getSourceControlBranchInfo).toHaveBeenCalledTimes(1);
+  });
+
+  it('should display error UI and retry when get crew failed status returns AllFailedTimeout', async () => {
+    const getSourceControlCrewInfo = jest.fn();
+    mockCrewEffectResponse = {
+      ...mockInitCrewEffectResponse,
+      stepFailedStatus: MetricsDataFailStatus.AllFailedTimeout,
+      getSourceControlCrewInfo,
+    };
+    mockSourceControlSettings = [
+      { id: 0, organization: 'mockOrgName', repo: 'mockRepoName', branches: ['mockBranch1'] },
+      { id: 1, organization: 'mockOrgName', repo: 'mockRepoName', branches: ['mockBranch2'] },
+    ];
+    setup();
+
+    const retryButton = screen.getByLabelText('retry button');
+
+    expect(screen.getByLabelText('Error UI for pipeline settings')).toBeInTheDocument();
+    expect(retryButton).toBeInTheDocument();
+
+    await act(async () => {
+      await userEvent.click(retryButton);
+    });
+
+    expect(getSourceControlCrewInfo).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/..._/containers/MetricsStep/SourceControlConfiguration/SourceControlMetricSelection.test.tsx b/..._/containers/MetricsStep/SourceControlConfiguration/SourceControlMetricSelection.test.tsx
@@ -235,32 +235,23 @@ describe('SourceControlMetricSelection', () => {
     expect(myDispatch).toHaveBeenCalledTimes(1);
   });
 
-  it('should add partial failed 4xx notification when any failed status is PartialFailedNoCards', async () => {
+  it('should add partial failed 4xx notification when any failed status is PartialFailedTimeout', async () => {
     mockCrewEffectResponse = {
       ...mockCrewEffectResponse,
-      stepFailedStatus: MetricsDataFailStatus.PartialFailedNoCards,
+      stepFailedStatus: MetricsDataFailStatus.PartialFailedTimeout,
     };
     setup();
 
     expect(myDispatch).toHaveBeenCalledTimes(1);
   });
 
-  it('should set error info when any request return error', () => {
-    mockRepoEffectResponse = {
-      ...mockRepoEffectResponse,
-      info: {
-        code: 404,
-        errorTitle: 'error title',
-        errorMessage: 'error message',
-      },
+  it('should update error info when any failed status is AllFailedTimeout', async () => {
+    mockCrewEffectResponse = {
+      ...mockCrewEffectResponse,
+      stepFailedStatus: MetricsDataFailStatus.AllFailedTimeout,
     };
     setup();
 
     expect(handleUpdateErrorInfo).toHaveBeenCalledTimes(1);
-    expect(handleUpdateErrorInfo).toBeCalledWith({
-      code: 404,
-      errorTitle: 'error title',
-      errorMessage: 'error message',
-    });
   });
 });