cozy-sharing 40.1.9 → 40.2.0

package/dist/helpers/contacts.js

@@ -10,16 +10,35 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { models } from 'cozy-client';
 import flag from 'cozy-flags';
 import { validateEmail } from '../helpers/email';
+import { DOCTYPE_CONTACTS, DOCTYPE_GROUPS } from '../models';
 var ContactModel = models.contact; // Return the contact object if present
 // Else check if a contact exist with this email address, if yes return it
 // if not create it
+// With contactsSuggestEnabled, people are sent by email and the
+// stack finds or creates the contact: an org member's id is not on this instance
 
 export var getOrCreateFromArray = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(client, contacts, createContact) {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(client, contacts, createContact, contactsSuggestEnabled) {
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          _context2.next = 2;
+          if (!contactsSuggestEnabled) {
+            _context2.next = 2;
+            break;
+          }
+
+          return _context2.abrupt("return", contacts.map(function (contact) {
+            if (contact._type === DOCTYPE_GROUPS) return contact;
+            var email = ContactModel.getPrimaryEmail(contact);
+            if (validateEmail(email)) return {
+              _type: DOCTYPE_CONTACTS,
+              email: email
+            };
+            return contact._id ? contact : undefined;
+          }));
+
+        case 2:
+          _context2.next = 4;
           return Promise.all(contacts.map( /*#__PURE__*/function () {
             var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(contact) {
               var matchedContact, resp;
@@ -83,24 +102,64 @@ export var getOrCreateFromArray = /*#__PURE__*/function () {
               }, _callee);
             }));
 
-            return function (_x4) {
+            return function (_x5) {
               return _ref2.apply(this, arguments);
             };
           }()));
 
-        case 2:
+        case 4:
           return _context2.abrupt("return", _context2.sent);
 
-        case 3:
+        case 5:
         case "end":
           return _context2.stop();
       }
     }, _callee2);
   }));
 
