cozy-ui-plus 1.1.0

package/src/Contacts/AddModal/ContactForm/index.spec.jsx

@@ -0,0 +1,301 @@
+import { render, screen, fireEvent, act } from '@testing-library/react'
+import React from 'react'
+
+import ContactForm, { isSameContactProp } from './index'
+import DemoProvider from '../../../providers/DemoProvider'
+import { johnDoeContact as contact } from '../mocks'
+
+const dictRequire = lang => require(`../ContactAddressDialog/locales/${lang}`)
+
+const setup = ({ contact }) => {
+  return {
+    contact,
+    onSubmit: () => jest.fn(),
+    onCancel: () => jest.fn()
+  }
+}
+
+const labels = [
+  'Firstname',
+  'Lastname',
+  'Phone',
+  'Email',
+  'Address',
+  'Matrix ID',
+  'Twake URL',
+  'Company',
+  'Job title',
+  'Birthday',
+  'Notes'
+]
+
+describe('ContactForm', () => {
+  it(`should contains ${labels.length} fields and labels`, () => {
+    const props = setup({ contact: {} })
+    const jsx = (
+      <DemoProvider>
+        <ContactForm {...props} />
+      </DemoProvider>
+    )
+    render(jsx)
+    for (const label of labels) {
+      expect(screen.queryByLabelText(label)).not.toBeNull()
+    }
+  })
+
+  it('should fill form with contact data', () => {
+    const props = setup({ contact })
+    const jsx = (
+      <DemoProvider>
+        <ContactForm {...props} />
+      </DemoProvider>
+    )
+    render(jsx)
+    expect(screen.queryByDisplayValue(contact.name.givenName)).not.toBeNull()
+    expect(screen.queryByDisplayValue(contact.name.familyName)).not.toBeNull()
+    expect(screen.queryByDisplayValue(contact.phone[0].number)).not.toBeNull()
+    expect(screen.queryByDisplayValue(contact.email[0].address)).not.toBeNull()
+    expect(screen.queryByDisplayValue(contact.impp[2].uri)).not.toBeNull()
+    expect(
+      screen.queryByDisplayValue(contact.address[0].formattedAddress)
+    ).not.toBeNull()
+    expect(screen.queryByDisplayValue(contact.cozy[0].url)).not.toBeNull()
+    expect(screen.queryByDisplayValue(contact.company)).not.toBeNull()
+    expect(screen.queryByDisplayValue(contact.jobTitle)).not.toBeNull()
+    expect(screen.queryByDisplayValue(contact.note)).not.toBeNull()
+  })
+
+  it('should submit a well formatted contact', () => {
+    const expected = {
+      address: [
+        {
+          city: undefined,
+          code: undefined,
+          country: undefined,
+          region: undefined,
+          formattedAddress: '18 rue des fleurs, Pecado',
+          number: undefined,
+          primary: true,
+          street: '18 rue des fleurs, Pecado',
+          type: undefined
+        }
+      ],
+      impp: [
+        {
+          uri: '123-matrixID-456',
+          protocol: 'matrix',
+          label: 'work',
+          primary: true
+        }
+      ],
+      birthday: '2015-12-31',
+      birthplace: 'somewhere',
+      gender: 'male',
+      company: 'Cozy CLoud',
+      cozy: [
+        { label: undefined, primary: true, url: 'https://jcvd.cozy.cloud' }
+      ],
+      displayName: 'Jean-Claude Van Cozy',
+      email: [{ address: 'jcvc@cozy.cloud', primary: true, type: undefined }],
+      fullname: 'Jean-Claude Van Cozy',
+      indexes: {
+        byFamilyNameGivenNameEmailCozyUrl:
+          'van cozyjean-claudejcvc@cozy.cloudjcvd.cozy.cloud'
+      },
+      jobTitle: 'Dreamer',
+      metadata: { cozy: true, version: 1 },
+      name: {
+        familyName: 'Van Cozy',
+        givenName: 'Jean-Claude',
+        additionalName: undefined,
+        surname: undefined
+      },
+      note: 'Whatever.',
+      phone: [{ number: '+33678987654', primary: true, type: undefined }],
+      relationships: { groups: { data: [] }, related: { data: [] } }
+    }
+
+    let received = null
+    const onSubmit = contact => {
+      received = contact
+    }
+
+    render(
+      <DemoProvider dictRequire={dictRequire}>
+        <ContactForm onSubmit={onSubmit} onCancel={() => {}} />
+      </DemoProvider>
+    )
+
+    const fields = {
+      gender: 'male',
+      givenName: 'Jean-Claude',
+      familyName: 'Van Cozy',
+      surname: '',
+      additionalName: '',
+      'phone[0].phone': '+33678987654',
+      'email[0].email': 'jcvc@cozy.cloud',
+      matrix: '123-matrixID-456',
+      cozy: 'https://jcvd.cozy.cloud',
+      company: 'Cozy CLoud',
+      jobTitle: 'Dreamer',
+      birthday: '2015-12-31',
+      birthplace: 'somewhere',
+      note: 'Whatever.'
+    }
+
+    const form = screen.getByRole('form')
+    for (const fieldName of Object.keys(fields)) {
+      act(() => {
+        const field = form.querySelector(`[name='${fieldName}']`)
+        expect(field).not.toBeNull()
+        fireEvent.change(field, { target: { value: fields[fieldName] } })
+      })
+    }
+
+    const addressBtn = form.querySelector('[name="address[0].address"]')
+    fireEvent.click(addressBtn)
+
+    const addressStreet = screen
+      .getAllByRole('textbox')
+      .find(t => t.name == 'address[0].addressstreet')
+
+    act(() => {
+      fireEvent.change(addressStreet, {
+        target: { value: '18 rue des fleurs, Pecado' }
+      })
+    })
+
+    act(() => {
+      fireEvent.click(screen.getByText('Ok'))
+    })
+
+    act(() => {
+      fireEvent.submit(screen.getByRole('form'))
+    })
+
+    expect(received).toEqual(expected)
+  })
+
+  it('should change inputs value', () => {
+    const testFields = {
+      Firstname: 'Jean-Claude',
+      Lastname: 'Van Cozy',
+      Phone: '+33678987654',
+      Email: 'jcvc@cozy.cloud',
+      Matrix: '123-matrixID-456',
+      Address: '18 rue des fleurs, Pecado',
+      'Twake URL': 'https://jcvd.cozy.cloud',
+      Company: 'Cozy CLoud',
+      jobTitle: 'Dreamer',
+      Birthday: '31/12/2015',
+      Notes: 'Whatever.'
+    }
+
+    const props = setup({ contact: {} })
+    const jsx = (
+      <DemoProvider>
+        <ContactForm {...props} />
+      </DemoProvider>
+    )
+    render(jsx)
+
+    for (const label of labels) {
+      act(() => {
+        fireEvent.change(screen.getByLabelText(label), {
+          target: { value: testFields[label] }
+        })
+      })
+    }
+
+    expect(screen.queryByDisplayValue(testFields['Firstname'])).not.toBeNull()
+    expect(screen.queryByDisplayValue(testFields['Notes'])).not.toBeNull()
+  })
+
+  it('should not submit empty fields', () => {
+    const onSubmit = jest.fn()
+
+    render(
+      <DemoProvider>
+        <ContactForm onSubmit={onSubmit} onCancel={() => {}} />
+      </DemoProvider>
+    )
+
+    act(() => {
+      fireEvent.submit(screen.getByRole('form'))
+    })
+
+    expect(onSubmit).not.toBeCalled()
+  })
+
+  describe('isSameContactProp', () => {
+    it('should return true if contacts have the same "related" relationships', () => {
+      const prevProps = {
+        contact: {
+          relationships: {
+            related: {
+              data: [{ _id: '1' }, { _id: '2' }]
+            }
+          }
+        }
+      }
+      const nextProps = {
+        contact: {
+          relationships: {
+            related: {
+              data: [{ _id: '2' }, { _id: '1' }]
+            }
+          }
+        }
+      }
+      expect(isSameContactProp(prevProps, nextProps)).toBe(true)
+    })
+
+    it('should return false if contacts have different "related" relationships', () => {
+      const prevProps = {
+        contact: {
+          relationships: {
+            related: {
+              data: [{ _id: '1' }, { _id: '2' }]
+            }
+          }
+        }
+      }
+      const nextProps = {
+        contact: {
+          relationships: {
+            related: {
+              data: [{ _id: '1' }, { _id: '3' }]
+            }
+          }
+        }
+      }
+      expect(isSameContactProp(prevProps, nextProps)).toBe(false)
+    })
+
+    it('should return false if one of the contacts has no "related" relationships', () => {
+      const prevProps = {
+        contact: {
+          relationships: {
+            related: {
+              data: [{ _id: '1' }, { _id: '2' }]
+            }
+          }
+        }
+      }
+      const nextProps = {
+        contact: {}
+      }
+      expect(isSameContactProp(prevProps, nextProps)).toBe(false)
+    })
+
+    it('should return false if both contacts have no "related" relationships', () => {
+      const prevProps = {
+        contact: {}
+      }
+      const nextProps = {
+        contact: {}
+      }
+      expect(isSameContactProp(prevProps, nextProps)).toBe(false)
+    })
+  })
+})

