cozy-sharing 12.1.0 → 12.2.0

package/src/components/ContactSuggestion.spec.jsx

@@ -1,19 +1,16 @@
-import { mount } from 'enzyme'
+import { render, screen } from '@testing-library/react'
 import React from 'react'
 
 import { ContactSuggestion } from './ContactSuggestion'
 import AppLike from '../../test/AppLike'
 
-const WrappingComponent = ({ children }) => <AppLike>{children}</AppLike>
-
 describe('ContactSuggestion component', () => {
-  const fakeT = jest.fn((s, args) => {
-    if (s === 'Share.members.count') {
-      return `${args.smart_count} members`
-    }
+  const setup = ({ contactOrGroup }) => {
+    return render(<ContactSuggestion contactOrGroup={contactOrGroup} />, {
+      wrapper: AppLike
+    })
+  }
 
-    return s
-  })
   it('should display contact suggestion for a contact', () => {
     const jonSnow = {
       _id: 'f3a4e501-abbd',
@@ -36,17 +33,9 @@ describe('ContactSuggestion component', () => {
       ],
       _type: 'io.cozy.contacts'
     }
-    const contacts = [jonSnow]
-    const props = {
-      contactOrGroup: jonSnow,
-      contacts,
-      t: fakeT
-    }
-    const jsx = <ContactSuggestion {...props} />
-    const wrapper = mount(jsx, {
-      wrappingComponent: WrappingComponent
-    })
-    expect(wrapper).toMatchSnapshot()
+    setup({ contactOrGroup: jonSnow })
+    expect(screen.getByText('Jon Snow')).toBeInTheDocument()
+    expect(screen.getByText('https://jonsnow.mycozy.cloud')).toBeInTheDocument()
   })
 
   it('should display contact suggestion for a contact without fullname (for example created by a share modal)', () => {
@@ -62,91 +51,19 @@ describe('ContactSuggestion component', () => {
       name: undefined,
       _type: 'io.cozy.contacts'
     }
-    const contacts = [jonSnow]
-    const props = {
-      contactOrGroup: jonSnow,
-      contacts,
-      t: fakeT
-    }
-    const jsx = <ContactSuggestion {...props} />
-    const wrapper = mount(jsx, {
-      wrappingComponent: WrappingComponent
-    })
-    expect(wrapper).toMatchSnapshot()
+    setup({ contactOrGroup: jonSnow })
+    expect(screen.getByText('jon.snow@email.com')).toBeInTheDocument()
   })
 
   it('should display contact suggestion for a group', () => {
-    const jon = {
-      _id: 'f3a4e501-abbd',
-      fullname: 'Jon Snow',
-      name: {
-        givenName: 'Jon',
-        familyName: 'Snow'
-      },
-      email: [
-        {
-          address: 'jon.snow@email.com',
-          type: 'primary'
-        }
-      ],
-      _type: 'io.cozy.contacts',
-      relationships: {
-        groups: {
-          data: [{ _id: '610718e6-2d7a', _type: 'io.cozy.contacts.groups' }]
-        }
-      }
-    }
-    const cersei = {
-      _id: '42dc490a-7878',
-      fullname: 'Cersei Lannister',
-      name: {
-        givenName: 'Cersei',
-        familyName: 'Lannister'
-      },
-      email: [
-        {
-          address: 'cersei@email.com',
-          type: 'primary'
-        }
-      ],
-      _type: 'io.cozy.contacts',
-      relationships: { groups: { data: [] } }
-    }
-    const sam = {
-      _id: 'b5bed853-93da',
-      fullname: 'Samwell Tarly',
-      name: {
-        givenName: 'Samwell',
-        familyName: 'Tarly'
-      },
-      email: [
-        {
-          address: 'samwell@email.com',
-          type: 'primary'
-        }
-      ],
-      _type: 'io.cozy.contacts',
-      relationships: {
-        groups: {
-          data: [{ _id: '610718e6-2d7a', _type: 'io.cozy.contacts.groups' }]
-        }
-      }
-    }
-    const contacts = [jon, cersei, sam]
     const theNightsWatch = {
       _id: '610718e6-2d7a',
       name: "The Night's Watch",
-      _type: 'io.cozy.contacts.groups'
+      _type: 'io.cozy.contacts.groups',
+      membersCount: 2
     }
-    const props = {
-      contactOrGroup: theNightsWatch,
-      contacts,
-      t: fakeT
-    }
-    const jsx = <ContactSuggestion {...props} />
-    const wrapper = mount(jsx, {
-      wrappingComponent: WrappingComponent
-    })
-    expect(wrapper).toMatchSnapshot()
+    setup({ contactOrGroup: theNightsWatch })
+    expect(screen.getByText("The Night's Watch")).toBeInTheDocument()
+    expect(screen.getByText('2 members')).toBeInTheDocument()
   })
 })

package/src/components/ShareAutosuggest.jsx

@@ -165,12 +165,7 @@ const ShareAutocomplete = ({
   )
 
   const renderSuggestion = contactOrGroup => (
-    <ContactSuggestion
-      contacts={contactsAndGroups.filter(
-        item => item._type === Contact.doctype
-      )}
-      contactOrGroup={contactOrGroup}
-    />
+    <ContactSuggestion contactOrGroup={contactOrGroup} />
   )
 
   return (

package/src/components/ShareRecipientsInput.jsx

@@ -1,3 +1,4 @@
+import get from 'lodash/get'
 import PropTypes from 'prop-types'
 import React, { useState, useEffect } from 'react'
 
@@ -42,7 +43,24 @@ const ShareRecipientsInput = ({
     if (contacts.hasMore || contacts.fetchStatus === 'loading') {
       return contacts.data
     } else {
-      return [...contacts.data, ...contactGroups.data]
+      const contactGroupsWithCount = contactGroups.data
+        .map(contactGroup => ({
+          ...contactGroup,
+          membersCount: contacts.data.reduce((total, contact) => {
+            if (
+              get(contact, 'relationships.groups.data', [])
+                .map(group => group._id)
+                .includes(contactGroup._id)
+            ) {
+              return total + 1
+            }
+
+            return total
+          }, 0)
+        }))
+        .filter(contactGroup => contactGroup.membersCount > 0)
+
+      return [...contacts.data, ...contactGroupsWithCount]
     }
   }
 

package/src/components/ShareRecipientsInput.spec.jsx

@@ -1,138 +1,200 @@
-import { shallow } from 'enzyme'
+import { render, screen } from '@testing-library/react'
 import React from 'react'
 
 import ShareRecipientsInput from './ShareRecipientsInput'
 
-describe('ShareRecipientsInput component', () => {
-  it('should match snapshot', () => {
-    const props = {
-      client: '',
-      label: 'Recipients',
-      contacts: {
-        id: 'contacts',
-        fetchStatus: 'loaded',
-        hasMore: false,
-        data: [
-          {
-            id: 'df563cc4-6440',
-            _id: 'df563cc4-6440',
-            _type: 'io.cozy.contacts',
-            name: {
-              givenName: 'Michale',
-              familyName: 'Russel'
-            }
-          },
-          {
-            id: '5a3b4ccf-c257',
-            _id: '5a3b4ccf-c257',
-            _type: 'io.cozy.contacts',
-            name: {
-              givenName: 'Teagan',
-              familyName: 'Wolf'
-            }
+jest.mock('./ShareAutosuggest', () => ({
+  __esModule: true,
+  default: ({ contactsAndGroups }) => {
+    return (
+      <ul>
+        {contactsAndGroups.map(contactOrGroup => {
+          if (contactOrGroup._type === 'io.cozy.contacts') {
+            return (
+              <li key={contactOrGroup.id}>
+                {contactOrGroup.name.givenName} {contactOrGroup.name.familyName}
+              </li>
+            )
+          } else {
+            return <li key={contactOrGroup.id}>{contactOrGroup.name}</li>
           }
-        ]
-      },
-      contactGroups: {
-        id: 'groups',
-        fetchStatus: 'loaded',
-        hasMore: false,
-        data: [
-          {
-            id: 'fe86af20-c6c5',
-            name: "The Night's Watch",
-            _id: 'fe86af20-c6c5',
-            _type: 'io.cozy.contacts.groups'
-          },
-          {
-            id: '3d8193ab-2ce4',
-            name: 'The North',
-            _id: '3d8193ab-2ce4',
-            _type: 'io.cozy.contacts.groups'
+        })}
+      </ul>
+    )
+  }
+}))
+
+describe('ShareRecipientsInput component', () => {
+  const setup = ({ contacts, contactGroups }) => {
+    render(
+      <ShareRecipientsInput
+        contacts={contacts}
+        contactGroups={contactGroups}
+        onPick={() => {}}
+        onRemove={() => {}}
+        placeholder="Enter recipients here"
+      />
+    )
+  }
+
+  it('should include groups and contacts when are loaded', async () => {
+    const contacts = {
+      id: 'contacts',
+      fetchStatus: 'loaded',
+      hasMore: false,
+      data: [
+        {
+          id: 'df563cc4-6440',
+          _id: 'df563cc4-6440',
+          _type: 'io.cozy.contacts',
+          name: {
+            givenName: 'Michale',
+            familyName: 'Russel'
           }
-        ]
-      },
-      recipients: [
+        },
         {
           id: '5a3b4ccf-c257',
+          _id: '5a3b4ccf-c257',
+          _type: 'io.cozy.contacts',
           name: {
             givenName: 'Teagan',
             familyName: 'Wolf'
+          },
+          relationships: {
+            groups: {
+              data: [
+                {
+                  _id: 'fe86af20-c6c5',
+                  _type: 'io.cozy.contacts.groups'
+                }
+              ]
+            }
           }
         }
-      ],
-      onPick: jest.fn().mockName('onPick'),
-      onRemove: jest.fn().mockName('onRemove'),
-      placeholder: 'Enter recipients here'
+      ]
+    }
+    const contactGroups = {
+      id: 'groups',
+      fetchStatus: 'loaded',
+      hasMore: false,
+      data: [
+        {
+          id: 'fe86af20-c6c5',
+          name: "The Night's Watch",
+          _id: 'fe86af20-c6c5',
+          _type: 'io.cozy.contacts.groups'
+        }
+      ]
     }
-    const jsx = <ShareRecipientsInput {...props} />
-    const wrapper = shallow(jsx)
-    expect(wrapper).toMatchSnapshot()
+
+    setup({ contacts, contactGroups })
+
+    expect(screen.getByText('Michale Russel')).toBeInTheDocument()
+    expect(screen.getByText('Teagan Wolf')).toBeInTheDocument()
+    expect(screen.getByText("The Night's Watch")).toBeInTheDocument()
   })
 
-  it('should include groups only if all contacts are loaded', () => {
-    const props = {
-      client: '',
-      label: 'Recipients',
-      contacts: {
-        id: 'contacts',
-        fetchStatus: 'loading',
-        hasMore: false,
-        data: [
-          {
-            id: 'df563cc4-6440',
-            _id: 'df563cc4-6440',
-            _type: 'io.cozy.contacts',
-            name: {
-              givenName: 'Michale',
-              familyName: 'Russel'
-            }
+  it('should include groups only if all contacts are loaded', async () => {
+    const contacts = {
+      id: 'contacts',
+      fetchStatus: 'loading',
+      hasMore: false,
+      data: [
+        {
+          id: 'df563cc4-6440',
+          _id: 'df563cc4-6440',
+          _type: 'io.cozy.contacts',
+          name: {
+            givenName: 'Michale',
+            familyName: 'Russel'
+          }
+        },
+        {
+          id: '5a3b4ccf-c257',
+          _id: '5a3b4ccf-c257',
+          _type: 'io.cozy.contacts',
+          name: {
+            givenName: 'Teagan',
+            familyName: 'Wolf'
           },
-          {
-            id: '5a3b4ccf-c257',
-            _id: '5a3b4ccf-c257',
-            _type: 'io.cozy.contacts',
-            name: {
-              givenName: 'Teagan',
-              familyName: 'Wolf'
+          relationships: {
+            groups: {
+              data: [
+                {
+                  _id: 'fe86af20-c6c5',
+                  _type: 'io.cozy.contacts.groups'
+                }
+              ]
             }
           }
-        ]
-      },
-      contactGroups: {
-        id: 'groups',
-        fetchStatus: 'loaded',
-        hasMore: false,
-        data: [
-          {
-            id: 'fe86af20-c6c5',
-            name: "The Night's Watch",
-            _id: 'fe86af20-c6c5',
-            _type: 'io.cozy.contacts.groups'
-          },
-          {
-            id: '3d8193ab-2ce4',
-            name: 'The North',
-            _id: '3d8193ab-2ce4',
-            _type: 'io.cozy.contacts.groups'
+        }
+      ]
+    }
+    const contactGroups = {
+      id: 'groups',
+      fetchStatus: 'loaded',
+      hasMore: false,
+      data: [
+        {
+          id: 'fe86af20-c6c5',
+          name: "The Night's Watch",
+          _id: 'fe86af20-c6c5',
+          _type: 'io.cozy.contacts.groups'
+        }
+      ]
+    }
+
+    setup({ contacts, contactGroups })
+
+    expect(screen.getByText('Michale Russel')).toBeInTheDocument()
+    expect(screen.getByText('Teagan Wolf')).toBeInTheDocument()
+    expect(screen.queryByText("The Night's Watch")).toBeNull()
+  })
+
+  it('should include groups only if they have more than one member', async () => {
+    const contacts = {
+      id: 'contacts',
+      fetchStatus: 'loaded',
+      hasMore: false,
+      data: [
+        {
+          id: 'df563cc4-6440',
+          _id: 'df563cc4-6440',
+          _type: 'io.cozy.contacts',
+          name: {
+            givenName: 'Michale',
+            familyName: 'Russel'
           }
-        ]
-      },
-      recipients: [
+        },
         {
           id: '5a3b4ccf-c257',
+          _id: '5a3b4ccf-c257',
+          _type: 'io.cozy.contacts',
           name: {
             givenName: 'Teagan',
             familyName: 'Wolf'
           }
         }
-      ],
-      onPick: jest.fn().mockName('onPick'),
-      onRemove: jest.fn().mockName('onRemove'),
-      placeholder: 'Enter recipients here'
+      ]
     }
-    const jsx = <ShareRecipientsInput {...props} />
-    const wrapper = shallow(jsx)
-    expect(wrapper).toMatchSnapshot()
+    const contactGroups = {
+      id: 'groups',
+      fetchStatus: 'loaded',
+      hasMore: false,
+      data: [
+        {
+          id: 'fe86af20-c6c5',
+          name: "The Night's Watch",
+          _id: 'fe86af20-c6c5',
+          _type: 'io.cozy.contacts.groups'
+        }
+      ]
+    }
+
+    setup({ contacts, contactGroups })
+
+    expect(screen.getByText('Michale Russel')).toBeInTheDocument()
+    expect(screen.getByText('Teagan Wolf')).toBeInTheDocument()
+    expect(screen.queryByText("The Night's Watch")).toBeNull()
   })
 })