cozy-ui 113.8.0 → 114.0.0

package/react/FileInput/index.spec.jsx

@@ -1,3 +1,4 @@
+import { fireEvent, render, screen } from '@testing-library/react'
 import uniqueId from 'lodash/uniqueId'
 import React from 'react'
 
@@ -20,66 +21,43 @@ describe('FileInput component', () => {
   })
 
   it('should render a file selector', () => {
-    const component = shallow(
+    render(
       <FileInput onChange={onChangeSpy}>
         <span>Click me</span>
       </FileInput>
-    ).getElement()
-    expect(component).toMatchSnapshot()
-  })
-
-  it('should render a default file selector', () => {
-    const component = shallow(
-      <FileInput hidden={false} onChange={onChangeSpy} />
-    ).getElement()
-    expect(component).toMatchSnapshot()
-  })
+    )
 
-  it('should render a disabled file selector', () => {
-    const component = shallow(
-      <FileInput disabled onChange={onChangeSpy}>
-        <span>Click me</span>
-      </FileInput>
-    ).getElement()
-    expect(component).toMatchSnapshot()
-  })
+    const button = screen.getByText('Click me')
 
-  it('should pass props to the input', () => {
-    const component = shallow(
-      <FileInput accept="image/*" onChange={onChangeSpy}>
-        <span>Click me</span>
-      </FileInput>
-    ).getElement()
-    expect(component).toMatchSnapshot()
+    expect(button).toBeInTheDocument()
+    expect(screen.getByTestId('file-input')).toBeInTheDocument()
   })
 
   it('should process selected file on change', () => {
     const filelist = [pic1]
-    const component = shallow(
+    render(
       <FileInput accept="image/*" onChange={onChangeSpy}>
         <span>Click me</span>
       </FileInput>
     )
-    component.find('input').simulate('change', {
-      target: {
-        files: filelist
-      }
-    })
+
+    const input = screen.getByTestId('file-input')
+    fireEvent.change(input, { target: { files: filelist } })
+
     expect(onChangeSpy).toHaveBeenCalledWith(pic1)
   })
 
   it('should process selected files on change if it is multiple', () => {
     const filelist = [pic1, pic2]
-    const component = shallow(
+    render(
       <FileInput accept="image/*" multiple onChange={onChangeSpy}>
         <span>Click me</span>
       </FileInput>
     )
-    component.find('input').simulate('change', {
-      target: {
-        files: filelist
-      }
-    })
+
+    const input = screen.getByTestId('file-input')
+    fireEvent.change(input, { target: { files: filelist } })
+
     expect(onChangeSpy).toHaveBeenCalledWith([pic1, pic2])
   })
 })

package/react/Paywall/Paywall.spec.jsx