package/src/Contacts/AddModal/ContactForm/locales/en.json

@@ -0,0 +1,75 @@
+{
+  "Contacts": {
+    "AddModal": {
+      "ContactForm": {
+        "gender": {
+          "man": "Man",
+          "woman": "Woman"
+        },
+        "other-fields": "Other fields",
+        "fields": {
+          "gender": "Civility",
+          "givenName": "Firstname",
+          "additionalName": "2nd firstname",
+          "surname": "Name in use",
+          "familyName": "Lastname",
+          "phone": "Phone",
+          "email": "Email",
+          "matrix": "Matrix ID",
+          "address": "Address",
+          "cozy": "Twake URL",
+          "company": "Company",
+          "jobTitle": "Job title",
+          "birthday": "Birthday",
+          "birthplace": "Birthplace",
+          "relatedContact": "Related contact",
+          "relationship": "Relationship",
+          "note": "Notes",
+          "label": "Label",
+          "required": "One of these fields must be filled in"
+        },
+        "label": {
+          "none": "None",
+          "home": "Personal",
+          "work": "Pro",
+          "custom": "Customised",
+          "phone": {
+            "cell-home": "Cell (personal)",
+            "cell-work": "Cell (pro)",
+            "voice-home": "Voice (personal)",
+            "voice-work": "Voice (pro)",
+            "fax-home": "Fax (personal)",
+            "fax-work": "Fax (pro)"
+          },
+          "address": {
+            "home": "Home (personal)",
+            "work": "Work (pro)"
+          },
+          "relationship": {
+            "parent": "Parent",
+            "child": "Child",
+            "sibling": "Sibling",
+            "spouse": "Spouse",
+            "coResident": "Co-resident",
+            "friend": "Friend",
+            "colleague": "Colleague",
+            "coWorker": "Co-worker",
+            "acquaintance": "Acquaintance",
+            "helper": "Helper",
+            "recipient": "Recipient"
+          }
+        },
+        "addLabel": {
+          "address": "Add an address",
+          "email": "Add an email",
+          "phone": "Add a phone",
+          "relatedContact": "Add a related contact"
+        }
+      }
+    }
+  },
+  "formatted": {
+    "date": "yyyy-LL-dd",
+    "address": "%{number} %{street}, %{code} %{city}, %{country}"
+  }
+}

