diff options
-rw-r--r-- | cypress/integration/workspace.spec.js | 120 | ||||
-rwxr-xr-x | cypress/runLocal.sh | 14 | ||||
-rw-r--r-- | src/components/EditorWrapper.vue | 2 | ||||
-rw-r--r-- | src/components/MenuBubble.vue | 28 | ||||
-rw-r--r-- | src/views/RichWorkspace.vue | 6 |
5 files changed, 157 insertions, 13 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 697bdee40..4150389cc 100755 --- a/cypress/runLocal.sh +++ b/cypress/runLocal.sh @@ -16,13 +16,21 @@ then fi # start server if it's not running yet -if $(npm bin)/wait-on -i 500 -t 1000 $CYPRESS_baseUrl +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 - $(npm bin)/wait-on -i 500 -t 240000 $CYPRESS_baseUrl || ( docker-compose logs ; exit 1 ) - docker-compose exec -T nextcloud bash /var/www/html/apps/text/cypress/server.sh + 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 $@) diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue index b01b31857..d37bfd3a0 100644 --- a/src/components/EditorWrapper.vue +++ b/src/components/EditorWrapper.vue @@ -55,7 +55,7 @@ </div> <slot name="header" /> </MenuBar> - <div class="content-wrapper"> + <div ref="wrapper" class="content-wrapper"> <MenuBubble v-if="!readOnly && isRichEditor" :editor="tiptap" :file-path="relativePath" /> diff --git a/src/components/MenuBubble.vue b/src/components/MenuBubble.vue index 46edde450..9343d72c1 100644 --- a/src/components/MenuBubble.vue +++ b/src/components/MenuBubble.vue @@ -107,6 +107,21 @@ export default { isUsingDirectEditing: loadState('text', 'directEditingToken', null) !== null, } }, + computed: { + + // Minimum left value for the bubble so that it stays inside the editor. + // the width of the menububble changes depending on its state + // during the bubblePosition calculation it has not been rendered yet. + // so we have to hard code the minimum. + minLeft() { + if (this.linkMenuIsActive || !this.editor.isActive.link()) { + return 150 + } else { + return 225 + } + }, + + }, methods: { showLinkMenu(attrs) { this.linkUrl = attrs.href @@ -159,15 +174,14 @@ export default { command({ href: null }) }, bubblePosition(menu) { - // below the first line, above all others - const vertical = menu.top < 45 - ? { top: `${menu.top}px` } - : { bottom: `${menu.bottom}px` } + const wrapper = this.$parent.$refs.wrapper + const left = Math.max(this.minLeft, menu.left) return { - ...vertical, - left: `${menu.left}px`, + top: `${menu.top + wrapper.scrollTop + 5}px`, + left: `${left}px`, } }, + }, } </script> @@ -231,7 +245,7 @@ export default { font: inherit; border: none; background: transparent; - min-width: 150px; + min-width: 250px; } } </style> diff --git a/src/views/RichWorkspace.vue b/src/views/RichWorkspace.vue index 370699731..cd85a9bf1 100644 --- a/src/views/RichWorkspace.vue +++ b/src/views/RichWorkspace.vue @@ -213,12 +213,14 @@ export default { } #rich-workspace::v-deep #editor { - overflow: scroll !important; - max-height: calc(40vh - 40px); + overflow: visible !important; } #rich-workspace::v-deep .content-wrapper { + overflow: scroll !important; + max-height: calc(40vh - 50px); padding-left: 10px; + padding-bottom: 60px; /* ensure menububble fits below */ } #rich-workspace::v-deep #editor-wrapper .ProseMirror { |