Add Cypress tests for image insertion

cypress/integration/images.spec.js

@@ -0,0 +1,175 @@
+/**
+ * @copyright Copyright (c) 2021 Julien Veyssier <[email protected]>
+ *
+ * @author Julien Veyssier <[email protected]>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+
+import { randHash } from '../utils/'
+import 'cypress-file-upload'
+const randUser = randHash()
+
+const ACTION_UPLOAD_LOCAL_FILE = 1
+const ACTION_INSERT_FROM_FILES = 2
+const ACTION_INSERT_FROM_LINK = 3
+
+/**
+ * Open the image action menu and click one action
+ *
+ * @param actionIndex position of the action to be clicked
+ * @param callback what happens once it's been clicked
+ */
+const clickOnImageAction = (actionIndex, callback) => {
+	cy.get('#viewer .action-item.submenu')
+		.should('not.have.class', 'action-item--open')
+		.click()
+		.should('have.class', 'action-item--open')
+
+	// get the popover ID to be able to find the related DOM element
+	cy.get('#viewer .action-item.submenu > div.v-popover > .trigger')
+		.should('have.attr', 'aria-describedby')
+			.should('contain', 'popover_')
+			.then((popoverId) => {
+				cy.log('Click on the action entry')
+				cy.get('div#' + popoverId)
+					.should('have.class', 'open')
+					.find('li:nth-child(' + actionIndex + ')').click()
+				// our job here is done
+				callback(popoverId)
+			})
+}
+
+/**
+ * Check if an image is visible in the document
+ *
+ * @param documentId file ID of the current document
+ * @param imageName file name to be checked
+ */
+const checkImage = (documentId, imageName) => {
+	cy.log('Check the image is visible and well formed')
+	cy.get('#editor .ProseMirror div.image[data-src="text://image?imageFileName=' + imageName + '"]')
+		.should('be.visible')
+		.find('img')
+			.should('have.attr', 'src')
+				.should('contain', 'apps/text/image?documentId=' + documentId)
+				.should('contain', 'imageFileName=' + imageName)
+}
+
+describe('Test all image insertion methods', () => {
+	before(() => {
+		// Init user
+		cy.nextcloudCreateUser(randUser, 'password')
+		cy.login(randUser, 'password')
+
+		// Upload test files to user's storage
+		cy.uploadFile('test.md', 'text/markdown')
+		cy.uploadFile('github.png', 'image/png')
+	})
+
+	beforeEach(() => {
+		cy.login(randUser, 'password')
+	})
+
+	it('See test files in the list', () => {
+		cy.get('#fileList tr[data-file="test.md"]', { timeout: 10000 })
+			.should('contain', 'test.md')
+		cy.get('#fileList tr[data-file="github.png"]', { timeout: 10000 })
+			.should('contain', 'github.png')
+	})
+
+	it('Insert an image from files', () => {
+		cy.openFile('test.md')
+		clickOnImageAction(ACTION_INSERT_FROM_FILES, () => {
+			cy.intercept({ method: 'POST', url: '**/filepath' }).as('insertPathRequest')
+
+			cy.log('Select the file in the filepicker')
+			cy.get('#picker-filestable tr[data-entryname="github.png"]').click()
+			cy.log('Click OK in the filepicker')
+			cy.get('.oc-dialog > .oc-dialog-buttonrow button').click()
+
+			cy.wait('@insertPathRequest').then((req) => {
+				// the name of the created file on NC side is returned in the response
+				const fileName = req.response.body.name
+				const documentId = req.response.body.documentId
+				cy.wait(2000)
+				checkImage(documentId, fileName)
+				cy.wait(1000)
+				cy.screenshot()
+			})
+		})
+	})
+
+	it('Insert an image from a link', () => {
+		cy.openFile('test.md')
+		clickOnImageAction(ACTION_INSERT_FROM_LINK, (popoverId) => {
+			cy.intercept({ method: 'POST', url: '**/link' }).as('insertLinkRequest')
+
+			cy.wait(2000)
+			cy.log('Type and validate')
+			cy.get('div#' + popoverId + ' li:nth-child(3) input[type=text]')
+				.type('https://nextcloud.com/wp-content/themes/next/assets/img/headers/engineering-small.jpg')
+				.wait(2000)
+				.type('{enter}')
+			// Clicking on the validation button is an alternative to typing {enter}
+			// cy.get('div#' + popoverId + ' li:nth-child(3) form > label').click()
+
+			cy.wait('@insertLinkRequest').then((req) => {
+				// the name of the created file on NC side is returned in the response
+				const fileName = req.response.body.name
+				const documentId = req.response.body.documentId
+				cy.wait(2000)
+				checkImage(documentId, fileName)
+				cy.wait(2000)
+				cy.screenshot()
+			})
+		})
+	})
+
+	it('Upload a local image', () => {
+		cy.openFile('test.md')
+		// in this case we almost could just attach the file to the input
+		// BUT we still need to click on the action because otherwise the command
+		// is not handled correctly when the upload has been done in <MenuBar>
+		clickOnImageAction(ACTION_UPLOAD_LOCAL_FILE, () => {
+			cy.intercept({ method: 'POST', url: '**/upload' }).as('uploadRequest')
+
+			cy.wait(2000)
+			cy.log('Upload the file through the input')
+			cy.get('.menubar input[type="file"]').attachFile('table.png')
+
+			cy.wait('@uploadRequest').then((req) => {
+				// the name of the created file on NC side is returned in the response
+				const fileName = req.response.body.name
+				const documentId = req.response.body.documentId
+				cy.wait(2000)
+				checkImage(documentId, fileName)
+				cy.wait(2000)
+				cy.screenshot()
+			})
+		})
+	})
+
+	it('Close the editor and delete the user', () => {
+		cy.openFile('test.md')
+		cy.get('#viewer .modal-header button.header-close').click()
+		cy.get('#viewer').should('not.exist')
+		cy.nextcloudDeleteUser(randUser, 'password')
+	})
+
+})

cypress/support/commands.js

@@ -62,6 +62,22 @@ Cypress.Commands.add('nextcloudCreateUser', (user, password) => {
 	})
 })
 
+Cypress.Commands.add('nextcloudDeleteUser', (user) => {
+	cy.clearCookies()
+	cy.request({
+		method: 'DELETE',
+		url: `${Cypress.env('baseUrl')}/ocs/v1.php/cloud/users/${user}`,
+		form: true,
+		auth: { user: 'admin', pass: 'admin' },
+		headers: {
+			'OCS-ApiRequest': 'true',
+			'Content-Type': 'application/x-www-form-urlencoded',
+		}
+	}).then(response => {
+		cy.log(`Deleted user ${user}`, response.status)
+	})
+})
+
 Cypress.Commands.add('uploadFile', (fileName, mimeType, target) => {
 	cy.fixture(fileName, 'base64')
 		.then(Cypress.Blob.base64StringToBlob)

package.json

@@ -74,6 +74,7 @@
 		"@vue/test-utils": "^1.3.0",
 		"babel-core": "^7.0.0-bridge.0",
 		"cypress": "^9.1.1",
+		"cypress-file-upload": "^5.0.8",
 		"jest": "^27.4.5",
 		"jest-environment-jsdom": "^27.4.4",
 		"jest-serializer-vue": "^2.0.2",

src/components/MenuBar.vue

@@ -384,6 +384,9 @@ export default {
 			this.imageLink = newImageLink
 		},
 		onImageLinkSubmit(command) {
+			if (!this.imageLink) {
+				return
+			}
 			this.uploadingImage = true
 			this.showImageLinkPrompt = false
 			this.$refs.imageActions[0].closeMenu()