package/src/Contacts/AddModal/ContactForm/locales/fr.json

@@ -0,0 +1,75 @@
+{
+  "Contacts": {
+    "AddModal": {
+      "ContactForm": {
+        "gender": {
+          "man": "Homme",
+          "woman": "Femme"
+        },
+        "other-fields": "Autres champs",
+        "fields": {
+          "gender": "Civilité",
+          "givenName": "Prénom",
+          "additionalName": "2e prénom",
+          "surname": "Nom d'usage",
+          "familyName": "Nom",
+          "phone": "Téléphone",
+          "email": "Email",
+          "address": "Adresse",
+          "matrix": "ID Matrix",
+          "cozy": "URL du Twake",
+          "company": "Entreprise",
+          "jobTitle": "Fonction",
+          "birthday": "Anniversaire",
+          "birthplace": "Lieu de naissance",
+          "relatedContact": "Contact lié",
+          "relationship": "Relation",
+          "note": "Notes",
+          "label": "Libellé",
+          "required": "Un de ces champs doit être renseigné"
+        },
+        "label": {
+          "none": "Aucun",
+          "home": "Perso",
+          "work": "Pro",
+          "custom": "Personnalisé",
+          "phone": {
+            "cell-home": "Mobile (perso)",
+            "cell-work": "Mobile (pro)",
+            "voice-home": "Fixe (perso)",
+            "voice-work": "Fixe (pro)",
+            "fax-home": "Fax (perso)",
+            "fax-work": "Fax (pro)"
+          },
+          "address": {
+            "home": "Domicile (perso)",
+            "work": "Travail (pro)"
+          },
+          "relationship": {
+            "parent": "Parent",
+            "child": "Enfant",
+            "sibling": "Frère/Soeur",
+            "spouse": "Conjoint",
+            "coResident": "Colocataire",
+            "friend": "Ami",
+            "colleague": "Collègue/Collaborateur",
+            "coWorker": "Associé/Partenaire",
+            "acquaintance": "Connaissance",
+            "helper": "Assistant/Aidant",
+            "recipient": "Bénéficiaire/Aidé"
+          }
+        },
+        "addLabel": {
+          "address": "Ajouter une adresse",
+          "email": "Ajouter un email",
+          "phone": "Ajouter un téléphone",
+          "relatedContact": "Ajouter un contact lié"
+        }
+      }
+    }
+  },
+  "formatted": {
+    "date": "dd/LL/yyyy",
+    "address": "%{number} %{street}, %{code} %{city}, %{country}"
+  }
+}

