From d15ab657a6c157ce0f3f92403644149f2ff9c00b Mon Sep 17 00:00:00 2001 From: Philip Molares Date: Sat, 15 Aug 2020 01:39:48 +0200 Subject: [PATCH] Added toolbar e2e tests (#409) * added toolbar e2e test changed addTable function * fixed toolbar unit test * added emoji to toolbar e2e tests added selection with link to toolbar e2e tests --- cypress/integration/toolbar.spec.ts | 266 ++++++++++++++++++ .../editor-window/tool-bar/utils.test.ts | 2 +- .../editor/editor-window/tool-bar/utils.ts | 2 +- 3 files changed, 268 insertions(+), 2 deletions(-) create mode 100644 cypress/integration/toolbar.spec.ts diff --git a/cypress/integration/toolbar.spec.ts b/cypress/integration/toolbar.spec.ts new file mode 100644 index 000000000..0108c9b50 --- /dev/null +++ b/cypress/integration/toolbar.spec.ts @@ -0,0 +1,266 @@ +const testText = 'textText' +const testLink = 'http://hedgedoc.org' + +describe('Toolbar', () => { + beforeEach(() => { + cy.visit('/n/test') + cy.get('.btn.active.btn-outline-secondary > i.fa-columns') + .should('exist') + cy.get('.CodeMirror textarea') + .type('{ctrl}a', { force: true }) + .type('{backspace}') + cy.viewport(1920, 1080) + }) + + it('bold', () => { + cy.get('.CodeMirror textarea') + .type(`${testText}`) + .type('{ctrl}a') + cy.get('.fa-bold') + .click() + cy.get('.CodeMirror-activeline > .CodeMirror-line > span') + .should('have.text', `**${testText}**`) + }) + + it('italic', () => { + cy.get('.CodeMirror textarea') + .type(`${testText}`) + .type('{ctrl}a') + cy.get('.fa-italic') + .click() + cy.get('.CodeMirror-activeline > .CodeMirror-line > span') + .should('have.text', `*${testText}*`) + }) + + it('underline', () => { + cy.get('.CodeMirror textarea') + .type(`${testText}`) + .type('{ctrl}a') + cy.get('.fa-underline') + .click() + cy.get('.CodeMirror-activeline > .CodeMirror-line > span') + .should('have.text', `++${testText}++`) + }) + + it('strikethrough', () => { + cy.get('.CodeMirror textarea') + .type(`${testText}`) + .type('{ctrl}a') + cy.get('.fa-strikethrough') + .click() + cy.get('.CodeMirror-activeline > .CodeMirror-line > span') + .should('have.text', `~~${testText}~~`) + }) + + it('subscript', () => { + cy.get('.CodeMirror textarea') + .type(`${testText}`) + .type('{ctrl}a') + cy.get('.fa-subscript') + .click() + cy.get('.CodeMirror-activeline > .CodeMirror-line > span') + .should('have.text', `~${testText}~`) + }) + + it('superscript', () => { + cy.get('.CodeMirror textarea') + .type(`${testText}`) + .type('{ctrl}a') + cy.get('.fa-superscript') + .click() + cy.get('.CodeMirror-activeline > .CodeMirror-line > span') + .should('have.text', `^${testText}^`) + }) + + it('heading', () => { + cy.get('.CodeMirror textarea') + .type(`${testText}`) + cy.get('.fa-header') + .click() + cy.get('.CodeMirror-activeline > .CodeMirror-line > span') + .should('have.text', `# ${testText}`) + cy.get('.fa-header') + .click() + cy.get('.CodeMirror-activeline > .CodeMirror-line > span') + .should('have.text', `## ${testText}`) + }) + + it('code', () => { + cy.get('.CodeMirror textarea') + .type(`${testText}`) + .type('{ctrl}a') + cy.get('.fa-code') + .click() + cy.get('.CodeMirror-code > div:nth-of-type(1) > .CodeMirror-line > span > span') + .should('have.text', '```') + cy.get('.CodeMirror-code > div:nth-of-type(2) > .CodeMirror-line > span span') + .should('have.text', testText) + cy.get('.CodeMirror-code > div.CodeMirror-activeline > .CodeMirror-line > span span') + .should('have.text', '```') + }) + + it('quote', () => { + cy.get('.CodeMirror textarea') + .type(`${testText}`) + cy.get('.fa-quote-right') + .click() + cy.get('.CodeMirror-activeline > .CodeMirror-line > span') + .should('have.text', `> ${testText}`) + cy.get('.fa-quote-right') + .click() + cy.get('.CodeMirror-activeline > .CodeMirror-line > span') + .should('have.text', `> > ${testText}`) + }) + + it('unordered list', () => { + cy.get('.CodeMirror textarea') + .type(`${testText}`) + cy.get('.fa-list') + .click() + cy.get('.CodeMirror-activeline > .CodeMirror-line > span') + .should('have.text', `- ${testText}`) + cy.get('.fa-list') + .click() + cy.get('.CodeMirror-activeline > .CodeMirror-line > span') + .should('have.text', `- - ${testText}`) + }) + + it('ordered list', () => { + cy.get('.CodeMirror textarea') + .type(`${testText}`) + cy.get('.fa-list-ol') + .click() + cy.get('.CodeMirror-activeline > .CodeMirror-line > span') + .should('have.text', `1. ${testText}`) + cy.get('.fa-list-ol') + .click() + cy.get('.CodeMirror-activeline > .CodeMirror-line > span') + .should('have.text', `1. 1. ${testText}`) + }) + + it('todo list', () => { + cy.get('.CodeMirror textarea') + .type(`${testText}`) + cy.get('.fa-check-square') + .click() + cy.get('.CodeMirror-activeline > .CodeMirror-line > span') + .should('have.text', `- [ ] ${testText}`) + cy.get('.fa-check-square') + .click() + cy.get('.CodeMirror-activeline > .CodeMirror-line > span') + .should('have.text', `- [ ] - [ ] ${testText}`) + }) + + describe('link', () => { + it('with selection text', () => { + cy.get('.CodeMirror textarea') + .type(`${testText}`) + .type('{ctrl}a') + cy.get('.fa-link') + .click() + cy.get('.CodeMirror-activeline > .CodeMirror-line > span') + .should('have.text', `[${testText}](https://)`) + }) + + it('without selection', () => { + cy.get('.CodeMirror textarea') + .type(`${testText}`) + cy.get('.fa-link') + .click() + cy.get('.CodeMirror-activeline > .CodeMirror-line > span') + .should('have.text', `${testText}[](https://)`) + }) + + it('with selection link', () => { + cy.get('.CodeMirror textarea') + .type(`${testLink}`) + .type('{ctrl}a') + cy.get('.fa-link') + .click() + cy.get('.CodeMirror-activeline > .CodeMirror-line > span') + .should('have.text', `[](${testLink})`) + }) + }) + + describe('image', () => { + it('with selection', () => { + cy.get('.CodeMirror textarea') + .type(`${testText}`) + .type('{ctrl}a') + cy.get('.fa-picture-o') + .click() + cy.get('.CodeMirror-activeline > .CodeMirror-line > span') + .should('have.text', `![${testText}](https://)`) + }) + + it('without selection', () => { + cy.get('.CodeMirror textarea') + .type(`${testText}`) + cy.get('.fa-picture-o') + .click() + cy.get('.CodeMirror-activeline > .CodeMirror-line > span') + .should('have.text', `${testText}![](https://)`) + }) + + it('with selection link', () => { + cy.get('.CodeMirror textarea') + .type(`${testLink}`) + .type('{ctrl}a') + cy.get('.fa-picture-o') + .click() + cy.get('.CodeMirror-activeline > .CodeMirror-line > span') + .should('have.text', `![](${testLink})`) + }) + }) + + it('table', () => { + cy.get('.fa-table') + .click() + cy.get('.CodeMirror-code > div:nth-of-type(2) > .CodeMirror-line > span span') + .should('have.text', '| # 1 | # 2 | # 3 |') + cy.get('.CodeMirror-code > div:nth-of-type(3) > .CodeMirror-line > span span') + .should('have.text', '| ---- | ---- | ---- |') + cy.get('.CodeMirror-activeline > .CodeMirror-line > span ') + .should('have.text', '| Text | Text | Text |') + }) + + it('line', () => { + cy.get('.fa-minus') + .click() + cy.get('.CodeMirror-code > div:nth-of-type(2) > .CodeMirror-line > span span') + .should('have.text', '----') + }) + + it('comment', () => { + cy.get('.fa-comment') + .click() + cy.get('.CodeMirror-code > div:nth-of-type(2) > .CodeMirror-line > span span') + .should('have.text', '> []') + }) + + describe('emoji', () => { + it('picker is show when clicked', () => { + cy.get('.emoji-mart.emoji-mart-light') + .should('not.exist') + cy.get('.fa-smile-o') + .click() + cy.get('.emoji-mart.emoji-mart-light') + .should('exist') + }) + + it('picker is show when clicked', () => { + cy.get('.fa-smile-o') + .click() + cy.get('.emoji-mart.emoji-mart-light') + .should('exist') + cy.get('.emoji-mart-emoji-native') + .first() + .click() + cy.get('.markdown-body') + .should('have.text', '👍') + cy.get('.CodeMirror-activeline > .CodeMirror-line > span ') + .should('have.text', ':+1:') + }) + }) + +}) diff --git a/src/components/editor/editor-window/tool-bar/utils.test.ts b/src/components/editor/editor-window/tool-bar/utils.test.ts index 02b5e319b..3f8f4eeca 100644 --- a/src/components/editor/editor-window/tool-bar/utils.test.ts +++ b/src/components/editor/editor-window/tool-bar/utils.test.ts @@ -1558,7 +1558,7 @@ describe('test addComment', () => { describe('test addTable', () => { const { cursor, firstLine, multiline, multilineOffset } = buildRanges() const textFirstLine = testContent.split('\n')[0] - const table = '| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text | Text | Text |' + const table = '| # 1 | # 2 | # 3 |\n| ---- | ---- | ---- |\n| Text | Text | Text |' it('just cursor', done => { Mock.extend(editor).with({ listSelections: () => ( diff --git a/src/components/editor/editor-window/tool-bar/utils.ts b/src/components/editor/editor-window/tool-bar/utils.ts index c94124a3f..8b0c8017e 100644 --- a/src/components/editor/editor-window/tool-bar/utils.ts +++ b/src/components/editor/editor-window/tool-bar/utils.ts @@ -22,7 +22,7 @@ export const addImage = (editor: Editor): void => addLink(editor, '!') export const addLine = (editor: Editor): void => changeLines(editor, line => `${line}\n----`) export const addComment = (editor: Editor): void => changeLines(editor, line => `${line}\n> []`) -export const addTable = (editor: Editor): void => changeLines(editor, line => `${line}\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text | Text | Text |`) +export const addTable = (editor: Editor): void => changeLines(editor, line => `${line}\n| # 1 | # 2 | # 3 |\n| ---- | ---- | ---- |\n| Text | Text | Text |`) export const addEmoji = (emoji: EmojiData, editor: Editor): void => { insertAtCursor(editor, getEmojiShortCode(emoji))