Disable confirm button if there is not exactly 1 primary email for th…

…e person
CruGlobal · Jul 26, 2024 · 27c2f63 · 27c2f63
1 parent ad84715
commit 27c2f63
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 13 deletions.
diff --git a/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.test.tsx b/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.test.tsx
@@ -44,15 +44,20 @@ const person: PersonInvalidEmailFragment = {
 const setContactFocus = jest.fn();
 const handleSingleConfirm = jest.fn();
 
-const TestComponent = ({ mocks }: { mocks: ApolloErgonoMockMap }) => {
-  const handleChangeMock = jest.fn();
-  const handleDeleteModalOpenMock = jest.fn();
-  const handleChangePrimaryMock = jest.fn();
-  const dataState = {
+const TestComponent = ({
+  mocks,
+  dataState = {
     contactTestId: {
       emailAddresses: person.emailAddresses.nodes as EmailAddressData[],
     },
-  } as { [key: string]: PersonEmailAddresses };
+  },
+}: {
+  mocks?: ApolloErgonoMockMap;
+  dataState?: { [key: string]: PersonEmailAddresses };
+}) => {
+  const handleChangeMock = jest.fn();
+  const handleDeleteModalOpenMock = jest.fn();
+  const handleChangePrimaryMock = jest.fn();
 
   return (
     <ThemeProvider theme={theme}>
@@ -201,4 +206,66 @@ describe('FixEmailAddressPerson', () => {
       });
     });
   });
+
+  describe('confirm button', () => {
+    it('should disable confirm button if there is more than one primary email', async () => {
+      const dataState = {
+        contactTestId: {
+          emailAddresses: [
+            {
+              ...person.emailAddresses.nodes[0],
+              primary: true,
+            },
+            {
+              ...person.emailAddresses.nodes[1],
+              primary: true,
+            },
+          ] as EmailAddressData[],
+        },
+      };
+
+      const { getByRole, queryByRole } = render(
+        <TestComponent dataState={dataState} />,
+      );
+
+      await waitFor(() => {
+        expect(queryByRole('loading')).not.toBeInTheDocument();
+        expect(getByRole('button', { name: 'Confirm' })).toBeDisabled();
+      });
+    });
+
+    it('should disable confirm button if there are no primary emails', async () => {
+      const dataState = {
+        contactTestId: {
+          emailAddresses: [
+            {
+              ...person.emailAddresses.nodes[0],
+              primary: false,
+            },
+            {
+              ...person.emailAddresses.nodes[1],
+              primary: false,
+            },
+          ] as EmailAddressData[],
+        },
+      };
+      const { getByRole, queryByRole } = render(
+        <TestComponent dataState={dataState} />,
+      );
+
+      await waitFor(() => {
+        expect(queryByRole('loading')).not.toBeInTheDocument();
+        expect(getByRole('button', { name: 'Confirm' })).toBeDisabled();
+      });
+    });
+
+    it('should not disable confirm button if there is exactly one primary email', async () => {
+      const { getByRole, queryByRole } = render(<TestComponent />);
+
+      await waitFor(() => {
+        expect(queryByRole('loading')).not.toBeInTheDocument();
+        expect(getByRole('button', { name: 'Confirm' })).not.toBeDisabled();
+      });
+    });
+  });
 });
diff --git a/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.tsx b/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.tsx
@@ -144,6 +144,10 @@ export const FixEmailAddressPerson: React.FC<FixEmailAddressPersonProps> = ({
     setContactFocus(contactId);
   };
 
+  const hasOnePrimaryEmail = (): boolean => {
+    return emails.filter((email) => email.primary)?.length === 1;
+  };
+
   return (
     <Container container>
       <Grid container>
@@ -303,6 +307,7 @@ export const FixEmailAddressPerson: React.FC<FixEmailAddressPersonProps> = ({
                 onClick={() =>
                   handleSingleConfirm(person, emails as EmailAddressData[])
                 }
+                disabled={!hasOnePrimaryEmail()}
               >
                 <ConfirmButtonIcon />
                 {t('Confirm')}

diff --git a/src/components/Tool/FixEmailAddresses/FixEmailAddresses.test.tsx b/src/components/Tool/FixEmailAddresses/FixEmailAddresses.test.tsx
@@ -411,7 +411,7 @@ describe('FixPhoneNumbers-Home', () => {
         },
       } as ErgonoMockShape;
 
-      const { getAllByRole, queryByTestId, queryByText } = render(
+      const { getAllByRole, getByTestId, queryByText } = render(
         <Components
           mocks={{
             GetInvalidEmailAddresses: {
@@ -425,9 +425,9 @@ describe('FixPhoneNumbers-Home', () => {
         />,
       );
 
-      await waitFor(() =>
-        expect(queryByTestId('loading')).not.toBeInTheDocument(),
-      );
+      await waitFor(() => {
+        expect(getByTestId('starOutlineIcon-testid-1')).toBeInTheDocument();
+      });
 
       const confirmButton = getAllByRole('button', { name: 'Confirm' })[0];
       userEvent.click(confirmButton);
@@ -439,12 +439,12 @@ describe('FixPhoneNumbers-Home', () => {
         );
         expect(queryByText(personName)).not.toBeInTheDocument();
       });
-    });
+    }, 999999);
 
     it('should handle an error', async () => {
       const cache = new InMemoryCache();
 
-      const { getAllByRole, queryByTestId } = render(
+      const { getAllByRole, getByTestId } = render(
         <Components
           mocks={{
             GetInvalidEmailAddresses: {
@@ -461,7 +461,7 @@ describe('FixPhoneNumbers-Home', () => {
       );
 
       await waitFor(() =>
-        expect(queryByTestId('loading')).not.toBeInTheDocument(),
+        expect(getByTestId('starOutlineIcon-testid-1')).toBeInTheDocument(),
       );
 
       const confirmButton = getAllByRole('button', { name: 'Confirm' })[0];