cozy-viewer 10.0.0 → 11.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +27 -0
- package/dist/NoViewer/NoViewer.js +2 -1
- package/dist/Panel/helpers.js +1 -1
- package/dist/ViewersByFile/PdfJsViewer.js +2 -1
- package/dist/ViewersByFile/TextViewer.js +4 -2
- package/dist/helpers.js +2 -2
- package/jest.config.js +1 -7
- package/package.json +6 -8
- package/src/NoViewer/NoViewer.jsx +1 -1
- package/src/NoViewer/__snapshots__/NoViewer.spec.jsx.snap +2 -0
- package/src/Panel/QualificationListItemInformation.spec.jsx +1 -0
- package/src/Panel/helpers.js +1 -1
- package/src/ViewersByFile/PdfJsViewer.jsx +1 -0
- package/src/ViewersByFile/PdfJsViewer.spec.jsx +40 -144
- package/src/ViewersByFile/TextViewer.jsx +2 -1
- package/src/ViewersByFile/TextViewer.spec.jsx +59 -67
- package/src/ViewersByFile/__snapshots__/ShortcutViewer.spec.jsx.snap +1 -0
- package/src/components/ViewerControls.spec.jsx +1 -0
- package/src/helpers.js +2 -2
- package/src/ViewersByFile/__snapshots__/TextViewer.spec.jsx.snap +0 -100
- package/test/jestLib/setup.js +0 -5
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,33 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [11.1.0](https://github.com/cozy/cozy-libs/compare/cozy-viewer@11.0.0...cozy-viewer@11.1.0) (2024-12-23)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **cozy-viewer:** Remove Enzyme ([faea78f](https://github.com/cozy/cozy-libs/commit/faea78fa6fcf439659d9efd290384628981b3bc2))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
# [11.0.0](https://github.com/cozy/cozy-libs/compare/cozy-viewer@10.0.0...cozy-viewer@11.0.0) (2024-12-20)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Features
|
|
21
|
+
|
|
22
|
+
* **cozy-viewer:** Upgrade cozy-ui to 115.0.2 ([afbfc23](https://github.com/cozy/cozy-libs/commit/afbfc2396b498ab76e9c034882e2f82ba252fc11))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
### BREAKING CHANGES
|
|
26
|
+
|
|
27
|
+
* **cozy-viewer:** You must have `cozy-ui >= 115.0.2`
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
6
33
|
# [10.0.0](https://github.com/cozy/cozy-libs/compare/cozy-viewer@9.1.1...cozy-viewer@10.0.0) (2024-12-19)
|
|
7
34
|
|
|
8
35
|
|
|
@@ -39,7 +39,8 @@ var NoViewer = function NoViewer(_ref) {
|
|
|
39
39
|
url = _ref.url,
|
|
40
40
|
renderFallbackExtraContent = _ref.renderFallbackExtraContent;
|
|
41
41
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
42
|
-
className: styles['viewer-noviewer']
|
|
42
|
+
className: styles['viewer-noviewer'],
|
|
43
|
+
"data-testid": "no-viewer"
|
|
43
44
|
}, /*#__PURE__*/_react.default.createElement(_FileIcon.default, {
|
|
44
45
|
type: file.class
|
|
45
46
|
}), /*#__PURE__*/_react.default.createElement("p", {
|
package/dist/Panel/helpers.js
CHANGED
|
@@ -32,7 +32,7 @@ var makeFormat = exports.makeFormat = function makeFormat(file) {
|
|
|
32
32
|
|
|
33
33
|
|
|
34
34
|
var makeDate = exports.makeDate = function makeDate(lang) {
|
|
35
|
-
return lang === 'fr' ? '
|
|
35
|
+
return lang === 'fr' ? 'dd LLL yyyy à HH:mm' : 'LLL dd yyyy at HH:mm';
|
|
36
36
|
};
|
|
37
37
|
/**
|
|
38
38
|
* Returns a formatted size
|
|
@@ -216,7 +216,8 @@ var PdfJsViewer = exports.PdfJsViewer = /*#__PURE__*/function (_Component) {
|
|
|
216
216
|
className: styles['viewer-pdfviewer'],
|
|
217
217
|
ref: function ref(_ref2) {
|
|
218
218
|
return _this2.wrapper = _ref2;
|
|
219
|
-
}
|
|
219
|
+
},
|
|
220
|
+
"data-testid": "pdfjs-viewer"
|
|
220
221
|
}, /*#__PURE__*/_react.default.createElement(_reactPdf.Document, {
|
|
221
222
|
file: url,
|
|
222
223
|
onLoadSuccess: this.onLoadSuccess,
|
|
@@ -77,13 +77,15 @@ var MarkdownRenderer = function MarkdownRenderer(_ref) {
|
|
|
77
77
|
var PlainTextRenderer = function PlainTextRenderer(_ref2) {
|
|
78
78
|
var text = _ref2.text;
|
|
79
79
|
return /*#__PURE__*/_react.default.createElement("pre", {
|
|
80
|
-
className: (0, _classnames.default)(styles['viewer-textviewer-content'], 'u-mh-auto', 'u-mv-2')
|
|
80
|
+
className: (0, _classnames.default)(styles['viewer-textviewer-content'], 'u-mh-auto', 'u-mv-2'),
|
|
81
|
+
"data-testid": "viewer-plaintext"
|
|
81
82
|
}, text);
|
|
82
83
|
};
|
|
83
84
|
|
|
84
85
|
var Loader = function Loader() {
|
|
85
86
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
86
|
-
className: styles['viewer-textviewer']
|
|
87
|
+
className: styles['viewer-textviewer'],
|
|
88
|
+
"data-testid": "viewer-spinner"
|
|
87
89
|
}, /*#__PURE__*/_react.default.createElement(_ViewerSpinner.default, null));
|
|
88
90
|
};
|
|
89
91
|
|
package/dist/helpers.js
CHANGED
|
@@ -32,10 +32,10 @@ var formatDate = exports.formatDate = function formatDate(_ref) {
|
|
|
32
32
|
date = _ref.date;
|
|
33
33
|
|
|
34
34
|
if (lang === 'en') {
|
|
35
|
-
return f(date, '
|
|
35
|
+
return f(date, 'LL/dd/yyyy');
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
return f(date, '
|
|
38
|
+
return f(date, 'dd/LL/yyyy');
|
|
39
39
|
};
|
|
40
40
|
|
|
41
41
|
var isEditableAttribute = exports.isEditableAttribute = function isEditableAttribute(name, file) {
|
package/jest.config.js
CHANGED
|
@@ -13,11 +13,5 @@ module.exports = {
|
|
|
13
13
|
transformIgnorePatterns: ['node_modules/(?!(cozy-ui|cozy-harvest-lib))'],
|
|
14
14
|
transform: {
|
|
15
15
|
'^.+\\.(ts|tsx|js|jsx)?$': 'babel-jest'
|
|
16
|
-
}
|
|
17
|
-
globals: {
|
|
18
|
-
__ALLOW_HTTP__: false,
|
|
19
|
-
cozy: {}
|
|
20
|
-
},
|
|
21
|
-
setupFilesAfterEnv: ['<rootDir>/test/jestLib/setup.js', 'jest-canvas-mock'],
|
|
22
|
-
snapshotSerializers: ['enzyme-to-json/serializer']
|
|
16
|
+
}
|
|
23
17
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "cozy-viewer",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "11.1.0",
|
|
4
4
|
"description": "Cozy-Viewer provides a component to show files in a viewer.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"license": "MIT",
|
|
@@ -27,15 +27,13 @@
|
|
|
27
27
|
"babel-preset-cozy-app": "^2.8.1",
|
|
28
28
|
"cozy-client": "^51.6.0",
|
|
29
29
|
"cozy-device-helper": "2.0.0",
|
|
30
|
-
"cozy-harvest-lib": "^31.0.
|
|
30
|
+
"cozy-harvest-lib": "^31.0.24",
|
|
31
31
|
"cozy-intent": "^2.29.1",
|
|
32
32
|
"cozy-logger": "^1.16.1",
|
|
33
33
|
"cozy-sharing": "^17.0.0",
|
|
34
|
-
"cozy-ui": "^
|
|
35
|
-
"enzyme": "3.11.0",
|
|
36
|
-
"enzyme-adapter-react-16": "1.15.6",
|
|
37
|
-
"enzyme-to-json": "3.6.2",
|
|
34
|
+
"cozy-ui": "^115.0.2",
|
|
38
35
|
"identity-obj-proxy": "3.0.0",
|
|
36
|
+
"jest": "26.6.3",
|
|
39
37
|
"jest-canvas-mock": "2.3.1",
|
|
40
38
|
"prop-types": "15.8.1",
|
|
41
39
|
"react-dom": "16.12.0",
|
|
@@ -56,9 +54,9 @@
|
|
|
56
54
|
"cozy-intent": ">=2.29.1",
|
|
57
55
|
"cozy-logger": ">=1.9.0",
|
|
58
56
|
"cozy-sharing": ">=16.11.0",
|
|
59
|
-
"cozy-ui": ">=
|
|
57
|
+
"cozy-ui": ">=115.0.2",
|
|
60
58
|
"react": ">=16.12.0",
|
|
61
59
|
"react-dom": ">=16.12.0"
|
|
62
60
|
},
|
|
63
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "4e19e94ed716a53f170297f21142f822378ab67b"
|
|
64
62
|
}
|
|
@@ -8,7 +8,7 @@ import FileIcon from './FileIcon'
|
|
|
8
8
|
import styles from '../ViewersByFile/styles.styl'
|
|
9
9
|
|
|
10
10
|
const NoViewer = ({ file, url, renderFallbackExtraContent }) => (
|
|
11
|
-
<div className={styles['viewer-noviewer']}>
|
|
11
|
+
<div className={styles['viewer-noviewer']} data-testid="no-viewer">
|
|
12
12
|
<FileIcon type={file.class} />
|
|
13
13
|
<p className={styles['viewer-filename']}>{file.name}</p>
|
|
14
14
|
{renderFallbackExtraContent(file, url)}
|
|
@@ -4,6 +4,7 @@ exports[`NoViewer should render the viewer 1`] = `
|
|
|
4
4
|
<div>
|
|
5
5
|
<div
|
|
6
6
|
class="viewer-noviewer"
|
|
7
|
+
data-testid="no-viewer"
|
|
7
8
|
>
|
|
8
9
|
<svg
|
|
9
10
|
class="styles__icon___23x3R"
|
|
@@ -48,6 +49,7 @@ exports[`NoViewer should render the viewer with specific extra content 1`] = `
|
|
|
48
49
|
<div>
|
|
49
50
|
<div
|
|
50
51
|
class="viewer-noviewer"
|
|
52
|
+
data-testid="no-viewer"
|
|
51
53
|
>
|
|
52
54
|
<svg
|
|
53
55
|
class="styles__icon___23x3R"
|
package/src/Panel/helpers.js
CHANGED
|
@@ -19,7 +19,7 @@ export const makeFormat = file => {
|
|
|
19
19
|
* @returns {string}
|
|
20
20
|
*/
|
|
21
21
|
export const makeDate = lang =>
|
|
22
|
-
lang === 'fr' ? '
|
|
22
|
+
lang === 'fr' ? 'dd LLL yyyy à HH:mm' : 'LLL dd yyyy at HH:mm'
|
|
23
23
|
|
|
24
24
|
/**
|
|
25
25
|
* Returns a formatted size
|
|
@@ -1,161 +1,57 @@
|
|
|
1
|
-
import
|
|
1
|
+
import '@testing-library/jest-dom'
|
|
2
|
+
import { render } from '@testing-library/react'
|
|
2
3
|
import React from 'react'
|
|
4
|
+
import { Document } from 'react-pdf'
|
|
3
5
|
|
|
4
|
-
import { PdfJsViewer
|
|
6
|
+
import { PdfJsViewer } from './PdfJsViewer'
|
|
7
|
+
|
|
8
|
+
jest.mock('../NoViewer/DownloadButton', () => () => (
|
|
9
|
+
<div data-testid="dl-btn-no-viewer">DownloadButton</div>
|
|
10
|
+
))
|
|
11
|
+
|
|
12
|
+
jest.mock('react-pdf', () => ({
|
|
13
|
+
Document: jest.fn(),
|
|
14
|
+
Page: jest.fn(() => <div>Page</div>)
|
|
15
|
+
}))
|
|
5
16
|
|
|
6
17
|
describe('PDFViewer', () => {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
18
|
+
const setup = ({ file = {}, onLoadErrorMock } = {}) => {
|
|
19
|
+
Document.mockImplementation(
|
|
20
|
+
({ children, onLoadError = onLoadErrorMock }) => {
|
|
21
|
+
onLoadErrorMock && onLoadError()
|
|
22
|
+
|
|
23
|
+
return <div>{children}</div>
|
|
24
|
+
}
|
|
25
|
+
)
|
|
26
|
+
const defaultProps = { url: 'fake', file, t: x => x }
|
|
27
|
+
return render(<PdfJsViewer {...defaultProps} />)
|
|
14
28
|
}
|
|
15
29
|
beforeEach(() => {
|
|
16
|
-
component = shallow(
|
|
17
|
-
<PdfJsViewer url="test" file={{}} gestures={gesturesMock} t={x => x} />
|
|
18
|
-
)
|
|
19
|
-
})
|
|
20
|
-
afterEach(() => {
|
|
21
30
|
jest.clearAllMocks()
|
|
22
31
|
})
|
|
23
32
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
instance = component.instance()
|
|
28
|
-
})
|
|
29
|
-
|
|
30
|
-
it('should disable gestures when zooming in', () => {
|
|
31
|
-
instance.scaleUp()
|
|
32
|
-
expect(component.state('scale')).toBeGreaterThan(1)
|
|
33
|
-
expect(panGestureMock).toHaveBeenCalledWith({ enable: false })
|
|
34
|
-
expect(swipeGestureMock).toHaveBeenCalledWith({ enable: false })
|
|
35
|
-
instance.scaleUp()
|
|
36
|
-
expect(panGestureMock).toHaveBeenCalledTimes(1)
|
|
37
|
-
expect(swipeGestureMock).toHaveBeenCalledTimes(1)
|
|
38
|
-
})
|
|
39
|
-
|
|
40
|
-
it('should leave gestures alone when zooming out', () => {
|
|
41
|
-
instance.scaleDown()
|
|
42
|
-
expect(component.state('scale')).toBeLessThan(1)
|
|
43
|
-
expect(panGestureMock).not.toHaveBeenCalled()
|
|
44
|
-
expect(swipeGestureMock).not.toHaveBeenCalled()
|
|
45
|
-
})
|
|
46
|
-
|
|
47
|
-
it('should re-enable gestures when zooming back out', () => {
|
|
48
|
-
instance.scaleUp()
|
|
49
|
-
expect(component.state('scale')).toBeGreaterThan(1)
|
|
50
|
-
expect(panGestureMock).toHaveBeenCalledWith({ enable: false })
|
|
51
|
-
expect(swipeGestureMock).toHaveBeenCalledWith({ enable: false })
|
|
52
|
-
instance.scaleDown()
|
|
53
|
-
expect(component.state('scale')).toBe(1)
|
|
54
|
-
expect(panGestureMock).toHaveBeenCalledWith({ enable: true })
|
|
55
|
-
expect(swipeGestureMock).toHaveBeenCalledWith({ enable: true })
|
|
56
|
-
})
|
|
57
|
-
})
|
|
58
|
-
|
|
59
|
-
describe('with a valid PDF', () => {
|
|
60
|
-
let instance
|
|
61
|
-
beforeEach(() => {
|
|
62
|
-
instance = component.instance()
|
|
63
|
-
instance.onLoadSuccess({ numPages: 3 })
|
|
64
|
-
})
|
|
33
|
+
it('should render a fallback component', () => {
|
|
34
|
+
const onLoadErrorMock = jest.fn()
|
|
35
|
+
const { getByTestId, queryByTestId } = setup({ onLoadErrorMock })
|
|
65
36
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
expect(component.state('currentPage')).toBe(1)
|
|
70
|
-
expect(component.state('scale')).toBe(1)
|
|
71
|
-
})
|
|
37
|
+
const DownloadBtnNoViewer = getByTestId('dl-btn-no-viewer')
|
|
38
|
+
const pdfjsNoViewer = getByTestId('no-viewer')
|
|
39
|
+
const pdfjsViewer = queryByTestId('pdfjs-viewer')
|
|
72
40
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
instance.nextPage()
|
|
77
|
-
expect(component.state('currentPage')).toBe(3)
|
|
78
|
-
instance.nextPage()
|
|
79
|
-
expect(component.state('currentPage')).toBe(3)
|
|
80
|
-
})
|
|
81
|
-
|
|
82
|
-
it('should flip to the previous page while possible', () => {
|
|
83
|
-
instance.nextPage()
|
|
84
|
-
expect(component.state('currentPage')).toBe(2)
|
|
85
|
-
instance.previousPage()
|
|
86
|
-
expect(component.state('currentPage')).toBe(1)
|
|
87
|
-
instance.previousPage()
|
|
88
|
-
expect(component.state('currentPage')).toBe(1)
|
|
89
|
-
})
|
|
90
|
-
|
|
91
|
-
it('should scale up to a certain point', () => {
|
|
92
|
-
const initialScale = component.state('scale')
|
|
93
|
-
instance.scaleUp()
|
|
94
|
-
expect(component.state('scale')).toBeGreaterThan(initialScale)
|
|
95
|
-
|
|
96
|
-
for (let i = 0; i < 10; i++) instance.scaleUp()
|
|
97
|
-
expect(component.state('scale')).toEqual(MAX_SCALE)
|
|
98
|
-
})
|
|
99
|
-
|
|
100
|
-
it('should scale down to a certain point', () => {
|
|
101
|
-
const initialScale = component.state('scale')
|
|
102
|
-
instance.scaleDown()
|
|
103
|
-
expect(component.state('scale')).toBeLessThan(initialScale)
|
|
104
|
-
|
|
105
|
-
for (let i = 0; i < 10; i++) instance.scaleDown()
|
|
106
|
-
expect(component.state('scale')).toEqual(MIN_SCALE)
|
|
107
|
-
})
|
|
41
|
+
expect(pdfjsViewer).toBeNull()
|
|
42
|
+
expect(DownloadBtnNoViewer).toBeInTheDocument()
|
|
43
|
+
expect(pdfjsNoViewer).toBeInTheDocument()
|
|
108
44
|
})
|
|
109
45
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
component.instance().onLoadSuccess({ numPages: MAX_PAGES })
|
|
113
|
-
})
|
|
114
|
-
|
|
115
|
-
it('should render all the pages', () => {
|
|
116
|
-
const pages = component.find('ForwardRef(Page)')
|
|
117
|
-
expect(pages.length).toEqual(MAX_PAGES)
|
|
118
|
-
})
|
|
46
|
+
it('should not render the fallback component', () => {
|
|
47
|
+
const { queryByTestId, getByTestId } = setup()
|
|
119
48
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
expect(pageUp.length).toEqual(0)
|
|
124
|
-
expect(pageDown.length).toEqual(0)
|
|
125
|
-
})
|
|
126
|
-
})
|
|
127
|
-
|
|
128
|
-
describe('a PDF with many pages', () => {
|
|
129
|
-
beforeEach(() => {
|
|
130
|
-
component.instance().onLoadSuccess({ numPages: MAX_PAGES + 1 })
|
|
131
|
-
})
|
|
132
|
-
|
|
133
|
-
it('should render only the current page', () => {
|
|
134
|
-
const pages = component.find('ForwardRef(Page)')
|
|
135
|
-
expect(pages.length).toEqual(1)
|
|
136
|
-
})
|
|
137
|
-
|
|
138
|
-
it('should show pagination controls', () => {
|
|
139
|
-
const pageUp = component.find({ icon: 'top' })
|
|
140
|
-
const pageDown = component.find({ icon: 'bottom' })
|
|
141
|
-
expect(pageUp.length).toEqual(1)
|
|
142
|
-
expect(pageDown.length).toEqual(1)
|
|
143
|
-
})
|
|
144
|
-
})
|
|
49
|
+
const pdfjsViewer = getByTestId('pdfjs-viewer')
|
|
50
|
+
const pdfjsNoViewer = queryByTestId('no-viewer')
|
|
51
|
+
const DownloadBtnNoViewer = queryByTestId('dl-btn-no-viewer')
|
|
145
52
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
})
|
|
150
|
-
afterEach(() => {
|
|
151
|
-
// eslint-disable-next-line no-console
|
|
152
|
-
console.warn.mockRestore()
|
|
153
|
-
})
|
|
154
|
-
it('should show a fallback', () => {
|
|
155
|
-
component.instance().onLoadError('pdfviewer test error')
|
|
156
|
-
expect(component.state('errored')).toBe(true)
|
|
157
|
-
const noViewer = component.find('NoViewer')
|
|
158
|
-
expect(noViewer.length).toBe(1)
|
|
159
|
-
})
|
|
53
|
+
expect(pdfjsViewer).toBeInTheDocument()
|
|
54
|
+
expect(pdfjsNoViewer).toBeNull()
|
|
55
|
+
expect(DownloadBtnNoViewer).toBeNull()
|
|
160
56
|
})
|
|
161
57
|
})
|
|
@@ -22,6 +22,7 @@ const MarkdownRenderer = ({ text }) => (
|
|
|
22
22
|
const PlainTextRenderer = ({ text }) => (
|
|
23
23
|
<pre
|
|
24
24
|
className={cx(styles['viewer-textviewer-content'], 'u-mh-auto', 'u-mv-2')}
|
|
25
|
+
data-testid="viewer-plaintext"
|
|
25
26
|
>
|
|
26
27
|
{text}
|
|
27
28
|
</pre>
|
|
@@ -29,7 +30,7 @@ const PlainTextRenderer = ({ text }) => (
|
|
|
29
30
|
|
|
30
31
|
const Loader = () => {
|
|
31
32
|
return (
|
|
32
|
-
<div className={styles['viewer-textviewer']}>
|
|
33
|
+
<div className={styles['viewer-textviewer']} data-testid="viewer-spinner">
|
|
33
34
|
<ViewerSpinner />
|
|
34
35
|
</div>
|
|
35
36
|
)
|
|
@@ -1,20 +1,23 @@
|
|
|
1
|
-
import
|
|
1
|
+
import '@testing-library/jest-dom'
|
|
2
|
+
import { render, waitFor } from '@testing-library/react'
|
|
2
3
|
import React from 'react'
|
|
3
|
-
import renderer from 'react-test-renderer'
|
|
4
|
-
|
|
5
|
-
import { createMockClient } from 'cozy-client'
|
|
6
|
-
import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
|
|
7
4
|
|
|
8
5
|
import { TextViewer, isMarkdown } from './TextViewer'
|
|
9
6
|
|
|
10
|
-
|
|
7
|
+
jest.mock('../NoViewer/DownloadButton', () => () => (
|
|
8
|
+
<div data-testid="dl-btn-no-viewer">DownloadButton</div>
|
|
9
|
+
))
|
|
10
|
+
|
|
11
|
+
const client = {}
|
|
11
12
|
|
|
12
13
|
const mockText = jest.fn()
|
|
13
14
|
const mockFetch = responseText => async () => ({
|
|
14
15
|
text: mockText.mockResolvedValue(responseText)
|
|
15
16
|
})
|
|
16
17
|
|
|
17
|
-
client.
|
|
18
|
+
client.getStackClient = jest.fn().mockReturnValue({
|
|
19
|
+
fetch: mockFetch('The content of my file')
|
|
20
|
+
})
|
|
18
21
|
|
|
19
22
|
const props = {
|
|
20
23
|
client,
|
|
@@ -44,75 +47,64 @@ describe('isMarkdown function', () => {
|
|
|
44
47
|
expect(isMarkdown({ name: 'text.txt' })).toBe(false)
|
|
45
48
|
})
|
|
46
49
|
})
|
|
50
|
+
|
|
47
51
|
describe('TextViewer Component', () => {
|
|
48
52
|
it('should display the loader ', () => {
|
|
49
|
-
const
|
|
50
|
-
expect(
|
|
53
|
+
const { getByTestId } = render(<TextViewer {...props} />)
|
|
54
|
+
expect(getByTestId('viewer-spinner')).toBeInTheDocument()
|
|
51
55
|
})
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
<TextViewer
|
|
57
|
-
{...props}
|
|
58
|
-
renderFallbackExtraContent={file => <span>{file.name}</span>}
|
|
59
|
-
/>
|
|
60
|
-
</BreakpointsProvider>
|
|
61
|
-
)
|
|
62
|
-
|
|
63
|
-
const inst = comp.root.children[0].instance
|
|
64
|
-
inst.setState({ error: true, loading: false })
|
|
65
|
-
expect(comp.toJSON()).toMatchSnapshot()
|
|
66
|
-
})
|
|
67
|
-
|
|
68
|
-
it('should display the text viewer', () => {
|
|
69
|
-
const comp = renderer.create(
|
|
70
|
-
<BreakpointsProvider>
|
|
71
|
-
<TextViewer {...props} />
|
|
72
|
-
</BreakpointsProvider>
|
|
73
|
-
)
|
|
74
|
-
|
|
75
|
-
const inst = comp.root.children[0].instance
|
|
76
|
-
inst.setState({
|
|
77
|
-
loading: false,
|
|
78
|
-
isMarkdown: false,
|
|
79
|
-
text: 'The content of my file'
|
|
56
|
+
describe('TextViewer render method', () => {
|
|
57
|
+
it('should render the loader when loading', () => {
|
|
58
|
+
const { getByTestId } = render(<TextViewer {...props} />)
|
|
59
|
+
expect(getByTestId('viewer-spinner')).toBeInTheDocument()
|
|
80
60
|
})
|
|
81
|
-
expect(comp.toJSON()).toMatchSnapshot()
|
|
82
|
-
expect(mockText).toHaveBeenCalled()
|
|
83
|
-
})
|
|
84
61
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
62
|
+
it('should render NoViewer component on error', async () => {
|
|
63
|
+
const errorProps = {
|
|
64
|
+
...props,
|
|
65
|
+
client: {
|
|
66
|
+
...props.client,
|
|
67
|
+
getStackClient: jest.fn().mockReturnValue({
|
|
68
|
+
fetch: jest.fn().mockRejectedValue(new Error('Fetch error'))
|
|
69
|
+
})
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
const { getByTestId } = render(<TextViewer {...errorProps} />)
|
|
91
73
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
text: "It's very easy to make some words **bold** and other words *italic* with Markdown"
|
|
74
|
+
await waitFor(() => {
|
|
75
|
+
const pdfjsNoViewer = getByTestId('no-viewer')
|
|
76
|
+
expect(pdfjsNoViewer).toBeInTheDocument()
|
|
77
|
+
})
|
|
97
78
|
})
|
|
98
|
-
expect(comp.toJSON()).toMatchSnapshot()
|
|
99
|
-
})
|
|
100
79
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
80
|
+
it('should render MarkdownRenderer when file is markdown', async () => {
|
|
81
|
+
const markdownProps = {
|
|
82
|
+
...props,
|
|
83
|
+
file: {
|
|
84
|
+
...props.file,
|
|
85
|
+
mime: 'text/markdown'
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
const { findByText } = render(<TextViewer {...markdownProps} />)
|
|
89
|
+
await waitFor(async () => {
|
|
90
|
+
const element = await findByText('The content of my file')
|
|
91
|
+
expect(element).toBeInTheDocument()
|
|
92
|
+
})
|
|
93
|
+
})
|
|
108
94
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
95
|
+
it('should render PlainTextRenderer when file is not markdown', async () => {
|
|
96
|
+
const plainTextProps = {
|
|
97
|
+
...props,
|
|
98
|
+
file: {
|
|
99
|
+
...props.file,
|
|
100
|
+
mime: 'text/plain'
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
const { findByTestId } = render(<TextViewer {...plainTextProps} />)
|
|
104
|
+
await waitFor(async () => {
|
|
105
|
+
const element = await findByTestId('viewer-plaintext')
|
|
106
|
+
expect(element).toBeInTheDocument()
|
|
107
|
+
})
|
|
114
108
|
})
|
|
115
|
-
expect(comp.toJSON()).toMatchSnapshot()
|
|
116
|
-
expect(mockText).toHaveBeenCalled()
|
|
117
109
|
})
|
|
118
110
|
})
|
package/src/helpers.js
CHANGED
|
@@ -15,9 +15,9 @@ export const isFileEncrypted = file => isEncrypted(file)
|
|
|
15
15
|
|
|
16
16
|
export const formatDate = ({ f, lang, date }) => {
|
|
17
17
|
if (lang === 'en') {
|
|
18
|
-
return f(date, '
|
|
18
|
+
return f(date, 'LL/dd/yyyy')
|
|
19
19
|
}
|
|
20
|
-
return f(date, '
|
|
20
|
+
return f(date, 'dd/LL/yyyy')
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
export const isEditableAttribute = (name, file) => {
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
-
|
|
3
|
-
exports[`TextViewer Component should display the error component and render with renderFallback 1`] = `
|
|
4
|
-
<div
|
|
5
|
-
className="viewer-noviewer"
|
|
6
|
-
>
|
|
7
|
-
<svg
|
|
8
|
-
className="styles__icon___23x3R"
|
|
9
|
-
height={140}
|
|
10
|
-
style={Object {}}
|
|
11
|
-
viewBox="0 0 32 32"
|
|
12
|
-
width={160}
|
|
13
|
-
>
|
|
14
|
-
<g
|
|
15
|
-
fill="none"
|
|
16
|
-
fillRule="evenodd"
|
|
17
|
-
>
|
|
18
|
-
<path
|
|
19
|
-
d="M3 2.002C3 .896 3.89 0 4.997 0H22l7 7v22.996A2 2 0 0127.003 32H4.997A1.995 1.995 0 013 29.998V2.002z"
|
|
20
|
-
fill="#D1D5DB"
|
|
21
|
-
/>
|
|
22
|
-
<path
|
|
23
|
-
d="M21.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5z"
|
|
24
|
-
fill="#A3ACB8"
|
|
25
|
-
/>
|
|
26
|
-
</g>
|
|
27
|
-
</svg>
|
|
28
|
-
<p
|
|
29
|
-
className="viewer-filename"
|
|
30
|
-
>
|
|
31
|
-
My File
|
|
32
|
-
</p>
|
|
33
|
-
<span>
|
|
34
|
-
My File
|
|
35
|
-
</span>
|
|
36
|
-
</div>
|
|
37
|
-
`;
|
|
38
|
-
|
|
39
|
-
exports[`TextViewer Component should display the loader 1`] = `<Loader />`;
|
|
40
|
-
|
|
41
|
-
exports[`TextViewer Component should display the markdown viewer 1`] = `
|
|
42
|
-
<div
|
|
43
|
-
className="viewer-textviewer"
|
|
44
|
-
>
|
|
45
|
-
<h2
|
|
46
|
-
className="viewer-filename u-mt-3 u-mb-1"
|
|
47
|
-
>
|
|
48
|
-
My File
|
|
49
|
-
</h2>
|
|
50
|
-
<div
|
|
51
|
-
className="viewer-textviewer-content u-p-1"
|
|
52
|
-
>
|
|
53
|
-
<p>
|
|
54
|
-
It's very easy to make some words
|
|
55
|
-
<strong>
|
|
56
|
-
bold
|
|
57
|
-
</strong>
|
|
58
|
-
and other words
|
|
59
|
-
<em>
|
|
60
|
-
italic
|
|
61
|
-
</em>
|
|
62
|
-
with Markdown
|
|
63
|
-
</p>
|
|
64
|
-
</div>
|
|
65
|
-
</div>
|
|
66
|
-
`;
|
|
67
|
-
|
|
68
|
-
exports[`TextViewer Component should display the text viewer 1`] = `
|
|
69
|
-
<div
|
|
70
|
-
className="viewer-textviewer"
|
|
71
|
-
>
|
|
72
|
-
<h2
|
|
73
|
-
className="viewer-filename u-mt-3 u-mb-1"
|
|
74
|
-
>
|
|
75
|
-
My File
|
|
76
|
-
</h2>
|
|
77
|
-
<pre
|
|
78
|
-
className="viewer-textviewer-content u-mh-auto u-mv-2"
|
|
79
|
-
>
|
|
80
|
-
The content of my file
|
|
81
|
-
</pre>
|
|
82
|
-
</div>
|
|
83
|
-
`;
|
|
84
|
-
|
|
85
|
-
exports[`TextViewer Component should display the text viewer when an URL is given 1`] = `
|
|
86
|
-
<div
|
|
87
|
-
className="viewer-textviewer"
|
|
88
|
-
>
|
|
89
|
-
<h2
|
|
90
|
-
className="viewer-filename u-mt-3 u-mb-1"
|
|
91
|
-
>
|
|
92
|
-
My File
|
|
93
|
-
</h2>
|
|
94
|
-
<pre
|
|
95
|
-
className="viewer-textviewer-content u-mh-auto u-mv-2"
|
|
96
|
-
>
|
|
97
|
-
The content of my file
|
|
98
|
-
</pre>
|
|
99
|
-
</div>
|
|
100
|
-
`;
|