Update tests

packages/fhir-import/src/containers/ImportDetailOverView/index.css → packages/fhir-import/src/containers/ImportDetailView/index.css

@@ -20,4 +20,14 @@
     margin: 0;
     color: #fff;
     /* Color for the terminal text */
+}
+
+.view-details-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 16px;
+    gap: 14px;
+    background: #FFF;
+    border-radius: 12px;
 }

packages/fhir-import/src/containers/ImportDetailOverView/index.tsx → packages/fhir-import/src/containers/ImportDetailView/index.tsx

@@ -1,16 +1,8 @@
-import React, { Fragment } from 'react';
-import { Col, Button, Alert, Spin, Tabs } from 'antd';
-import { CloseOutlined, SyncOutlined } from '@ant-design/icons';
+import React from 'react';
+import { Spin, Tabs } from 'antd';
 import { useQuery } from 'react-query';
 import {
   BrokenPage,
-  FHIRServiceClass,
-  getObjLike,
-  IdentifierUseCodes,
-  getResourcesFromBundle,
-  parseFhirHumanName,
-  viewDetailsQuery,
-  useSearchParams,
 } from '@opensrp/react-utils';
 import { dataImportRQueryKey, IMPORT_DOMAIN_URI } from '../../constants';
 import { useTranslation } from '../../mls';
@@ -27,17 +19,14 @@ export interface RouteComponentProps {
 }
 
 /**
- * component that renders the details view to the right side
- * of list view
+ * Details view for a single workflow during bulk uploads.
  *
  * @param props - detail view component props
  */
-export const ImportDetailViewDetails = (props: RouteComponentProps) => {
+export const ImportDetailViewDetails = (_: RouteComponentProps) => {
   const params = useParams<RouteComponentProps>();
   const workflowId = params.workflowId;
   const { t } = useTranslation();
-  const { removeParam } = useSearchParams();
-  console.log("We got here", { workflowId })
 
   const { data, isLoading, error } = useQuery(
     [dataImportRQueryKey, workflowId], () => {
@@ -56,7 +45,7 @@ export const ImportDetailViewDetails = (props: RouteComponentProps) => {
   }
 
   if (error && !data) {
-    return <BrokenPage errorMessage={`${(error as Error).message}`} />;
+    return <BrokenPage errorMessage={`An Error occurred when fetching this workflow`} />;
   }
 
   if (!data) {
@@ -92,18 +81,7 @@ export const ImportDetailViewDetails = (props: RouteComponentProps) => {
       <Helmet>
         <title>{pageTitle} </title>
       </Helmet>
-      <div
-        // TODO remove style
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'flex-start',
-          padding: '16px',
-          gap: '14px',
-          background: '#FFF',
-          borderRadius: '12px',
-        }}
-      >
+      <div className='view-details-container'>
         <ResourceDetails
           title={data.workflowType}
           headerLeftData={headerLeftData}

packages/fhir-import/src/containers/ImportDetailView/tests/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Care Teams list view renders correctly: innerDetailsText 1`] = `
+"orgToLocationAssignmentcompletedID: 26aae779-0e6f-482d-82c3-a0fad1fd3689_orgToLocationAssignmentDate Created07/04/2024, 12:26:51 PMWorkflow typeorgToLocationAssignmentDate Started07/04/2024, 12:26:51 PMDate Ended07/04/2024, 12:26:53 PMAuthorLog OutputProgress::Reading csv 
+Start time: 15:26:53
+Starting csv import...
+Reading csv file
+Returning records from csv file
+Unsupported request!
+{ \\"final-response\\": }
+End time: 15:26:53
+Total time: 0.002815 seconds
+"
+`;

packages/fhir-import/src/containers/ImportDetailView/tests/index.test.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { authenticateUser } from '@onaio/session-reducer';
+import { Route, Router, Switch } from 'react-router';
+import nock from 'nock';
+import * as reactQuery from 'react-query';
+import { waitForElementToBeRemoved, render, cleanup } from '@testing-library/react';
+import { store } from '@opensrp/store';
+import * as constants from '../../../constants';
+import { createMemoryHistory } from 'history';
+import { RoleContext } from '@opensrp/rbac';
+import { superUserRole } from '@opensrp/react-utils';
+import { ImportDetailViewDetails } from '..';
+import { workflows } from '../../ImportListView/tests/fixtures';
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const fetch = require('node-fetch');
+global.fetch = fetch;
+
+jest.mock('../../../constants', () => {
+  return {
+    __esModule: true,
+    ...Object.assign({}, jest.requireActual('../../../constants')),
+    IMPORT_DOMAIN_URI: 'http://localhost',
+  };
+});
+
+const { QueryClient, QueryClientProvider } = reactQuery;
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      cacheTime: 0,
+    },
+  },
+});
+
+jest.mock('@opensrp/notifications', () => ({
+  __esModule: true,
+  ...Object.assign({}, jest.requireActual('@opensrp/notifications')),
+}));
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const AppWrapper = (props: any) => {
+  return (
+    <Provider store={store}>
+      <QueryClientProvider client={queryClient}>
+        <RoleContext.Provider value={superUserRole}>
+          <Switch>
+            <Route exact path={`${constants.DATA_IMPORT_DETAIL_URL}/:workflowId`}>
+              {(routeProps) => <ImportDetailViewDetails {...{ ...props, ...routeProps }} />}
+            </Route>
+          </Switch>
+        </RoleContext.Provider>
+      </QueryClientProvider>
+    </Provider>
+  );
+};
+
+describe('Care Teams list view', () => {
+  beforeAll(() => {
+    nock.disableNetConnect();
+    store.dispatch(
+      authenticateUser(
+        true,
+        {
+          email: 'bob@example.com',
+          name: 'Bobbie',
+          username: 'RobertBaratheon',
+        },
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        { api_token: 'hunter2', oAuth2Data: { access_token: 'sometoken', state: 'abcde' } }
+      )
+    );
+  });
+  afterAll(() => {
+    nock.enableNetConnect();
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+    jest.clearAllMocks();
+    jest.restoreAllMocks();
+    cleanup();
+  });
+
+  it('renders correctly', async () => {
+    nock(constants.IMPORT_DOMAIN_URI).get('/$import/workflowId').reply(200, workflows[0]).persist();
+
+    const history = createMemoryHistory();
+    history.push(`${constants.DATA_IMPORT_DETAIL_URL}/workflowId`);
+
+    render(
+      <Router history={history}>
+        <AppWrapper />
+      </Router>
+    );
+
+    await waitForElementToBeRemoved(document.querySelector('.ant-spin'));
+    expect(nock.pendingMocks()).toEqual([]);
+
+    expect(document.querySelector('title')).toMatchInlineSnapshot(`
+      <title>
+        View details | 26aae779-0e6f-482d-82c3-a0fad1fd3689_orgToLocationAssignment 
+      </title>
+    `);
+
+    expect(document.querySelector(".view-details-container")!.textContent).toMatchSnapshot("innerDetailsText");
+
+    expect(nock.pendingMocks()).toEqual([]);
+  });
+});