test(cy): Add regression test for sticky elements

Make sure that document status and collision resolve dialog stay visible
when scrolling down long documents.

Signed-off-by: Jonas <jonas@freesources.org>

Author: mejo-

cypress/e2e/conflict.spec.js

@@ -9,13 +9,13 @@ const variants = [
 	{ fixture: 'lines.txt', mime: 'text/plain' },
 	{ fixture: 'test.md', mime: 'text/markdown' },
 ]
+const getWrapper = () => cy.get('.text-editor__wrapper.has-conflicts')
 
 variants.forEach(function({ fixture, mime }) {
 	const user = randUser()
 	const fileName = fixture
 	const prefix = mime.replaceAll('/', '-')
 	describe(`${mime} (${fileName})`, function() {
-		const getWrapper = () => cy.get('.text-editor__wrapper.has-conflicts')
 
 		before(() => {
 			cy.createUser(user)
@@ -117,6 +117,36 @@ variants.forEach(function({ fixture, mime }) {
 	})
 })
 
+describe('conflict dialog scroll behaviour', function() {
+	const user = randUser()
+	const fileName = 'long.md'
+
+	before(() => {
+		cy.createUser(user)
+	})
+
+	it('document status and collision resolution dialog elements are sticky', function() {
+		cy.login(user)
+		cy.createTestFolder()
+
+		createConflict(fileName, 'text/markdown')
+
+		cy.openFile(fileName)
+
+		cy.get('.text-editor .document-status')
+			.should('contain', 'The file was overwritten.')
+		getWrapper()
+			.find('.text-editor__main h2')
+			.contains('Third subheading')
+			.scrollIntoView()
+
+		cy.get('.text-editor #resolve-conflicts')
+			.should('be.visible')
+		cy.get('.text-editor .document-status')
+			.should('be.visible')
+	})
+})
+
 /**
  * @param {string} fileName - filename
  * @param {string} mime - mimetype

cypress/fixtures/long.md

@@ -0,0 +1,21 @@
+# Hello world
+
+## First subheading
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+## Second subheading
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+## Third subheading
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.