cozy-ui 113.8.0 → 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/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/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()
   })
 })
 

package/react/providers/I18n/withLocales.spec.jsx

@@ -1,3 +1,4 @@
+import { render, screen } from '@testing-library/react'
 import React from 'react'
 
 import { I18n } from '.'
@@ -29,9 +30,8 @@ class MockComponent extends React.Component {
 }
 
 describe('with locales', () => {
-  let root
   const setup = ({ lang, Component }) => {
-    root = mount(
+    render(
       <I18n lang={lang} dictRequire={localeCode => globalLocales[localeCode]}>
         <Component />
       </I18n>
@@ -42,9 +42,9 @@ describe('with locales', () => {
     describe(description, () => {
       it('should provide t with correct locale strings', () => {
         setup({ lang: 'en', Component })
-        expect(root.text()).toBe('Hello local world !')
+        expect(screen.getByText('Hello local world !')).toBeInTheDocument()
         setup({ lang: 'fr', Component })
-        expect(root.text()).toBe('Bonjour le monde local !')
+        expect(screen.getByText('Bonjour le monde local !')).toBeInTheDocument()
       })
     })
   }

package/transpiled/react/FileInput/index.js

@@ -47,7 +47,8 @@ var FileInput = function FileInput(_ref) {
       } else {
         _onChange(Array.from(e.target.files)[0]);
       }
-    }
+    },
+    "data-testid": "file-input"
   }, inputProps)));
 };
 

package/transpiled/react/QualificationIconStack/index.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
-var _excluded = ["qualification"];
+var _excluded = ["theme", "qualification"];
 import PropTypes from 'prop-types';
 import React from 'react';
 import { getIconByLabel } from 'cozy-client/dist/models/document/qualification';
@@ -11,7 +11,9 @@ import BankCheckIcon from "cozy-ui/transpiled/react/Icons/BankCheck";
 import BenefitIcon from "cozy-ui/transpiled/react/Icons/Benefit";
 import BillIcon from "cozy-ui/transpiled/react/Icons/Bill";
 import CarIcon from "cozy-ui/transpiled/react/Icons/Car";
+import ChessIcon from "cozy-ui/transpiled/react/Icons/Chess";
 import ChildIcon from "cozy-ui/transpiled/react/Icons/Child";
+import DotsIcon from "cozy-ui/transpiled/react/Icons/Dots";
 import EmailIcon from "cozy-ui/transpiled/react/Icons/Email";
 import EuroIcon from "cozy-ui/transpiled/react/Icons/Euro";
 import ExchangeIcon from "cozy-ui/transpiled/react/Icons/Exchange";
@@ -49,13 +51,15 @@ function FileDuotoneWhite(props) {
   })));
 }
 
-var qualificationIcon = {
+var IconByLabel = {
   'bank-check': BankCheckIcon,
   bank: BankIcon,
   benefit: BenefitIcon,
   bill: BillIcon,
   car: CarIcon,
+  chess: ChessIcon,
   child: ChildIcon,
+  dots: DotsIcon,
   email: EmailIcon,
   euro: EuroIcon,
   exchange: ExchangeIcon,
@@ -81,12 +85,25 @@ var qualificationIcon = {
   water: WaterIcon,
   work: WorkIcon
 };
+var themeIconByLabel = {
+  identity: 'people',
+  family: 'team',
+  work_study: 'work',
+  health: 'heart',
+  home: 'home',
+  transport: 'car',
+  activity: 'chess',
+  finance: 'bank',
+  invoice: 'bill',
+  others: 'dots'
+};
 
 var QualificationIconStack = function QualificationIconStack(_ref) {
-  var qualification = _ref.qualification,
+  var theme = _ref.theme,
+      qualification = _ref.qualification,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var QualificationIcon = qualificationIcon[getIconByLabel(qualification)];
+  var ForegroundIcon = qualification ? IconByLabel[getIconByLabel(qualification)] : theme ? IconByLabel[themeIconByLabel[theme]] : null;
   return /*#__PURE__*/React.createElement(IconStack, _extends({}, props, {
     backgroundIcon: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
       className: "u-pos-absolute",
@@ -98,7 +115,7 @@ var QualificationIconStack = function QualificationIconStack(_ref) {
       size: 32
     })),
     foregroundIcon: /*#__PURE__*/React.createElement(Icon, {
-      icon: QualificationIcon,
+      icon: ForegroundIcon,
       color: "#E049BF",
       size: 16
     })
@@ -107,6 +124,9 @@ var QualificationIconStack = function QualificationIconStack(_ref) {
 
 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/transpiled/react/deprecated/ViewStack/example.js

@@ -34,7 +34,7 @@ var Slide = function Slide(_ref2) {
               return stackPop();
 
             case 2:
-              // No alerts during enzyme tests
+              // No alerts during tests
               if (number === 2 && !global.mount) {
                 alert('You went back to the first slide');
               }