diff --git a/packages/cozy-viewer/jest.config.js b/packages/cozy-viewer/jest.config.js index 9c2fd60289..21abefa7ba 100644 --- a/packages/cozy-viewer/jest.config.js +++ b/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: ['/test/jestLib/setup.js', 'jest-canvas-mock'], - snapshotSerializers: ['enzyme-to-json/serializer'] + } } diff --git a/packages/cozy-viewer/package.json b/packages/cozy-viewer/package.json index 9d8bb96a63..5456f41332 100644 --- a/packages/cozy-viewer/package.json +++ b/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", diff --git a/packages/cozy-viewer/src/NoViewer/NoViewer.jsx b/packages/cozy-viewer/src/NoViewer/NoViewer.jsx index 075dbb876b..533aa21305 100644 --- a/packages/cozy-viewer/src/NoViewer/NoViewer.jsx +++ b/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 }) => ( -
+

{file.name}

{renderFallbackExtraContent(file, url)} diff --git a/packages/cozy-viewer/src/NoViewer/__snapshots__/NoViewer.spec.jsx.snap b/packages/cozy-viewer/src/NoViewer/__snapshots__/NoViewer.spec.jsx.snap index 9a455372a8..c465a178da 100644 --- a/packages/cozy-viewer/src/NoViewer/__snapshots__/NoViewer.spec.jsx.snap +++ b/packages/cozy-viewer/src/NoViewer/__snapshots__/NoViewer.spec.jsx.snap @@ -4,6 +4,7 @@ exports[`NoViewer should render the viewer 1`] = `
(this.wrapper = ref)} + data-testid="pdfjs-viewer" > () => ( +
DownloadButton
+)) + +jest.mock('react-pdf', () => ({ + Document: jest.fn(), + Page: jest.fn(() =>
Page
) +})) 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
{children}
+ } + ) + const defaultProps = { url: 'fake', file, t: x => x } + return render() } beforeEach(() => { - component = shallow( - 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() }) }) diff --git a/packages/cozy-viewer/src/ViewersByFile/TextViewer.jsx b/packages/cozy-viewer/src/ViewersByFile/TextViewer.jsx index 8858835e47..ead5cb6b10 100644 --- a/packages/cozy-viewer/src/ViewersByFile/TextViewer.jsx +++ b/packages/cozy-viewer/src/ViewersByFile/TextViewer.jsx @@ -22,6 +22,7 @@ const MarkdownRenderer = ({ text }) => ( const PlainTextRenderer = ({ text }) => ( 
     {text}
@@ -29,7 +30,7 @@ const PlainTextRenderer = ({ text }) => ( const Loader = () => { return ( -
+
) diff --git a/packages/cozy-viewer/src/ViewersByFile/TextViewer.spec.jsx b/packages/cozy-viewer/src/ViewersByFile/TextViewer.spec.jsx index e5c683904b..14828be0b4 100644 --- a/packages/cozy-viewer/src/ViewersByFile/TextViewer.spec.jsx +++ b/packages/cozy-viewer/src/ViewersByFile/TextViewer.spec.jsx @@ -1,20 +1,23 @@ -import { shallow } from 'enzyme' +import '@testing-library/jest-dom' +import { render, waitFor } from '@testing-library/react' import React from 'react' -import renderer from 'react-test-renderer' - -import { createMockClient } from 'cozy-client' -import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints' import { TextViewer, isMarkdown } from './TextViewer' -const client = createMockClient({}) +jest.mock('../NoViewer/DownloadButton', () => () => ( +
DownloadButton
+)) + +const client = {} const mockText = jest.fn() const mockFetch = responseText => async () => ({ text: mockText.mockResolvedValue(responseText) }) -client.stackClient.fetch = mockFetch('Text') +client.getStackClient = jest.fn().mockReturnValue({ + fetch: mockFetch('The content of my file') +}) const props = { client, @@ -44,75 +47,64 @@ describe('isMarkdown function', () => { expect(isMarkdown({ name: 'text.txt' })).toBe(false) }) }) + describe('TextViewer Component', () => { it('should display the loader ', () => { - const comp = shallow() - expect(comp).toMatchSnapshot() + const { getByTestId } = render() + expect(getByTestId('viewer-spinner')).toBeInTheDocument() }) - - it('should display the error component and render with renderFallback', () => { - const comp = renderer.create( - - {file.name}} - /> - - ) - - const inst = comp.root.children[0].instance - inst.setState({ error: true, loading: false }) - expect(comp.toJSON()).toMatchSnapshot() - }) - - it('should display the text viewer', () => { - const comp = renderer.create( - - - - ) - - const inst = comp.root.children[0].instance - inst.setState({ - loading: false, - isMarkdown: false, - text: 'The content of my file' + describe('TextViewer render method', () => { + it('should render the loader when loading', () => { + const { getByTestId } = render() + expect(getByTestId('viewer-spinner')).toBeInTheDocument() }) - expect(comp.toJSON()).toMatchSnapshot() - expect(mockText).toHaveBeenCalled() - }) - it('should display the markdown viewer', () => { - const comp = renderer.create( - - - - ) + it('should render NoViewer component on error', async () => { + const errorProps = { + ...props, + client: { + ...props.client, + getStackClient: jest.fn().mockReturnValue({ + fetch: jest.fn().mockRejectedValue(new Error('Fetch error')) + }) + } + } + const { getByTestId } = render() - const inst = comp.root.children[0].instance - inst.setState({ - loading: false, - isMarkdown: true, - text: "It's very easy to make some words **bold** and other words *italic* with Markdown" + await waitFor(() => { + const pdfjsNoViewer = getByTestId('no-viewer') + expect(pdfjsNoViewer).toBeInTheDocument() + }) }) - expect(comp.toJSON()).toMatchSnapshot() - }) - it('should display the text viewer when an URL is given', () => { - const url = 'blob:http://foo.mycozy.cloud' - const comp = renderer.create( - - - - ) + it('should render MarkdownRenderer when file is markdown', async () => { + const markdownProps = { + ...props, + file: { + ...props.file, + mime: 'text/markdown' + } + } + const { findByText } = render() + await waitFor(async () => { + const element = await findByText('The content of my file') + expect(element).toBeInTheDocument() + }) + }) - const inst = comp.root.children[0].instance - inst.setState({ - loading: false, - isMarkdown: false, - text: 'The content of my file' + it('should render PlainTextRenderer when file is not markdown', async () => { + const plainTextProps = { + ...props, + file: { + ...props.file, + mime: 'text/plain' + } + } + const { findByTestId } = render() + await waitFor(async () => { + const element = await findByTestId('viewer-plaintext') + expect(element).toBeInTheDocument() + }) }) - expect(comp.toJSON()).toMatchSnapshot() - expect(mockText).toHaveBeenCalled() }) }) diff --git a/packages/cozy-viewer/src/ViewersByFile/__snapshots__/ShortcutViewer.spec.jsx.snap b/packages/cozy-viewer/src/ViewersByFile/__snapshots__/ShortcutViewer.spec.jsx.snap index 7024768485..d2c038a901 100644 --- a/packages/cozy-viewer/src/ViewersByFile/__snapshots__/ShortcutViewer.spec.jsx.snap +++ b/packages/cozy-viewer/src/ViewersByFile/__snapshots__/ShortcutViewer.spec.jsx.snap @@ -4,6 +4,7 @@ exports[`Shortcutviewer renders the component 1`] = `
- - - - - - -

