✅ (#2463): [WIP] ImageView tests

direct access

Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>

2 files changed, 133 insertions, 3 deletions

diff --git a/cypress/e2e/ImageView.spec.js b/cypress/e2e/ImageView.spec.js
new file mode 100644
index 000000000..944303df9
--- /dev/null
+++ b/cypress/e2e/ImageView.spec.js
@@ -0,0 +1,108 @@
+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 })
+				})
+		})
+	})
+})
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 482b50e2f..afe36697f 100644
--- a/cypress/support/commands.js
+++ b/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)
 })