tests(cypress): Add version view and compare tests

Signed-off-by: Julius Härtl <[email protected]>

cypress/e2e/versions.spec.js

@@ -0,0 +1,120 @@
+import { initUserAndFiles, randUser } from '../utils/index.js'
+
+const currentUser = randUser()
+
+const versionFileName = 'versioned.md'
+
+describe('Versions', () => {
+	before(() => {
+		initUserAndFiles(currentUser, 'empty.md')
+	})
+
+	beforeEach(() => {
+		cy.login(currentUser)
+		cy.visit('/apps/files')
+	})
+
+	it('View versions with close timestamps', () => {
+		cy.isolateTest().then(({ folderName, fileName }) => {
+			const fullPath = folderName + '/' + versionFileName
+			cy.createFile(fullPath, '# V1', 'text/markdown', { 'x-oc-mtime': 1691420501 })
+			cy.createFile(fullPath, '# V2', 'text/markdown', { 'x-oc-mtime': 1691420521 })
+			cy.createFile(fullPath, '# V3', 'text/markdown')
+
+			cy.reloadFileList()
+
+			cy.get('tr[data-file="' + versionFileName + '"] td.date').click()
+			cy.get('.app-sidebar-header').should('be.visible').should('contain', versionFileName)
+			cy.get('.app-sidebar-tabs__tab[data-id="version_vue"]').click()
+			cy.get('[data-files-versions-versions-list] li > a').should('have.length', 3)
+
+			cy.get('[data-files-versions-versions-list] li > a').eq(1).click()
+			cy.get('.viewer__content #read-only-editor')
+				.find('h1 [data-node-view-content]')
+				.should('have.text', 'V2')
+
+			cy.get('[data-files-versions-versions-list] li > a').eq(2).click()
+			cy.get('.viewer__content #read-only-editor')
+				.find('h1 [data-node-view-content]')
+				.should('have.text', 'V1')
+
+			cy.get('[data-files-versions-versions-list] li > a').eq(0).click()
+			cy.getContent()
+				.find('h1 [data-node-view-content]')
+				.should('have.text', 'V3')
+		})
+	})
+
+	it('View versions', () => {
+		cy.isolateTest().then(({ folderName, fileName }) => {
+			const fullPath = folderName + '/' + versionFileName
+			cy.createFile(fullPath, '# V1', 'text/markdown', { 'x-oc-mtime': 1691420521 })
+			cy.createFile(fullPath, '# V2', 'text/markdown', { 'x-oc-mtime': 1691521521 })
+			cy.createFile(fullPath, '# V3')
+
+			cy.reloadFileList()
+
+			cy.get('tr[data-file="' + versionFileName + '"] td.date').click()
+
+			cy.get('.app-sidebar-header').should('be.visible').should('contain', versionFileName)
+
+			cy.get('.app-sidebar-tabs__tab[data-id="version_vue"]').click()
+
+			cy.get('[data-files-versions-versions-list] li > a').should('have.length', 3)
+
+			cy.get('[data-files-versions-versions-list] li > a').eq(1).click()
+			cy.get('.viewer__content #read-only-editor')
+				.find('h1 [data-node-view-content]')
+				.should('have.text', 'V2')
+
+			cy.get('[data-files-versions-versions-list] li > a').eq(2).click()
+			cy.get('.viewer__content #read-only-editor')
+				.find('h1 [data-node-view-content]')
+				.should('have.text', 'V1')
+
+			cy.get('[data-files-versions-versions-list] li > a').eq(0).click()
+			cy.getContent()
+				.find('h1 [data-node-view-content]')
+				.should('have.text', 'V3')
+
+			cy.getContent()
+				.type('Hello')
+		})
+	})
+
+	it('Compare versions', () => {
+		cy.isolateTest().then(({ folderName, fileName }) => {
+			const fullPath = folderName + '/' + versionFileName
+			cy.createFile(fullPath, '# V1', 'text/markdown', { 'x-oc-mtime': 1691420521 })
+			cy.createFile(fullPath, '# V2', 'text/markdown', { 'x-oc-mtime': 1691521521 })
+			cy.createFile(fullPath, '# V3')
+
+			cy.reloadFileList()
+
+			cy.get('tr[data-file="' + versionFileName + '"] td.date').click()
+
+			cy.get('.app-sidebar-header').should('be.visible').should('contain', versionFileName)
+
+			cy.get('.app-sidebar-tabs__tab[data-id="version_vue"]').click()
+
+			cy.get('[data-files-versions-versions-list] li > a').should('have.length', 3)
+
+			cy.get('[data-files-versions-versions-list] li').eq(2)
+				.find('button.action-item__menutoggle').first().click({ force: true })
+
+			cy.get('.v-popper__inner')
+				.find('button')
+				.eq(1)
+				.should('contain', 'Compare to current version')
+				.click()
+
+			cy.get('.viewer__content #read-only-editor')
+				.find('h1 [data-node-view-content]')
+				.should('have.text', 'V1')
+
+			cy.get('.viewer__content .viewer__file--active .ProseMirror')
+				.find('h1 [data-node-view-content]')
+				.should('contain.text', 'V3')
+		})
+	})
+})

cypress/support/commands.js

@@ -107,7 +107,7 @@ Cypress.Commands.add('downloadFile', (fileName) => {
 		})
 })
 
-Cypress.Commands.add('createFile', (target, content, mimeType = 'text/markdown') => {
+Cypress.Commands.add('createFile', (target, content, mimeType = 'text/markdown', headers = {}) => {
 	const blob = new Blob([content], { type: mimeType })
 
 	return cy.request('/csrftoken')
@@ -121,6 +121,7 @@ Cypress.Commands.add('createFile', (target, content, mimeType = 'text/markdown')
 				headers: {
 					'Content-Type': mimeType,
 					requesttoken,
+					...headers,
 				},
 			}).then((response) => {
 				return cy.log(`Uploaded ${target}`, response.status)

cypress/support/e2e.js

@@ -6,4 +6,12 @@ import chaiExtension from './chai.js'
 
 before(() => {
 	chai.use(chaiExtension)
+
+	Cypress.on('uncaught:exception', (err) => {
+		if (err.message.includes('ResizeObserver')) {
+		  return false
+		}
+
+		return true
+	})
 })