diff options
-rw-r--r-- | cypress/e2e/attachments.spec.js (renamed from cypress/e2e/images.spec.js) | 102 | ||||
-rw-r--r-- | cypress/fixtures/file.txt.gz | bin | 0 -> 38 bytes | |||
-rw-r--r-- | src/nodes/ImageView.vue | 8 |
3 files changed, 65 insertions, 45 deletions
diff --git a/cypress/e2e/images.spec.js b/cypress/e2e/attachments.spec.js index f0676ee41..976594439 100644 --- a/cypress/e2e/images.spec.js +++ b/cypress/e2e/attachments.spec.js @@ -30,7 +30,6 @@ const attachmentFileNameToId = {} const ACTION_UPLOAD_LOCAL_FILE = 'insert-attachment-upload' const ACTION_INSERT_FROM_FILES = 'insert-attachment-insert' -// const ACTION_INSERT_FROM_LINK = 3 /** * @param {string} name name of file @@ -56,11 +55,11 @@ function fixedEncodeURIComponent(str) { } /** - * Open the image action menu and click one action + * Open the attachment action menu and click one action * * @param {string} actionName position of the action to be clicked */ -const clickOnImageAction = (actionName) => { +const clickOnAttachmentAction = (actionName) => { cy.getActionEntry('insert-attachment') .click() @@ -70,44 +69,53 @@ const clickOnImageAction = (actionName) => { } /** - * Check if an image is visible in the document + * Check if an attachment is visible in the document * * @param {number} documentId file ID of the current document - * @param {string} imageName file name to be checked - * @param {number} imageId file id - * @param {number|undefined} index index of image in the document + * @param {string} fileName attachment file name to be checked + * @param {number} fileId attachment file id + * @param {number|undefined} index index of the attachment in the document + * @param {boolean} isImage is the attachment an image or a media file? */ -const checkImage = (documentId, imageName, imageId, index) => { - const encodedName = fixedEncodeURIComponent(imageName) +const checkAttachment = (documentId, fileName, fileId, index, isImage = true) => { + const encodedName = fixedEncodeURIComponent(fileName) const src = `.attachments.${documentId}/${encodedName}` - cy.log('Check the image is visible and well formed', documentId, imageName, imageId, index, encodedName) + cy.log('Check the attachment is visible and well formed', documentId, fileName, fileId, index, encodedName) return new Cypress.Promise((resolve, reject) => { cy.get(`#editor [data-component="image-view"][data-src="${src}"]`) .find('.image__view') // wait for load finish .within(($el) => { - // keep track that we have created this image in the attachment dir + // keep track that we have created this attachment in the attachment dir if (!attachmentFileNameToId[documentId]) { attachmentFileNameToId[documentId] = {} } - attachmentFileNameToId[documentId][imageName] = imageId + attachmentFileNameToId[documentId][fileName] = fileId if (index > 0) { - expect(imageName).include(`(${index + 1})`) + expect(fileName).include(`(${index + 1})`) } + const srcPathEnd = isImage ? 'image' : 'mediaPreview' + const srcFileNameParam = isImage ? 'imageFileName' : 'mediaFileName' + cy.wrap($el) .should('be.visible') .find('img') .should('have.attr', 'src') - .should('contain', 'apps/text/image?documentId=' + documentId) - .should('contain', 'imageFileName=' + encodeURIComponent(imageName)) - - return cy.wrap($el) - .find('.image__caption input') - .should('be.visible') - .should('have.value', imageName) + .should('contain', 'apps/text/' + srcPathEnd + '?documentId=' + documentId) + .should('contain', srcFileNameParam + '=' + encodeURIComponent(fileName)) + + return isImage + ? cy.wrap($el) + .find('.image__caption input') + .should('be.visible') + .should('have.value', fileName) + : cy.wrap($el) + .find('.metadata .name') + .should('be.visible') + .should('have.text', fileName) }) .then(resolve, reject) @@ -115,12 +123,12 @@ const checkImage = (documentId, imageName, imageId, index) => { } /** - * Wait for the image insertion request to finish and check if the image is visible + * Wait for the attachment insertion request to finish and check if the attachment is visible * * @param {string} requestAlias Alias of the request we are waiting for - * @param {number|undefined} index of image + * @param {number|undefined} index of the attachment */ -const waitForRequestAndCheckImage = (requestAlias, index) => { +const waitForRequestAndCheckAttachment = (requestAlias, index, isImage = true) => { return cy.wait('@' + requestAlias) .then((req) => { // the name of the created file on NC side is returned in the response @@ -128,11 +136,11 @@ const waitForRequestAndCheckImage = (requestAlias, index) => { const fileName = req.response.body.name const documentId = req.response.body.documentId - return checkImage(documentId, fileName, fileId, index) + return checkAttachment(documentId, fileName, fileId, index, isImage) }) } -describe('Test all image insertion methods', () => { +describe('Test all attachment insertion methods', () => { before(() => { initUserAndFiles(randUser, 'test.md', 'empty.md') @@ -154,10 +162,10 @@ describe('Test all image insertion methods', () => { cy.showHiddenFiles() }) - it('Insert an image from files', () => { + it('Insert an image file from Files', () => { cy.openFile('test.md') - clickOnImageAction(ACTION_INSERT_FROM_FILES) + clickOnAttachmentAction(ACTION_INSERT_FROM_FILES) .then(() => { const requestAlias = 'insertPathRequest' cy.intercept({ method: 'POST', url: '**/filepath' }).as(requestAlias) @@ -167,27 +175,43 @@ describe('Test all image insertion methods', () => { cy.log('Click OK in the filepicker') cy.get('.oc-dialog > .oc-dialog-buttonrow button').click() - return waitForRequestAndCheckImage(requestAlias) + return waitForRequestAndCheckAttachment(requestAlias) }) }) - it('Upload a local image', () => { + it('Upload a local image file', () => { 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) + clickOnAttachmentAction(ACTION_UPLOAD_LOCAL_FILE) .then(() => { const requestAlias = 'uploadRequest' cy.log('Upload the file through the input') attachFile('table.png', requestAlias) - return waitForRequestAndCheckImage(requestAlias) + return waitForRequestAndCheckAttachment(requestAlias) + }) + }) + + it('Upload a local media file', () => { + 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> + clickOnAttachmentAction(ACTION_UPLOAD_LOCAL_FILE) + .then(() => { + const requestAlias = 'uploadMediaRequest' + cy.log('Upload the file through the input') + + attachFile('file.txt.gz', requestAlias) + + return waitForRequestAndCheckAttachment(requestAlias, undefined, false) }) }) - it('Upload images with the same name', () => { + it('Upload image files with the same name', () => { // make sure we start from an emtpy file even on retries const filename = randHash() + '.md' @@ -196,14 +220,14 @@ describe('Test all image insertion methods', () => { cy.openFile(filename) const assertImage = index => { - return clickOnImageAction(ACTION_UPLOAD_LOCAL_FILE) + return clickOnAttachmentAction(ACTION_UPLOAD_LOCAL_FILE) .then(() => { const requestAlias = `uploadRequest${index}` cy.log('Upload the file through the input', { index }) attachFile('github.png', requestAlias) - return waitForRequestAndCheckImage(requestAlias, index) + return waitForRequestAndCheckAttachment(requestAlias, index) }) } @@ -219,15 +243,15 @@ describe('Test all image insertion methods', () => { }) }) - it('test if image files are in the attachment folder', () => { - // check we stored the image names/ids + it('test if attachment files are in the attachment folder', () => { + // check we stored the attachment names/ids cy.get('.files-fileList tr[data-file="test.md"]', { timeout: 10000 }) .should('have.attr', 'data-id') .then((documentId) => { const files = attachmentFileNameToId[documentId] - cy.expect(Object.keys(files)).to.have.lengthOf(2) + cy.expect(Object.keys(files)).to.have.lengthOf(3) cy.openFolder('.attachments.' + documentId) cy.screenshot() for (const name in files) { @@ -277,7 +301,7 @@ describe('Test all image insertion methods', () => { .should('exist') .should('have.attr', 'data-id') // these are new copied attachment files - // so they should not have the same IDs than the ones created when uploading the images + // so they should not have the same IDs than the ones created when uploading the files .should('not.eq', String(files[name])) } }) @@ -339,7 +363,7 @@ describe('Test all image insertion methods', () => { .should('exist') .should('have.attr', 'data-id') // these are new copied attachment files - // so they should not have the same IDs than the ones created when uploading the images + // so they should not have the same IDs than the ones created when uploading the files .should('not.eq', String(files[name])) } }) diff --git a/cypress/fixtures/file.txt.gz b/cypress/fixtures/file.txt.gz Binary files differnew file mode 100644 index 000000000..0501f122d --- /dev/null +++ b/cypress/fixtures/file.txt.gz diff --git a/src/nodes/ImageView.vue b/src/nodes/ImageView.vue index e1d9a19d1..1de4a8ceb 100644 --- a/src/nodes/ImageView.vue +++ b/src/nodes/ImageView.vue @@ -42,12 +42,8 @@ class="image__main" @load="onLoaded"> <div class="metadata"> - <span class="name"> - {{ alt }} - </span> - <span class="size"> - {{ attachmentMetadata.size }} - </span> + <span class="name">{{ alt }}</span> + <span class="size">{{ attachmentMetadata.size }}</span> </div> </div> <div v-if="showDeleteIcon" |