Guard against empty values for required fields

gigs · Apr 22, 2024 · 1986dea · 1986dea
1 parent 1f16b47
commit 1986dea
Show file tree

Hide file tree

Showing 8 changed files with 336 additions and 108 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -114,5 +114,8 @@
         }
       ]
     ]
+  },
+  "dependencies": {
+    "zod": "^3.23.0"
   }
 }
diff --git a/src/PortingEmbed/__tests__/AccountHolderForm.test.tsx b/src/PortingEmbed/__tests__/AccountHolderForm.test.tsx
@@ -190,41 +190,77 @@ describe('AccountHolderForm', () => {
       })
     )
   })
-  it('uses the custom button if present', async () => {
-    render(
-      <CustomOptionsContext.Provider
-        value={{
-          renderPrimaryButton: (onPress, _name, isSubmitting, disabled) => (
-            <Button
-              title={isSubmitting ? 'Loading...' : 'Submit'}
-              onPress={onPress}
-              disabled={disabled}
-            />
-          ),
-        }}
-      >
-        <AccountHolderForm
-          onSubmit={onSaveMock}
-          porting={{ ...porting, firstName: null, lastName: null }}
-        />
-      </CustomOptionsContext.Provider>
-    )
+  describe('with a custom primary button', () => {
+    it('uses the custom button', async () => {
+      render(
+        <CustomOptionsContext.Provider
+          value={{
+            renderPrimaryButton: (onPress, _name, isSubmitting, disabled) => (
+              <Button
+                title={isSubmitting ? 'Loading...' : 'Submit'}
+                onPress={onPress}
+                disabled={disabled}
+              />
+            ),
+          }}
+        >
+          <AccountHolderForm
+            onSubmit={onSaveMock}
+            porting={{ ...porting, firstName: null, lastName: null }}
+          />
+        </CustomOptionsContext.Provider>
+      )
 
-    const button = screen.getByText('Submit')
-    expect(button).toBeOnTheScreen()
-    expect(button).toBeDisabled()
+      const button = screen.getByText('Submit')
+      expect(button).toBeOnTheScreen()
+      expect(button).toBeDisabled()
 
-    const firstNameInput = screen.getByText('Account Holder’s First Name')
-    fireEvent.changeText(firstNameInput, 'Jeffrey')
-    const lastNameInput = screen.getByText('Account Holder’s Last Name')
-    fireEvent.changeText(lastNameInput, 'Seinfeld')
+      const firstNameInput = screen.getByText('Account Holder’s First Name')
+      fireEvent.changeText(firstNameInput, 'Jeffrey')
+      const lastNameInput = screen.getByText('Account Holder’s Last Name')
+      fireEvent.changeText(lastNameInput, 'Seinfeld')
 
-    expect(button).not.toBeDisabled()
-    fireEvent.press(button)
+      expect(button).not.toBeDisabled()
+      fireEvent.press(button)
+
+      expect(onSaveMock).toHaveBeenCalledWith({
+        firstName: 'Jeffrey',
+        lastName: 'Seinfeld',
+      })
+    })
+
+    it('renders validation errors if the button has no disabled prop', () => {
+      render(
+        <CustomOptionsContext.Provider
+          value={{
+            renderPrimaryButton: (onPress, _name, isSubmitting) => (
+              <Button
+                title={isSubmitting ? 'Loading...' : 'Submit'}
+                onPress={onPress}
+              />
+            ),
+          }}
+        >
+          <AccountHolderForm
+            onSubmit={onSaveMock}
+            porting={{ ...porting, firstName: null, lastName: null }}
+          />
+        </CustomOptionsContext.Provider>
+      )
+
+      const button = screen.getByText('Submit')
+      expect(button).toBeOnTheScreen()
+      expect(button).not.toBeDisabled()
 
-    expect(onSaveMock).toHaveBeenCalledWith({
-      firstName: 'Jeffrey',
-      lastName: 'Seinfeld',
+      const firstNameInput = screen.getByText('Account Holder’s First Name')
+      fireEvent.changeText(firstNameInput, 'Jeffrey')
+
+      fireEvent.press(button)
+
+      const error = screen.getByText('Account Holder’s Last Name is required.')
+
+      expect(onSaveMock).not.toHaveBeenCalled()
+      expect(error).toBeOnTheScreen()
     })
   })
   it('uses the custom porting instructions button if present', async () => {

diff --git a/src/PortingEmbed/__tests__/AddressForm.test.tsx b/src/PortingEmbed/__tests__/AddressForm.test.tsx
@@ -143,51 +143,90 @@ describe('AddressForm', () => {
     expect(stateInput).toBeOnTheScreen()
     expect(countryInput).toBeOnTheScreen()
   })
-  it('uses the custom button if present', async () => {
-    render(
-      <CustomOptionsContext.Provider
-        value={{
-          renderPrimaryButton: (onPress, _name, isSubmitting, disabled) => (
-            <Button
-              title={isSubmitting ? 'Loading...' : 'Submit'}
-              onPress={onPress}
-              disabled={disabled}
-            />
-          ),
-        }}
-      >
-        <AddressForm
-          onSubmit={onSaveMock}
-          porting={{ ...porting, address: null }}
-        />
-      </CustomOptionsContext.Provider>
-    )
+  describe('with a custom primary button', () => {
+    it('uses the custom button', async () => {
+      render(
+        <CustomOptionsContext.Provider
+          value={{
+            renderPrimaryButton: (onPress, _name, isSubmitting, disabled) => (
+              <Button
+                title={isSubmitting ? 'Loading...' : 'Submit'}
+                onPress={onPress}
+                disabled={disabled}
+              />
+            ),
+          }}
+        >
+          <AddressForm
+            onSubmit={onSaveMock}
+            porting={{ ...porting, address: null }}
+          />
+        </CustomOptionsContext.Provider>
+      )
+
+      const button = screen.getByText('Submit')
+      expect(button).toBeOnTheScreen()
+      expect(button).toBeDisabled()
+
+      const streetInput = screen.getByText('Street Address')
+      fireEvent.changeText(streetInput, 'Coconut Grove')
+      const cityInput = screen.getByText('City')
+      fireEvent.changeText(cityInput, 'Miami')
+      const countryInput = screen.getByText('Country')
+      fireEvent.changeText(countryInput, 'United States')
+
+      expect(button).not.toBeDisabled()
+      fireEvent.press(button)
 
-    const button = screen.getByText('Submit')
-    expect(button).toBeOnTheScreen()
-    expect(button).toBeDisabled()
-
-    const streetInput = screen.getByText('Street Address')
-    fireEvent.changeText(streetInput, 'Coconut Grove')
-    const cityInput = screen.getByText('City')
-    fireEvent.changeText(cityInput, 'Miami')
-    const countryInput = screen.getByText('Country')
-    fireEvent.changeText(countryInput, 'United States')
-
-    expect(button).not.toBeDisabled()
-    fireEvent.press(button)
-
-    expect(onSaveMock).toHaveBeenCalledWith({
-      address: {
-        city: 'Miami',
-        country: 'United States',
-        line1: 'Coconut Grove',
-        line2: undefined,
-        postalCode: undefined,
-        state: undefined,
-      },
+      expect(onSaveMock).toHaveBeenCalledWith({
+        address: {
+          city: 'Miami',
+          country: 'United States',
+          line1: 'Coconut Grove',
+          line2: undefined,
+          postalCode: undefined,
+          state: undefined,
+        },
+      })
+    })
+
+    it('renders validation errors if the button has no disabled prop', () => {
+      render(
+        <CustomOptionsContext.Provider
+          value={{
+            renderPrimaryButton: (onPress, _name, isSubmitting) => (
+              <Button
+                title={isSubmitting ? 'Loading...' : 'Submit'}
+                onPress={onPress}
+              />
+            ),
+          }}
+        >
+          <AddressForm
+            onSubmit={onSaveMock}
+            porting={{ ...porting, address: null }}
+          />
+        </CustomOptionsContext.Provider>
+      )
+
+      const button = screen.getByText('Submit')
+      expect(button).toBeOnTheScreen()
+      expect(button).not.toBeDisabled()
+
+      const streetInput = screen.getByText('Street Address')
+      fireEvent.changeText(streetInput, 'Coconut Grove')
+      const cityInput = screen.getByText('City')
+      fireEvent.changeText(cityInput, 'Miami')
+
+      fireEvent.press(button)
+
+      const error = screen.getByText('Country is required.')
+
+      expect(onSaveMock).not.toHaveBeenCalled()
+      expect(error).toBeOnTheScreen()
     })
   })
+
   it('uses the custom porting instructions button if present', async () => {
     const placeholders: Record<string, string> = {
       portingInfoLink: 'Porting instructions',

diff --git a/src/PortingEmbed/__tests__/CarrierDetailsForm.test.tsx b/src/PortingEmbed/__tests__/CarrierDetailsForm.test.tsx
@@ -123,43 +123,82 @@ describe('CarrierInfoForm', () => {
     expect(numberInput).toBeOnTheScreen()
     expect(pinInput).toBeOnTheScreen()
   })
-  it('uses the custom button if present', async () => {
-    render(
-      <CustomOptionsContext.Provider
-        value={{
-          renderPrimaryButton: (onPress, _name, isSubmitting, disabled) => (
-            <Button
-              title={isSubmitting ? 'Loading...' : 'Submit'}
-              onPress={onPress}
-              disabled={disabled}
-            />
-          ),
-        }}
-      >
-        <CarrierInfoForm
-          onSubmit={onSaveMock}
-          porting={{ ...porting, address: null }}
-        />
-      </CustomOptionsContext.Provider>
-    )
 
-    const button = screen.getByText('Submit')
-    expect(button).toBeOnTheScreen()
-    expect(button).toBeDisabled()
+  describe('with a custom primary button', () => {
+    it('uses the custom button', async () => {
+      render(
+        <CustomOptionsContext.Provider
+          value={{
+            renderPrimaryButton: (onPress, _name, isSubmitting, disabled) => (
+              <Button
+                title={isSubmitting ? 'Loading...' : 'Submit'}
+                onPress={onPress}
+                disabled={disabled}
+              />
+            ),
+          }}
+        >
+          <CarrierInfoForm
+            onSubmit={onSaveMock}
+            porting={{ ...porting, address: null }}
+          />
+        </CustomOptionsContext.Provider>
+      )
+
+      const button = screen.getByText('Submit')
+      expect(button).toBeOnTheScreen()
+      expect(button).toBeDisabled()
+
+      const numberInput = screen.getByText('Account Number')
+      fireEvent.changeText(numberInput, '123456')
+      const pinInput = screen.getByText('Number Transfer PIN')
+      fireEvent.changeText(pinInput, '1234')
+
+      expect(button).not.toBeDisabled()
+      fireEvent.press(button)
 
-    const numberInput = screen.getByText('Account Number')
-    fireEvent.changeText(numberInput, '123456')
-    const pinInput = screen.getByText('Number Transfer PIN')
-    fireEvent.changeText(pinInput, '1234')
+      expect(onSaveMock).toHaveBeenCalledWith({
+        accountNumber: '123456',
+        accountPin: '1234',
+      })
+    })
 
-    expect(button).not.toBeDisabled()
-    fireEvent.press(button)
+    it('renders validation errors if the button has no disabled prop', () => {
+      render(
+        <CustomOptionsContext.Provider
+          value={{
+            renderPrimaryButton: (onPress, _name, isSubmitting) => (
+              <Button
+                title={isSubmitting ? 'Loading...' : 'Submit'}
+                onPress={onPress}
+              />
+            ),
+          }}
+        >
+          <CarrierInfoForm
+            onSubmit={onSaveMock}
+            porting={{ ...porting, address: null }}
+          />
+        </CustomOptionsContext.Provider>
+      )
 
-    expect(onSaveMock).toHaveBeenCalledWith({
-      accountNumber: '123456',
-      accountPin: '1234',
+      const button = screen.getByText('Submit')
+      expect(button).toBeOnTheScreen()
+      expect(button).not.toBeDisabled()
+
+      const numberInput = screen.getByText('Account Number')
+      fireEvent.changeText(numberInput, '123456')
+
+      expect(button).not.toBeDisabled()
+      fireEvent.press(button)
+
+      const error = screen.getByText('Number Transfer PIN is required.')
+
+      expect(onSaveMock).not.toHaveBeenCalled()
+      expect(error).toBeOnTheScreen()
     })
   })
+
   it('uses the custom porting instructions button if present', async () => {
     const placeholders: Record<string, string> = {
       portingInfoLink: 'Porting instructions',