- My File -

- - My File - -
-`; - -exports[`TextViewer Component should display the loader 1`] = ``; - -exports[`TextViewer Component should display the markdown viewer 1`] = ` -
-

- My File -

-
-

- It's very easy to make some words - - bold - - and other words - - italic - - with Markdown -

-
-
-`; - -exports[`TextViewer Component should display the text viewer 1`] = ` -
-

- My File -

- 
-    The content of my file
-
-
-`; - -exports[`TextViewer Component should display the text viewer when an URL is given 1`] = ` -
-

- My File -

- 
-    The content of my file
-
-
-`; diff --git a/packages/cozy-viewer/src/components/ViewerControls.spec.jsx b/packages/cozy-viewer/src/components/ViewerControls.spec.jsx index b4682ad965..b1f740e161 100644 --- a/packages/cozy-viewer/src/components/ViewerControls.spec.jsx +++ b/packages/cozy-viewer/src/components/ViewerControls.spec.jsx @@ -1,3 +1,4 @@ +import '@testing-library/jest-dom' import { render, screen } from '@testing-library/react' import React from 'react' diff --git a/packages/cozy-viewer/test/jestLib/setup.js b/packages/cozy-viewer/test/jestLib/setup.js deleted file mode 100644 index 85c040a24e..0000000000 --- a/packages/cozy-viewer/test/jestLib/setup.js +++ /dev/null @@ -1,5 +0,0 @@ -import '@testing-library/jest-dom/extend-expect' -import { configure } from 'enzyme' -import Adapter from 'enzyme-adapter-react-16' - -configure({ adapter: new Adapter() }) diff --git a/yarn.lock b/yarn.lock index f5ee22ef8e..8a286394cb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -20203,17 +20203,6 @@ msgpack5@^4.0.2: readable-stream "^2.3.6" safe-buffer "^5.1.2" -"mui-bottom-sheet@git+https://github.com/cozy/mui-bottom-sheet.git#v1.0.9": - version "1.0.8" - uid "3dc4c2a245ab39079bc2f73546bccf80847be14c" - resolved "git+https://github.com/cozy/mui-bottom-sheet.git#3dc4c2a245ab39079bc2f73546bccf80847be14c" - dependencies: - "@juggle/resize-observer" "^3.1.3" - jest-environment-jsdom-sixteen "^1.0.3" - react-spring "9.0.0-rc.3" - react-use-gesture "^7.0.8" - react-use-measure "^2.0.0" - "mui-bottom-sheet@https://github.com/cozy/mui-bottom-sheet.git#v1.0.9": version "1.0.8" resolved "https://github.com/cozy/mui-bottom-sheet.git#3dc4c2a245ab39079bc2f73546bccf80847be14c"