feat: Add test for display of PersonalInfo in transfer page

src/ducks/personal-info/index.jsx

@@ -61,12 +61,12 @@ const pageComponents = {
   Content: React.Fragment
 }
 
-export const PersonalInfoModal = ({ modalProps, ...props }) => {
+export const PersonalInfoModal = ({ wrapperProps, ...props }) => {
   return (
     <PersonalInfo
-      wrapperProps={{ ...modalProps, mobileFullscreen: true }}
-      Components={modalComponents}
       {...props}
+      wrapperProps={wrapperProps}
+      Components={modalComponents}
     />
   )
 }

src/ducks/transfers/TransferPage.jsx

@@ -109,7 +109,12 @@ const NoBank = () => {
 }
 
 const isMyselfSufficientlyFilled = myself => {
-  return myself.birthcity && myself.birthcity !== '' && myself.nationality
+  return (
+    myself.birthcity &&
+    myself.birthcity !== '' &&
+    myself.nationality &&
+    myself.nationality !== ''
+  )
 }
 
 class TransferPage extends React.Component {
@@ -424,7 +429,7 @@ class TransferPage extends React.Component {
 
     return (
       <>
-        {transferState !== null ? (
+        {transferState ? (
           <Modal mobileFullscreen dismissAction={this.handleModalDismiss}>
             {transferState === 'sending' && <Loading />}
             {transferState === 'success' && (

src/ducks/transfers/TransferPage.spec.jsx

@@ -1,15 +1,38 @@
 import React from 'react'
 import { shallow } from 'enzyme'
+import { render } from '@testing-library/react'
+
+import { createMockClient } from 'cozy-client/dist/mock'
+import flag from 'cozy-flags'
+
+import AppLike from 'test/AppLike'
+import fixtures from 'test/fixtures'
+
+import { accountsConn, recipientsConn, myselfConn } from 'doctypes'
 import { TransferError } from 'ducks/transfers/steps/TransferState'
-import { TransferPage } from './TransferPage'
-import fixtures from '../../../test/fixtures'
+import TransferPage, { TransferPage as DumbTransferPage } from './TransferPage'
+
 import * as transfers from './transfers'
 
+jest.mock('components/Bar', () => {
+  const MockBarCenter = ({ children }) => <div>{children}</div>
+  return {
+    BarCenter: MockBarCenter
+  }
+})
 jest.mock('./transfers')
+jest.mock('cozy-flags', () => flagName => {
+  if (flagName === 'banks.transfers.need-personal-information') {
+    return true
+  } else {
+    return false
+  }
+})
 
 const accounts = fixtures['io.cozy.bank.accounts']
 const recipients = [
   {
+    _id: 'recipient1',
     vendorAccountId: accounts[0].vendorId,
     category: 'internal',
     label: 'Dalai Lama',
@@ -25,7 +48,8 @@ describe('transfer page', () => {
 
   beforeEach(() => {
     root = shallow(
-      <TransferPage
+      <DumbTransferPage
+        breakpoints={{ isMobile: false }}
         recipients={collection(recipients)}
         accounts={collection(accounts)}
         t={t}
@@ -37,7 +61,7 @@ describe('transfer page', () => {
     jest.restoreAllMocks()
   })
 
-  it('should handle pass error to TransferError', async () => {
+  it('should pass error to TransferError', async () => {
     root.instance().setState({
       senderAccount: accounts[0],
       beneficiary: {
@@ -59,3 +83,57 @@ describe('transfer page', () => {
     expect(errorView.props().error).toBe(err)
   })
 })
+
+describe('personal info', () => {
+  const setup = ({ myselfData } = {}) => {
+    const client = createMockClient({
+      queries: {
+        [recipientsConn.as]: {
+          doctype: recipientsConn.query().doctype,
+          data: recipients
+        },
+        [accountsConn.as]: {
+          doctype: accountsConn.query().doctype,
+          data: accounts
+        },
+        [myselfConn.as]: {
+          doctype: myselfConn.query().doctype,
+          data: [
+            {
+              _id: 'myselfid1234',
+              ...myselfData
+            }
+          ]
+        }
+      }
+    })
+    const root = render(
+      <AppLike client={client}>
+        <TransferPage />
+      </AppLike>
+    )
+
+    return { root }
+  }
+
+  afterEach(() => {
+    flag('banks.transfers.need-personal-information', false)
+  })
+
+  it('should show personal info if myself contact not sufficiently filled', async () => {
+    window.innerWidth = 300 // isMobile -> true
+    const { root } = setup()
+    await root.findByText('Edit personal information')
+  })
+
+  it('should not show personal info if myself contact is sufficiently filled', async () => {
+    window.innerWidth = 300 // isMobile -> true
+    const { root } = setup({
+      myselfData: {
+        birthcity: 'Compiègne',
+        nationality: 'FR'
+      }
+    })
+    await root.findByText('Where do you want to send this transfer ?')
+  })
+})