cozy-sharing 12.1.0 → 12.3.0

package/dist/components/ShareRecipientsInput.spec.js

@@ -1,119 +1,210 @@
-import { shallow } from 'enzyme';
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import ShareRecipientsInput from './ShareRecipientsInput';
-describe('ShareRecipientsInput component', function () {
-  it('should match snapshot', function () {
-    var 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'
-          }
-        }]
-      },
-      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'
-        }]
-      },
-      recipients: [{
-        id: '5a3b4ccf-c257',
-        name: {
-          givenName: 'Teagan',
-          familyName: 'Wolf'
-        }
-      }],
-      onPick: jest.fn().mockName('onPick'),
-      onRemove: jest.fn().mockName('onRemove'),
-      placeholder: 'Enter recipients here'
-    };
-    var jsx = /*#__PURE__*/React.createElement(ShareRecipientsInput, props);
-    var wrapper = shallow(jsx);
-    expect(wrapper).toMatchSnapshot();
-  });
-  it('should include groups only if all contacts are loaded', function () {
-    var 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'
-          }
-        }, {
-          id: '5a3b4ccf-c257',
-          _id: '5a3b4ccf-c257',
-          _type: 'io.cozy.contacts',
-          name: {
-            givenName: 'Teagan',
-            familyName: 'Wolf'
-          }
-        }]
-      },
-      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'
-        }]
-      },
-      recipients: [{
-        id: '5a3b4ccf-c257',
-        name: {
-          givenName: 'Teagan',
-          familyName: 'Wolf'
+jest.mock('./ShareAutosuggest', function () {
+  return {
+    __esModule: true,
+    default: function _default(_ref) {
+      var contactsAndGroups = _ref.contactsAndGroups;
+      return /*#__PURE__*/React.createElement("ul", null, contactsAndGroups.map(function (contactOrGroup) {
+        if (contactOrGroup._type === 'io.cozy.contacts') {
+          return /*#__PURE__*/React.createElement("li", {
+            key: contactOrGroup.id
+          }, contactOrGroup.name.givenName, " ", contactOrGroup.name.familyName);
+        } else {
+          return /*#__PURE__*/React.createElement("li", {
+            key: contactOrGroup.id
+          }, contactOrGroup.name);
         }
-      }],
-      onPick: jest.fn().mockName('onPick'),
-      onRemove: jest.fn().mockName('onRemove'),
-      placeholder: 'Enter recipients here'
-    };
-    var jsx = /*#__PURE__*/React.createElement(ShareRecipientsInput, props);
-    var wrapper = shallow(jsx);
-    expect(wrapper).toMatchSnapshot();
-  });
+      }));
+    }
+  };
+});
+describe('ShareRecipientsInput component', function () {
+  var setup = function setup(_ref2) {
+    var contacts = _ref2.contacts,
+        contactGroups = _ref2.contactGroups;
+    render( /*#__PURE__*/React.createElement(ShareRecipientsInput, {
+      contacts: contacts,
+      contactGroups: contactGroups,
+      onPick: function onPick() {},
+      onRemove: function onRemove() {},
+      placeholder: "Enter recipients here"
+    }));
+  };
+
+  it('should include groups and contacts when are loaded', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var contacts, contactGroups;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          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'
+              },
+              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'
+            }]
+          };
+          setup({
+            contacts: contacts,
+            contactGroups: contactGroups
+          });
+          expect(screen.getByText('Michale Russel')).toBeInTheDocument();
+          expect(screen.getByText('Teagan Wolf')).toBeInTheDocument();
+          expect(screen.getByText("The Night's Watch")).toBeInTheDocument();
+
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it('should include groups only if all contacts are loaded', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var contacts, contactGroups;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          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'
+              },
+              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'
+            }]
+          };
+          setup({
+            contacts: contacts,
+            contactGroups: contactGroups
+          });
+          expect(screen.getByText('Michale Russel')).toBeInTheDocument();
+          expect(screen.getByText('Teagan Wolf')).toBeInTheDocument();
+          expect(screen.queryByText("The Night's Watch")).toBeNull();
+
+        case 6:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  it('should include groups only if they have more than one member', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var contacts, contactGroups;
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          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'
+              }
+            }]
+          };
+          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: contacts,
+            contactGroups: contactGroups
+          });
+          expect(screen.getByText('Michale Russel')).toBeInTheDocument();
+          expect(screen.getByText('Teagan Wolf')).toBeInTheDocument();
+          expect(screen.queryByText("The Night's Watch")).toBeNull();
+
+        case 6:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
 });

package/jest.config.js

