cozy-ui 113.7.1 → 113.9.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/Icon/Readme.md

@@ -233,6 +233,7 @@ import New from 'cozy-ui/transpiled/react/Icons/New'
 import Next from 'cozy-ui/transpiled/react/Icons/Next'
 import Note from 'cozy-ui/transpiled/react/Icons/Note'
 import NotificationEmail from 'cozy-ui/transpiled/react/Icons/NotificationEmail'
+import Number from 'cozy-ui/transpiled/react/Icons/Number'
 import Offline from 'cozy-ui/transpiled/react/Icons/Offline'
 import Online from 'cozy-ui/transpiled/react/Icons/Online'
 import Openapp from 'cozy-ui/transpiled/react/Icons/Openapp'
@@ -501,6 +502,7 @@ const icons = [
   Next,
   Note,
   NotificationEmail,
+  Number,
   Offline,
   Online,
   Openapp,
@@ -692,6 +694,7 @@ import FileTypeCodeIcon from 'cozy-ui/transpiled/react/Icons/FileTypeCode'
 import FileTypeFilesIcon from 'cozy-ui/transpiled/react/Icons/FileTypeFiles'
 import FileTypeFolderIcon from 'cozy-ui/transpiled/react/Icons/FileTypeFolder'
 import FileTypeImageIcon from 'cozy-ui/transpiled/react/Icons/FileTypeImage'
+import FileTypeNoteIcon from 'cozy-ui/transpiled/react/Icons/FileTypeNote'
 import FileTypePdfIcon from 'cozy-ui/transpiled/react/Icons/FileTypePdf'
 import FileTypeSheetIcon from 'cozy-ui/transpiled/react/Icons/FileTypeSheet'
 import FileTypeSlideIcon from 'cozy-ui/transpiled/react/Icons/FileTypeSlide'
@@ -731,6 +734,7 @@ const icons = [
   FileTypeFilesIcon,
   FileTypeFolderIcon,
   FileTypeImageIcon,
+  FileTypeNoteIcon,
   FileTypePdfIcon,
   FileTypeSheetIcon,
   FileTypeSlideIcon,
@@ -935,7 +939,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 
 const colors = ['#297EF2', '#08b442', '#B449E7', '#F52D2D', '#FF962F']
 let i = 0
-const availableIcons = ['album-add','album-remove','album','answer','apple','archive','arrowUp','attachment','attention','bank-check','bank','banking-add','banking','bell','benefit','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','carpooling','categories','certified','check-circle','check-list','check-square','check','checkbox','chess','child','circle-filled','clock','clock-outline','cloud-happy','cloud-plus-outlined','cloud','collect','cocktail','comment','company','compare','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh', 'cozy-lock', 'cozy-text', 'cozy-release', 'credit-card-add','credit-card','credit','crop','cross-circle-outline','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','electric-bike','electric-car','electric-scooter','email-notification','email','eu','euro','exchange','eye-closed','eye','face-id','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder-open','folder','forbidden','from-user','gear','globe','gouv','graph-circle','grid','group-list','groups','growth','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','justice','key','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','merge','moped','mosaic-min','motorcycle','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus', 'pop-inside', 'previous','printer','qualify','radio-checked','radio-unchecked','refresh','relationship','remboursement','rename','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','scooter','select-all','server','setting','share-circle','share','shield','shop','sound','spinner','sport-bag','stack','star','star-outline','stats','stop', 'subway', 'support', 'swap', 'sync-cozy','sync','tab','tag','target','task','team','telecom','telephone','text','text-info','to-the-cloud','top','train','tram','trash','trophy', 'uncloud', 'unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','water','wrench-circle','work']
+const availableIcons = ['album-add','album-remove','album','answer','apple','archive','arrowUp','attachment','attention','bank-check','bank','banking-add','banking','bell','benefit','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','carpooling','categories','certified','check-circle','check-list','check-square','check','checkbox','chess','child','circle-filled','clock','clock-outline','cloud-happy','cloud-plus-outlined','cloud','collect','cocktail','comment','company','compare','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh', 'cozy-lock', 'cozy-text', 'cozy-release', 'credit-card-add','credit-card','credit','crop','cross-circle-outline','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','electric-bike','electric-car','electric-scooter','email-notification','email','eu','euro','exchange','eye-closed','eye','face-id','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder-open','folder','forbidden','from-user','gear','globe','gouv','graph-circle','grid','group-list','groups','growth','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','justice','key','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','merge','moped','mosaic-min','motorcycle','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','number','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus', 'pop-inside', 'previous','printer','qualify','radio-checked','radio-unchecked','refresh','relationship','remboursement','rename','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','scooter','select-all','server','setting','share-circle','share','shield','shop','sound','spinner','sport-bag','stack','star','star-outline','stats','stop', 'subway', 'support', 'swap', 'sync-cozy','sync','tab','tag','target','task','team','telecom','telephone','text','text-info','to-the-cloud','top','train','tram','trash','trophy', 'uncloud', 'unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','water','wrench-circle','work']
 ;
 <div style={{ fontSize: '2rem', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)' }}>
   <Sprite />

package/react/Icons/Number.jsx

@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/number.svg` to regenerate;
+import React from 'react'
+
+function SvgNumber(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4 12V4h-.452l-.117.024-2.73 1.177v1.883l1.323-.54V12H4zm11.245-7.363C14.8 4.21 14.192 4 13.44 4c-.437 0-.84.096-1.204.29a2.155 2.155 0 00-.864.816c-.17.29-.27.61-.298.957l-.021.527h2.08v-.318l.004-.09a.507.507 0 01.11-.28.276.276 0 01.233-.11c.111 0 .184.035.248.116.077.097.12.252.12.472 0 .24-.045.418-.128.54-.05.073-.118.111-.232.123l-.09.005h-.994v1.757h1.021l.08.004c.301.03.434.238.434.742 0 .228-.05.395-.144.512-.08.1-.178.144-.325.144-.108 0-.188-.04-.265-.137a.647.647 0 01-.132-.337l-.023-.431H11v.318l.007.206c.04.607.265 1.116.673 1.513.453.44 1.042.661 1.75.661.751 0 1.374-.22 1.85-.663.48-.446.72-1.04.72-1.762 0-.447-.098-.843-.296-1.182l-.094-.145-.107-.134a1.798 1.798 0 00-.252-.235l-.008-.006.014-.01.128-.133c.082-.092.157-.192.225-.3a2 2 0 00.305-1.07c0-.714-.222-1.296-.67-1.723zm-5.83-.007C8.996 4.208 8.417 4 7.696 4c-.475 0-.907.118-1.289.354a2.37 2.37 0 00-.888.99 2.98 2.98 0 00-.3 1.123L5.2 7.03h2.05v-.322l.004-.157c.015-.25.066-.44.146-.568.077-.122.157-.17.271-.17.096 0 .152.033.204.12.076.127.12.323.12.59 0 .192-.049.397-.148.618-.085.19-.211.41-.378.66L7.331 8 5.33 10.57V12h4.87v-1.815H8.05l.573-.824.185-.226c.417-.519.722-.98.906-1.374.215-.462.323-.923.323-1.38 0-.739-.205-1.328-.623-1.751z"
+      />
+    </svg>
+  )
+}
+
+export default SvgNumber

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

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

package/react/QualificationIconStack/index.jsx

@@ -0,0 +1,132 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { getIconByLabel } from 'cozy-client/dist/models/document/qualification'
+
+import Icon from '../Icon'
+import IconStack from '../IconStack'
+import BankIcon from '../Icons/Bank'
+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'
+import FileDuotoneIcon from '../Icons/FileDuotone'
+import FileTypeNoteIcon from '../Icons/FileTypeNote'
+import FitnessIcon from '../Icons/Fitness'
+import GlobeIcon from '../Icons/Globe'
+import GouvIcon from '../Icons/Gouv'
+import HeartIcon from '../Icons/Heart'
+import HomeIcon from '../Icons/Home'
+import ImageIcon from '../Icons/Image'
+import JusticeIcon from '../Icons/Justice'
+import LaudryIcon from '../Icons/Laudry'
+import LightningIcon from '../Icons/Lightning'
+import PeopleIcon from '../Icons/People'
+import PlaneIcon from '../Icons/Plane'
+import RemboursementIcon from '../Icons/Remboursement'
+import RestaurantIcon from '../Icons/Restaurant'
+import SchoolIcon from '../Icons/School'
+import ShopIcon from '../Icons/Shop'
+import TeamIcon from '../Icons/Team'
+import TelecomIcon from '../Icons/Telecom'
+import TelephoneIcon from '../Icons/Telephone'
+import WaterIcon from '../Icons/Water'
+import WorkIcon from '../Icons/Work'
+
+// this is a copy of FileDuotone without the flap and with a white background
+function FileDuotoneWhite(props) {
+  return (
+    <svg viewBox="0 0 26 32" {...props}>
+      <g fillRule="evenodd">
+        <path
+          d="M0 2.002C0 .896.89 0 1.997 0H19l7 7v22.996A2 2 0 0124.003 32H1.997A1.995 1.995 0 010 29.998C.048 16 0 16 0 2.002z"
+          fill="#ffffff"
+        />
+      </g>
+    </svg>
+  )
+}
+
+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,
+  'file-type-note': FileTypeNoteIcon,
+  fitness: FitnessIcon,
+  globe: GlobeIcon,
+  gouv: GouvIcon,
+  heart: HeartIcon,
+  home: HomeIcon,
+  image: ImageIcon,
+  justice: JusticeIcon,
+  laudry: LaudryIcon,
+  lightning: LightningIcon,
+  people: PeopleIcon,
+  plane: PlaneIcon,
+  remboursement: RemboursementIcon,
+  restaurant: RestaurantIcon,
+  school: SchoolIcon,
+  shop: ShopIcon,
+  team: TeamIcon,
+  telecom: TelecomIcon,
+  telephone: TelephoneIcon,
+  water: WaterIcon,
+  work: WorkIcon
+}
+
+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
+      {...props}
+      backgroundIcon={
+        <>
+          <Icon className="u-pos-absolute" icon={FileDuotoneWhite} size={32} />
+          <Icon icon={FileDuotoneIcon} color="#E049BF" size={32} />
+        </>
+      }
+      foregroundIcon={<Icon icon={ForegroundIcon} color="#E049BF" size={16} />}
+    />
+  )
+}
+
+QualificationIconStack.propTypes = {
+  /** The name of the qualification (isp\_invoice, family\_record\_book, etc.) */
+  qualification: PropTypes.string,
+  /** The name of the qualification theme (indentity, family, etc.) */
+  theme: PropTypes.string
+}
+
+export default QualificationIconStack

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/providers/I18n/index.spec.jsx

@@ -1,4 +1,4 @@
-import { render, fireEvent } from '@testing-library/react'
+import { render, fireEvent, screen } from '@testing-library/react'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 
@@ -34,23 +34,31 @@ I18nHelloWorldOldAPI.contextTypes = {
 
 describe('new context api', () => {
   it('should provide t and f and lang through useI18n hook', () => {
-    const root = mount(
+    render(
       <I18n lang="en" dictRequire={() => locales}>
         <I18nHelloWorldHook />
       </I18n>
     )
-    expect(root.html()).toBe('<div>Hello World !<br>6 Jan<br>en</div>')
+    expect(
+      screen.getByText('Hello World !', { exact: false })
+    ).toBeInTheDocument()
+    expect(screen.getByText('6 Jan', { exact: false })).toBeInTheDocument()
+    expect(screen.getByText('en', { exact: false })).toBeInTheDocument()
   })
 })
 
 describe('old context api', () => {
   it('should provide t and f and lang through old context API', () => {
-    const root = mount(
+    render(
       <I18n lang="en" dictRequire={() => locales}>
         <I18nHelloWorldOldAPI />
       </I18n>
     )
-    expect(root.html()).toBe('<div>Hello World !<br>6 Jan<br>en</div>')
+    expect(
+      screen.getByText('Hello World !', { exact: false })
+    ).toBeInTheDocument()
+    expect(screen.getByText('6 Jan', { exact: false })).toBeInTheDocument()
+    expect(screen.getByText('en', { exact: false })).toBeInTheDocument()
   })
 })