fix: only show delete image button when editing

Also test for it being shown and triggering the deleteNode
when editing.

Signed-off-by: Max <max@nextcloud.com>

2 files changed, 27 insertions, 9 deletions

diff --git a/src/nodes/ImageView.vue b/src/nodes/ImageView.vue
index 99dda2500..fd9e3de30 100644
--- a/src/nodes/ImageView.vue
+++ b/src/nodes/ImageView.vue
@@ -41,7 +41,7 @@
 							type="text"
 							:value="alt"
 							@keyup.enter="updateAlt()">
-						<div v-if="showIcons"
+						<div v-if="editor.isEditable && showIcons"
 							class="trash-icon"
 							title="Delete this image"
 							@click="deleteNode">
diff --git a/src/tests/nodes/ImageView.spec.js b/src/tests/nodes/ImageView.spec.js
index 773e4f14c..e323997a3 100644
--- a/src/tests/nodes/ImageView.spec.js
+++ b/src/tests/nodes/ImageView.spec.js
@@ -10,34 +10,52 @@ global.OC = {
 
 describe('Image View src attribute based on markdown', () => {
 
-	const factory = attrs => {
+	const factory = (attrs, options = {}) => {
 		const propsData = {
-			extension: { options: {currentDirectory: '/current'} },
-			node: {attrs}
+			extension: { options: { currentDirectory: '/current' } },
+			editor: { isEditable: options.isEditable ?? true },
+			node: { attrs },
+			deleteNode: options.deleteNode ?? function() {},
 		}
 		const data = () => ({
 			imageLoaded: true,
 			loaded: true,
 			failed: false,
+			showIcons: true,
 		})
 		return shallowMount(ImageView, {propsData, data})
 	}
 
 	test('old style is used as is', () => {
 		const src = '/core/preview?fileId=123#mimetype=image%2Fjpeg'
-		const wrapper = factory({src})
+		const wrapper = factory({ src })
 		expect(wrapper.find('.image__main').attributes('src')).toBe(src)
 	})
 
+	test('has button to remove image', () => {
+		const deleteNode = jest.fn()
+		const src = '/core/preview?fileId=123#mimetype=image%2Fjpeg'
+		const wrapper = factory({ src }, { deleteNode })
+		wrapper.find('.image .trash-icon').trigger('click')
+		expect(deleteNode).toHaveBeenCalled()
+	})
+
+	test('no button to remove image when not editable', () => {
+		const src = '/core/preview?fileId=123#mimetype=image%2Fjpeg'
+		const wrapper = factory({ src }, { isEditable: false })
+		expect(wrapper.find('.image__main').attributes('src')).toBe(src)
+		expect(wrapper.find('.image .trash-icon').exists()).toBeFalsy()
+	})
+
 	test('old style with index.php is used as is', () => {
 		const src = '/index.php/core/preview?fileId=9&x=1024&y=1024&a=true#mimetype=image%2Fjpeg&hasPreview=true&fileId=9'
-		const wrapper = factory({src})
+		const wrapper = factory({ src })
 		expect(wrapper.find('.image__main').attributes('src')).toBe(src)
 	})
 
 	test('fileId is used for preview url', () => {
 		const src = '/Media/photo.jpeg?fileId=7#mimetype=image%2Fjpeg&hasPreview=true'
-		const wrapper = factory({src})
+		const wrapper = factory({ src })
 		expect(wrapper.vm.fileId).toBe('7')
 		expect(wrapper.find('.image__main').attributes('src'))
 			.toContain('/core/preview?fileId=7')
@@ -45,7 +63,7 @@ describe('Image View src attribute based on markdown', () => {
 
 	test('use dav paths for gifs so they are animated', () => {
 		const src = '/Media/giffy.gif?fileId=7#mimetype=image%2Fgif&hasPreview=true'
-		const wrapper = factory({src})
+		const wrapper = factory({ src })
 		expect(wrapper.vm.extension.options.currentDirectory).toBe('/current')
 		expect(wrapper.find('.image__main').attributes('src'))
 			.toContain("remote.php/dav/files/user1/current/Media/giffy.gif")
@@ -67,7 +85,7 @@ describe('Image View src attribute based on markdown', () => {
 
 	test('data urls are used as is', () => {
 		const src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII='
-		const wrapper = factory({src})
+		const wrapper = factory({ src })
 		expect(wrapper.find('.image__main').attributes('src')).toBe(src)
 	})