cozy-sharing 40.2.0 → 40.2.1

package/dist/index.js

@@ -6,7 +6,7 @@ export { SharingContext, withLocales };
 export { useSharingContext } from './hooks/useSharingContext';
 export { useFetchDocumentPath } from './hooks/useFetchDocumentPath';
 export { GroupAvatar } from './components/Avatar/GroupAvatar';
-export { MemberAvatar } from './components/Avatar/MemberAvatar';
+export { MemberAvatarWrapper as MemberAvatar } from './components/Avatar/MemberAvatarWrapper';
 export { SharedDocument } from './SharedDocument';
 export { SharedStatus } from './SharedStatus';
 export { SharedBadge } from './SharedBadge';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-sharing",
-  "version": "40.2.0",
+  "version": "40.2.1",
   "description": "Provides sharing login for React applications.",
   "main": "dist/index.js",
   "author": "Cozy",
@@ -58,7 +58,7 @@
     "cozy-intent": "^2.31.1",
     "cozy-minilog": "^3.10.1",
     "cozy-ui": "^140.5.0",
-    "cozy-ui-plus": "^14.1.5",
+    "cozy-ui-plus": "^14.1.6",
     "jest": "30.3.0",
     "jest-environment-jsdom": "30.3.0",
     "react": "16.12.0",
@@ -84,5 +84,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "5641a18cdc0008e4a73d0d00ffc7b7e58b124185"
+  "gitHead": "dc527e69d5c65ec27dc4ad7b940e01248ee6120f"
 }

package/src/SharingOwnerAvatar.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { MemberAvatar } from './components/Avatar/MemberAvatar'
+import { MemberAvatarWrapper } from './components/Avatar/MemberAvatarWrapper'
 import SharingContext from './context'
 import withLocales from './hoc/withLocales'
 
