Merge pull request #4666 from nextcloud/feat/28-files

feat: 28 Files2vue compatibility

cypress/e2e/attachments.spec.js

@@ -164,10 +164,8 @@ describe('Test all attachment insertion methods', () => {
 	})
 
 	it('See test files in the list and display hidden files', () => {
-		cy.get('.files-fileList tr[data-file="test.md"]', { timeout: 10000 })
-			.should('contain', 'test.md')
-		cy.get('.files-fileList tr[data-file="github.png"]', { timeout: 10000 })
-			.should('contain', 'github.png')
+		cy.getFile('test.md')
+		cy.getFile('github.png')
 		cy.showHiddenFiles()
 	})
 
@@ -180,11 +178,11 @@ describe('Test all attachment insertion methods', () => {
 				cy.intercept({ method: 'POST', url: '**/filepath' }).as(requestAlias)
 
 				cy.log('Go to sub folder (a)')
-				cy.get('#picker-filestable tr[data-entryname="sub"]').click()
-				cy.get('#picker-filestable tr[data-entryname="a"]').click()
-				cy.get('#picker-filestable tr[data-entryname="a.png"]').click()
+				cy.get('.file-picker__main .file-picker__file-name[title="sub"]').click()
+				cy.get('.file-picker__main .file-picker__file-name[title="a"]').click()
+				cy.get('.file-picker__main .file-picker__file-name[title="a"]').click()
 
-				cy.get('.oc-dialog > .oc-dialog-buttonrow button').click()
+				cy.get('.dialog__actions button.button-vue--vue-primary').click()
 
 				return waitForRequestAndCheckAttachment(requestAlias)
 			})
@@ -193,14 +191,15 @@ describe('Test all attachment insertion methods', () => {
 				const requestAlias = 'insertPathRequest-b'
 				cy.intercept({ method: 'POST', url: '**/filepath' }).as(requestAlias)
 
-				cy.log('Go back to sub folder')
-				cy.get('#oc-dialog-filepicker-content .dirtree [data-dir="/sub"] a').click()
+				cy.log('Go back from home to sub folder')
+				cy.get('.file-picker__breadcrumbs a[title="Home"]').click()
+				cy.get('.file-picker__main .file-picker__file-name[title="sub"]').click()
 
 				cy.log('Go to sub folder (b)')
-				cy.get('#picker-filestable tr[data-entryname="b"]').click()
-				cy.get('#picker-filestable tr[data-entryname="b.png"]').click()
+				cy.get('.file-picker__main .file-picker__file-name[title="b"]').click()
+				cy.get('.file-picker__main .file-picker__file-name[title="b"]').click()
 
-				cy.get('.oc-dialog > .oc-dialog-buttonrow button').click()
+				cy.get('.dialog__actions button.button-vue--vue-primary').click()
 
 				return waitForRequestAndCheckAttachment(requestAlias)
 			})
@@ -212,12 +211,12 @@ describe('Test all attachment insertion methods', () => {
 				cy.intercept({ method: 'POST', url: '**/filepath' }).as(requestAlias)
 
 				cy.log('Go back to home')
-				cy.get('#oc-dialog-filepicker-content .dirtree .crumb:first-child').click()
+				cy.get('.file-picker__breadcrumbs a[title="Home"]').click()
 
 				cy.log('Select the file in the filepicker')
-				cy.get('#picker-filestable tr[data-entryname="github.png"]').click()
+				cy.get('.file-picker__main .file-picker__file-name[title="github"]').click()
 				cy.log('Click OK in the filepicker')
-				cy.get('.oc-dialog > .oc-dialog-buttonrow button').click()
+				cy.get('.dialog__actions button.button-vue--vue-primary').click()
 
 				return waitForRequestAndCheckAttachment(requestAlias)
 			})