package/src/Contacts/AddModal/ContactForm/locales/index.jsx

@@ -0,0 +1,11 @@
+import en from './en.json'
+import fr from './fr.json'
+import ru from './ru.json'
+import vi from './vi.json'
+
+export const locales = {
+  en,
+  fr,
+  ru,
+  vi
+}

package/src/Contacts/AddModal/ContactForm/locales/ru.json

@@ -0,0 +1,75 @@
+{
+  "Contacts": {
+    "AddModal": {
+      "ContactForm": {
+        "gender": {
+          "man": "Мужчина",
+          "woman": "Женщина"
+        },
+        "other-fields": "Другие поля",
+        "fields": {
+          "gender": "Пол",
+          "givenName": "Имя",
+          "additionalName": "Второе имя",
+          "surname": "Используемое имя",
+          "familyName": "Фамилия",
+          "phone": "Телефон",
+          "email": "Email",
+          "matrix": "Matrix ID",
+          "address": "Адрес",
+          "cozy": "Twake URL",
+          "company": "Компания",
+          "jobTitle": "Должность",
+          "birthday": "День рождения",
+          "birthplace": "Место рождения",
+          "relatedContact": "Связанный контакт",
+          "relationship": "Отношение",
+          "note": "Заметки",
+          "label": "Метка",
+          "required": "Одно из этих полей должно быть заполнено"
+        },
+        "label": {
+          "none": "Нет",
+          "home": "Личное",
+          "work": "Рабочее",
+          "custom": "Пользовательское",
+          "phone": {
+            "cell-home": "Мобильный (личный)",
+            "cell-work": "Мобильный (рабочий)",
+            "voice-home": "Голосовой (личный)",
+            "voice-work": "Голосовой (рабочий)",
+            "fax-home": "Факс (личный)",
+            "fax-work": "Факс (рабочий)"
+          },
+          "address": {
+            "home": "Домашний (личный)",
+            "work": "Рабочий (рабочий)"
+          },
+          "relationship": {
+            "parent": "Родитель",
+            "child": "Ребенок",
+            "sibling": "Брат/сестра",
+            "spouse": "Супруг(а)",
+            "coResident": "Сожитель",
+            "friend": "Друг",
+            "colleague": "Коллега",
+            "coWorker": "Сотрудник",
+            "acquaintance": "Знакомый",
+            "helper": "Помощник",
+            "recipient": "Получатель"
+          }
+        },
+        "addLabel": {
+          "address": "Добавить адрес",
+          "email": "Добавить email",
+          "phone": "Добавить телефон",
+          "relatedContact": "Добавить связанный контакт"
+        }
+      }
+    }
+  },
+  "formatted": {
+    "date": "yyyy-LL-dd",
+    "address": "%{number} %{street}, %{code} %{city}, %{country}"
+  }
+}

