feat: UILD-406: unit tests

src/components/ExternalResourceLoader/ExternalResourceLoader.tsx

@@ -6,7 +6,7 @@ export const ExternalResourceLoader = () => {
   const { externalId } = useParams();
 
   return (
-    <div className="external-resource-loader">
+    <div className="external-resource-loader" data-testid="external-resource-loader">
       <div className="contents">
         <FormattedMessage id="ld.fetchingExternalResourceById" values={{ resourceId: externalId }} />
       </div>

src/test/__mocks__/common/hooks/useRecordControls.mock.ts

@@ -4,6 +4,7 @@ export const discardRecord = jest.fn();
 export const fetchRecord = jest.fn();
 export const clearRecordState = jest.fn();
 export const fetchRecordAndSelectEntityValues = jest.fn();
+export const fetchExternalRecordForPreview = jest.fn();
 
 jest.mock('@common/hooks/useRecordControls', () => ({
   useRecordControls: () => ({
@@ -13,5 +14,6 @@ jest.mock('@common/hooks/useRecordControls', () => ({
     clearRecordState,
     saveRecordLocally,
     fetchRecordAndSelectEntityValues,
+    fetchExternalRecordForPreview,
   }),
 }));

src/test/__tests__/components/PreviewExternalResourceControls.test.tsx

@@ -0,0 +1,27 @@
+import { PreviewExternalResourceControls } from '@components/PreviewExternalResourceControls';
+import { fireEvent, screen } from '@testing-library/dom';
+import { render } from '@testing-library/react';
+import { RecoilRoot } from 'recoil';
+
+const navigate = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => navigate,
+}));
+
+describe('PreviewExternalResourceControls', () => {
+  beforeEach(() =>
+    render(
+      <RecoilRoot>
+        <PreviewExternalResourceControls />
+      </RecoilRoot>,
+    ),
+  );
+
+  test('navigates back', () => {
+    fireEvent.click(screen.getByTestId('close-external-preview-button'));
+
+    expect(navigate).toHaveBeenCalled();
+  });
+});

src/test/__tests__/components/PreviewExternalResourcePane.test.tsx

@@ -0,0 +1,37 @@
+import { PreviewExternalResourcePane } from '@components/PreviewExternalResourcePane';
+import state from '@state';
+import { fireEvent, screen } from '@testing-library/dom';
+import { render } from '@testing-library/react';
+import { RecoilRoot } from 'recoil';
+
+const navigate = jest.fn();
+const getRecordTitle = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => navigate,
+}));
+
+jest.mock('@common/helpers/record.helper', () => ({
+  getRecordTitle: () => getRecordTitle(),
+}));
+
+describe('PreviewExternalResourcePane', () => {
+  beforeEach(() =>
+    render(
+      <RecoilRoot initializeState={snapshot => snapshot.set(state.inputs.record, {})}>
+        <PreviewExternalResourcePane />
+      </RecoilRoot>,
+    ),
+  );
+
+  test('invokes getRecordTitle', () => {
+    expect(getRecordTitle).toHaveBeenCalled();
+  });
+
+  test('navigates back', () => {
+    fireEvent.click(screen.getByTestId('nav-close-button'));
+
+    expect(navigate).toHaveBeenCalled();
+  });
+});

src/test/__tests__/views/ExternalResourcePreview.test.tsx

@@ -0,0 +1,48 @@
+import { fetchExternalRecordForPreview } from '@src/test/__mocks__/common/hooks/useRecordControls.mock';
+import '@src/test/__mocks__/common/hooks/useRecordControls.mock';
+import state from '@state';
+import { render, screen } from '@testing-library/react';
+import { ExternalResourcePreview } from '@views';
+import { Fragment, ReactNode } from 'react';
+import { RecoilRoot } from 'recoil';
+
+jest.mock('@common/constants/build.constants', () => ({ IS_EMBEDDED_MODE: false }));
+
+jest.mock('react-intl', () => ({
+  FormattedMessage: ({ id, values }: any) => {
+    return (
+      <div id={id}>
+        {Object.entries(values).map(([k, v]) => (
+          <Fragment key={k}>{v as ReactNode}</Fragment>
+        ))}
+      </div>
+    );
+  },
+}));
+
+describe('ExternalResourcePreview', () => {
+  const renderComponent = (withRecord = false) =>
+    render(
+      <RecoilRoot initializeState={snapshot => snapshot.set(state.inputs.record, withRecord ? {} : null)}>
+        <ExternalResourcePreview />
+      </RecoilRoot>,
+    );
+
+  test('calls fetchExternalRecordForPreview on externalId change', () => {
+    renderComponent();
+
+    expect(fetchExternalRecordForPreview).toHaveBeenCalled();
+  });
+
+  test('renders ExternalResourceLoader if no record is present', () => {
+    renderComponent();
+
+    expect(screen.getByTestId('external-resource-loader')).toBeInTheDocument();
+  });
+
+  test('renders Preview if record is present', () => {
+    renderComponent(true);
+
+    expect(screen.getByTestId('preview-fields')).toBeInTheDocument();
+  });
+});