@@ -2,7 +2,8 @@ module.exports = {
   collectCoverageFrom: [
     'src/**/*.{js,jsx}',
     '!**/node_modules/**',
-    '!**/vendor/**'
+    '!**/vendor/**',
+    '!**/*.stories.{js,jsx,ts,tsx}'
   ],
   snapshotSerializers: ['enzyme-to-json/serializer'],
   testPathIgnorePatterns: ['node_modules', 'dist', '__tests__'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-sharing",
-  "version": "12.1.0",
+  "version": "12.3.0",
   "description": "Provides sharing login for React applications.",
   "main": "dist/index.js",
   "author": "Cozy",
@@ -71,5 +71,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "5de831d050135822b1b9295ae8888d11f6372ee5"
+  "gitHead": "b1ad6f5933b463878f641d9fbb63eddd4c45b0d0"
 }

package/src/components/Avatar/AvatarList.jsx

@@ -6,6 +6,7 @@ import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import LinkIcon from 'cozy-ui/transpiled/react/Icons/Link'
 
 import { ExtraAvatar } from './ExtraAvatar'
+import { GroupAvatar } from './GroupAvatar'
 import { MemberAvatar } from './MemberAvatar'
 import { getDisplayName } from '../../models'
 import styles from '../../styles/recipient.styl'
@@ -88,20 +89,38 @@ const AvatarList = ({
           />
         </span>
       )}
-      {shownRecipients.map((recipient, idx) => (
-        <span
-          data-testid={`AvatarList-avatar${
-            recipient.status === 'owner' ? '-owner' : ''
-          }`}
-          key={idx}
-        >
-          <MemberAvatar
-            recipient={recipient}
-            size={size}
-            className={cx(styles['recipients-avatars--avatar'])}
-          />
-        </span>
-      ))}
+      {shownRecipients.map(recipient => {
+        if (recipient.members) {
+          return (
+            <span
+              data-testid={`AvatarList-avatar${
+                recipient.status === 'owner' ? '-owner' : ''
+              }`}
+              key={recipient.index}
+            >
+              <GroupAvatar
+                size={size}
+                className={cx(styles['recipients-avatars--avatar'])}
+              />
+            </span>
+          )
+        }
+
+        return (
+          <span
+            data-testid={`AvatarList-avatar${
+              recipient.status === 'owner' ? '-owner' : ''
+            }`}
+            key={recipient.index}
+          >
+            <MemberAvatar
+              recipient={recipient}
+              size={size}
+              className={cx(styles['recipients-avatars--avatar'])}
+            />
+          </span>
+        )
+      })}
     </div>
   )
 }

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

@@ -14,7 +14,8 @@ const mockRecipients = new Array(MAX_DISPLAYED_RECIPIENTS - 1)
   .fill(
     {
       status: 'owner',
-      public_name: 'cozy'
+      public_name: 'cozy',
+      index: 'sharing-123-member-0'
     },
     0,
     1
@@ -22,7 +23,8 @@ const mockRecipients = new Array(MAX_DISPLAYED_RECIPIENTS - 1)
   .fill(
     {
       status: 'pending',
-      name: 'Mitch Young'
+      name: 'Mitch Young',
+      index: 'sharing-123-member-1'
     },
     1
   )
@@ -31,15 +33,18 @@ const mockMoreRecipientsThanMaxDisplayed = [
   ...mockRecipients,
   {
     status: 'mail-not-send',
-    name: 'Lyn Webster'
+    name: 'Lyn Webster',
+    index: 'sharing-123-member-2'
   },
   {
     status: 'ready',
-    name: 'Richelle Young'
+    name: 'Richelle Young',
+    index: 'sharing-123-member-3'
   },
   {
     status: 'ready',
-    name: 'John Connor'
+    name: 'John Connor',
+    index: 'sharing-123-member-4'
   }
 ]
 
@@ -120,7 +125,7 @@ describe('AvatarList', () => {
 })
 
 describe('excludeMeAsOwnerFromRecipients', () => {
-  test('excludeMeAsOwnerFromRecipients behavior', () => {
+  it('excludeMeAsOwnerFromRecipients behavior', () => {
     const recipients = [
       {
         status: 'owner',

package/src/components/Avatar/AvatarList.stories.jsx

@@ -4,7 +4,7 @@ import { recipients } from '../../../.storybook/fixtures/recipients'
 const meta = {
   component: AvatarList,
   args: {
-    recipients: [...recipients, ...recipients]
+    recipients: [...recipients]
   }
 }
 
@@ -14,3 +14,21 @@ export const Default = {
   name: 'Default',
   args: {}
 }
+
+export const WithGroups = {
+  name: 'With groups',
+  args: {
+    recipients: [
+      ...recipients,
+      {
+        name: 'Group 1',
+        type: 'group',
+        members: [
+          {
+            public_name: 'Alice'
+          }
+        ]
+      }
+    ]
+  }
+}

package/src/components/Avatar/GroupAvatar.jsx

@@ -3,8 +3,8 @@ import React from 'react'
 import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import TeamIcon from 'cozy-ui/transpiled/react/Icons/Team'
 
-const GroupAvatar = ({ size }) => {
-  return <Avatar icon={TeamIcon} size={size} />
+const GroupAvatar = ({ size, className }) => {
+  return <Avatar icon={TeamIcon} size={size} className={className} />
 }
 
 export { GroupAvatar }

package/src/components/ContactSuggestion.jsx

@@ -1,4 +1,3 @@
-import get from 'lodash/get'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -13,28 +12,15 @@ import { Contact, Group, getDisplayName, getInitials } from '../models'
 
 const ContactModel = models.contact
 
-export const ContactSuggestion = ({ contactOrGroup, contacts }) => {
+export const ContactSuggestion = ({ contactOrGroup }) => {
   const { t } = useI18n()
   let avatarText, name, details
   if (contactOrGroup._type === Group.doctype) {
     name = contactOrGroup.name
-    const membersCount = contacts
-      .reduce((total, contact) => {
-        if (
-          get(contact, 'relationships.groups.data', [])
-            .map(group => group._id)
-            .includes(contactOrGroup._id)
-        ) {
-          return total + 1
-        }
-
-        return total
-      }, 0)
-      .toString()
+    avatarText = 'G'
     details = t('Share.members.count', {
-      smart_count: membersCount
+      smart_count: contactOrGroup.membersCount.toString()
     })
-    avatarText = 'G'
   } else {
     name = getDisplayName(contactOrGroup)
     avatarText = getInitials(contactOrGroup)

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()
   })
 })