feat: display system info & update logic mapping template to accommod…

…ate mapping template upgrade changes (#79)

kraken-app/kraken-app-portal/src/__test__/components/layout/index.test.tsx

@@ -0,0 +1,67 @@
+import { fireEvent, render, waitFor } from "@/__test__/utils"
+import BasicLayout from "@/components/Layout/BasicLayout"
+import * as hooks from '@/hooks/user'
+
+beforeEach(() => {
+  vi.clearAllMocks()
+})
+
+describe('layout and related component testing', () => {
+  it('should render basic layout', async () => {
+    vi.spyOn(hooks, 'useGetSystemInfo').mockReturnValue({
+      data: {
+        "id": "1bba3aa0-6f40-4974-8e77-59674227f783",
+        "createdAt": "2024-10-15T05:14:56.363035Z",
+        "updatedAt": "2024-10-29T07:01:21.530939Z",
+        "controlProductVersion": "V1.0",
+        "stageProductVersion": "V1.5.1",
+        "productionProductVersion": "V1.5.1",
+        "controlAppVersion": "0.285.0",  // control plane kraken version which will show up in the tooltip
+        "productKey": "mef.sonata",
+        "productName": "MEF LSO Sonata",
+        "productSpec": "grace", // standard version
+        "key": "CONTROL_PLANE",
+        "status": "MAPPING",  //mapping template upgrading status, if it is not RUNNING, it means it is in upgrading process
+        "productionAppVersion": "0.284.0",  // production data plane kraken version which will show up in the UI and tooltip
+        "stageAppVersion": "0.284.0" //stage data plane kraken version which will show up in the tooltip
+      },
+      isFetching: false,
+      isLoading: false,
+      refetch: vi.fn()
+    } as any)
+
+    const { getByTestId } = render(<BasicLayout />)
+
+    // Side bar navigation
+    await waitFor(() =>
+      expect(getByTestId('productionAppVersion')).toBeInTheDocument())
+    expect(getByTestId('productionAppVersion')).toHaveTextContent('0.284.0')
+
+    const appVersionsIndicator = getByTestId('appVersionsIndicator')
+    expect(appVersionsIndicator).toBeInTheDocument()
+
+    fireEvent.mouseEnter(appVersionsIndicator)
+    await waitFor(() => expect(getByTestId('headline')).toBeInTheDocument())
+    expect(getByTestId('vProductionAppVersion')).toHaveTextContent('0.284.0')
+    expect(getByTestId('vStageAppVersion')).toHaveTextContent('0.284.0')
+    expect(getByTestId('vControlPlaneAppVersion')).toHaveTextContent('0.285.0')
+
+    // Header component
+    await waitFor(() =>
+      expect(getByTestId('logo')).toBeInTheDocument())
+    expect(getByTestId('productName')).toHaveTextContent('MEF LSO Sonata')
+    expect(getByTestId('productSpec')).toHaveTextContent('grace')
+
+    expect(getByTestId('mappingInProgress')).toBeInTheDocument()
+
+    const userAvatar = getByTestId('username')
+    expect(userAvatar).toBeInTheDocument()
+
+    fireEvent.mouseEnter(userAvatar)
+
+    await waitFor(() =>
+      expect(getByTestId('logoutOpt')).toBeInTheDocument())
+
+    fireEvent.click(getByTestId('logoutOpt'))
+  })
+})

kraken-app/kraken-app-portal/src/__test__/pages/MappingTemplateV2/components.test.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, render } from "@/__test__/utils";
 import { ApiCard } from "@/components/ApiMapping";
+import { ApiList } from "@/pages/MappingTemplatev2/UpgradePlane/components/ApiList";
 import { ApiListSkeleton } from "@/pages/MappingTemplatev2/UpgradePlane/components/ApiListSkeleton";
 import { DeprecatedModal } from "@/pages/MappingTemplatev2/UpgradePlane/components/DeprecatedModal";
 import { IncompatibleMappingModal } from "@/pages/MappingTemplatev2/UpgradePlane/components/IncompatibleMappingModal";
@@ -29,9 +30,6 @@ describe("components used in mapping template v2 pages", () => {
     expect(buttons[1]).toHaveTextContent("Got it");
     fireEvent.click(buttons[1]);
     expect(handleOk).toHaveBeenCalledTimes(1);
-
-    fireEvent.click(buttons[0]);
-    expect(handleCancel).toHaveBeenCalledTimes(1);
   });
 
   it("should render stage version incompatible warning modal", () => {
@@ -55,9 +53,6 @@ describe("components used in mapping template v2 pages", () => {
     expect(buttons[1]).toHaveTextContent("Got it");
     fireEvent.click(buttons[1]);
     expect(handleOk).toHaveBeenCalledTimes(1);
-
-    fireEvent.click(buttons[0]);
-    expect(handleCancel).toHaveBeenCalledTimes(1);
   });
 
   it("should render upgrade confirm modal", () => {
@@ -149,4 +144,19 @@ describe("components used in mapping template v2 pages", () => {
     const { container } = render(<ListVersionSkeleton />);
     expect(container).toBeInTheDocument();
   });
+
+  it('should render api list', () => {
+    const handleClick = vi.fn()
+    const { getByTestId, getAllByTestId } = render(<ApiList loading title="mock_title" clickable highlights={{ 'mock_mapper_target': true }} indicators={['incomplete']} details={[{
+      targetMapperKey: 'mock_mapper_target',
+      mappingStatus: 'incomplete',
+      path: '/a/b/c/d'
+    }] as any}
+    statusIndicatorPosition='right' onItemClick={handleClick} />)
+    expect(getByTestId('mappingListTitle')).toHaveTextContent('mock_title')
+
+    const useCase = getAllByTestId('useCase')[0]
+    fireEvent.click(useCase)
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
 });