feat(cozy-viewer): Remove Enzyme

packages/cozy-viewer/jest.config.js

@@ -13,11 +13,5 @@ module.exports = {
   transformIgnorePatterns: ['node_modules/(?!(cozy-ui|cozy-harvest-lib))'],
   transform: {
     '^.+\\.(ts|tsx|js|jsx)?$': 'babel-jest'
-  },
-  globals: {
-    __ALLOW_HTTP__: false,
-    cozy: {}
-  },
-  setupFilesAfterEnv: ['<rootDir>/test/jestLib/setup.js', 'jest-canvas-mock'],
-  snapshotSerializers: ['enzyme-to-json/serializer']
+  }
 }

packages/cozy-viewer/package.json

@@ -32,10 +32,8 @@
     "cozy-logger": "^1.16.1",
     "cozy-sharing": "^17.0.0",
     "cozy-ui": "^115.0.2",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.6",
-    "enzyme-to-json": "3.6.2",
     "identity-obj-proxy": "3.0.0",
+    "jest": "26.6.3",
     "jest-canvas-mock": "2.3.1",
     "prop-types": "15.8.1",
     "react-dom": "16.12.0",

packages/cozy-viewer/src/NoViewer/NoViewer.jsx

@@ -8,7 +8,7 @@ import FileIcon from './FileIcon'
 import styles from '../ViewersByFile/styles.styl'
 
 const NoViewer = ({ file, url, renderFallbackExtraContent }) => (
-  <div className={styles['viewer-noviewer']}>
+  <div className={styles['viewer-noviewer']} data-testid="no-viewer">
     <FileIcon type={file.class} />
     <p className={styles['viewer-filename']}>{file.name}</p>
     {renderFallbackExtraContent(file, url)}

packages/cozy-viewer/src/NoViewer/__snapshots__/NoViewer.spec.jsx.snap

@@ -4,6 +4,7 @@ exports[`NoViewer should render the viewer 1`] = `
 <div>
   <div
     class="viewer-noviewer"
+    data-testid="no-viewer"
   >
     <svg
       class="styles__icon___23x3R"
@@ -48,6 +49,7 @@ exports[`NoViewer should render the viewer with specific extra content 1`] = `
 <div>
   <div
     class="viewer-noviewer"
+    data-testid="no-viewer"
   >
     <svg
       class="styles__icon___23x3R"

packages/cozy-viewer/src/Panel/QualificationListItemInformation.spec.jsx

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom'
 import { fireEvent, render } from '@testing-library/react'
 import React from 'react'
 

packages/cozy-viewer/src/ViewersByFile/PdfJsViewer.jsx

@@ -133,6 +133,7 @@ export class PdfJsViewer extends Component {
       <div
         className={styles['viewer-pdfviewer']}
         ref={ref => (this.wrapper = ref)}
+        data-testid="pdfjs-viewer"
       >
         <Document
           file={url}

packages/cozy-viewer/src/ViewersByFile/PdfJsViewer.spec.jsx

@@ -1,161 +1,57 @@
-import { shallow } from 'enzyme'
+import '@testing-library/jest-dom'
+import { render } from '@testing-library/react'
 import React from 'react'
+import { Document } from 'react-pdf'
 
-import { PdfJsViewer, MIN_SCALE, MAX_SCALE, MAX_PAGES } from './PdfJsViewer'
+import { PdfJsViewer } from './PdfJsViewer'
+
+jest.mock('../NoViewer/DownloadButton', () => () => (
+  <div data-testid="dl-btn-no-viewer">DownloadButton</div>
+))
+
+jest.mock('react-pdf', () => ({
+  Document: jest.fn(),
+  Page: jest.fn(() => <div>Page</div>)
+}))
 
 describe('PDFViewer', () => {
-  let component
-  const panGestureMock = jest.fn()
-  const swipeGestureMock = jest.fn()
-  const gesturesMock = {
-    get: jest.fn(type => ({
-      set: type === 'pan' ? panGestureMock : swipeGestureMock
-    }))
+  const setup = ({ file = {}, onLoadErrorMock } = {}) => {
+    Document.mockImplementation(
+      ({ children, onLoadError = onLoadErrorMock }) => {
+        onLoadErrorMock && onLoadError()
+
+        return <div>{children}</div>
+      }
+    )
+    const defaultProps = { url: 'fake', file, t: x => x }
+    return render(<PdfJsViewer {...defaultProps} />)
   }
   beforeEach(() => {
-    component = shallow(
-      <PdfJsViewer url="test" file={{}} gestures={gesturesMock} t={x => x} />
-    )
-  })
-  afterEach(() => {
     jest.clearAllMocks()
   })
 
-  describe('desture integration', () => {
-    let instance
-    beforeEach(() => {
-      instance = component.instance()
-    })
-
-    it('should disable gestures when zooming in', () => {
-      instance.scaleUp()
-      expect(component.state('scale')).toBeGreaterThan(1)
-      expect(panGestureMock).toHaveBeenCalledWith({ enable: false })
-      expect(swipeGestureMock).toHaveBeenCalledWith({ enable: false })
-      instance.scaleUp()
-      expect(panGestureMock).toHaveBeenCalledTimes(1)
-      expect(swipeGestureMock).toHaveBeenCalledTimes(1)
-    })
-
-    it('should leave gestures alone when zooming out', () => {
-      instance.scaleDown()
-      expect(component.state('scale')).toBeLessThan(1)
-      expect(panGestureMock).not.toHaveBeenCalled()
-      expect(swipeGestureMock).not.toHaveBeenCalled()
-    })
-
-    it('should re-enable gestures when zooming back out', () => {
-      instance.scaleUp()
-      expect(component.state('scale')).toBeGreaterThan(1)
-      expect(panGestureMock).toHaveBeenCalledWith({ enable: false })
-      expect(swipeGestureMock).toHaveBeenCalledWith({ enable: false })
-      instance.scaleDown()
-      expect(component.state('scale')).toBe(1)
-      expect(panGestureMock).toHaveBeenCalledWith({ enable: true })
-      expect(swipeGestureMock).toHaveBeenCalledWith({ enable: true })
-    })
-  })
-
-  describe('with a valid PDF', () => {
-    let instance
-    beforeEach(() => {
-      instance = component.instance()
-      instance.onLoadSuccess({ numPages: 3 })
-    })
+  it('should render a fallback component', () => {
+    const onLoadErrorMock = jest.fn()
+    const { getByTestId, queryByTestId } = setup({ onLoadErrorMock })
 
-    it('should start with default options', () => {
-      expect(component.state('loaded')).toBe(true)
-      expect(component.state('totalPages')).toBe(3)
-      expect(component.state('currentPage')).toBe(1)
-      expect(component.state('scale')).toBe(1)
-    })
+    const DownloadBtnNoViewer = getByTestId('dl-btn-no-viewer')
+    const pdfjsNoViewer = getByTestId('no-viewer')
+    const pdfjsViewer = queryByTestId('pdfjs-viewer')
 
-    it('should flip to the next page while possible', () => {
-      instance.nextPage()
-      expect(component.state('currentPage')).toBe(2)
-      instance.nextPage()
-      expect(component.state('currentPage')).toBe(3)
-      instance.nextPage()
-      expect(component.state('currentPage')).toBe(3)
-    })
-
-    it('should flip to the previous page while possible', () => {
-      instance.nextPage()
-      expect(component.state('currentPage')).toBe(2)
-      instance.previousPage()
-      expect(component.state('currentPage')).toBe(1)
-      instance.previousPage()
-      expect(component.state('currentPage')).toBe(1)
-    })
-
-    it('should scale up to a certain point', () => {
-      const initialScale = component.state('scale')
-      instance.scaleUp()
-      expect(component.state('scale')).toBeGreaterThan(initialScale)
-
-      for (let i = 0; i < 10; i++) instance.scaleUp()
-      expect(component.state('scale')).toEqual(MAX_SCALE)
-    })
-
-    it('should scale down to a certain point', () => {
-      const initialScale = component.state('scale')
-      instance.scaleDown()
-      expect(component.state('scale')).toBeLessThan(initialScale)
-
-      for (let i = 0; i < 10; i++) instance.scaleDown()
-      expect(component.state('scale')).toEqual(MIN_SCALE)
-    })
+    expect(pdfjsViewer).toBeNull()
+    expect(DownloadBtnNoViewer).toBeInTheDocument()
+    expect(pdfjsNoViewer).toBeInTheDocument()
   })
 
-  describe('a PDF with few pages', () => {
-    beforeEach(() => {
-      component.instance().onLoadSuccess({ numPages: MAX_PAGES })
-    })
-
-    it('should render all the pages', () => {
-      const pages = component.find('ForwardRef(Page)')
-      expect(pages.length).toEqual(MAX_PAGES)
-    })
+  it('should not render the fallback component', () => {
+    const { queryByTestId, getByTestId } = setup()
 
-    it('should not show pagination controls', () => {
-      const pageUp = component.find({ icon: 'top' })
-      const pageDown = component.find({ icon: 'bottom' })
-      expect(pageUp.length).toEqual(0)
-      expect(pageDown.length).toEqual(0)
-    })
-  })
-
-  describe('a PDF with many pages', () => {
-    beforeEach(() => {
-      component.instance().onLoadSuccess({ numPages: MAX_PAGES + 1 })
-    })
-
-    it('should render only the current page', () => {
-      const pages = component.find('ForwardRef(Page)')
-      expect(pages.length).toEqual(1)
-    })
-
-    it('should show pagination controls', () => {
-      const pageUp = component.find({ icon: 'top' })
-      const pageDown = component.find({ icon: 'bottom' })
-      expect(pageUp.length).toEqual(1)
-      expect(pageDown.length).toEqual(1)
-    })
-  })
+    const pdfjsViewer = getByTestId('pdfjs-viewer')
+    const pdfjsNoViewer = queryByTestId('no-viewer')
+    const DownloadBtnNoViewer = queryByTestId('dl-btn-no-viewer')
 
-  describe('with a pdf that does not load', () => {
-    beforeEach(() => {
-      jest.spyOn(console, 'warn').mockImplementation(() => {})
-    })
-    afterEach(() => {
-      // eslint-disable-next-line no-console
-      console.warn.mockRestore()
-    })
-    it('should show a fallback', () => {
-      component.instance().onLoadError('pdfviewer test error')
-      expect(component.state('errored')).toBe(true)
-      const noViewer = component.find('NoViewer')
-      expect(noViewer.length).toBe(1)
-    })
+    expect(pdfjsViewer).toBeInTheDocument()
+    expect(pdfjsNoViewer).toBeNull()
+    expect(DownloadBtnNoViewer).toBeNull()
   })
 })

packages/cozy-viewer/src/ViewersByFile/TextViewer.jsx

@@ -22,14 +22,15 @@ const MarkdownRenderer = ({ text }) => (
 const PlainTextRenderer = ({ text }) => (
   <pre
     className={cx(styles['viewer-textviewer-content'], 'u-mh-auto', 'u-mv-2')}
+    data-testid="viewer-plaintext"
   >
     {text}
   </pre>
 )
 
 const Loader = () => {
   return (
-    <div className={styles['viewer-textviewer']}>
+    <div className={styles['viewer-textviewer']} data-testid="viewer-spinner">
       <ViewerSpinner />
     </div>
   )