🩹 (#2463): show a fallback image when image can't be loaded

cypress.config.js

@@ -1,17 +1,18 @@
 const { defineConfig } = require('cypress')
 
 module.exports = defineConfig({
-  projectId: 'hx9gqy',
-  viewportWidth: 1280,
-  viewportHeight: 900,
-  e2e: {
-    // We've imported your old cypress plugins here.
-    // You may want to clean this up later by importing these.
-    setupNodeEvents(on, config) {
-      return require('./cypress/plugins/index.js')(on, config)
-    },
-    baseUrl: 'http://localhost:8081/index.php/',
-    experimentalSessionAndOrigin: true,
-    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
-  },
+	projectId: 'hx9gqy',
+	viewportWidth: 1280,
+	viewportHeight: 900,
+	e2e: {
+		// We've imported your old cypress plugins here.
+		// You may want to clean this up later by importing these.
+		setupNodeEvents(on, config) {
+			return require('./cypress/plugins/index.js')(on, config)
+		},
+		// baseUrl: 'http://nextcloud.local/index.php/',
+		baseUrl: 'http://localhost:8081/index.php/',
+		experimentalSessionAndOrigin: true,
+		specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+	},
 })

cypress/e2e/ImageView.spec.js

@@ -0,0 +1,134 @@
+import { randHash } from '../utils/index.js'
+
+const currentUser = randHash()
+
+const refresh = () => cy.get('#controls .crumb:not(.hidden) a')
+	.last()
+	.click({ force: true })
+
+const createMarkdown = (fileName, content) => {
+	return cy.createFile(fileName, content, 'text/markdown')
+		.then(refresh)
+}
+
+// const closeModal = () => {
+// 	cy.get('.modal-header .header-close').click()
+// }
+
+describe('Image View', () => {
+	before(() => {
+		// Init user
+		cy.nextcloudCreateUser(currentUser, 'password')
+		cy.login(currentUser, 'password')
+
+		// Upload test files to user's storage
+		cy.createFolder('child-folder')
+		cy.uploadFile('github.png', 'image/png')
+		cy.uploadFile('github.png', 'image/png', 'child-folder/github.png')
+	})
+
+	beforeEach(() => {
+		cy.login(currentUser, 'password')
+	})
+
+	describe('direct access', () => {
+		it('from root', () => {
+			const fileName = `${Cypress.currentTest.title}.md`
+
+			createMarkdown(fileName, '# from root\n\n ![git](/github.png)')
+
+			cy.openFile(fileName)
+
+			cy.getEditor()
+				.find('[data-component="image-view"]')
+				.should('have.attr', 'data-src')
+				.should('eq', '/github.png')
+
+			cy.getEditor()
+				.find('[data-component="image-view"] img')
+				.should('have.attr', 'src')
+				.should('contains', `/dav/files/${currentUser}/github.png`)
+		})
+
+		it('from child folder', () => {
+			const fileName = `${Cypress.currentTest.title}.md`
+
+			createMarkdown(fileName, '# from child\n\n ![git](child-folder/github.png)')
+
+			cy.openFile(fileName)
+
+			cy.getEditor()
+				.find('[data-component="image-view"]')
+				.should('have.attr', 'data-src')
+				.should('eq', 'child-folder/github.png')
+
+			cy.getEditor()
+				.find('[data-component="image-view"] img')
+				.should('have.attr', 'src')
+				.should('contains', `/dav/files/${currentUser}/child-folder/github.png`)
+		})
+
+		it('from parent folder', () => {
+			cy.visit('apps/files?dir=/child-folder')
+
+			const fileName = `${Cypress.currentTest.title}.md`
+
+			createMarkdown(`/child-folder/${fileName}`, '# from parent\n\n ![git](../github.png)')
+
+			cy.openFile(fileName, { force: true })
+
+			cy.getEditor()
+				.find('[data-component="image-view"]')
+				.should('have.attr', 'data-src')
+				.should('eq', '../github.png')
+
+			cy.getEditor()
+				.find('[data-component="image-view"] img')
+				.should('have.attr', 'src')
+				.should('contains', `/dav/files/${currentUser}/github.png`)
+		})
+
+		it('with preview', () => {
+			cy.get('#fileList tr[data-file="github.png"]')
+				.should('have.attr', 'data-id')
+				.then(imageId => {
+					const fileName = `${Cypress.currentTest.title}.md`
+
+					createMarkdown(fileName, `# from image id\n\n ![${imageId}](github.png?fileId=${imageId}&hasPreview=true)`)
+
+					cy.openFile(fileName, { force: true })
+
+					cy.getEditor()
+						.find('[data-component="image-view"] img')
+						.should('have.attr', 'src')
+						.should('contains', `core/preview?fileId=${imageId}&file=${encodeURIComponent('/github.png')}`, { timeout: 5000 })
+				})
+		})
+	})
+
+	describe('fail to load', () => {
+		it.only('direct access', () => {
+			const fileName = `${Cypress.currentTest.title}.md`
+
+			createMarkdown(fileName, '# from root\n\n ![yaha](/yaha.png)')
+
+			cy.openFile(fileName)
+
+			cy.getEditor()
+				.find('[data-component="image-view"]')
+				.should('have.class', 'image-view--failed')
+
+			cy.getEditor()
+				.find('[data-component="image-view"] svg')
+				.should('be.visible')
+
+			cy.getEditor()
+				.find('[data-component="image-view"] .image__error-message')
+				.should('be.visible')
+
+			cy.getEditor()
+				.find('[data-component="image-view"] .image__caption input')
+				.should('have.value', 'yaha')
+		})
+	})
+})

cypress/support/commands.js

@@ -98,7 +98,7 @@ Cypress.Commands.add('nextcloudDeleteUser', (user) => {
 })
 
 Cypress.Commands.add('uploadFile', (fileName, mimeType, target) => {
-	cy.fixture(fileName, 'base64')
+	return cy.fixture(fileName, 'base64')
 		.then(Cypress.Blob.base64StringToBlob)
 		.then(async blob => {
 			const file = new File([blob], fileName, { type: mimeType })
@@ -118,6 +118,28 @@ Cypress.Commands.add('uploadFile', (fileName, mimeType, target) => {
 		})
 })
 
+Cypress.Commands.add('createFile', (target, content, mimeType) => {
+	const fileName = target.split('/').pop()
+
+	const blob = new Blob([content], { type: mimeType })
+	const file = new File([blob], fileName, { type: mimeType })
+
+	const requestAlias = `request-${fileName}`
+
+	return cy.window()
+		.then(async window => {
+			const response = await axios.put(`${Cypress.env('baseUrl')}/remote.php/webdav/${target}`, file, {
+				headers: {
+					requesttoken: window.OC.requestToken,
+					'Content-Type': mimeType,
+				},
+			})
+
+			return cy.log(`Uploaded ${fileName}`, response.status)
+		})
+
+})
+
 Cypress.Commands.add('shareFileToUser', (userId, password, path, targetUserId) => {
 	cy.clearCookies()
 	cy.request({
@@ -163,8 +185,8 @@ Cypress.Commands.add('reloadFileList', () => {
 	})
 })
 
-Cypress.Commands.add('openFile', fileName => {
-	cy.get(`#fileList tr[data-file="${fileName}"] a.name`).click()
+Cypress.Commands.add('openFile', (fileName, params = {}) => {
+	cy.get(`#fileList tr[data-file="${fileName}"] a.name`).click(params)
 	cy.wait(250)
 })
 

src/components/EditorMediaHandler.vue

@@ -43,6 +43,7 @@
 <script>
 import { getCurrentUser } from '@nextcloud/auth'
 import { showError } from '@nextcloud/dialogs'
+import { mimetypesImages as IMAGE_MIMES } from '../helpers/mime.js'
 
 import {
 	useEditorMixin,
@@ -56,18 +57,6 @@ import {
 	STATE_UPLOADING,
 } from './EditorMediaHandler.provider.js'
 
-const IMAGE_MIMES = [
-	'image/png',
-	'image/jpeg',
-	'image/jpg',
-	'image/gif',
-	'image/x-xbitmap',
-	'image/x-ms-bmp',
-	'image/bmp',
-	'image/svg+xml',
-	'image/webp',
-]
-
 export default {
 	name: 'EditorMediaHandler',
 	mixins: [useEditorMixin, useFileMixin, useSyncServiceMixin],

src/components/EditorWrapper.vue

@@ -494,7 +494,7 @@ export default {
 				session: this.currentSession,
 				user: getCurrentUser(),
 				shareToken: this.shareToken,
-				currentDirectory: this.relativePath,
+				currentDirectory: this.currentDirectory,
 			})
 		},