@@ -288,18 +287,17 @@ describe('Test all attachment insertion methods', () => {
 	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')
+		cy.getFile('test.md')
+			.should('have.attr', 'data-cy-files-list-row-fileid')
 			.then((documentId) => {
 				const files = attachmentFileNameToId[documentId]
 
 				cy.expect(Object.keys(files)).to.have.lengthOf(5)
 				cy.openFolder('.attachments.' + documentId)
-				cy.screenshot()
 				for (const name in files) {
-					cy.get(`.files-fileList tr[data-file="${name}"]`, { timeout: 10000 })
+					cy.getFile(name)
 						.should('exist')
-						.should('have.attr', 'data-id')
+						.should('have.attr', 'data-cy-files-list-row-fileid')
 						.should('eq', String(files[name]))
 				}
 			})
@@ -310,17 +308,16 @@ describe('Test all attachment insertion methods', () => {
 		cy.reloadFileList()
 		cy.moveFile('test.md', 'subFolder/test.md')
 		cy.openFolder('subFolder')
-		cy.get('.files-fileList tr[data-file="test.md"]', { timeout: 10000 })
+		cy.getFile('test.md')
 			.should('exist')
-			.should('have.attr', 'data-id')
+			.should('have.attr', 'data-cy-files-list-row-fileid')
 			.then((documentId) => {
 				const files = attachmentFileNameToId[documentId]
 				cy.openFolder('.attachments.' + documentId)
-				cy.screenshot()
 				for (const name in files) {
-					cy.get(`.files-fileList tr[data-file="${name}"]`, { timeout: 10000 })
+					cy.getFile(name)
 						.should('exist')
-						.should('have.attr', 'data-id')
+						.should('have.attr', 'data-cy-files-list-row-fileid')
 						.should('eq', String(files[name]))
 				}
 			})
@@ -330,18 +327,17 @@ describe('Test all attachment insertion methods', () => {
 		cy.copyFile('subFolder/test.md', 'testCopied.md')
 		cy.reloadFileList()
 
-		cy.get('.files-fileList tr[data-file="testCopied.md"]', { timeout: 10000 })
+		cy.getFile('testCopied.md')
 			.should('exist')
-			.should('have.attr', 'data-id')
+			.should('have.attr', 'data-cy-files-list-row-fileid')
 			.then((documentId) => {
 				const files = attachmentFileNameToId[documentId]
 
 				cy.openFolder('.attachments.' + documentId)
-				cy.screenshot()
 				for (const name in files) {
-					cy.get(`.files-fileList tr[data-file="${name}"]`, { timeout: 10000 })
+					cy.getFile(name)
 						.should('exist')
-						.should('have.attr', 'data-id')
+						.should('have.attr', 'data-cy-files-list-row-fileid')
 						// these are new copied attachment files
 						// so they should not have the same IDs than the ones created when uploading the files
 						.should('not.eq', String(files[name]))
@@ -350,13 +346,13 @@ describe('Test all attachment insertion methods', () => {
 	})
 
 	it('test if attachment folder is deleted after having deleted a markdown file', () => {
-		cy.get('.files-fileList tr[data-file="testCopied.md"]', { timeout: 10000 })
+		cy.getFile('testCopied.md')
 			.should('exist')
-			.should('have.attr', 'data-id')
+			.should('have.attr', 'data-cy-files-list-row-fileid')
 			.then((documentId) => {
 				cy.deleteFile('testCopied.md')
 				cy.reloadFileList()
-				cy.get(`.files-fileList tr[data-file=".attachments.${documentId}"]`, { timeout: 10000 })
+				cy.getFile('.attachments.' + documentId)
 					.should('not.exist')
 			})
 		// change the current user for next tests
@@ -365,45 +361,45 @@ describe('Test all attachment insertion methods', () => {
 
 	it('[share] check everything behaves correctly on the share target user side', () => {
 		// check the file list
-		cy.get('.files-fileList tr[data-file="test.md"]', { timeout: 10000 })
-			.should('contain', 'test.md')
-		cy.get('files-fileList tr[data-file="github.png"]').should('not.exist')
+		cy.getFile('test.md')
+			.should('exist')
+		cy.getFile('github.png')
+			.should('not.exist')
 		cy.showHiddenFiles()
 
 		// check the attachment folder is not there
-		cy.get('.files-fileList tr[data-file="test.md"]', { timeout: 10000 })
+		cy.getFile('test.md')
 			.should('exist')
-			.should('have.attr', 'data-id')
+			.should('have.attr', 'data-cy-files-list-row-fileid')
 			.then((documentId) => {
-				cy.get(`.files-fileList tr[data-file=".attachments.${documentId}"]`, { timeout: 10000 })
+				cy.getFile('.attachments.' + documentId)
 					.should('not.exist')
 			})
 
 		// move the file and check the attachment folder is still not there
 		cy.moveFile('test.md', 'testMoved.md')
 		cy.reloadFileList()
-		cy.get('.files-fileList tr[data-file="testMoved.md"]', { timeout: 10000 })
+		cy.getFile('testMoved.md')
 			.should('exist')
-			.should('have.attr', 'data-id')
+			.should('have.attr', 'data-cy-files-list-row-fileid')
 			.then((documentId) => {
-				cy.get(`.files-fileList tr[data-file=".attachments.${documentId}"]`, { timeout: 10000 })
+				cy.getFile('.attachments.' + documentId)
 					.should('not.exist')
 			})
 
 		// copy the file and check the attachment folder was copied
 		cy.copyFile('testMoved.md', 'testCopied.md')
 		cy.reloadFileList()
-		cy.get('.files-fileList tr[data-file="testCopied.md"]', { timeout: 10000 })
+		cy.getFile('testCopied.md')
 			.should('exist')
-			.should('have.attr', 'data-id')
+			.should('have.attr', 'data-cy-files-list-row-fileid')
 			.then((documentId) => {
 				const files = attachmentFileNameToId[documentId]
 				cy.openFolder('.attachments.' + documentId)
-				cy.screenshot()
 				for (const name in files) {
-					cy.get(`.files-fileList tr[data-file="${name}"]`, { timeout: 10000 })
+					cy.getFile(name)
 						.should('exist')
-						.should('have.attr', 'data-id')
+						.should('have.attr', 'data-cy-files-list-row-fileid')
 						// these are new copied attachment files
 						// so they should not have the same IDs than the ones created when uploading the files
 						.should('not.eq', String(files[name]))

cypress/e2e/files.spec.js

@@ -36,23 +36,23 @@ describe('Text and server mimetypes', () => {
 	it('handle plaintext in a pre tag', () => {
 		cy.uploadFile('empty.md', 'text/plain', 'textfile.txt')
 		cy.visit('/apps/files')
-		cy.get('#app-content-files table tr').should('contain', 'textfile.txt')
+		cy.getFile('textfile.txt')
 		cy.openFile('textfile.txt')
 		cy.getContent().find('pre').should('exist')
 	})
 
 	it('handle asciidoc as plaintext for now', () => {
 		cy.uploadFile('test.adoc', 'text/asciidoc', 'hello.adoc')
 		cy.visit('/apps/files')
-		cy.get('#app-content-files table tr').should('contain', 'hello.adoc')
+		cy.getFile('hello.adoc')
 		cy.openFile('hello.adoc')
 		cy.getContent().find('pre').should('contain', 'Hello world')
 	})
 
 	it('handle markdown with richtext editor', () => {
 		cy.uploadFile('test.md', 'text/markdown', 'markdown.md')
 		cy.visit('/apps/files')
-		cy.get('#app-content-files table tr').should('contain', 'markdown.md')
+		cy.getFile('markdown.md')
 		cy.openFile('markdown.md')
 		cy.getContent().find('h2').should('contain', 'Hello world')
 	})

cypress/e2e/mobile.spec.js

@@ -50,9 +50,7 @@ describe('Mobile actions', {
 			cy.uploadFile('test.md', 'text/markdown', `${encodeURIComponent(folderName)}/text.md`)
 			cy.visit(`apps/files?dir=/${encodeURIComponent(folderName)}`)
 
-			cy.get('.files-controls .crumb:not(.hidden) a')
-				.last()
-				.click({ force: true })
+			cy.reload()
 
 			cy.openFile('text.md', { force: true })
 		})

cypress/e2e/nodes/ImageView.spec.js

@@ -2,13 +2,9 @@ import { randUser } from '../../utils/index.js'
 
 const user = randUser()
 
-const refresh = () => cy.get('.files-controls .crumb:not(.hidden) a')
-	.last()
-	.click({ force: true })
-
 const createMarkdown = (fileName, content) => {
 	return cy.createFile(fileName, content, 'text/markdown')
-		.then(refresh)
+		.then(cy.reload)
 }
 
 describe('Image View', () => {
@@ -85,8 +81,8 @@ describe('Image View', () => {
 		})
 
 		it('with preview', () => {
-			cy.get('.files-fileList tr[data-file="github.png"]')
-				.should('have.attr', 'data-id')
+			cy.getFile('github.png')
+				.should('have.attr', 'data-cy-files-list-row-fileid')
 				.then(imageId => {
 					const fileName = `${Cypress.currentTest.title}.md`
 

cypress/e2e/nodes/Links.spec.js

@@ -139,8 +139,9 @@ describe('test link marks', function() {
 			// Helper to reduce duplicated code, checking inserting with and without selected text
 			const checkLinkFile = (filename, text) => {
 				cy.getSubmenuEntry('insert-link', 'insert-link-file').click()
-				cy.get('.oc-dialog').find(`tr[data-entryname="${filename}"]`).click()
-				cy.get('.oc-dialog').find('.oc-dialog-buttonrow > button').click()
+				const basename = filename.replace(/(.*)\.[^.]*/, '$1')
+				cy.get(`.file-picker__main .file-picker__file-name[title="${basename}"]`).click()
+				cy.get('.dialog__actions button.button-vue--vue-primary').click()
 
 				return cy.getContent()
 					.find(`a[href*="${encodeURIComponent(filename)}"]`)

cypress/e2e/nodes/Mentions.spec.js

@@ -7,16 +7,10 @@ const currentUser = user
 
 const fileName = 'empty.md'
 
-const refresh = () => {
-	cy.get('.files-controls .crumb:not(.hidden) a')
-		.last()
-		.click({ force: true })
-}
-
 const createFileWithMention = (target, userToMention) => {
 	const content = `Hello @[${userToMention}](mention://user/${userToMention})`
 	cy.createFile(target, content)
-		.then(refresh)
+		.then(() => cy.reloadFileList())
 }
 
 describe('Test mentioning users', () => {

cypress/e2e/sections.spec.js

@@ -3,10 +3,6 @@ import { randUser } from '../utils/index.js'
 const user = randUser()
 const fileName = 'empty.md'
 
-const refresh = () => cy.get('.files-controls .crumb:not(.hidden) a')
-	.last()
-	.click({ force: true })
-
 const clickOutline = () => {
 	cy.getActionEntry('headings')
 		.click()
@@ -110,7 +106,7 @@ describe('Content Sections', () => {
 			cy.openFile(fileName, { force: true })
 			cy.getContent()
 				.type('# T1 \n## T2 \n### T3 \n#### T4 \n##### T5 \n###### T6\n')
-			cy.then(refresh)
+			cy.closeFile()
 				.then(() => cy.openFile(fileName, { force: true }))
 				.then(clickOutline)
 

cypress/e2e/share.spec.js

@@ -112,13 +112,13 @@ describe('Open test.md in viewer', function() {
 				return cy.visit(`/s/${token}`)
 			})
 			.then(() => {
-				cy.get('#rich-workspace').getContent().should('contain', 'Hello world')
-				cy.openFile('test.md')
+				cy.openFileInShare('test.md')
 				cy.getModal().getContent().should('be.visible')
 				cy.getModal().getContent().should('contain', 'Hello world')
 				cy.getModal().getContent().find('h2').should('contain', 'Hello world')
 				cy.getModal().find('.modal-header button.header-close').click()
 				cy.get('.modal-mask').should('not.exist')
+				// cy.get('#rich-workspace').getContent().should('contain', 'Hello world')
 			})
 	})
 

cypress/e2e/viewer.spec.js

@@ -36,8 +36,8 @@ describe('Open test.md in viewer', function() {
 	})
 
 	it('See test.md in the list', function() {
-		cy.get('.files-fileList tr[data-file="test.md"]', { timeout: 10000 })
-			.should('contain', 'test.md')
+		cy.getFile('test.md')
+			.should('be.visible')
 	})
 
 	it('Open the viewer on file click', function() {