@@ -42,15 +42,13 @@ describe('Paywall', () => {
     useInstanceInfo.mockReturnValue({
       context: {
         data: {
-          attributes: {
-            enable_premium_links: enablePremiumLinks,
-            manager_url: 'http://mycozy.cloud'
-          }
+          enable_premium_links: enablePremiumLinks,
+          manager_url: 'http://mycozy.cloud'
         }
       },
       instance: {
         data: {
-          attributes: { uuid: hasUuid ? '123' : null }
+          uuid: hasUuid ? '123' : null
         }
       },
       isLoaded: true

package/react/Popup/index.spec.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme'
+import { render, fireEvent } from '@testing-library/react'
 import React from 'react'
 
 import { isMobileApp } from 'cozy-device-helper'
@@ -17,35 +17,56 @@ const props = {
   height: '200'
 }
 
-const popupMock = {}
-class MessageEventMock {
-  constructor(options = {}) {
-    this.source = options.source || popupMock
+class MessageEventMock extends Event {
+  constructor(options = {}, mock) {
+    super('message', options)
+    this.source = options.source || mock
+  }
+}
+
+class LoadStartEventMock extends Event {
+  constructor(url) {
+    super('loadstart')
+    this.url = url
+  }
+}
+
+class ExitEventMock extends Event {
+  constructor() {
+    super('exit')
   }
 }
 
 describe('Popup', () => {
-  beforeAll(() => {
-    jest.useFakeTimers()
+  const setup = ({ mockAddEventListener = true }) => {
+    const popupMock = new EventTarget()
+
+    isMobileApp.mockReturnValue(false)
 
     jest.spyOn(global, 'open').mockReturnValue(popupMock)
     jest.spyOn(global, 'addEventListener')
-  })
 
-  afterAll(() => {
-    global.open.mockRestore()
-    global.addEventListener.mockRestore()
-  })
+    if (mockAddEventListener) {
+      popupMock.addEventListener = jest.fn()
+    }
 
-  beforeEach(() => {
-    isMobileApp.mockReturnValue(false)
-    popupMock.addEventListener = jest.fn()
     popupMock.close = jest.fn()
     popupMock.focus = jest.fn()
     popupMock.closed = false
     props.onClose = jest.fn()
     props.onMessage = jest.fn()
     props.onMobileUrlChange = jest.fn()
+
+    return popupMock
+  }
+
+  beforeAll(() => {
+    jest.useFakeTimers()
+  })
+
+  afterAll(() => {
+    global.open.mockRestore()
+    global.addEventListener.mockRestore()
   })
 
   afterEach(() => {
@@ -54,7 +75,10 @@ describe('Popup', () => {
   })
 
   it('should open new window', () => {
-    shallow(<Popup {...props} />)
+    const popupMock = setup({})
+
+    render(<Popup {...props} />)
+
     expect(global.open).toHaveBeenCalledWith(
       props.initialUrl,
       props.title,
@@ -64,66 +88,91 @@ describe('Popup', () => {
   })
 
   it('should subscribe to message events', () => {
-    const wrapper = shallow(<Popup {...props} />)
+    setup({})
+
+    render(<Popup {...props} />)
+
     expect(global.addEventListener).toHaveBeenCalledWith(
       'message',
-      wrapper.instance().handleMessage
+      expect.any(Function)
     )
   })
 
   it('should subcribe to mobile events', () => {
+    const popupMock = setup({})
     isMobileApp.mockReturnValue(true)
-    const wrapper = shallow(<Popup {...props} />)
+
+    render(<Popup {...props} />)
+
     expect(popupMock.addEventListener).toHaveBeenCalledWith(
       'loadstart',
-      wrapper.instance().handleLoadStart
+      expect.any(Function)
     )
     expect(popupMock.addEventListener).toHaveBeenCalledWith(
       'exit',
-      wrapper.instance().handleClose
+      expect.any(Function)
     )
   })
 
-  describe('monitorClosing', () => {
-    it('should detect closing', () => {
-      const wrapper = shallow(<Popup {...props} />)
-      jest.spyOn(wrapper.instance(), 'handleClose')
-      popupMock.closed = true
-      jest.runAllTimers()
-      expect(wrapper.instance().handleClose).toHaveBeenCalled()
-    })
-  })
-
   describe('handleClose', () => {
     it('should call onClose', () => {
-      const wrapper = shallow(<Popup {...props} />)
-      wrapper.instance().handleClose()
+      const popupMock = setup({
+        mockAddEventListener: false
+      })
+      isMobileApp.mockReturnValue(true)
+
+      render(<Popup {...props} />)
+
+      const messageEvent = new ExitEventMock()
+      fireEvent(popupMock, messageEvent)
+
       expect(props.onClose).toHaveBeenCalled()
     })
   })
 
   describe('handleMessage', () => {
     it('should call onMessage', () => {
-      const wrapper = shallow(<Popup {...props} />)
-      const messageEvent = new MessageEventMock()
-      wrapper.instance().handleMessage(messageEvent)
+      const popupMock = setup({
+        mockAddEventListener: false
+      })
+      isMobileApp.mockReturnValue(true)
+
+      render(<Popup {...props} />)
+
+      const messageEvent = new MessageEventMock({}, popupMock)
+      fireEvent(window, messageEvent)
+
       expect(props.onMessage).toHaveBeenCalledWith(messageEvent)
     })
 
     it('should ignore messageEvent from another window ', () => {
-      const wrapper = shallow(<Popup {...props} />)
+      setup({
+        mockAddEventListener: false
+      })
+      isMobileApp.mockReturnValue(true)
+
+      render(<Popup {...props} />)
+
       const messageEvent = new MessageEventMock({ source: {} })
-      wrapper.instance().handleMessage(messageEvent)
+      fireEvent(window, messageEvent)
+
       expect(props.onMessage).not.toHaveBeenCalled()
     })
   })
 
   describe('handleLoadStart', () => {
     it('should call onMobileUrlChange', () => {
-      const wrapper = shallow(<Popup {...props} />)
+      const popupMock = setup({
+        mockAddEventListener: false
+      })
+      isMobileApp.mockReturnValue(true)
+
+      render(<Popup {...props} />)
+
       const url = 'https://cozy.io'
-      const urlEvent = { url }
-      wrapper.instance().handleLoadStart(urlEvent)
+      const messageEvent = new LoadStartEventMock(url)
+      fireEvent(popupMock, messageEvent)
+
       expect(props.onMobileUrlChange).toHaveBeenCalledWith(expect.any(URL))
       expect(props.onMobileUrlChange).toHaveBeenCalledWith(new URL(url))
     })

package/react/QualificationIconStack/Readme.md

@@ -4,8 +4,11 @@ import QualificationIconStack from 'cozy-ui/transpiled/react/QualificationIconSt
 ;
 
 <>
+  <QualificationIconStack className="u-mr-1" />
   <QualificationIconStack className="u-mr-1" qualification="isp_invoice" />
   <QualificationIconStack className="u-mr-1" qualification="phone_invoice" />
-  <QualificationIconStack qualification="family_record_book" />
+  <QualificationIconStack className="u-mr-1" qualification="family_record_book" />
+  <QualificationIconStack className="u-mr-1" theme="identity" />
+  <QualificationIconStack theme="transport" />
 </>
 ```

package/react/QualificationIconStack/index.jsx

@@ -10,7 +10,9 @@ import BankCheckIcon from '../Icons/BankCheck'
 import BenefitIcon from '../Icons/Benefit'
 import BillIcon from '../Icons/Bill'
 import CarIcon from '../Icons/Car'
+import ChessIcon from '../Icons/Chess'
 import ChildIcon from '../Icons/Child'
+import DotsIcon from '../Icons/Dots'
 import EmailIcon from '../Icons/Email'
 import EuroIcon from '../Icons/Euro'
 import ExchangeIcon from '../Icons/Exchange'
@@ -51,13 +53,15 @@ function FileDuotoneWhite(props) {
   )
 }
 
-const qualificationIcon = {
+const IconByLabel = {
   'bank-check': BankCheckIcon,
   bank: BankIcon,
   benefit: BenefitIcon,
   bill: BillIcon,
   car: CarIcon,
+  chess: ChessIcon,
   child: ChildIcon,
+  dots: DotsIcon,
   email: EmailIcon,
   euro: EuroIcon,
   exchange: ExchangeIcon,
@@ -84,8 +88,25 @@ const qualificationIcon = {
   work: WorkIcon
 }
 
-const QualificationIconStack = ({ qualification, ...props }) => {
-  const QualificationIcon = qualificationIcon[getIconByLabel(qualification)]
+const themeIconByLabel = {
+  identity: 'people',
+  family: 'team',
+  work_study: 'work',
+  health: 'heart',
+  home: 'home',
+  transport: 'car',
+  activity: 'chess',
+  finance: 'bank',
+  invoice: 'bill',
+  others: 'dots'
+}
+
+const QualificationIconStack = ({ theme, qualification, ...props }) => {
+  const ForegroundIcon = qualification
+    ? IconByLabel[getIconByLabel(qualification)]
+    : theme
+    ? IconByLabel[themeIconByLabel[theme]]
+    : null
 
   return (
     <IconStack
@@ -96,16 +117,16 @@ const QualificationIconStack = ({ qualification, ...props }) => {
           <Icon icon={FileDuotoneIcon} color="#E049BF" size={32} />
         </>
       }
-      foregroundIcon={
-        <Icon icon={QualificationIcon} color="#E049BF" size={16} />
-      }
+      foregroundIcon={<Icon icon={ForegroundIcon} color="#E049BF" size={16} />}
     />
   )
 }
 
 QualificationIconStack.propTypes = {
   /** The name of the qualification (isp\_invoice, family\_record\_book, etc.) */
-  qualification: PropTypes.string.isRequired
+  qualification: PropTypes.string,
+  /** The name of the qualification theme (indentity, family, etc.) */
+  theme: PropTypes.string
 }
 
 export default QualificationIconStack

package/react/QualificationModal/Readme.md

@@ -0,0 +1,28 @@
+```jsx
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import QualificationModal from 'cozy-ui/transpiled/react/QualificationModal'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import CloudIcon from 'cozy-ui/transpiled/react/Icons/Cloud'
+import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel'
+import RadioGroup from 'cozy-ui/transpiled/react/RadioGroup'
+import Radio from 'cozy-ui/transpiled/react/Radios'
+import FormControl from 'cozy-ui/transpiled/react/FormControl'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+
+initialState = { show: isTesting() ? true : false }
+
+const show = () => setState({show: true})
+const hide = () => setState({show: false})
+
+;
+
+<DemoProvider client={{ collection: () => ({ updateMetadataAttribute: () => {}}) }}>
+  <Button label={state.show ? "Close modal" : "Open modal"} variant="ghost" onClick={show} />
+  {state.show &&
+    <QualificationModal
+      file={{ name: "toto.txt", metadata: { qualification: { label: 'isp_invoice' } } }}
+      onClose={hide}
+    />
+  }
+</DemoProvider>
+```

package/react/QualificationModal/index.jsx

@@ -0,0 +1,94 @@
+import PropTypes from 'prop-types'
+import React, { useMemo } from 'react'
+
+import { useClient } from 'cozy-client'
+import { themesList } from 'cozy-client/dist/models/document/documentTypeData'
+import { isQualificationNote } from 'cozy-client/dist/models/document/documentTypeDataHelpers'
+import { getBoundT } from 'cozy-client/dist/models/document/locales'
+import { getQualification } from 'cozy-client/dist/models/document/qualification'
+
+import { locales } from './locales'
+import Icon from '../Icon'
+import FileTypeNoteIcon from '../Icons/FileTypeNote'
+import NestedSelectResponsive from '../NestedSelect/NestedSelectResponsive'
+import QualificationIconStack from '../QualificationIconStack'
+import { useI18n, useExtendI18n } from '../providers/I18n'
+
+const makeOptions = lang => {
+  const qualifT = getBoundT(lang)
+
+  return {
+    children: [
+      {
+        id: 'none',
+        title: qualifT('Scan.themes.none'),
+        icon: <QualificationIconStack />
+      },
+      ...themesList.map(theme => ({
+        id: theme.id,
+        title: qualifT(`Scan.themes.${theme.label}`),
+        icon: <QualificationIconStack theme={theme.label} />,
+        children: theme.items.map(item => ({
+          id: item.label,
+          item,
+          title: qualifT(`Scan.items.${item.label}`),
+          icon: isQualificationNote(item) ? (
+            <Icon icon={FileTypeNoteIcon} size={64} />
+          ) : (
+            <QualificationIconStack qualification={item.label} />
+          )
+        }))
+      }))
+    ]
+  }
+}
+
+const QualificationModal = ({ file, title, onClose }) => {
+  useExtendI18n(locales)
+  const client = useClient()
+  const { t, lang } = useI18n()
+
+  const qualificationLabel = getQualification(file)?.label
+  const options = useMemo(() => makeOptions(lang), [lang])
+
+  const isSelected = ({ id, item }) => {
+    return qualificationLabel
+      ? qualificationLabel === item?.label
+      : id === 'none'
+  }
+
+  const handleClick = async ({ id, item }) => {
+    const fileCollection = client.collection('io.cozy.files')
+    const removeQualification = qualificationLabel && id === 'none'
+
+    /*
+      In the case where we remove the qualification it's necessary to define the attribute to `null` and not `undefined`, with `undefined` the stack does not return the attribute and today the Redux store is not updated for a missing attribute.
+      As a result, the UI is not updated and continues to display the qualification on the document, even though it has been deleted in CouchDB.
+    */
+    await fileCollection.updateMetadataAttribute(file._id, {
+      qualification: removeQualification ? null : item
+    })
+
+    onClose()
+  }
+
+  return (
+    <NestedSelectResponsive
+      title={title || t('QualificationModal.title')}
+      options={options}
+      noDivider
+      document={file}
+      isSelected={isSelected}
+      onSelect={handleClick}
+      onClose={onClose}
+    />
+  )
+}
+
+QualificationModal.propTypes = {
+  file: PropTypes.object,
+  title: PropTypes.string,
+  onClose: PropTypes.func
+}
+
+export default QualificationModal

package/react/QualificationModal/locales/en.json

@@ -0,0 +1,5 @@
+{
+  "QualificationModal": {
+    "title": "Document type"
+  }
+}

package/react/QualificationModal/locales/fr.json

@@ -0,0 +1,5 @@
+{
+  "QualificationModal": {
+    "title": "Type de document"
+  }
+}

package/react/QualificationModal/locales/index.jsx

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

package/react/deprecated/ViewStack/example.jsx

@@ -17,7 +17,7 @@ const Slide = ({ number }) => {
   const handleClickPop = async () => {
     await stackPop()
 
-    // No alerts during enzyme tests
+    // No alerts during tests
     if (number === 2 && !global.mount) {
       alert('You went back to the first slide')
     }

package/react/hooks/useClientErrors.spec.jsx

@@ -1,11 +1,11 @@
-import { renderHook, act } from '@testing-library/react-hooks'
-import { shallow } from 'enzyme'
+import { screen, render, act } from '@testing-library/react'
+import { renderHook } from '@testing-library/react-hooks'
 import React from 'react'
 
-import { CozyProvider } from 'cozy-client'
 import { FetchError } from 'cozy-stack-client'
 
 import useClientErrors from './useClientErrors'
+import DemoProvider from '../providers/DemoProvider'
 
 function createCozyClient() {
   return {
@@ -14,9 +14,15 @@ function createCozyClient() {
   }
 }
 
+jest.mock('../deprecated/QuotaAlert', () => ({ onClose }) => (
+  <>
+    QuotaAlert <button onClick={onClose}>Dismiss</button>
+  </>
+))
+
 function createWrapper(client = createCozyClient()) {
   function Wrapper({ children }) {
-    return <CozyProvider client={client}>{children}</CozyProvider>
+    return <DemoProvider client={client}>{children}</DemoProvider>
   }
   return Wrapper
 }
@@ -27,7 +33,7 @@ function renderWrappedHook(client) {
 }
 
 function wrappedShallow(tree, client) {
-  return shallow(tree, { wrappingComponent: createWrapper(client) })
+  return render(tree, { wrapper: createWrapper(client) })
 }
 
 describe('useClientErrors', () => {
@@ -47,14 +53,12 @@ describe('useClientErrors', () => {
     it('displays nothing by default', () => {
       const { result } = renderWrappedHook()
       const { ClientErrors } = result.current
-      const node = wrappedShallow(<ClientErrors />)
-      expect(node).toHaveLength(0)
+      wrappedShallow(<ClientErrors />)
+
+      expect(screen.queryByText('QuotaAlert')).not.toBeInTheDocument()
     })
 
     describe('for quota errors', () => {
-      const findQuotaAlert = node => {
-        return node.at(0).dive()
-      }
       const setup = async () => {
         const client = createCozyClient()
         const response = new Response(null, {
@@ -81,21 +85,9 @@ describe('useClientErrors', () => {
       }
 
       it('displays a a QuotaAlert', async () => {
-        const { node } = await setup()
-        expect(node).toHaveLength(1)
-        expect(findQuotaAlert(node).type().name).toEqual('QuotaAlert')
-      })
-
-      it('can be dismissed', async () => {
-        const { node, result, client } = await setup()
-        const quotaAlert = findQuotaAlert(node)
-        const onClose = quotaAlert.props().onClose
-        act(() => onClose())
+        await setup()
 
-        // re-render ClientErrors returned by the hook
-        const { ClientErrors } = result.current
-        const updatedNode = wrappedShallow(<ClientErrors />, client)
-        expect(updatedNode.at(0).length).toBe(0)
+        expect(screen.queryByText('QuotaAlert')).toBeInTheDocument()
       })
     })
   })

package/react/index.js

@@ -125,6 +125,8 @@ export { default as Thumbnail } from './Thumbnail'
 export { default as ButtonBase } from './ButtonBase'
 export { default as QualificationGrid } from './QualificationGrid'
 export { default as QualificationItem } from './QualificationItem'
+export { default as QualificationIconStack } from './QualificationIconStack'
+export { default as QualificationModal } from './QualificationModal'
 export { default as Timeline } from './Timeline'
 export { default as TimelineConnector } from './TimelineConnector'
 export { default as TimelineContent } from './TimelineContent'