@@ -8,7 +8,7 @@ export const SharingOwnerAvatar = withLocales(({ docId, ...rest }) => (
   <SharingContext.Consumer>
     {({ byDocId, getOwner } = {}) => {
       return !byDocId || !byDocId[docId] ? null : (
-        <MemberAvatar recipient={getOwner(docId)} {...rest} />
+        <MemberAvatarWrapper recipient={getOwner(docId)} {...rest} />
       )
     }}
   </SharingContext.Consumer>

package/src/components/Avatar/AvatarList.jsx

@@ -7,7 +7,7 @@ import Avatar from 'cozy-ui/transpiled/react/Avatar'
 
 import { ExtraAvatar } from './ExtraAvatar'
 import { GroupAvatar } from './GroupAvatar'
-import { MemberAvatar } from './MemberAvatar'
+import { MemberAvatarWrapper } from './MemberAvatarWrapper'
 import { getDisplayName } from '../../models'
 import styles from '../../styles/recipient.styl'
 
@@ -104,7 +104,7 @@ const AvatarList = ({
             }`}
             key={recipient.index}
           >
-            <MemberAvatar recipient={recipient} size={size} />
+            <MemberAvatarWrapper recipient={recipient} size={size} />
           </span>
         )
       })}

package/src/components/Avatar/MemberAvatar.jsx

@@ -1,39 +1,11 @@
 import React, { useState } from 'react'
 
-import { useClient } from 'cozy-client'
-import { getPrimaryCozy } from 'cozy-client/dist/models/contact'
 import Avatar from 'cozy-ui/transpiled/react/Avatar'
 
 import logger from '../../logger'
 import { getInitials } from '../../models'
 
-/**
- * makeAvatarUrl derives the avatar image URL for the recipient.
- * - If the recipient has an avatarPath (sharing context), it is
- *   used directly with a base URI prefix (unless it is already
- *   a full URL for a remote Cozy).
- * - If the recipient has no avatarPath but has a cozy URL
- *   (contact context), it points to that Cozy's public avatar.
- * - The status is used as a cache-buster in the URL so the
- *   browser refreshes the image when the sharing status changes.
- *   For non-sharing recipients, 'contact' is the stable default.
- */
-const makeAvatarUrl = (recipient, instanceUri) => {
-  const avatarPath = recipient.avatarPath
-  const cozyUrl = !avatarPath ? getPrimaryCozy(recipient) : null
-  if (!avatarPath && !cozyUrl) return null
-
-  const finalPath =
-    avatarPath ||
-    `${cozyUrl.replace(/\/$/, '')}/public/avatar?fallback=initials`
-  const status = recipient.status || 'contact'
-  const isFullPath = finalPath.startsWith('http')
-  const base = isFullPath ? '' : instanceUri
-  return `${base}${finalPath}${finalPath.includes('?') ? '&' : '?'}v=${status}`
-}
-
-const MemberAvatar = ({ recipient, ...rest }) => {
-  const client = useClient()
+const MemberAvatar = ({ recipient, avatarUrl, ...rest }) => {
   // Remember which image url failed to load so we can fall back to the
   // initials. Storing the url (instead of a boolean) means a new url is
   // retried automatically, without an effect to reset the error state.
@@ -49,20 +21,18 @@ const MemberAvatar = ({ recipient, ...rest }) => {
     return null
   }
 
-  const image = makeAvatarUrl(recipient, client.options.uri)
-
   // The avatar can become unreachable (eg. the related sharing is revoked
   // while its members are still rendered), in which case the image request
   // fails. Without a fallback the browser shows a broken-image icon, so we
   // render the initials instead.
   return (
     <Avatar {...rest}>
-      {image && erroredSrc !== image ? (
+      {avatarUrl && erroredSrc !== avatarUrl ? (
         <img
           width="100%"
           height="100%"
-          src={image}
-          onError={() => setErroredSrc(image)}
+          src={avatarUrl}
+          onError={() => setErroredSrc(avatarUrl)}
         />
       ) : (
         getInitials(recipient)

package/src/components/Avatar/MemberAvatar.spec.jsx

@@ -1,19 +1,14 @@
 import { render, fireEvent } from '@testing-library/react'
 import React from 'react'
 
-import { createMockClient } from 'cozy-client'
-
 import { MemberAvatar } from './MemberAvatar'
 import AppLike from '../../../test/AppLike'
 
 describe('MemberAvatar', () => {
-  const client = createMockClient({})
-  client.options = { uri: 'http://cozy.example.com' }
-
-  const setup = recipient =>
+  const setup = (recipient, avatarUrl = null) =>
     render(
-      <AppLike client={client}>
-        <MemberAvatar recipient={recipient} />
+      <AppLike>
+        <MemberAvatar recipient={recipient} avatarUrl={avatarUrl} />
       </AppLike>
     )
 
@@ -26,59 +21,18 @@ describe('MemberAvatar', () => {
     expect(container.querySelector('img')).toBeNull()
   })
 
-  it('renders the avatar image when the recipient has an avatarPath and a status', () => {
-    const { container } = setup({
-      public_name: 'Bob',
-      status: 'owner',
-      avatarPath: '/sharings/123/recipients/0/avatar'
-    })
-
-    const img = container.querySelector('img')
-    expect(img).toBeTruthy()
-    expect(img.getAttribute('src')).toBe(
+  it('renders the avatar image', () => {
+    const { container } = setup(
+      { public_name: 'Bob', status: 'owner' },
       'http://cozy.example.com/sharings/123/recipients/0/avatar?v=owner'
     )
-  })
-
-  it('appends the cache-busting param with & when avatarPath already has a query string', () => {
-    const { container } = setup({
-      public_name: 'Bob',
-      status: 'owner',
-      avatarPath: '/public/avatar?fallback=initials'
-    })
-
-    expect(container.querySelector('img').getAttribute('src')).toBe(
-      'http://cozy.example.com/public/avatar?fallback=initials&v=owner'
-    )
-  })
-
-  it('renders a full URL avatarPath without prefixing the local instance URI', () => {
-    const { container } = setup({
-      public_name: 'Jon Snow',
-      status: 'contact',
-      avatarPath: 'https://jonsnow.mycozy.cloud/public/avatar?fallback=initials'
-    })
 
     expect(container.querySelector('img').getAttribute('src')).toBe(
-      'https://jonsnow.mycozy.cloud/public/avatar?fallback=initials&v=contact'
-    )
-  })
-
-  it('derives avatarPath from cozy URL when avatarPath is not set', () => {
-    const { container } = setup({
-      _type: 'io.cozy.contacts',
-      name: { givenName: 'Jon', familyName: 'Snow' },
-      cozy: [{ url: 'https://jonsnow.mycozy.cloud' }]
-    })
-
-    const img = container.querySelector('img')
-    expect(img).toBeTruthy()
-    expect(img.getAttribute('src')).toBe(
-      'https://jonsnow.mycozy.cloud/public/avatar?fallback=initials&v=contact'
+      'http://cozy.example.com/sharings/123/recipients/0/avatar?v=owner'
     )
   })
 
-  it('renders initials when there is no avatarPath and no cozy URL', () => {
+  it('renders the initials when there is no avatar URL', () => {
     const { container, getByText } = setup({
       _type: 'io.cozy.contacts',
       name: { givenName: 'Jon', familyName: 'Snow' }
@@ -88,27 +42,13 @@ describe('MemberAvatar', () => {
     expect(getByText('JS')).toBeTruthy()
   })
 
-  it('renders the initials when there is no avatarPath', () => {
-    const { container, getByText } = setup({
-      public_name: 'Bob',
-      status: 'owner'
-    })
-
-    expect(container.querySelector('img')).toBeNull()
-    expect(getByText('B')).toBeTruthy()
-  })
-
   it('falls back to the initials when the avatar image fails to load', () => {
-    const { container, getByText } = setup({
-      public_name: 'Bob',
-      status: 'owner',
-      avatarPath: '/sharings/123/recipients/0/avatar'
-    })
-
-    const img = container.querySelector('img')
-    expect(img).toBeTruthy()
+    const { container, getByText } = setup(
+      { public_name: 'Bob', status: 'owner' },
+      'http://cozy.example.com/sharings/123/recipients/0/avatar?v=owner'
+    )
 
-    fireEvent.error(img)
+    fireEvent.error(container.querySelector('img'))
 
     expect(container.querySelector('img')).toBeNull()
     expect(getByText('B')).toBeTruthy()

package/src/components/Avatar/MemberAvatarWrapper.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import { useClient } from 'cozy-client'
+
+import { MemberAvatar } from './MemberAvatar'
+import { makeAvatarUrl } from '../../helpers/recipients'
+
+const MemberAvatarWrapper = ({ recipient, ...avatarProps }) => {
+  const client = useClient()
+
+  return (
+    <MemberAvatar
+      recipient={recipient}
+      avatarUrl={
+        recipient ? makeAvatarUrl(recipient, client.options.uri) : null
+      }
+      {...avatarProps}
+    />
+  )
+}
+
+export { MemberAvatarWrapper }

package/src/components/ConfirmTrustedRecipientsDialog.jsx

@@ -1,6 +1,7 @@
 import cx from 'classnames'
 import React from 'react'
 
+import { useClient } from 'cozy-client'
 import List from 'cozy-ui/transpiled/react/List'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
@@ -8,6 +9,7 @@ import { useI18n } from 'twake-i18n'
 
 import MemberRecipient from './Recipient/MemberRecipient'
 import ShareDialogTwoStepsConfirmationContainer from './ShareDialogTwoStepsConfirmationContainer'
+import { makeAvatarUrl } from '../helpers/recipients'
 
 /**
  * Displays the sharing interface that can be used when ConfirmTrustedRecipientsDialog is in sharing state
@@ -15,6 +17,7 @@ import ShareDialogTwoStepsConfirmationContainer from './ShareDialogTwoStepsConfi
 const SharingContent = ({ recipientsToBeConfirmed, verifyRecipient }) => {
   const { t } = useI18n()
   const { isMobile } = useBreakpoints()
+  const client = useClient()
 
   return (
     <>
@@ -36,6 +39,10 @@ const SharingContent = ({ recipientsToBeConfirmed, verifyRecipient }) => {
               isOwner={false}
               recipientConfirmationData={recipientConfirmationData}
               verifyRecipient={verifyRecipient}
+              avatarUrl={makeAvatarUrl(
+                recipientConfirmationData,
+                client.options.uri
+              )}
             />
           )
         })}

package/src/components/ContactSuggestion.jsx

@@ -16,7 +16,7 @@ import {
 import { GroupAvatar } from './Avatar/GroupAvatar'
 import { MemberAvatar } from './Avatar/MemberAvatar'
 
-export const ContactSuggestion = ({ contactOrGroup }) => {
+export const ContactSuggestion = ({ contactOrGroup, avatarUrl }) => {
   const { t } = useI18n()
 
   if (contactOrGroup._type === DOCTYPE_GROUPS) {
@@ -41,7 +41,11 @@ export const ContactSuggestion = ({ contactOrGroup }) => {
   return (
     <ListItem button>
       <ListItemIcon>
-        <MemberAvatar recipient={contactOrGroup} size="m" />
+        <MemberAvatar
+          recipient={contactOrGroup}
+          avatarUrl={avatarUrl}
+          size="m"
+        />
       </ListItemIcon>
       <ListItemText primary={name} secondary={cozyUrl || '-'} />
     </ListItem>
@@ -59,7 +63,8 @@ ContactSuggestion.propTypes = {
     groupPropType,
     newUnknownContactProptypes
   ]).isRequired,
-  contacts: PropTypes.arrayOf(contactPropType)
+  contacts: PropTypes.arrayOf(contactPropType),
+  avatarUrl: PropTypes.string
 }
 
 export default ContactSuggestion

package/src/components/Recipient/MemberRecipient.jsx

@@ -32,6 +32,7 @@ const MemberRecipient = props => {
     verifyRecipient,
     fadeIn,
     isOrgSharedDrive,
+    avatarUrl,
     ...rest
   } = props
 
@@ -58,7 +59,7 @@ const MemberRecipient = props => {
     <Fade in timeout={fadeIn ? FADE_IN_DURATION : 0}>
       <ListItem gutters={isMobile ? 'default' : 'double'} size="small">
         <ListItemIcon>
-          <MemberAvatar size="m" recipient={props} />
+          <MemberAvatar size="m" recipient={props} avatarUrl={avatarUrl} />
         </ListItemIcon>
         <ListItemText
           primary={
@@ -90,7 +91,8 @@ MemberRecipient.propTypes = {
   isCurrentUser: PropTypes.bool,
   recipientConfirmationData: PropTypes.object,
   verifyRecipient: PropTypes.func,
-  isOrgSharedDrive: PropTypes.bool
+  isOrgSharedDrive: PropTypes.bool,
+  avatarUrl: PropTypes.string
 }
 
 export default MemberRecipient

package/src/components/Recipient/MemberRecipient.spec.jsx

@@ -1,20 +1,13 @@
 import { render, fireEvent } from '@testing-library/react'
 import React from 'react'
 
-import { createMockClient } from 'cozy-client'
-
 import MemberRecipient from './MemberRecipient'
 import AppLike from '../../../test/AppLike'
 
 describe('MemberRecipient component', () => {
-  const client = createMockClient({})
-  client.options = {
-    uri: 'foo.mycozy.cloud'
-  }
-
   const setup = props => {
     return render(
-      <AppLike client={client}>
+      <AppLike>
         <MemberRecipient {...props} />
       </AppLike>
     )

package/src/components/Recipient/MemberRecipientLite.jsx

@@ -12,7 +12,7 @@ import MemberRecipientStatus from './MemberRecipientStatus'
 import { DEFAULT_DISPLAY_NAME } from '../../helpers/recipients'
 import withLocales from '../../hoc/withLocales'
 import { getDisplayName } from '../../models'
-import { MemberAvatar } from '../Avatar/MemberAvatar'
+import { MemberAvatarWrapper } from '../Avatar/MemberAvatarWrapper'
 
 const MemberRecipientLite = ({ recipient, isOwner, ...props }) => {
   const { t } = useI18n()
@@ -25,7 +25,7 @@ const MemberRecipientLite = ({ recipient, isOwner, ...props }) => {
   return (
     <ListItem size="small" ellipsis>
       <ListItemIcon>
-        <MemberAvatar size="m" recipient={recipient} {...props} />
+        <MemberAvatarWrapper size="m" recipient={recipient} {...props} />
       </ListItemIcon>
       <ListItemText
         primary={

package/src/components/ShareAutosuggest.jsx

@@ -29,7 +29,8 @@ const ShareAutosuggest = ({
   placeholder,
   autoFocus,
   endAdornment,
-  fetchContacts
+  fetchContacts,
+  getAvatarUrl
 }) => {
   const [inputValue, setInputValue] = useState('')
   const [suggestions, setSuggestions] = useState([])
@@ -199,7 +200,11 @@ const ShareAutosuggest = ({
               isContactGroup ? (
                 <GroupAvatar size="xs" color={recipient.color} />
               ) : (
-                <MemberAvatar size="xs" recipient={recipient} />
+                <MemberAvatar
+                  size="xs"
+                  recipient={recipient}
+                  avatarUrl={getAvatarUrl(recipient)}
+                />
               )
             }
             label={name}
@@ -221,7 +226,10 @@ const ShareAutosuggest = ({
   )
 
   const renderSuggestion = contactOrGroup => (
-    <ContactSuggestion contactOrGroup={contactOrGroup} />
+    <ContactSuggestion
+      contactOrGroup={contactOrGroup}
+      avatarUrl={getAvatarUrl(contactOrGroup)}
+    />
   )
 
   return (
@@ -269,7 +277,8 @@ ShareAutosuggest.propTypes = {
   placeholder: PropTypes.string,
   autoFocus: PropTypes.bool,
   endAdornment: PropTypes.node,
-  fetchContacts: PropTypes.func
+  fetchContacts: PropTypes.func,
+  getAvatarUrl: PropTypes.func.isRequired
 }
 
 export default ShareAutosuggest

package/src/components/ShareAutosuggest.spec.jsx

@@ -27,6 +27,7 @@ describe('ShareAutosuggest', () => {
           onRemove={onRemove}
           enableCreateContact={enableCreateContact}
           fetchContacts={fetchContacts}
+          getAvatarUrl={() => null}
         />
       </AppLike>
     )

package/src/components/ShareAutosuggest.stories.jsx

@@ -33,6 +33,7 @@ export const Default = {
   render: ShareAutosuggestRender,
   args: {
     loading: false,
+    getAvatarUrl: () => null,
     contactsAndGroups: [
       {
         id: 'group1',

package/src/components/ShareAutosuggestWrapper.jsx

@@ -7,6 +7,7 @@ import flag from 'cozy-flags'
 
 import ShareAutosuggest from './ShareAutosuggest'
 import { computeContactsAndGroups, suggestContacts } from '../helpers/contacts'
+import { makeAvatarUrl } from '../helpers/recipients'
 import { useSharingContext } from '../hooks/useSharingContext'
 import { DOCTYPE_GROUPS } from '../models'
 import {
@@ -110,6 +111,7 @@ const ShareAutosuggestWrapper = ({
       autoFocus={autoFocus}
       endAdornment={endAdornment}
       fetchContacts={contactsSuggestEnabled ? fetchContacts : undefined}
+      getAvatarUrl={recipient => makeAvatarUrl(recipient, client.options.uri)}
     />
   )
 }

package/src/components/WhoHasAccessWrapper.jsx

@@ -3,7 +3,12 @@ import React from 'react'
 import { useClient, useQuery, hasQueryBeenLoaded } from 'cozy-client'
 
 import WhoHasAccess from './WhoHasAccess'
-import { hasMemberActions, markCurrentUser } from '../helpers/recipients'
+import {
+  addAvatarUrls,
+  hasMemberActions,
+  makeAvatarUrl,
+  markCurrentUser
+} from '../helpers/recipients'
 import { useMemberPermissionType } from '../hooks/useMemberPermissionType'
 import { useSharingContext } from '../hooks/useSharingContext'
 import { buildInstanceSettingsQuery } from '../queries/queries'
@@ -44,7 +49,10 @@ const WhoHasAccessWrapper = ({
   } = useSharingContext()
 
   const instanceUri = client.options.uri
-  const markedRecipients = markCurrentUser(recipients, instanceUri)
+  const markedRecipients = addAvatarUrls(
+    markCurrentUser(recipients, instanceUri),
+    instanceUri
+  )
   const hasMemberMenus = markedRecipients.some(
     recipient =>
       !recipient.members &&
@@ -75,6 +83,10 @@ const WhoHasAccessWrapper = ({
         status: 'owner',
         instance: instanceUri,
         avatarPath: OWNER_PUBLIC_AVATAR_PATH,
+        avatarUrl: makeAvatarUrl(
+          { status: 'owner', avatarPath: OWNER_PUBLIC_AVATAR_PATH },
+          instanceUri
+        ),
         public_name: instanceSettingsResult.data?.attributes?.public_name
       }
     : null

package/src/helpers/recipients.js

@@ -1,3 +1,4 @@
+import { getPrimaryCozy } from 'cozy-client/dist/models/contact'
 import flag from 'cozy-flags'
 
 import { DOCTYPE_GROUPS } from '../models'
@@ -143,3 +144,42 @@ export const hasMemberActions = ({
   canManageMembers &&
   status !== 'owner' &&
   ((isCurrentUser && !isOwner) || canManageSharing)
+
+/**
+ * makeAvatarUrl derives the avatar image URL for the recipient.
+ * - If the recipient has an avatarPath (sharing context), it is
+ *   used directly with a base URI prefix (unless it is already
+ *   a full URL for a remote Cozy).
+ * - If the recipient has no avatarPath but has a cozy URL
+ *   (contact context), it points to that Cozy's public avatar.
+ * - The status is used as a cache-buster in the URL so the
+ *   browser refreshes the image when the sharing status changes.
+ *   For non-sharing recipients, 'contact' is the stable default.
+ */
+export const makeAvatarUrl = (recipient, instanceUri) => {
+  const avatarPath = recipient.avatarPath
+  const cozyUrl = !avatarPath ? getPrimaryCozy(recipient) : null
+  if (!avatarPath && !cozyUrl) return null
+
+  const finalPath =
+    avatarPath ||
+    `${cozyUrl.replace(/\/$/, '')}/public/avatar?fallback=initials`
+  const status = recipient.status || 'contact'
+  const isFullPath = finalPath.startsWith('http')
+  const base = isFullPath ? '' : instanceUri
+  return `${base}${finalPath}${finalPath.includes('?') ? '&' : '?'}v=${status}`
+}
+
+/**
+ * Adds to the recipients, except groups, the URL of their avatar
+ *
+ * @param {object[]} recipients - Recipients of a sharing
+ * @param {string} instanceUri - URI of the current user's instance
+ * @returns {object[]} The recipients with their `avatarUrl`
+ */
+export const addAvatarUrls = (recipients, instanceUri) =>
+  recipients.map(recipient =>
+    recipient.members
+      ? recipient
+      : { ...recipient, avatarUrl: makeAvatarUrl(recipient, instanceUri) }
+  )

package/src/helpers/recipients.spec.js

@@ -1,4 +1,9 @@
-import { hasMemberActions, markCurrentUser } from './recipients'
+import {
+  addAvatarUrls,
+  hasMemberActions,
+  makeAvatarUrl,
+  markCurrentUser
+} from './recipients'
 
 const instanceUri = 'https://alice.cozy.cc'
 
@@ -80,3 +85,80 @@ describe('hasMemberActions', () => {
     expect(hasMemberActions({ ...memberRights, status: 'ready' })).toBe(false)
   })
 })
+
+describe('makeAvatarUrl', () => {
+  const instanceUri = 'http://cozy.example.com'
+
+  it('prefixes the avatarPath with the instance URI and the status', () => {
+    expect(
+      makeAvatarUrl(
+        { status: 'owner', avatarPath: '/sharings/123/recipients/0/avatar' },
+        instanceUri
+      )
+    ).toBe('http://cozy.example.com/sharings/123/recipients/0/avatar?v=owner')
+  })
+
+  it('appends the status with & when avatarPath already has a query string', () => {
+    expect(
+      makeAvatarUrl(
+        { status: 'owner', avatarPath: '/public/avatar?fallback=initials' },
+        instanceUri
+      )
+    ).toBe('http://cozy.example.com/public/avatar?fallback=initials&v=owner')
+  })
+
+  it('does not prefix a full URL avatarPath with the instance URI', () => {
+    expect(
+      makeAvatarUrl(
+        {
+          status: 'contact',
+          avatarPath:
+            'https://jonsnow.mycozy.cloud/public/avatar?fallback=initials'
+        },
+        instanceUri
+      )
+    ).toBe(
+      'https://jonsnow.mycozy.cloud/public/avatar?fallback=initials&v=contact'
+    )
+  })
+
+  it('points to the public avatar of the contact cozy when there is no avatarPath', () => {
+    expect(
+      makeAvatarUrl(
+        {
+          _type: 'io.cozy.contacts',
+          cozy: [{ url: 'https://jonsnow.mycozy.cloud' }]
+        },
+        instanceUri
+      )
+    ).toBe(
+      'https://jonsnow.mycozy.cloud/public/avatar?fallback=initials&v=contact'
+    )
+  })
+
+  it('returns null when there is no avatarPath and no cozy URL', () => {
+    expect(
+      makeAvatarUrl(
+        { _type: 'io.cozy.contacts', public_name: 'Bob' },
+        instanceUri
+      )
+    ).toBe(null)
+  })
+})
+
+describe('addAvatarUrls', () => {
+  it('adds the avatar URL to the members but not to the groups', () => {
+    const [member, group] = addAvatarUrls(
+      [
+        { status: 'ready', avatarPath: '/sharings/123/recipients/1/avatar' },
+        { name: 'Team', members: [] }
+      ],
+      'http://cozy.example.com'
+    )
+
+    expect(member.avatarUrl).toBe(
+      'http://cozy.example.com/sharings/123/recipients/1/avatar?v=ready'
+    )
+    expect(group).not.toHaveProperty('avatarUrl')
+  })
+})