test(Process): ✅ Add process unit tests (#212)

mocks/data/PROCESS_PAIRS.json

@@ -10,7 +10,8 @@
       "sourceId": "process-op",
       "sourceName": "process op",
       "destinationId": "process-2-xy",
-      "destinationName": "process 2-xy"
+      "destinationName": "process 2-xy",
+      "protocol": "http2"
     },
     {
       "recType": "FLOWAGGREGATE",
@@ -22,7 +23,8 @@
       "sourceId": "process-op",
       "sourceName": "process op",
       "destinationId": "process-2-tr",
-      "destinationName": "process 2-tr"
+      "destinationName": "process 2-tr",
+      "protocol": "http2"
     },
     {
       "recType": "FLOWAGGREGATE",
@@ -34,7 +36,8 @@
       "sourceId": "process-za",
       "sourceName": "process za",
       "destinationId": "process-2-tr",
-      "destinationName": "process 2-tr"
+      "destinationName": "process 2-tr",
+      "protocol": "http2"
     }
   ],
   "queryParams": {

mocks/server.ts

@@ -214,8 +214,8 @@ export function loadMockServer() {
         }
 
         const results = processPairs.results.filter(
-          ({ sourceId, endTime }: ProcessPairsResponse) =>
-            sourceId === queryParams.sourceId && endTime === Number(queryParams.endTime)
+          ({ sourceId, destinationId }: ProcessPairsResponse) =>
+            sourceId === queryParams.sourceId || destinationId === queryParams.destinationId
         );
 
         return { ...processPairs, results };

src/config/testIds.config.ts

@@ -2,6 +2,7 @@ export const getTestsIds = {
   loadingView: () => 'sk-loading-view',
   sitesView: () => 'sk-sites-view',
   componentsView: () => 'sk-components-view',
+  processesView: () => 'sk-processes-view',
   notFoundView: () => `sk-not-found-view`,
   siteView: (id: string) => `sk-site-view-${id}`,
   componentView: (id: string) => `sk-component-view-${id}`,

src/pages/Processes/__tests__/Process.spec.tsx

@@ -0,0 +1,73 @@
+import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
+import { Server } from 'miragejs';
+import * as router from 'react-router';
+
+import { ProcessResponse } from '@API/REST.interfaces';
+import { getTestsIds } from '@config/testIds.config';
+import { Wrapper } from '@core/components/Wrapper';
+import processesData from '@mocks/data/PROCESSES.json';
+import { loadMockServer } from '@mocks/server';
+
+import Process from '../views/Process';
+
+const processResult = processesData.results[0] as ProcessResponse;
+
+describe('Process component', () => {
+  let server: Server;
+  beforeEach(() => {
+    server = loadMockServer() as Server;
+    server.logging = false;
+    // Mock URL query parameters and inject them into the component
+    jest.spyOn(router, 'useParams').mockReturnValue({ id: `${processResult.name}@${processResult.identity}` });
+  });
+
+  afterEach(() => {
+    server.shutdown();
+    jest.clearAllMocks();
+  });
+
+  it('should render the Process view after the data loading is complete', async () => {
+    render(
+      <Wrapper>
+        <Process />
+      </Wrapper>
+    );
+    // Wait for all queries to resolve
+    expect(screen.getByTestId(getTestsIds.loadingView())).toBeInTheDocument();
+    // Wait for the loading page to disappear before continuing with the test.
+    await waitForElementToBeRemoved(() => screen.getByTestId(getTestsIds.loadingView()));
+
+    expect(screen.getByTestId(getTestsIds.processView(processResult.identity))).toBeInTheDocument();
+  });
+
+  it('should render the title, description data and processes associated the data loading is complete', async () => {
+    render(
+      <Wrapper>
+        <Process />
+      </Wrapper>
+    );
+    await waitForElementToBeRemoved(() => screen.getByTestId(getTestsIds.loadingView()));
+
+    expect(screen.getByRole('sk-heading')).toHaveTextContent(processResult.name);
+    expect(screen.getByText(processResult.parentName)).toBeInTheDocument();
+    expect(screen.getByText(processResult.groupName)).toBeInTheDocument();
+    expect(screen.getByText(processResult.hostName)).toBeInTheDocument();
+    expect(screen.getByText(processResult.sourceHost)).toBeInTheDocument();
+    expect(screen.getByText(processResult.imageName)).toBeInTheDocument();
+    expect(screen.getByText(processResult.imageName)).toBeInTheDocument();
+  });
+
+  it('Should ensure the Process associated renders with correct link href after loading page', async () => {
+    render(
+      <Wrapper>
+        <Process />
+      </Wrapper>
+    );
+    await waitForElementToBeRemoved(() => screen.getByTestId(getTestsIds.loadingView()));
+
+    expect(screen.getByRole('link', { name: processesData.results[3].name })).toHaveAttribute(
+      'href',
+      `#/processes/${processesData.results[3].name}@${processesData.results[3].identity}`
+    );
+  });
+});

src/pages/Processes/__tests__/Processes.spec.tsx

@@ -0,0 +1,105 @@
+import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
+import { Server } from 'miragejs';
+
+import { getTestsIds } from '@config/testIds.config';
+import { Wrapper } from '@core/components/Wrapper';
+import processesData from '@mocks/data/PROCESSES.json';
+import { loadMockServer } from '@mocks/server';
+
+import Processes from '../views/Processes';
+
+const processesResults = processesData.results;
+
+describe('Begin testing the Processes component', () => {
+  let server: Server;
+
+  beforeEach(() => {
+    server = loadMockServer() as Server;
+    server.logging = false;
+  });
+
+  afterEach(() => {
+    server.shutdown();
+    jest.clearAllMocks();
+  });
+
+  it('should render a loading page when data is loading', () => {
+    render(
+      <Wrapper>
+        <Processes />
+      </Wrapper>
+    );
+
+    expect(screen.getByTestId(getTestsIds.loadingView())).toBeInTheDocument();
+  });
+
+  it('should render the Processes view after the data loading is complete', async () => {
+    render(
+      <Wrapper>
+        <Processes />
+      </Wrapper>
+    );
+
+    expect(screen.getByTestId(getTestsIds.loadingView())).toBeInTheDocument();
+
+    await waitForElementToBeRemoved(() => screen.getByTestId(getTestsIds.loadingView()));
+    expect(screen.getByTestId(getTestsIds.processesView())).toBeInTheDocument();
+  });
+
+  it('should render a table with the Processes data after the data has loaded.', async () => {
+    render(
+      <Wrapper>
+        <Processes />
+      </Wrapper>
+    );
+
+    await waitForElementToBeRemoved(() => screen.getByTestId(getTestsIds.loadingView()));
+
+    expect(screen.getByText(processesResults[0].name)).toBeInTheDocument();
+  });
+
+  it('Should ensure the Processes component renders with correct Name link href after loading page', async () => {
+    render(
+      <Wrapper>
+        <Processes />
+      </Wrapper>
+    );
+
+    await waitForElementToBeRemoved(() => screen.getByTestId(getTestsIds.loadingView()));
+
+    expect(screen.getByRole('link', { name: processesResults[0].name })).toHaveAttribute(
+      'href',
+      `#/processes/${processesResults[0].name}@${processesResults[0].identity}`
+    );
+  });
+
+  it('Should ensure the Processes component renders with correct Component link href after loading page', async () => {
+    render(
+      <Wrapper>
+        <Processes />
+      </Wrapper>
+    );
+
+    await waitForElementToBeRemoved(() => screen.getByTestId(getTestsIds.loadingView()));
+
+    expect(screen.getAllByRole('link', { name: processesResults[0].groupName })[0]).toHaveAttribute(
+      'href',
+      `#/components/${processesResults[0].groupName}@${processesResults[0].groupIdentity}`
+    );
+  });
+
+  it('Should ensure the Processes component renders with correct Site link href after loading page', async () => {
+    render(
+      <Wrapper>
+        <Processes />
+      </Wrapper>
+    );
+
+    await waitForElementToBeRemoved(() => screen.getByTestId(getTestsIds.loadingView()));
+
+    expect(screen.getAllByRole('link', { name: processesResults[0].parentName })[0]).toHaveAttribute(
+      'href',
+      `#/sites/${processesResults[0].parentName}@${processesResults[0].parent}`
+    );
+  });
+});

src/pages/Processes/components/ProcessDescription.tsx

@@ -48,10 +48,6 @@ const ProcessDescription: FC<{ process: ProcessResponse; title: string | JSX.Ele
     RESTApi.fetchAddressesByProcess(identity)
   );
 
-  if (!addresses) {
-    return null;
-  }
-
   return (
     <Card isFullHeight isRounded>
       <CardTitle>
@@ -118,7 +114,7 @@ const ProcessDescription: FC<{ process: ProcessResponse; title: string | JSX.Ele
               </DescriptionListGroup>
             </GridItem>
 
-            {!!addresses.length && (
+            {!!addresses?.length && (
               <GridItem span={6}>
                 <DescriptionListGroup>
                   <DescriptionListTerm>{ProcessesLabels.Addresses}</DescriptionListTerm>

src/pages/Processes/views/Processes.tsx

@@ -4,6 +4,7 @@ import { useQuery } from '@tanstack/react-query';
 
 import { RESTApi } from '@API/REST.api';
 import { BIG_PAGINATION_SIZE } from '@config/config';
+import { getTestsIds } from '@config/testIds.config';
 import SkTable from '@core/components/SkTable';
 import SkTitle from '@core/components/SkTitle';
 import TransitionPage from '@core/components/TransitionPages/Slide';
@@ -48,7 +49,7 @@ const Processes = function () {
 
   return (
     <TransitionPage>
-      <>
+      <div data-testid={getTestsIds.processesView()}>
         <SkTitle title={ProcessesLabels.Section} description={ProcessesLabels.Description} />
         <div>
           <SkTable
@@ -61,7 +62,7 @@ const Processes = function () {
             onGetFilters={handleGetFilters}
           />
         </div>
-      </>
+      </div>
     </TransitionPage>
   );
 };