-  return function getOrCreateFromArray(_x, _x2, _x3) {
+  return function getOrCreateFromArray(_x, _x2, _x3, _x4) {
     return _ref.apply(this, arguments);
   };
+}(); // A suggestion without id has no contact document, and only a fullname,
+// which getDisplayName does not read
+
+export var suggestContacts = /*#__PURE__*/function () {
+  var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(client, q) {
+    var _yield$client$getStac, data;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          _context3.next = 2;
+          return client.getStackClient().fetchJSON('GET', "/contacts/suggest?q=".concat(encodeURIComponent(q)));
+
+        case 2:
+          _yield$client$getStac = _context3.sent;
+          data = _yield$client$getStac.data;
+          return _context3.abrupt("return", data.map(function (_ref4) {
+            var id = _ref4.id,
+                type = _ref4.type,
+                attributes = _ref4.attributes;
+            return _objectSpread(_objectSpread(_objectSpread({}, attributes), id ? {
+              _id: id,
+              id: id
+            } : {
+              displayName: attributes.fullname
+            }), {}, {
+              _type: type
+            });
+          }));
+
+        case 5:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  }));
+
+  return function suggestContacts(_x6, _x7) {
+    return _ref3.apply(this, arguments);
+  };
 }();
 export var getContactsFromGroupId = function getContactsFromGroupId() {
   var contacts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -144,12 +203,12 @@ var isCurrentUser = function isCurrentUser(contact) {
  */
 
 
-export var computeContactsAndGroups = function computeContactsAndGroups(_ref3) {
-  var reachableContacts = _ref3.reachableContacts,
-      unreachableContactsWithGroups = _ref3.unreachableContactsWithGroups,
-      contactGroups = _ref3.contactGroups,
-      currentRecipients = _ref3.currentRecipients,
-      pendingRecipients = _ref3.pendingRecipients;
+export var computeContactsAndGroups = function computeContactsAndGroups(_ref5) {
+  var reachableContacts = _ref5.reachableContacts,
+      unreachableContactsWithGroups = _ref5.unreachableContactsWithGroups,
+      contactGroups = _ref5.contactGroups,
+      currentRecipients = _ref5.currentRecipients,
+      pendingRecipients = _ref5.pendingRecipients;
   var suggestedContacts = reachableContacts.filter(function (contact) {
     return !isCurrentUser(contact) && // We do not want contact already in the sharing
     !currentRecipients.find(function (r) {
@@ -162,12 +221,12 @@ export var computeContactsAndGroups = function computeContactsAndGroups(_ref3) {
   var unreachableContacts = unreachableContactsWithGroups.filter(function (contact) {
     return !isCurrentUser(contact);
   });
-  var currentRecipientGroups = currentRecipients.map(function (_ref4) {
-    var id = _ref4.id;
+  var currentRecipientGroups = currentRecipients.map(function (_ref6) {
+    var id = _ref6.id;
     return id;
   }).filter(Boolean);
-  var suggestedGroups = contactGroups.filter(function (_ref5) {
-    var _id = _ref5._id;
+  var suggestedGroups = contactGroups.filter(function (_ref7) {
+    var _id = _ref7._id;
     return !flag('sharing.show-recipient-groups') || !currentRecipientGroups.includes(_id);
   }).map(function (contactGroup) {
     var reachableMembers = getContactsFromGroupId(suggestedContacts, contactGroup.id).map(function (contact) {

package/dist/helpers/contacts.spec.js

@@ -8,7 +8,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import flag from 'cozy-flags';
-import { computeContactsAndGroups, getOrCreateFromArray } from './contacts';
+import { computeContactsAndGroups, getOrCreateFromArray, suggestContacts } from './contacts';
 jest.mock('cozy-flags', function () {
   return {
     __esModule: true,
@@ -184,4 +184,153 @@ describe('computeContactsAndGroups', function () {
       return c._id;
     })).toEqual(['alice', 'bob']);
   });
+});
+describe('getOrCreateFromArray with contactsSuggestEnabled', function () {
+  it('should send people by email and keep groups, without creating contacts', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var createContact, group, recipients;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          createContact = jest.fn();
+          group = {
+            _id: 'group-1',
+            _type: 'io.cozy.contacts.groups'
+          };
+          _context2.next = 4;
+          return getOrCreateFromArray(mockClient, [{
+            _id: 'org-member-1',
+            _type: 'io.cozy.contacts',
+            email: [{
+              address: 'member@org.example',
+              primary: true
+            }],
+            meta: {
+              kind: 'member'
+            }
+          }, {
+            email: 'unknown@friends.example'
+          }, group], createContact, true);
+
+        case 4:
+          recipients = _context2.sent;
+          expect(recipients).toEqual([{
+            _type: 'io.cozy.contacts',
+            email: 'member@org.example'
+          }, {
+            _type: 'io.cozy.contacts',
+            email: 'unknown@friends.example'
+          }, group]);
+          expect(createContact).not.toHaveBeenCalled();
+
+        case 7:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  it('should keep a contact without email by id, and drop a recipient with neither', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var cozyOnlyContact, recipients;
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          cozyOnlyContact = {
+            _id: 'contact-1',
+            _type: 'io.cozy.contacts',
+            cozy: [{
+              url: 'https://bob.example'
+            }]
+          };
+          _context3.next = 3;
+          return getOrCreateFromArray(mockClient, [cozyOnlyContact, {
+            instance: 'https://alice.example'
+          }], jest.fn(), true);
+
+        case 3:
+          recipients = _context3.sent;
+          expect(recipients).toEqual([cozyOnlyContact, undefined]);
+
+        case 5:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
+});
+describe('suggestContacts', function () {
+  it('should map the suggestions of the stack to contacts', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var fetchJSON, client, contacts;
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          fetchJSON = jest.fn().mockResolvedValue({
+            data: [{
+              type: 'io.cozy.contacts',
+              id: 'org-member-1',
+              attributes: {
+                fullname: 'Jean Dupont',
+                name: {
+                  givenName: 'Jean',
+                  familyName: 'Dupont'
+                },
+                email: [{
+                  address: 'jean@org.example',
+                  primary: true
+                }]
+              },
+              meta: {
+                kind: 'member'
+              }
+            }, {
+              type: 'io.cozy.contacts',
+              attributes: {
+                fullname: 'Paul Dupuis',
+                email: [{
+                  address: 'paul@friends.example',
+                  primary: true
+                }]
+              }
+            }]
+          });
+          client = {
+            getStackClient: function getStackClient() {
+              return {
+                fetchJSON: fetchJSON
+              };
+            }
+          };
+          _context4.next = 4;
+          return suggestContacts(client, 'dup & co');
+
+        case 4:
+          contacts = _context4.sent;
+          expect(fetchJSON).toHaveBeenCalledWith('GET', '/contacts/suggest?q=dup%20%26%20co');
+          expect(contacts).toEqual([{
+            _id: 'org-member-1',
+            id: 'org-member-1',
+            _type: 'io.cozy.contacts',
+            fullname: 'Jean Dupont',
+            name: {
+              givenName: 'Jean',
+              familyName: 'Dupont'
+            },
+            email: [{
+              address: 'jean@org.example',
+              primary: true
+            }]
+          }, {
+            _type: 'io.cozy.contacts',
+            fullname: 'Paul Dupuis',
+            displayName: 'Paul Dupuis',
+            email: [{
+              address: 'paul@friends.example',
+              primary: true
+            }]
+          }]);
+
+        case 7:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  })));
 });

package/dist/hooks/useResolveRecipients.js

@@ -2,6 +2,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useCallback } from 'react';
 import { useClient } from 'cozy-client';
+import { useSharingContext } from './useSharingContext';
 import { getOrCreateFromArray } from '../helpers/contacts';
 import { DOCTYPE_CONTACTS } from '../models';
 /**
@@ -13,7 +14,10 @@ import { DOCTYPE_CONTACTS } from '../models';
  */
 
 export var useResolveRecipients = function useResolveRecipients() {
+  var _useSharingContext;
+
   var client = useClient();
+  var contactsSuggestEnabled = (_useSharingContext = useSharingContext()) === null || _useSharingContext === void 0 ? void 0 : _useSharingContext.contactsSuggestEnabled;
   return useCallback( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(pendingRecipients) {
       var selectedOption,
@@ -29,7 +33,7 @@ export var useResolveRecipients = function useResolveRecipients() {
               return client.create(DOCTYPE_CONTACTS, contact);
             };
             _context.next = 4;
-            return getOrCreateFromArray(client, pendingRecipients, createContact);
+            return getOrCreateFromArray(client, pendingRecipients, createContact, contactsSuggestEnabled);
 
           case 4:
             contacts = _context.sent;
@@ -49,5 +53,5 @@ export var useResolveRecipients = function useResolveRecipients() {
     return function (_x) {
       return _ref.apply(this, arguments);
     };
-  }(), [client]);
+  }(), [client, contactsSuggestEnabled]);
 };

package/dist/hooks/useResolveRecipients.spec.js

@@ -18,6 +18,15 @@ jest.mock('../helpers/contacts', function () {
     getOrCreateFromArray: jest.fn()
   };
 });
+jest.mock('./useSharingContext', function () {
+  return {
+    useSharingContext: function useSharingContext() {
+      return {
+        contactsSuggestEnabled: true
+      };
+    }
+  };
+});
 var contacts = [{
   _id: 'alice'
 }, {
@@ -102,7 +111,7 @@ describe('useResolveRecipients', function () {
               address: 'alice@cozy.cc'
             }]
           });
-          expect(getOrCreateFromArray).toHaveBeenCalledWith(mockClient, pendingRecipients, expect.any(Function));
+          expect(getOrCreateFromArray).toHaveBeenCalledWith(mockClient, pendingRecipients, expect.any(Function), true);
           expect(mockClient.create).toHaveBeenCalledWith('io.cozy.contacts', {
             email: [{
               address: 'alice@cozy.cc'
@@ -129,7 +138,7 @@ describe('useResolveRecipients', function () {
           return result.current([], 'readWrite', createContact);
 
         case 4:
-          expect(getOrCreateFromArray).toHaveBeenCalledWith(mockClient, [], createContact);
+          expect(getOrCreateFromArray).toHaveBeenCalledWith(mockClient, [], createContact, true);
 
         case 5:
         case "end":

package/dist/queries/queries.js

@@ -1,3 +1,9 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import { Q, fetchPolicies } from 'cozy-client';
 import { DOCTYPE_CONTACTS, DOCTYPE_GROUPS } from '../models';
 var DEFAULT_CACHE_TIMEOUT_QUERIES = 9 * 60 * 1000;
@@ -12,12 +18,15 @@ export var buildSharingsByIdQuery = function buildSharingsByIdQuery(sharingId) {
   };
 };
 export var buildReachableContactsQuery = function buildReachableContactsQuery() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      inGroups = _ref.inGroups;
+
   return {
     definition: Q(DOCTYPE_CONTACTS).where({
       _id: {
         $gt: null
       }
-    }).partialIndex({
+    }).partialIndex(_objectSpread({
       trashed: {
         $or: [{
           $eq: false
@@ -38,9 +47,13 @@ export var buildReachableContactsQuery = function buildReachableContactsQuery()
           }
         }
       }]
-    }).indexFields(['_id']).limitBy(1000),
+    }, inGroups && {
+      'relationships.groups.data': {
+        $exists: true
+      }
+    })).indexFields(['_id']).limitBy(1000),
     options: {
-      as: 'io.cozy.contacts/reachable'
+      as: inGroups ? 'io.cozy.contacts/reachable-with-groups' : 'io.cozy.contacts/reachable'
     }
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-sharing",
-  "version": "40.1.9",
+  "version": "40.2.0",
   "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.4",
+    "cozy-ui-plus": "^14.1.5",
     "jest": "30.3.0",
     "jest-environment-jsdom": "30.3.0",
     "react": "16.12.0",
@@ -84,5 +84,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "4dc5561f74fe7d2d000b112026294e208221a4d7"
+  "gitHead": "5641a18cdc0008e4a73d0d00ffc7b7e58b124185"
 }

package/src/SharingProvider.jsx

@@ -745,7 +745,12 @@ export class SharingProvider extends Component {
     // but if we don't, consumers don't rerender when the state changes after loading the sharings,
     // probably because the state object remains the same...
     return (
-      <SharingContext.Provider value={{ ...this.state }}>
+      <SharingContext.Provider
+        value={{
+          ...this.state,
+          contactsSuggestEnabled: this.props.contactsSuggestEnabled
+        }}
+      >
         {this.props.children}
       </SharingContext.Provider>
     )

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

@@ -160,7 +160,9 @@ describe('PermissionTypeMenu component', () => {
     }
 
     beforeEach(() => {
-      flag.mockReturnValue(true)
+      flag.mockImplementation(
+        name => name === 'drive.federated-shared-folder.enabled'
+      )
       mockHasSharedParent.mockReturnValue(true)
       mockGetSharingById.mockReturnValue({
         id: 'sharing-123',

package/src/components/ShareAutosuggest.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { useState, useRef } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import Autosuggest from 'react-autosuggest'
 
 import Chip from 'cozy-ui/transpiled/react/Chips'
@@ -10,10 +10,14 @@ import { MemberAvatar } from './Avatar/MemberAvatar'
 import ContactSuggestion from './ContactSuggestion'
 import { isContactToBeCreated } from '../helpers/contacts'
 import { extractEmails, validateEmail } from '../helpers/email'
+import logger from '../logger'
 import { getDisplayName, DOCTYPE_CONTACTS, DOCTYPE_GROUPS } from '../models'
 import styles from '../styles/autosuggest.styl'
 import { contactOrGroupMatch } from '../suggestionMatchers'
 
+const FETCH_CONTACTS_DEBOUNCE = 300
+const FETCH_CONTACTS_MIN_LENGTH = 3
+
 const ShareAutosuggest = ({
   loading,
   disabled,
@@ -24,15 +28,21 @@ const ShareAutosuggest = ({
   enableCreateContact,
   placeholder,
   autoFocus,
-  endAdornment
+  endAdornment,
+  fetchContacts
 }) => {
   const [inputValue, setInputValue] = useState('')
   const [suggestions, setSuggestions] = useState([])
   const [isPasted, setIsPasted] = useState(false)
   const [isLoadingDisplayed, setLoadingDisplayed] = useState(false)
+  const [isFetching, setIsFetching] = useState(false)
 
   const autosuggestRef = useRef(null)
   const containerRef = useRef(null)
+  const fetchTimeoutRef = useRef(null)
+  const fetchedValueRef = useRef(null)
+
+  useEffect(() => () => clearTimeout(fetchTimeoutRef.current), [])
 
   const computeSuggestions = value => {
     const inputValue = value.trim().toLowerCase()
@@ -44,9 +54,7 @@ const ShareAutosuggest = ({
         )
   }
 
-  const onSuggestionsFetchRequested = ({ value }) => {
-    const computedSuggestions = computeSuggestions(value)
-
+  const showSuggestions = (computedSuggestions, value) => {
     if (computedSuggestions.length > 0) {
       setSuggestions(computedSuggestions)
     } else if (enableCreateContact && validateEmail(value)) {
@@ -61,7 +69,36 @@ const ShareAutosuggest = ({
     }
   }
 
+  const onSuggestionsFetchRequested = ({ value }) => {
+    const computedSuggestions = computeSuggestions(value)
+    clearTimeout(fetchTimeoutRef.current)
+    fetchedValueRef.current = value
+
+    if (!fetchContacts || value.trim().length < FETCH_CONTACTS_MIN_LENGTH) {
+      setIsFetching(false)
+      showSuggestions(computedSuggestions, value)
+      return
+    }
+
+    setIsFetching(true)
+    fetchTimeoutRef.current = setTimeout(async () => {
+      let contacts = []
+      try {
+        contacts = await fetchContacts(value.trim())
+      } catch (err) {
+        logger.error('Failed to fetch contact suggestions', err)
+      }
+      // The user kept typing or left the input while the stack was answering
+      if (fetchedValueRef.current !== value) return
+      setIsFetching(false)
+      showSuggestions([...contacts, ...computedSuggestions], value)
+    }, FETCH_CONTACTS_DEBOUNCE)
+  }
+
   const onSuggestionsClearRequested = () => {
+    clearTimeout(fetchTimeoutRef.current)
+    fetchedValueRef.current = null
+    setIsFetching(false)
     setSuggestions([])
   }
 
@@ -174,7 +211,7 @@ const ShareAutosuggest = ({
         )
       })}
       <input {...inputProps} onKeyPress={onKeyPress} onKeyUp={onKeyUp} />
-      {loading && isLoadingDisplayed ? (
+      {(loading || isFetching) && isLoadingDisplayed ? (
         <Spinner color="var(--primaryColor)" />
       ) : null}
       {endAdornment ? (
@@ -231,7 +268,8 @@ ShareAutosuggest.propTypes = {
   enableCreateContact: PropTypes.bool,
   placeholder: PropTypes.string,
   autoFocus: PropTypes.bool,
-  endAdornment: PropTypes.node
+  endAdornment: PropTypes.node,
+  fetchContacts: PropTypes.func
 }
 
 export default ShareAutosuggest

package/src/components/ShareAutosuggest.spec.jsx

@@ -1,4 +1,4 @@
-import { render, fireEvent, screen } from '@testing-library/react'
+import { act, render, fireEvent, screen } from '@testing-library/react'
 import React from 'react'
 
 import ShareAutosuggest from './ShareAutosuggest'
@@ -13,7 +13,8 @@ describe('ShareAutosuggest', () => {
     onPick,
     onRemove,
     loading = false,
-    enableCreateContact = true
+    enableCreateContact = true,
+    fetchContacts
   }) => {
     render(
       <AppLike>
@@ -25,6 +26,7 @@ describe('ShareAutosuggest', () => {
           recipients={[]}
           onRemove={onRemove}
           enableCreateContact={enableCreateContact}
+          fetchContacts={fetchContacts}
         />
       </AppLike>
     )
@@ -88,4 +90,59 @@ describe('ShareAutosuggest', () => {
 
     expect(screen.queryByText('loading')).toBeNull()
   })
+
+  describe('with fetchContacts', () => {
+    beforeEach(() => {
+      jest.useFakeTimers()
+      // Not implemented by jsdom, called when a suggestion is highlighted
+      Element.prototype.scrollIntoView = jest.fn()
+    })
+
+    afterEach(() => {
+      jest.useRealTimers()
+    })
+
+    it('should suggest the fetched contacts, debounced and from 3 characters', async () => {
+      const fetchContacts = jest.fn().mockResolvedValue([
+        {
+          _id: 'org-member-1',
+          _type: 'io.cozy.contacts',
+          displayName: 'Jean Dupont',
+          email: [{ address: 'jean@org.example', primary: true }]
+        }
+      ])
+
+      setup({ onPick: jest.fn(), onRemove: jest.fn(), fetchContacts })
+
+      const inputNode = screen.getByPlaceholderText('myPlaceHolder')
+      fireEvent.change(inputNode, { target: { value: 'du' } })
+      act(() => jest.runAllTimers())
+      expect(fetchContacts).not.toHaveBeenCalled()
+
+      fireEvent.change(inputNode, { target: { value: 'dup' } })
+      fireEvent.change(inputNode, { target: { value: 'dupo' } })
+      act(() => jest.runAllTimers())
+      expect(fetchContacts).toHaveBeenCalledTimes(1)
+      expect(fetchContacts).toHaveBeenCalledWith('dupo')
+
+      expect(await screen.findByText('Jean Dupont')).toBeInTheDocument()
+    })
+
+    it('should show the loading indicator until the contacts are fetched', async () => {
+      let resolveFetch
+      const fetchContacts = jest.fn(
+        () => new Promise(resolve => (resolveFetch = resolve))
+      )
+
+      setup({ onPick: jest.fn(), onRemove: jest.fn(), fetchContacts })
+
+      const inputNode = screen.getByPlaceholderText('myPlaceHolder')
+      fireEvent.change(inputNode, { target: { value: 'dup' } })
+      expect(screen.getByText('loading')).toBeInTheDocument()
+
+      act(() => jest.runAllTimers())
+      await act(async () => resolveFetch([]))
+      expect(screen.queryByText('loading')).toBeNull()
+    })
+  })
 })