cozy-ui 113.8.0 → 114.0.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [114.0.0](https://github.com/cozy/cozy-ui/compare/v113.9.0...v114.0.0) (2024-12-12)
+
+
+### Features
+
+* Add QualificationModal component ([e2ebcc0](https://github.com/cozy/cozy-ui/commit/e2ebcc0))
+* Upgrade packages ([4ca7867](https://github.com/cozy/cozy-ui/commit/4ca7867))
+
+
+### BREAKING CHANGES
+
+* You must have `cozy-client >= 51.6.0` and `cozy-intent >= 2.29.1`
+
+# [113.9.0](https://github.com/cozy/cozy-ui/compare/v113.8.0...v113.9.0) (2024-12-10)
+
+
+### Features
+
+* **QualificationIconStack:** Add `theme` props ([61081a1](https://github.com/cozy/cozy-ui/commit/61081a1))
+
 # [113.8.0](https://github.com/cozy/cozy-ui/compare/v113.7.1...v113.8.0) (2024-12-04)
 
 

package/jest.config.js

@@ -21,6 +21,5 @@ module.exports = {
   globals: {
     __ALLOW_HTTP__: false,
     cozy: {}
-  },
-  snapshotSerializers: ['enzyme-to-json/serializer']
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "113.8.0",
+  "version": "114.0.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -48,8 +48,6 @@
     "sprite": "scripts/make-icon-sprite.sh",
     "screenshots": "node scripts/screenshots.js --screenshot-dir ./screenshots --styleguide-url file://$(pwd)/build/react --kss-dir ./build/styleguide",
     "test": "jest",
-    "test:noSnapshots": "jest --testPathIgnorePatterns 'react/examples.spec.jsx'",
-    "test:snapshots": "jest react/examples.spec.jsx",
     "screenshots:server": "nodemon ./scripts/pixelmatch-server/server.js -e js,hbs",
     "postbuild": "postcss transpiled/react/stylesheet.css --replace",
     "travis-deploy-once": "travis-deploy-once",
@@ -94,18 +92,15 @@
     "browserslist-config-cozy": "0.4.0",
     "bundlemon": "3.1.0",
     "copyfiles": "2.4.1",
-    "cozy-client": "^48.8.0",
+    "cozy-client": "^51.6.0",
     "cozy-device-helper": "2.0.0",
     "cozy-flags": "^2.10.1",
-    "cozy-intent": "1.16.1",
+    "cozy-intent": "^2.29.1",
     "cozy-logger": "^1.9.0",
-    "cozy-stack-client": "^47.4.0",
+    "cozy-stack-client": "^51.6.0",
     "css-loader": "0.28.11",
     "cssnano": "4.1.11",
     "cssnano-preset-advanced": "4.0.8",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.6",
-    "enzyme-to-json": "3.6.2",
     "eslint": "8.11.0",
     "eslint-config-cozy-app": "^6.1.0",
     "eslint-config-prettier": "8.6.0",
@@ -134,7 +129,6 @@
     "postcss-cli": "6.1.3",
     "postcss-loader": "2.1.6",
     "prettier": "2.6.0",
-    "pretty": "2.0.0",
     "prop-types": "15.7.2",
     "react": "16.12.0",
     "react-dom": "16.12.0",
@@ -187,9 +181,9 @@
     "rooks": "^5.11.2"
   },
   "peerDependencies": {
-    "cozy-client": ">=48.8.0",
+    "cozy-client": ">=51.6.0",
     "cozy-device-helper": "^2.0.0",
-    "cozy-intent": ">=1.3.0",
+    "cozy-intent": ">=2.29.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
   },

package/react/AppSections/components/AppsSection.spec.jsx

@@ -2,13 +2,12 @@
 
 /* eslint-env jest */
 
-import { mount } from 'enzyme'
+import { fireEvent, render, screen } from '@testing-library/react'
 import React from 'react'
 
 import { CozyProvider } from 'cozy-client'
 
 import { AppsSection } from './AppsSection'
-import Tile, { TileTitle, TileSubtitle, TileFooter } from '../../Tile'
 import { I18nContext } from '../../jestLib/I18n'
 import mockApps from '../../mocks/apps'
 import { BreakpointsProvider } from '../../providers/Breakpoints'
@@ -19,10 +18,9 @@ const i18nContext = I18nContext({ locale: en })
 const tMock = i18nContext.t
 
 describe('AppsSection component', () => {
-  let component
   const client = {}
   const setup = ({ onAppClick }) => {
-    component = mount(
+    render(
       <CozyProvider client={client}>
         <BreakpointsProvider>
           <I18n lang="en" dictRequire={() => en}>
@@ -36,31 +34,24 @@ describe('AppsSection component', () => {
           </I18n>
         </BreakpointsProvider>
       </CozyProvider>
-    ).find(AppsSection)
+    )
   }
 
   it('should be rendered correctly with apps list, subtitle', () => {
     const mockOnAppClick = jest.fn()
     setup({ onAppClick: mockOnAppClick })
-    expect(
-      component.find(Tile).map(x => {
-        const developer = x.find(TileSubtitle)
-        const status = x.find(TileFooter)
-        return {
-          title: x.find(TileTitle).text(),
-          developer: developer.length ? developer.text() : null,
-          status: status.length ? status.text() : null
-        }
-      })
-    ).toMatchSnapshot()
+
+    mockApps.forEach(app => {
+      expect(screen.getByText(app.name, { exact: false })).toBeInTheDocument()
+    })
   })
 
   it('should run provided onAppClick on AppTile click event', () => {
     const mockOnAppClick = jest.fn()
     setup({ onAppClick: mockOnAppClick })
-    expect(component.find(Tile).length).toBe(mockApps.length)
-    const appItem = component.find(Tile).at(0)
-    appItem.simulate('click')
+
+    const bouilligue = screen.getByText('Bouilligue', { exact: false })
+    fireEvent.click(bouilligue)
     expect(mockOnAppClick.mock.calls.length).toBe(1)
     expect(mockOnAppClick.mock.calls[0][0]).toBe('konnector-bouilligue')
   })

package/react/AppSections/index.spec.jsx

@@ -2,13 +2,14 @@
 
 /* eslint-env jest */
 
-import { shallow } from 'enzyme'
+import { render, screen } from '@testing-library/react'
 import React from 'react'
 
 import { Sections } from './Sections'
 import en from './locales/en.json'
 import { I18nContext } from '../jestLib/I18n'
 import mockApps from '../mocks/apps'
+import DemoProvider from '../providers/DemoProvider'
 
 const i18nContext = I18nContext({ locale: en })
 const tMock = i18nContext.t
@@ -16,101 +17,121 @@ const tMock = i18nContext.t
 describe('AppsSection component', () => {
   it('should be rendered correctly with apps list, subtitle and onAppClick', () => {
     const mockOnAppClick = jest.fn()
-    const component = shallow(
-      <Sections
-        t={tMock}
-        lang="en"
-        subtitle="Test Apps"
-        apps={mockApps}
-        allApps={mockApps}
-        onAppClick={mockOnAppClick}
-        error={null}
-        location={{ search: '' }}
-      />
-    ).getElement()
-    expect(component).toMatchSnapshot()
+    render(
+      <DemoProvider>
+        <Sections
+          t={tMock}
+          lang="en"
+          subtitle="Test Apps"
+          apps={mockApps}
+          allApps={mockApps}
+          onAppClick={mockOnAppClick}
+          error={null}
+          location={{ search: '' }}
+        />
+      </DemoProvider>
+    )
+
+    expect(screen.queryByText('Cozy Collect')).toBeInTheDocument()
+    expect(screen.queryByText('Cozy Drive')).toBeInTheDocument()
+    expect(screen.queryByText('DevOnly')).toBeInTheDocument()
   })
 
   it('should render correctly render message if error provided', () => {
     const mockOnAppClick = jest.fn()
-    const component = shallow(
-      <Sections
-        t={tMock}
-        lang="en"
-        subtitle="Test Apps"
-        apps={mockApps}
-        allApps={mockApps}
-        onAppClick={mockOnAppClick}
-        error={new Error('This is a test error')}
-        location={{ search: '' }}
-      />
-    ).getElement()
-    expect(component).toMatchSnapshot()
+    render(
+      <DemoProvider>
+        <Sections
+          t={tMock}
+          lang="en"
+          subtitle="Test Apps"
+          apps={mockApps}
+          allApps={mockApps}
+          onAppClick={mockOnAppClick}
+          error={new Error('This is a test error')}
+          location={{ search: '' }}
+        />
+      </DemoProvider>
+    )
+
+    expect(screen.queryByText('This is a test error')).toBeInTheDocument()
   })
 
   it('should not render dropdown filter on mobile if nav=false flag provided', () => {
     const mockOnAppClick = jest.fn()
-    const component = shallow(
-      <Sections
-        t={tMock}
-        lang="en"
-        subtitle="Test Apps"
-        apps={mockApps}
-        allApps={mockApps}
-        onAppClick={mockOnAppClick}
-        breakpoints={{ isMobile: true }}
-        hasNav={false}
-      />
-    ).getElement()
-    expect(component).toMatchSnapshot()
+    render(
+      <DemoProvider>
+        <Sections
+          t={tMock}
+          lang="en"
+          subtitle="Test Apps"
+          apps={mockApps}
+          allApps={mockApps}
+          onAppClick={mockOnAppClick}
+          breakpoints={{ isMobile: true }}
+          hasNav={false}
+        />
+      </DemoProvider>
+    )
+
+    expect(screen.queryByText('All categories')).not.toBeInTheDocument()
   })
 
   it('should not render dropdown filter on tablet if nav=false flag provided', () => {
     const mockOnAppClick = jest.fn()
-    const component = shallow(
-      <Sections
-        t={tMock}
-        lang="en"
-        subtitle="Test Apps"
-        apps={mockApps}
-        allApps={mockApps}
-        onAppClick={mockOnAppClick}
-        breakpoints={{ isTablet: true }}
-        hasNav={false}
-      />
-    ).getElement()
-    expect(component).toMatchSnapshot()
+    render(
+      <DemoProvider>
+        <Sections
+          t={tMock}
+          lang="en"
+          subtitle="Test Apps"
+          apps={mockApps}
+          allApps={mockApps}
+          onAppClick={mockOnAppClick}
+          breakpoints={{ isTablet: true }}
+          hasNav={false}
+        />
+      </DemoProvider>
+    )
+
+    expect(screen.queryByText('All categories')).not.toBeInTheDocument()
   })
 
   it('should render dropdown filter on mobile if no nav=false flag provided', () => {
     const mockOnAppClick = jest.fn()
-    const component = shallow(
-      <Sections
-        t={tMock}
-        lang="en"
-        subtitle="Test Apps"
-        apps={mockApps}
-        allApps={mockApps}
-        onAppClick={mockOnAppClick}
-        breakpoints={{ isMobile: true }}
-      />
-    ).getElement()
-    expect(component).toMatchSnapshot()
+    render(
+      <DemoProvider>
+        <Sections
+          t={tMock}
+          lang="en"
+          subtitle="Test Apps"
+          apps={mockApps}
+          allApps={mockApps}
+          onAppClick={mockOnAppClick}
+          breakpoints={{ isMobile: true }}
+        />
+      </DemoProvider>
+    )
+
+    expect(screen.queryByText('All categories')).toBeInTheDocument()
   })
 
   it('should render dropdown filter on tablet if no nav=false flag provided', () => {
     const mockOnAppClick = jest.fn()
-    const component = shallow(
-      <Sections
-        t={tMock}
-        lang="en"
-        subtitle="Test Apps"
-        apps={mockApps}
-        allApps={mockApps}
-        onAppClick={mockOnAppClick}
-        breakpoints={{ isTablet: true }}
-      />
-    ).getElement()
-    expect(component).toMatchSnapshot()
+    render(
+      <DemoProvider>
+        <Sections
+          t={tMock}
+          lang="en"
+          subtitle="Test Apps"
+          apps={mockApps}
+          allApps={mockApps}
+          onAppClick={mockOnAppClick}
+          breakpoints={{ isTablet: true }}
+        />
+      </DemoProvider>
+    )
+
+    expect(screen.queryByText('All categories')).toBeInTheDocument()
   })
 })

package/react/ContactsList/ContactRow.spec.js

@@ -1,6 +1,5 @@
-import { mount } from 'enzyme'
+import { render, screen } from '@testing-library/react'
 import React from 'react'
-import renderer from 'react-test-renderer'
 
 import logger from 'cozy-logger'
 
@@ -16,20 +15,22 @@ const makeContact = attrs => ({
 })
 
 const setup = ({ contact }) => {
-  const root = mount(
+  render(
     <BreakpointsProvider>
       <ContactRow contact={contact} />
     </BreakpointsProvider>
   )
-  return { root }
 }
 
 describe('ContactRow', () => {
   it('should accept the strict minimum', () => {
     const contact = makeContact({ email: [{ address: 'johndoe@localhost' }] })
-    const { root } = setup({ contact })
-    const contactrowemail = root.find('ContactEmail')
-    expect(contactrowemail.text()).toBe(contact.email[0].address)
+    setup({ contact })
+
+    // With a minimal contact, email is displayed twice
+    // - one as display name
+    // - one as email
+    expect(screen.getAllByText('johndoe@localhost').length).toBe(2)
   })
 
   it('should display data', () => {
@@ -39,62 +40,36 @@ describe('ContactRow', () => {
       email: [{ address: 'johndoe@localhost' }],
       cozy: [{ url: 'http://johndoe.mycozy.cloud' }]
     })
-    const { root } = setup({ contact })
-    const contactrowname = root.find('ContactName')
-    expect(contactrowname).toBeDefined()
-    expect(contactrowname.text()).toEqual(
-      expect.stringContaining(contact.name.givenName)
-    )
-    expect(contactrowname.text()).toEqual(
-      expect.stringContaining(contact.name.familyName)
-    )
-    const contactrowphone = root.find('ContactPhone')
-    expect(contactrowphone).toBeDefined()
-    expect(contactrowphone.text()).toBe(contact.phone[0].number)
+    setup({ contact })
 
-    const contactrowcozyurl = root.find('ContactCozy')
-    expect(contactrowcozyurl).toBeDefined()
-    expect(contactrowcozyurl.text()).toBe(contact.cozy[0].url)
+    // We need to check first and last name separatly because they are in two different span
+    expect(screen.getByText('John')).toBeInTheDocument()
+    expect(screen.getByText('Doe')).toBeInTheDocument()
+    expect(screen.getByText('0123456789')).toBeInTheDocument()
+    expect(screen.getByText('johndoe@localhost')).toBeInTheDocument()
+    expect(screen.getByText('http://johndoe.mycozy.cloud')).toBeInTheDocument()
   })
 
   it('should display email for missing information', () => {
     const contact = makeContact({
       email: [{ address: 'johndoe@localhost' }]
     })
-    const { root } = setup({ contact })
-    const contactrowname = root.find('ContactName')
-    expect(contactrowname).toBeDefined()
-    expect(contactrowname.text().trim()).toBe('johndoe@localhost')
-    const contactrowphone = root.find('ContactPhone')
-    expect(contactrowphone).toBeDefined()
-    expect(contactrowphone.text().trim()).toBe('—')
-    const contactrowcozyurl = root.find('ContactCozy')
-    expect(contactrowcozyurl).toBeDefined()
-    expect(contactrowcozyurl.text().trim()).toBe('—')
+    setup({ contact })
+
+    const emailColumn = screen.getByTestId('ContactEmail')
+    expect(emailColumn.textContent).toBe('johndoe@localhost')
+
+    const phoneColumn = screen.getByTestId('ContactPhone')
+    expect(phoneColumn.textContent).toBe('—')
+
+    const cozyColumn = screen.getByTestId('ContactCozy')
+    expect(cozyColumn.textContent).toBe('—')
   })
 
   it('should accept empty array', () => {
     const contact = makeContact({ email: [] })
-    const { root } = setup({ contact })
-    const contactrowemail = root.find('ContactEmail')
-    expect(contactrowemail).toBeDefined()
-    expect(contactrowemail.text()).toBe('—')
-  })
-
-  it('should match the contact snapshot', () => {
-    const contact = makeContact({
-      name: { familyName: 'Doe', givenName: 'John' },
-      phone: [{ number: '0123456789' }],
-      email: [{ address: 'johndoe@localhost' }],
-      cozy: [{ url: 'http://johndoe.mycozy.cloud' }]
-    })
-    const tree = renderer
-      .create(
-        <BreakpointsProvider>
-          <ContactRow contact={contact} />
-        </BreakpointsProvider>
-      )
-      .toJSON()
-    expect(tree).toMatchSnapshot()
+    setup({ contact })
+    const emailColumn = screen.getByTestId('ContactEmail')
+    expect(emailColumn.textContent).toBe('—')
   })
 })

package/react/DateMonthPicker/index.spec.jsx

@@ -1,36 +1,13 @@
-import { mount } from 'enzyme'
+import { fireEvent, render, screen } from '@testing-library/react'
 import React from 'react'
-import { act } from 'react-dom/test-utils'
 
 import DateMonthPicker from '.'
-import LeftIcon from '../Icons/Left'
-import RightIcon from '../Icons/Right'
 import I18n from '../providers/I18n'
 
-const findButtonWithLabel = (root, label) =>
-  root.findWhere(n => n.type() == 'button' && n.props().children === label)
-
-const findButtonWithIcon = (root, iconName) =>
-  root.findWhere(n => {
-    const props = n.props()
-    if (n.type() !== 'button') {
-      return
-    }
-    if (!props.children || !props.children.length > 1) {
-      return
-    }
-
-    return (
-      props.children.props &&
-      props.children.props.icon &&
-      props.children.props.icon == iconName
-    )
-  })
-
 describe('DateMonthPicker', () => {
   const setup = ({ initialValue }) => {
     const handleSelect = jest.fn()
-    const root = mount(
+    const root = render(
       <I18n lang="en" dictRequire={() => {}}>
         <DateMonthPicker initialValue={initialValue} onSelect={handleSelect} />
       </I18n>
@@ -39,36 +16,31 @@ describe('DateMonthPicker', () => {
   }
 
   it('should be able to select a month', async () => {
-    const { root, handleSelect } = setup({ initialValue: '2015-08' })
-    const februaryButton = findButtonWithLabel(root, 'Feb')
-    expect(februaryButton.length).toBe(1)
-    februaryButton.props().onClick()
+    const { handleSelect } = setup({ initialValue: '2015-08' })
+    const februaryButton = screen.getByText('Feb')
+    fireEvent.click(februaryButton)
     expect(handleSelect).toHaveBeenCalledTimes(1)
     expect(handleSelect).toHaveBeenCalledWith('2015-02-01')
   })
 
   it('should be able to go to previous year', async () => {
-    const { root, handleSelect } = setup({ initialValue: '2015-08' })
-    const prevYearButton = findButtonWithIcon(root, LeftIcon)
-    act(() => {
-      prevYearButton.props().onClick()
-    })
-    root.update()
-    const februaryButton = findButtonWithLabel(root, 'Feb')
-    februaryButton.props().onClick()
+    const { handleSelect } = setup({ initialValue: '2015-08' })
+    // Left arrow to go to previous year is first button
+    const previousYearButton = screen.getAllByRole('button')[0]
+    fireEvent.click(previousYearButton)
+    const februaryButton = screen.getByText('Feb')
+    fireEvent.click(februaryButton)
     expect(handleSelect).toHaveBeenCalledTimes(1)
     expect(handleSelect).toHaveBeenCalledWith('2014-02-01')
   })
 
   it('should be able to go to next year', async () => {
-    const { root, handleSelect } = setup({ initialValue: '2015-08' })
-    const nextYearButton = findButtonWithIcon(root, RightIcon)
-    act(() => {
-      nextYearButton.props().onClick()
-    })
-    root.update()
-    const februaryButton = findButtonWithLabel(root, 'Feb')
-    februaryButton.props().onClick()
+    const { handleSelect } = setup({ initialValue: '2015-08' })
+    // Right arrow to go to next year is first button
+    const nextYearButton = screen.getAllByRole('button')[1]
+    fireEvent.click(nextYearButton)
+    const februaryButton = screen.getByText('Feb')
+    fireEvent.click(februaryButton)
     expect(handleSelect).toHaveBeenCalledTimes(1)
     expect(handleSelect).toHaveBeenCalledWith('2016-02-01')
   })

package/react/Field/index.spec.js

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme'
+import { render } from '@testing-library/react'
 import React from 'react'
 
 import Field from '.'
@@ -18,19 +18,42 @@ describe('Field component', () => {
 
   it('should expect object type value for type=select', () => {
     expect(() =>
-      shallow(<Field label="mock field" type="select" value={{}} />)
+      render(
+        <Field
+          label="mock field"
+          type="select"
+          value={{}}
+          onChange={() => {}}
+        />
+      )
     ).not.toThrowError()
     expect(() =>
-      shallow(<Field label="mock field" type="select" value="wrong" />)
+      render(
+        <Field
+          label="mock field"
+          type="select"
+          value="wrong"
+          onChange={() => {}}
+        />
+      )
     ).toThrowError()
   })
 
   it('should expect string type value for all types but select', () => {
     expect(() =>
-      shallow(<Field label="mock field" type="text" value="good" />)
+      render(
+        <Field
+          label="mock field"
+          type="text"
+          value="good"
+          onChange={() => {}}
+        />
+      )
     ).not.toThrowError()
     expect(() =>
-      shallow(<Field label="mock field" type="text" value={{}} />)
+      render(
+        <Field label="mock field" type="text" value={{}} onChange={() => {}} />
+      )
     ).toThrowError()
   })
 })

package/react/Figure/Figure.spec.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme'
+import { render } from '@testing-library/react'
 import { flatten, merge } from 'lodash'
 import React from 'react'
 
@@ -39,13 +39,18 @@ describe('Figure', () => {
       return merge.apply(null, [{}, ...attrs])
     })
 
+  // We check for different king of amounts if
+  // - its red if it is negative if coloredNegative is set
+  // - its green if it is positive if coloredPositive is set
+  // - its yellow if it is above the warning limit if coloredWarning is set
+
   for (let amount of amounts) {
     for (let attrs of combinations) {
       it(`should render correctly ${amount} ${formatAttrs(attrs)}`, () => {
-        const el = shallow(
+        const { container } = render(
           <Figure warningLimit={110} total={amount} {...attrs} />
-        ).getElement()
-        expect(el).toMatchSnapshot()
+        )
+        expect(container).toMatchSnapshot()
       })
     }
   }