chore: fix tests on ReportOverview

DEVSU-2179

Author: kttkjl

app/views/ReportView/components/Appendices/components/ReportOverview/__tests__/ReportOverview.test.tsx

@@ -1,17 +1,22 @@
 import React from 'react';
-import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import {
+  render, screen, waitFor, fireEvent, within,
+} from '@testing-library/react';
 
-import ReportOverview from '..';
+import { ReportOverview, ReportOverviewProps } from '..';
 
 jest.mock('@/services/api');
 jest.mock('@/services/SnackbarUtils');
 
-const defaultReportOverviewProps = {
-  canEdit: false,
-  isNew: false,
-  templateId: '123456-uuid',
-  text: 'Test Text',
+const defaultReportOverviewProps: ReportOverviewProps = {
   isPrint: false,
+  canEditReportAppendix: false,
+  canEditTemplateAppendix: false,
+  isNewTemplate: false,
+  templateId: '123456-uuid',
+  templateSpecificText: 'template text',
+  reportId: '7890-uuid',
+  reportSpecificText: 'report text',
 };
 
 describe('ReportOverview', () => {
@@ -21,17 +26,46 @@ describe('ReportOverview', () => {
         {...defaultReportOverviewProps}
       />,
     );
-    expect(await screen.findByText('Test Text')).toBeInTheDocument();
+    expect(await screen.findByText(defaultReportOverviewProps.templateSpecificText)).toBeInTheDocument();
+    expect(await screen.findByText(defaultReportOverviewProps.reportSpecificText)).toBeInTheDocument();
   });
 
-  test('Show a fab button to edit if record is editable', () => {
-    const { getByRole } = render(
+  test('Show a fab button to edit report appendix if is editable', () => {
+    const { getByText } = render(
       <ReportOverview
         {...defaultReportOverviewProps}
-        canEdit={true}
+        canEditReportAppendix
       />,
     );
-    const buttonEl = getByRole('button');
+    const buttonEl = getByText('Report Appendix');
+    expect(buttonEl).not.toBeDisabled();
+    expect(buttonEl).toBeTruthy();
+  });
+
+  test('Show a fab button to edit template appendix if is editable', () => {
+    const { getByText } = render(
+      <ReportOverview
+        {...defaultReportOverviewProps}
+        canEditTemplateAppendix
+      />,
+    );
+    const buttonEl = getByText('Template Appendix');
+    expect(buttonEl).not.toBeDisabled();
+    expect(buttonEl).toBeTruthy();
+  });
+
+  test('Show both fab button to edit report + template appendix if is editable', () => {
+    const { getByText } = render(
+      <ReportOverview
+        {...defaultReportOverviewProps}
+        canEditTemplateAppendix
+        canEditReportAppendix
+      />,
+    );
+    let buttonEl = getByText('Template Appendix');
+    expect(buttonEl).not.toBeDisabled();
+    expect(buttonEl).toBeTruthy();
+    buttonEl = getByText('Report Appendix');
     expect(buttonEl).not.toBeDisabled();
     expect(buttonEl).toBeTruthy();
   });
@@ -51,31 +85,64 @@ describe('ReportOverview', () => {
     const { queryByRole, getByText } = render(
       <ReportOverview
         {...defaultReportOverviewProps}
-        canEdit={true}
-        isPrint={true}
-        text={'Sir, this is a wendy\'s'}
+        canEditTemplateAppendix
+        canEditReportAppendix
+        isPrint
+        reportSpecificText={'Sir, this is a wendy\'s'}
+        templateSpecificText={'Madam, this is a wendy\'s'}
       />,
     );
     await waitFor(() => { expect(queryByRole('button')).toBeNull(); });
     expect(getByText('Sir, this is a wendy\'s')).toBeInTheDocument();
+    expect(getByText('Madam, this is a wendy\'s')).toBeInTheDocument();
+  });
+
+  test('Opens a dialog to edit template appendix text when fab is clicked', async () => {
+    const { getByRole, queryByRole, getByText } = render(
+      <ReportOverview
+        {...defaultReportOverviewProps}
+        canEditTemplateAppendix
+        canEditReportAppendix
+      />,
+    );
+
+    await waitFor(() => {
+      expect(queryByRole('dialog')).toBeNull();
+    });
+    const buttonEl = getByText('Template Appendix');
+    await waitFor(() => {
+      fireEvent.click(buttonEl);
+    });
+    const dialogDiv = getByRole('dialog');
+    expect(dialogDiv).toBeInTheDocument();
+    expect(within(dialogDiv).getByText(
+      defaultReportOverviewProps.templateSpecificText,
+    )).toBeInTheDocument();
+    expect(getByText('Edit Appendix')).toBeInTheDocument();
   });
 
-  test('Opens a dialog to edit record when fab is clicked', async () => {
-    const { getByRole, queryByRole } = render(
+  test('Opens a dialog to edit report appendix text when fab is clicked', async () => {
+    const { getByRole, queryByRole, getByText } = render(
       <ReportOverview
         {...defaultReportOverviewProps}
-        canEdit={true}
+        canEditTemplateAppendix
+        canEditReportAppendix
       />,
     );
 
     await waitFor(() => {
       expect(queryByRole('dialog')).toBeNull();
     });
-    const buttonEl = getByRole('button');
+    const buttonEl = getByText('Report Appendix');
     await waitFor(() => {
       fireEvent.click(buttonEl);
     });
-    expect(getByRole('dialog')).toBeInTheDocument();
+    const dialogDiv = getByRole('dialog');
+    expect(dialogDiv).toBeInTheDocument();
+    expect(within(dialogDiv).getByText(
+      defaultReportOverviewProps.reportSpecificText,
+    )).toBeInTheDocument();
+    expect(getByText('Edit Appendix')).toBeInTheDocument();
   });
 
   // These tests are TODO for now since the React-Quill component cannot be targetted for change

app/views/ReportView/components/Appendices/components/ReportOverview/index.tsx

@@ -216,4 +216,4 @@ const ReportOverview = ({
 };
 
 export default ReportOverview;
-export { ReportOverviewProps };
+export { ReportOverview, ReportOverviewProps };