|
| 1 | +import { describe, it, expect, vi, beforeEach } from 'vitest'; |
| 2 | +import { flushPromises } from '@vue/test-utils'; |
| 3 | + |
| 4 | +// ── Hoisted mock objects (available to vi.mock factories) ───────────── |
| 5 | +const { mockDecoSet, mockPluginKeyInstance } = vi.hoisted(() => { |
| 6 | + const mockDecoSet = { |
| 7 | + add: vi.fn(), |
| 8 | + map: vi.fn(), |
| 9 | + find: vi.fn(() => []), |
| 10 | + remove: vi.fn(), |
| 11 | + }; |
| 12 | + mockDecoSet.add.mockReturnValue(mockDecoSet); |
| 13 | + mockDecoSet.map.mockReturnValue(mockDecoSet); |
| 14 | + mockDecoSet.remove.mockReturnValue(mockDecoSet); |
| 15 | + |
| 16 | + const mockPluginKeyInstance = { |
| 17 | + getState: vi.fn(() => ({ set: mockDecoSet })), |
| 18 | + }; |
| 19 | + |
| 20 | + return { mockDecoSet, mockPluginKeyInstance }; |
| 21 | +}); |
| 22 | + |
| 23 | +// ── ProseMirror mocks ───────────────────────────────────────────────── |
| 24 | +vi.mock('prosemirror-state', () => ({ |
| 25 | + Plugin: vi.fn(), |
| 26 | + PluginKey: vi.fn(() => mockPluginKeyInstance), |
| 27 | +})); |
| 28 | + |
| 29 | +vi.mock('prosemirror-view', () => ({ |
| 30 | + Decoration: { |
| 31 | + widget: vi.fn(() => ({ type: 'widget' })), |
| 32 | + }, |
| 33 | + DecorationSet: { empty: mockDecoSet }, |
| 34 | +})); |
| 35 | + |
| 36 | +vi.mock('prosemirror-transform', () => ({ |
| 37 | + ReplaceStep: class {}, |
| 38 | + ReplaceAroundStep: class {}, |
| 39 | +})); |
| 40 | + |
| 41 | +// ── Image helper mocks ─────────────────────────────────────────────── |
| 42 | +vi.mock('./handleBase64', () => ({ |
| 43 | + base64ToFile: vi.fn(() => null), |
| 44 | + getBase64FileMeta: vi.fn(() => ({ filename: 'image.png' })), |
| 45 | +})); |
| 46 | + |
| 47 | +vi.mock('./handleUrl', () => ({ |
| 48 | + urlToFile: vi.fn(() => Promise.resolve(null)), |
| 49 | + validateUrlAccessibility: vi.fn(() => Promise.resolve(false)), |
| 50 | +})); |
| 51 | + |
| 52 | +vi.mock('./startImageUpload', () => ({ |
| 53 | + checkAndProcessImage: vi.fn(), |
| 54 | + uploadAndInsertImage: vi.fn(), |
| 55 | +})); |
| 56 | + |
| 57 | +vi.mock('@extensions/image/imageHelpers/startImageUpload.js', () => ({ |
| 58 | + addImageRelationship: vi.fn(() => 'rId99'), |
| 59 | +})); |
| 60 | + |
| 61 | +vi.mock('./fileNameUtils.js', () => ({ |
| 62 | + buildMediaPath: vi.fn((name) => `word/media/${name}`), |
| 63 | + ensureUniqueFileName: vi.fn((name) => name), |
| 64 | +})); |
| 65 | + |
| 66 | +// ── Imports (after mocks) ───────────────────────────────────────────── |
| 67 | +import { Decoration } from 'prosemirror-view'; |
| 68 | +import { handleBrowserPath } from './imageRegistrationPlugin.js'; |
| 69 | +import { urlToFile, validateUrlAccessibility } from './handleUrl'; |
| 70 | +import { addImageRelationship } from '@extensions/image/imageHelpers/startImageUpload.js'; |
| 71 | + |
| 72 | +// ── Helpers ─────────────────────────────────────────────────────────── |
| 73 | +const createImageNode = (attrs) => ({ |
| 74 | + type: { name: 'image' }, |
| 75 | + attrs, |
| 76 | + nodeSize: 1, |
| 77 | +}); |
| 78 | + |
| 79 | +const createTrStub = () => ({ |
| 80 | + delete: vi.fn(), |
| 81 | + setMeta: vi.fn(), |
| 82 | + setNodeMarkup: vi.fn(), |
| 83 | + mapping: {}, |
| 84 | + doc: { |
| 85 | + nodeAt: vi.fn(() => null), |
| 86 | + descendants: vi.fn(), |
| 87 | + }, |
| 88 | +}); |
| 89 | + |
| 90 | +const createViewStub = () => { |
| 91 | + const tr = createTrStub(); |
| 92 | + return { |
| 93 | + state: { |
| 94 | + tr, |
| 95 | + doc: tr.doc, |
| 96 | + }, |
| 97 | + dispatch: vi.fn(), |
| 98 | + }; |
| 99 | +}; |
| 100 | + |
| 101 | +const createEditorStub = () => ({ |
| 102 | + storage: { image: { media: {}, pendingRelativeRegistrations: new Set() } }, |
| 103 | + options: { mode: 'docx' }, |
| 104 | +}); |
| 105 | + |
| 106 | +// ── Tests ───────────────────────────────────────────────────────────── |
| 107 | +describe('handleBrowserPath', () => { |
| 108 | + let tr, state, view, editor; |
| 109 | + |
| 110 | + beforeEach(() => { |
| 111 | + vi.clearAllMocks(); |
| 112 | + |
| 113 | + mockDecoSet.add.mockReturnValue(mockDecoSet); |
| 114 | + mockDecoSet.map.mockReturnValue(mockDecoSet); |
| 115 | + mockDecoSet.remove.mockReturnValue(mockDecoSet); |
| 116 | + mockDecoSet.find.mockReturnValue([]); |
| 117 | + mockPluginKeyInstance.getState.mockReturnValue({ set: mockDecoSet }); |
| 118 | + |
| 119 | + tr = createTrStub(); |
| 120 | + state = { tr }; |
| 121 | + view = createViewStub(); |
| 122 | + editor = createEditorStub(); |
| 123 | + }); |
| 124 | + |
| 125 | + it('returns null for empty foundImages', () => { |
| 126 | + expect(handleBrowserPath([], editor, view, state)).toBeNull(); |
| 127 | + }); |
| 128 | + |
| 129 | + it('returns null when only relative images are present (no synchronous doc changes)', () => { |
| 130 | + const relativeOnly = [ |
| 131 | + { node: createImageNode({ src: './img.png' }), pos: 0, id: {} }, |
| 132 | + { node: createImageNode({ src: 'images/photo.png' }), pos: 5, id: {} }, |
| 133 | + ]; |
| 134 | + |
| 135 | + const result = handleBrowserPath(relativeOnly, editor, view, state); |
| 136 | + |
| 137 | + // No synchronous transaction — relative images stay in the doc |
| 138 | + expect(result).toBeNull(); |
| 139 | + expect(tr.delete).not.toHaveBeenCalled(); |
| 140 | + }); |
| 141 | + |
| 142 | + it('only creates decorations and deletes non-relative images', () => { |
| 143 | + const foundImages = [ |
| 144 | + { node: createImageNode({ src: 'https://example.com/img.png' }), pos: 0, id: {} }, |
| 145 | + { node: createImageNode({ src: './photos/local.jpg' }), pos: 10, id: {} }, |
| 146 | + { node: createImageNode({ src: 'data:image/png;base64,AAA' }), pos: 20, id: {} }, |
| 147 | + ]; |
| 148 | + |
| 149 | + const result = handleBrowserPath(foundImages, editor, view, state); |
| 150 | + |
| 151 | + expect(result).not.toBeNull(); |
| 152 | + // Only the HTTP and data URI images get placeholders and deletions |
| 153 | + expect(Decoration.widget).toHaveBeenCalledTimes(2); |
| 154 | + expect(tr.delete).toHaveBeenCalledTimes(2); |
| 155 | + }); |
| 156 | + |
| 157 | + it('deletes non-relative image nodes in descending position order', () => { |
| 158 | + const foundImages = [ |
| 159 | + { node: createImageNode({ src: 'https://a.com/1.png' }), pos: 5, id: {} }, |
| 160 | + { node: createImageNode({ src: 'https://a.com/2.png' }), pos: 15, id: {} }, |
| 161 | + ]; |
| 162 | + |
| 163 | + handleBrowserPath(foundImages, editor, view, state); |
| 164 | + |
| 165 | + expect(tr.delete).toHaveBeenCalledTimes(2); |
| 166 | + const [firstPos] = tr.delete.mock.calls[0]; |
| 167 | + const [secondPos] = tr.delete.mock.calls[1]; |
| 168 | + expect(firstPos).toBeGreaterThan(secondPos); |
| 169 | + }); |
| 170 | +}); |
| 171 | + |
| 172 | +describe('registerRelativeImages (via handleBrowserPath)', () => { |
| 173 | + let view, editor; |
| 174 | + |
| 175 | + beforeEach(() => { |
| 176 | + vi.clearAllMocks(); |
| 177 | + |
| 178 | + mockDecoSet.add.mockReturnValue(mockDecoSet); |
| 179 | + mockDecoSet.map.mockReturnValue(mockDecoSet); |
| 180 | + mockDecoSet.remove.mockReturnValue(mockDecoSet); |
| 181 | + mockDecoSet.find.mockReturnValue([]); |
| 182 | + mockPluginKeyInstance.getState.mockReturnValue({ set: mockDecoSet }); |
| 183 | + |
| 184 | + view = createViewStub(); |
| 185 | + editor = createEditorStub(); |
| 186 | + }); |
| 187 | + |
| 188 | + it('calls urlToFile for relative URLs without CORS check', async () => { |
| 189 | + const foundImages = [{ node: createImageNode({ src: './photos/local.jpg' }), pos: 0, id: {} }]; |
| 190 | + |
| 191 | + handleBrowserPath(foundImages, editor, view, { tr: createTrStub() }); |
| 192 | + await flushPromises(); |
| 193 | + |
| 194 | + expect(urlToFile).toHaveBeenCalledWith('./photos/local.jpg', 'local.jpg'); |
| 195 | + expect(validateUrlAccessibility).not.toHaveBeenCalled(); |
| 196 | + }); |
| 197 | + |
| 198 | + it('extracts filename from nested relative path', async () => { |
| 199 | + const foundImages = [{ node: createImageNode({ src: 'assets/img/logo.svg' }), pos: 0, id: {} }]; |
| 200 | + |
| 201 | + handleBrowserPath(foundImages, editor, view, { tr: createTrStub() }); |
| 202 | + await flushPromises(); |
| 203 | + |
| 204 | + expect(urlToFile).toHaveBeenCalledWith('assets/img/logo.svg', 'logo.svg'); |
| 205 | + }); |
| 206 | + |
| 207 | + it('stores binary in media store and updates node with rId on success', async () => { |
| 208 | + // Mock urlToFile to return a File |
| 209 | + const mockFile = new File(['binary'], 'photo.jpg', { type: 'image/jpeg' }); |
| 210 | + urlToFile.mockResolvedValueOnce(mockFile); |
| 211 | + |
| 212 | + // Mock the view so descendants finds the node and nodeAt returns it |
| 213 | + const imageNode = createImageNode({ src: './photo.jpg' }); |
| 214 | + view.state.doc.descendants.mockImplementation((cb) => { |
| 215 | + cb(imageNode, 5); |
| 216 | + }); |
| 217 | + view.state.doc.nodeAt.mockReturnValue(imageNode); |
| 218 | + view.state.tr.doc.nodeAt = vi.fn(() => imageNode); |
| 219 | + |
| 220 | + const foundImages = [{ node: imageNode, pos: 5, id: {} }]; |
| 221 | + |
| 222 | + handleBrowserPath(foundImages, editor, view, { tr: createTrStub() }); |
| 223 | + |
| 224 | + // Wait for the full async chain (urlToFile → FileReader → store → dispatch) |
| 225 | + await vi.waitFor(() => { |
| 226 | + expect(Object.keys(editor.storage.image.media)).toHaveLength(1); |
| 227 | + }); |
| 228 | + |
| 229 | + // Binary stored in media store |
| 230 | + expect(Object.keys(editor.storage.image.media)[0]).toBe('word/media/photo.jpg'); |
| 231 | + |
| 232 | + // Relationship created |
| 233 | + expect(addImageRelationship).toHaveBeenCalledWith({ editor, path: 'media/photo.jpg' }); |
| 234 | + |
| 235 | + // Node updated with rId and originalSrc for export (not deleted) |
| 236 | + expect(view.state.tr.setNodeMarkup).toHaveBeenCalledWith(5, undefined, { |
| 237 | + ...imageNode.attrs, |
| 238 | + rId: 'rId99', |
| 239 | + originalSrc: 'word/media/photo.jpg', |
| 240 | + }); |
| 241 | + expect(view.dispatch).toHaveBeenCalled(); |
| 242 | + }); |
| 243 | + |
| 244 | + it('skips duplicate relative URL when the first is still being registered', async () => { |
| 245 | + // Create a deferred promise so the first urlToFile call hangs |
| 246 | + let resolveFirst; |
| 247 | + const firstCall = new Promise((r) => (resolveFirst = r)); |
| 248 | + urlToFile.mockReturnValueOnce(firstCall); |
| 249 | + |
| 250 | + const imageA = { node: createImageNode({ src: 'assets/dup.png' }), pos: 0, id: {} }; |
| 251 | + const imageB = { node: createImageNode({ src: 'assets/dup.png' }), pos: 5, id: {} }; |
| 252 | + |
| 253 | + // Both arrive in the same batch |
| 254 | + handleBrowserPath([imageA, imageB], editor, view, { tr: createTrStub() }); |
| 255 | + await flushPromises(); |
| 256 | + |
| 257 | + // Only one fetch is initiated — the second is blocked by pendingRelativeRegistrations |
| 258 | + expect(urlToFile).toHaveBeenCalledTimes(1); |
| 259 | + |
| 260 | + // Complete the first registration |
| 261 | + resolveFirst(null); |
| 262 | + await flushPromises(); |
| 263 | + |
| 264 | + // pendingRelativeRegistrations is cleaned up so a future insert could register again |
| 265 | + expect(editor.storage.image.pendingRelativeRegistrations.size).toBe(0); |
| 266 | + }); |
| 267 | + |
| 268 | + it('does not register or dispatch when urlToFile returns null (fetch failure)', async () => { |
| 269 | + urlToFile.mockResolvedValueOnce(null); |
| 270 | + |
| 271 | + const foundImages = [{ node: createImageNode({ src: 'assets/missing.png' }), pos: 0, id: {} }]; |
| 272 | + |
| 273 | + handleBrowserPath(foundImages, editor, view, { tr: createTrStub() }); |
| 274 | + await flushPromises(); |
| 275 | + |
| 276 | + expect(urlToFile).toHaveBeenCalledWith('assets/missing.png', 'missing.png'); |
| 277 | + |
| 278 | + // No media stored |
| 279 | + expect(Object.keys(editor.storage.image.media)).toHaveLength(0); |
| 280 | + |
| 281 | + // No relationship created |
| 282 | + expect(addImageRelationship).not.toHaveBeenCalled(); |
| 283 | + |
| 284 | + // No transaction dispatched |
| 285 | + expect(view.dispatch).not.toHaveBeenCalled(); |
| 286 | + |
| 287 | + // Pending set cleaned up so the src can be retried later |
| 288 | + expect(editor.storage.image.pendingRelativeRegistrations.has('assets/missing.png')).toBe(false); |
| 289 | + }); |
| 290 | +}); |
0 commit comments