package/src/Contacts/AddModal/ContactForm/locales/vi.json

@@ -0,0 +1,75 @@
+{
+  "Contacts": {
+    "AddModal": {
+      "ContactForm": {
+        "gender": {
+          "man": "Nam",
+          "woman": "Nữ"
+        },
+        "other-fields": "Trường khác",
+        "fields": {
+          "gender": "Giới tính",
+          "givenName": "Tên",
+          "additionalName": "Tên lót thứ 2",
+          "surname": "Tên đang sử dụng",
+          "familyName": "Họ",
+          "phone": "Điện thoại",
+          "email": "Email",
+          "matrix": "Matrix ID",
+          "address": "Địa chỉ",
+          "cozy": "Twake URL",
+          "company": "Công ty",
+          "jobTitle": "Chức vụ",
+          "birthday": "Sinh nhật",
+          "birthplace": "Nơi sinh",
+          "relatedContact": "Liên hệ liên quan",
+          "relationship": "Mối quan hệ",
+          "note": "Ghi chú",
+          "label": "Nhãn",
+          "required": "Một trong những trường này phải được điền"
+        },
+        "label": {
+          "none": "Không có",
+          "home": "Cá nhân",
+          "work": "Công việc",
+          "custom": "Tùy chỉnh",
+          "phone": {
+            "cell-home": "Di động (cá nhân)",
+            "cell-work": "Di động (công việc)",
+            "voice-home": "Thoại (cá nhân)",
+            "voice-work": "Thoại (công việc)",
+            "fax-home": "Fax (cá nhân)",
+            "fax-work": "Fax (công việc)"
+          },
+          "address": {
+            "home": "Nhà (cá nhân)",
+            "work": "Văn phòng (công việc)"
+          },
+          "relationship": {
+            "parent": "Cha mẹ",
+            "child": "Con",
+            "sibling": "Anh chị em",
+            "spouse": "Vợ/chồng",
+            "coResident": "Cư dân chung",
+            "friend": "Bạn",
+            "colleague": "Đồng nghiệp",
+            "coWorker": "Đồng nghiệp",
+            "acquaintance": "Người quen",
+            "helper": "Người giúp đỡ",
+            "recipient": "Người nhận"
+          }
+        },
+        "addLabel": {
+          "address": "Thêm địa chỉ",
+          "email": "Thêm email",
+          "phone": "Thêm điện thoại",
+          "relatedContact": "Thêm liên hệ liên quan"
+        }
+      }
+    }
+  },
+  "formatted": {
+    "date": "yyyy-LL-dd",
+    "address": "%{number} %{street}, %{code} %{city}, %{country}"
+  }
+}

package/src/Contacts/AddModal/ContactForm/styles.styl

@@ -0,0 +1,2 @@
+.contact-form-field__wrapper
+    width calc(100% - 3rem)