fix: 2020 let heading menu overflow workspace

* roll back parts of #1903 that broke it again.
* Calculate top of menububble based on scrollHeight of content-wrapper.
* Always display menububble below selected line.
  This will make it less likely to conflict with the menubar
  or mobile copy and paste toolbars.
* Add cypress tests for the workspace.

Signed-off-by: Azul <azul@riseup.net>

2 files changed, 145 insertions, 6 deletions

diff --git a/cypress/integration/workspace.spec.js b/cypress/integration/workspace.spec.js
new file mode 100644
index 000000000..b385bfd1c
--- /dev/null
+++ b/cypress/integration/workspace.spec.js
@@ -0,0 +1,120 @@
+/**
+ * @copyright Copyright (c) 2021 Azul <azul@riseup.net>
+ *
+ * @author Azul <azul@riseup.net>
+ *
+ * @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/'
+const randUser = randHash()
+
+describe('Workspace', function() {
+
+	before(function() {
+		cy.nextcloudCreateUser(randUser, 'password')
+	})
+
+	beforeEach(function() {
+		cy.login(randUser, 'password')
+		cy.visit('/apps/files')
+		// isolate tests - each happens in it's own folder
+		cy.createFolder(Cypress.currentTest.title)
+		cy.openFile(Cypress.currentTest.title)
+	})
+
+	it('adds a Readme.md', function() {
+		cy.get('#fileList').should('not.contain', 'Readme.md')
+		openWorkspace()
+			.type('Hello')
+			.should('contain', 'Hello')
+		cy.get('#fileList').should('contain', 'Readme.md')
+	})
+
+	it('formats text', function() {
+		openWorkspace()
+			.type('Format me')
+			.type('{selectall}')
+		;[['bold', 'strong'], ['italic', 'em'], ['strike', 's']]
+			.forEach(([button, tag]) => {
+				menuButton(button)
+					.click()
+					.should('have.class', 'is-active')
+				cy.get(`.ProseMirror ${tag}`).should('contain', 'Format me')
+				menuButton(button)
+					.click()
+					.should('not.have.class', 'is-active')
+			})
+	})
+
+	it('links via menububble', function() {
+		openWorkspace()
+			.type('Nextcloud')
+			.type('{selectall}')
+		menuBubbleButton('link').click()
+		cy.get('.menububble input').type('https://nextcloud.com{enter}')
+		cy.get('.ProseMirror a')
+			.should('contain', 'Nextcloud')
+			.should('be.visible')
+		cy.get('.ProseMirror a').invoke('attr', 'href')
+			.should('include', 'https://nextcloud.com')
+		cy.window().then((win) => {
+			cy.stub(win, 'open').as('windowOpen')
+		})
+		cy.get('.ProseMirror a').click()
+		cy.get('@windowOpen').should('be.calledWith', 'https://nextcloud.com/')
+		cy.get('.ProseMirror').type('{selectall}')
+		menuBubbleButton('link').click()
+		cy.get('.menububble input').type('/team{enter}')
+		cy.get('.ProseMirror a').click()
+		cy.get('@windowOpen').should('be.calledWith', 'https://nextcloud.com/team')
+	})
+
+	it('creates headings via submenu', function() {
+		openWorkspace()
+			.type('Heading')
+			.type('{selectall}')
+		;['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach((heading) => {
+			menuButton('h1').click()
+			submenuButton(heading).click()
+			menuButton(heading).should('have.class', 'is-active')
+			cy.get(`.ProseMirror ${heading}`)
+				.should('contain', 'Heading')
+			menuButton(heading).click()
+			submenuButton(heading).click()
+			menuButton('h1').should('not.have.class', 'is-active')
+		})
+	})
+
+})
+
+const menuButton = (name) => {
+	return cy.get(`#editor button.icon-${name}`)
+}
+
+const submenuButton = (name) => {
+	return cy.get(`#editor button .icon-${name}`)
+}
+
+const menuBubbleButton = submenuButton
+
+const openWorkspace = () => {
+	cy.get('#rich-workspace').click()
+	cy.get('#editor .content-wrapper').click()
+	return cy.get('#rich-workspace .ProseMirror')
+}
diff --git a/cypress/runLocal.sh b/cypress/runLocal.sh
index e3b277113..4150389cc 100755
--- a/cypress/runLocal.sh
+++ b/cypress/runLocal.sh
@@ -1,18 +1,37 @@
 #!/bin/bash
 
-export CYPRESS_baseUrl=http://localhost:8081/index.php
-export APP_SOURCE=$PWD/..
+export CYPRESS_DIR=$(dirname -- "$(readlink -f "${BASH_SOURCE}")")
+export CYPRESS_baseUrl=${CYPRESS_baseUrl:-http://localhost:8081/index.php}
+export APP_SOURCE=$CYPRESS_DIR/..
 
 function finish {
 	docker-compose down
 }
 trap finish EXIT
 
-docker-compose up -d
+cd $CYPRESS_DIR
+if [ ! -f $(npm bin)/wait-on ]
+then
+	npm install --no-save wait-on
+fi
 
-npm install --no-save wait-on
-$(npm bin)/wait-on -i 500 -t 240000 $CYPRESS_baseUrl || (cd cypress && docker-compose logs && exit 1)
-docker-compose exec -T nextcloud bash /var/www/html/apps/text/cypress/server.sh
+# start server if it's not running yet
+if $(npm bin)/wait-on -i 500 -t 1000 $CYPRESS_baseUrl 2> /dev/null
+then
+	echo Server is up at $CYPRESS_baseUrl
+else
+	echo No server reached at $CYPRESS_baseUrl - starting containers.
+	docker-compose up -d
+	if $(npm bin)/wait-on -i 500 -t 240000 $CYPRESS_baseUrl 2> /dev/null
+	then
+		docker-compose exec -T nextcloud bash /var/www/html/apps/text/cypress/server.sh
+	else
+		echo Waiting for $CYPRESS_baseUrl timed out.
+		echo Container logs:
+		docker-compose logs
+		exit 1
+	fi
+fi
 
 (cd .. && $(npm bin)/cypress $@)