github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-04-14 18:02:55 +00:00
Code Issues Projects Releases Packages Wiki Activity

Rewrite tests (#948)

Browse source 
Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
Tilman Vatteroth 2021-01-15 22:54:43 +01:00 • committed by GitHub
parent 9f6b1a9a46
commit 908a5ce984
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 286 additions and 398 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
cypress/integration/autocompletion.spec.ts
View file

@ -7,9 +7,6 @@
describe('Autocompletion', () => {
beforeEach(() => {
cy.visit('/n/test')
cy.get('.btn.active.btn-outline-secondary > i.fa-columns')
.should('exist')
cy.get('.CodeMirror')
.click()
.get('textarea')
@ -18,8 +15,7 @@ describe('Autocompletion', () => {
describe('code block', () => {
it('via Enter', () => {
cy.get('@codeinput')
.fill('```')
cy.codemirrorFill('```')
cy.get('.CodeMirror-hints')
.should('exist')
cy.get('@codeinput')
@ -34,8 +30,7 @@ describe('Autocompletion', () => {
.should('exist')
})
it('via doubleclick', () => {
cy.get('@codeinput')
.fill('```')
cy.codemirrorFill('```')
cy.get('.CodeMirror-hints > li')
.first()
.dblclick()
@ -52,8 +47,7 @@ describe('Autocompletion', () => {
describe('container', () => {
it('via Enter', () => {
cy.get('@codeinput')
.fill(':::')
cy.codemirrorFill(':::')
cy.get('.CodeMirror-hints')
.should('exist')
cy.get('@codeinput')
@ -68,8 +62,7 @@ describe('Autocompletion', () => {
.should('exist')
})
it('via doubleclick', () => {
cy.get('@codeinput')
.fill(':::')
cy.codemirrorFill(':::')
cy.get('.CodeMirror-hints > li')
.first()
.dblclick()
@ -148,8 +141,7 @@ describe('Autocompletion', () => {
describe('header', () => {
it('via Enter', () => {
cy.get('@codeinput')
.fill('#')
cy.codemirrorFill('#')
cy.get('.CodeMirror-hints')
.should('exist')
cy.get('@codeinput')
@ -162,8 +154,7 @@ describe('Autocompletion', () => {
.should('have.text', ' ')
})
it('via doubleclick', () => {
cy.get('@codeinput')
.fill('#')
cy.codemirrorFill('#')
cy.get('.CodeMirror-hints > li')
.first()
.dblclick()
@ -178,8 +169,7 @@ describe('Autocompletion', () => {
describe('images', () => {
it('via Enter', () => {
cy.get('@codeinput')
.fill('!')
cy.codemirrorFill('!')
cy.get('.CodeMirror-hints')
.should('exist')
cy.get('@codeinput')
@ -194,8 +184,7 @@ describe('Autocompletion', () => {
.should('have.attr', 'title', 'title')
})
it('via doubleclick', () => {
cy.get('@codeinput')
.fill('!')
cy.codemirrorFill('!')
cy.get('.CodeMirror-hints > li')
.first()
.dblclick()
@ -212,8 +201,7 @@ describe('Autocompletion', () => {
describe('links', () => {
it('via Enter', () => {
cy.get('@codeinput')
.fill('[')
cy.codemirrorFill('[')
cy.get('.CodeMirror-hints')
.should('exist')
cy.get('@codeinput')
@ -228,8 +216,7 @@ describe('Autocompletion', () => {
.should('have.attr', 'title', 'title')
})
it('via doubleclick', () => {
cy.get('@codeinput')
.fill('[')
cy.codemirrorFill('[')
cy.get('.CodeMirror-hints > li')
.first()
.dblclick()
@ -246,8 +233,7 @@ describe('Autocompletion', () => {
describe('pdf', () => {
it('via Enter', () => {
cy.get('@codeinput')
.fill('{')
cy.codemirrorFill('{')
cy.get('.CodeMirror-hints')
.should('exist')
cy.get('@codeinput')
@ -260,8 +246,7 @@ describe('Autocompletion', () => {
.should('exist')
})
it('via doubleclick', () => {
cy.get('@codeinput')
.fill('{')
cy.codemirrorFill('{')
cy.get('.CodeMirror-hints > li')
.first()
.dblclick()
@ -276,8 +261,7 @@ describe('Autocompletion', () => {
describe('collapsable blocks', () => {
it('via Enter', () => {
cy.get('@codeinput')
.fill('<d')
cy.codemirrorFill('<d')
cy.get('.CodeMirror-hints')
.should('exist')
cy.get('@codeinput')
@ -290,8 +274,7 @@ describe('Autocompletion', () => {
.should('exist')
})
it('via doubleclick', () => {
cy.get('@codeinput')
.fill('<d')
cy.codemirrorFill('<d')
cy.get('.CodeMirror-hints > li')
.first()
.dblclick()

45
cypress/integration/documentTitle.spec.ts
View file

@ -12,31 +12,23 @@ describe('Document Title', () => {
cy.visit('/n/test')
cy.get('.btn.active.btn-outline-secondary > i.fa-columns')
.should('exist')
cy.get('.CodeMirror')
.click()
.get('textarea')
.as('codeinput')
})
describe('title should be yaml metadata title', () => {
it('just yaml metadata title', () => {
cy.get('@codeinput')
.fill(`---\ntitle: ${title}\n---`)
cy.codemirrorFill(`---\ntitle: ${title}\n---`)
cy.title()
.should('eq', `${title} - HedgeDoc @ ${branding.name}`)
})
it('yaml metadata title and opengraph title', () => {
cy.get('@codeinput')
.fill(`---\ntitle: ${title}\nopengraph:\n title: False title\n---`)
cy.codemirrorFill(`---\ntitle: ${title}\nopengraph:\n title: False title\n---`)
cy.title()
.should('eq', `${title} - HedgeDoc @ ${branding.name}`)
})
it('yaml metadata title, opengraph title and first heading', () => {
cy.get('@codeinput')
.fill(`---\ntitle: ${title}\nopengraph:\n title: False title\n---\n# a first title`)
cy.codemirrorFill(`---\ntitle: ${title}\nopengraph:\n title: False title\n---\n# a first title`)
cy.title()
.should('eq', `${title} - HedgeDoc @ ${branding.name}`)
})
@ -44,15 +36,13 @@ describe('Document Title', () => {
describe('title should be opengraph title', () => {
it('just opengraph title', () => {
cy.get('@codeinput')
.fill(`---\nopengraph:\n title: ${title}\n---`)
cy.codemirrorFill(`---\nopengraph:\n title: ${title}\n---`)
cy.title()
.should('eq', `${title} - HedgeDoc @ ${branding.name}`)
})
it('opengraph title and first heading', () => {
cy.get('@codeinput')
.fill(`---\nopengraph:\n title: ${title}\n---\n# a first title`)
cy.codemirrorFill(`---\nopengraph:\n title: ${title}\n---\n# a first title`)
cy.title()
.should('eq', `${title} - HedgeDoc @ ${branding.name}`)
})
@ -60,54 +50,47 @@ describe('Document Title', () => {
describe('title should be first heading', () => {
it('just first heading', () => {
cy.get('@codeinput')
.fill(`# ${title}`)
cy.codemirrorFill(`# ${title}`)
cy.title()
.should('eq', `${title} - HedgeDoc @ ${branding.name}`)
})
it('just first heading with alt-text instead of image', () => {
cy.get('@codeinput')
.fill(`# ${title} ![abc](https://dummyimage.com/48)`)
cy.codemirrorFill(`# ${title} ![abc](https://dummyimage.com/48)`)
cy.title()
.should('eq', `${title} abc - HedgeDoc @ ${branding.name}`)
})
it('just first heading without link syntax', () => {
cy.get('@codeinput')
.fill(`# ${title} [link](https://hedgedoc.org)`)
cy.codemirrorFill(`# ${title} [link](https://hedgedoc.org)`)
cy.title()
.should('eq', `${title} link - HedgeDoc @ ${branding.name}`)
})
it('markdown syntax removed first', () => {
cy.get('@codeinput')
.fill(`# ${title} 1*2*3 4*5**`)
cy.codemirrorFill(`# ${title} 1*2*3 4*5**`)
cy.title()
.should('eq', `${title} 123 4*5** - HedgeDoc @ ${branding.name}`)
})
it('markdown syntax removed second', () => {
cy.get('@codeinput')
.fill(`# ${title} **1 2*`)
cy.codemirrorFill(`# ${title} **1 2*`)
cy.title()
.should('eq', `${title} *1 2 - HedgeDoc @ ${branding.name}`)
})
it('markdown syntax removed third', () => {
cy.get('@codeinput')
.fill(`# ${title} _asd_`)
cy.codemirrorFill(`# ${title} _asd_`)
cy.title()
.should('eq', `${title} asd - HedgeDoc @ ${branding.name}`)
})
it('katex code looks right', () => {
cy.get('@codeinput')
.fill(`# $\\alpha$-foo`)
cy.codemirrorFill(`# $\\alpha$-foo`)
cy.get('.markdown-body > h1')
.should('contain', 'α')
cy.get('@codeinput')
.type('\n\ntest\n')
cy.get('.CodeMirror textarea')
.type('{Enter}{Enter}{Enter}{Enter}{Enter}') //This is a workaround because I don't know how to make sure, that the title gets updated in time.
cy.title()
.should('eq', `α-foo - HedgeDoc @ ${branding.name}`)
})

7
cypress/integration/export.spec.ts
View file

@ -10,12 +10,7 @@ describe('Export', () => {
beforeEach(() => {
cy.visit('/n/test')
cy.get('.btn.active.btn-outline-secondary > i.fa-columns')
.should('exist')
cy.get('.CodeMirror')
.click()
.get('textarea')
.fill(testContent)
cy.codemirrorFill(testContent)
})
it('Markdown', () => {

13
cypress/integration/fileUpload.spec.ts
View file

@ -9,16 +9,11 @@ const imageUrl = 'http://example.com/non-existing.png'
describe('File upload', () => {
beforeEach(() => {
cy.visit('/n/test')
cy.get('.CodeMirror')
.click()
.get('textarea')
.as('codeinput')
})
it('doesn\'t prevent drag\'n\'drop of plain text', () => {
const dataTransfer = new DataTransfer()
cy.get('@codeinput')
.fill('line 1\nline 2\ndragline')
cy.codemirrorFill('line 1\nline 2\ndragline')
cy.get('.CodeMirror')
.click()
cy.get('.CodeMirror-line > span')
@ -83,8 +78,6 @@ describe('File upload', () => {
})
it('upload fails', () => {
cy.get('@codeinput')
.type('not empty')
cy.intercept({
method: 'POST',
url: '/api/v2/media/upload'
@ -97,8 +90,8 @@ describe('File upload', () => {
cy.get('input[type=file]')
.attachFile({ filePath: 'acme.png', mimeType: 'image/png' })
})
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', 'not empty')
cy.get('.CodeMirror-activeline > .CodeMirror-line > span > span')
.should('have.text', String.fromCharCode(8203)) //thanks codemirror....
})
it('text paste still works', () => {

2
cypress/integration/helpDialog.spec.ts
View file

@ -7,8 +7,6 @@
describe('Help Dialog', () => {
beforeEach(() => {
cy.visit('/n/test')
cy.get('.btn.active.btn-outline-secondary > i.fa-columns')
.should('exist')
})
it('ToDo-List', () => {

34
cypress/integration/highlightedCodeBlock.spec.ts
View file

@ -11,19 +11,11 @@ describe('Code', () => {
cy.spy(win.navigator.clipboard, 'writeText').as('copy')
}
})
cy.get('.btn.active.btn-outline-secondary > i.fa-columns')
.should('exist')
cy.get('.CodeMirror ')
.click()
cy.get('.CodeMirror textarea')
.as('codeinput')
})
describe('with just the language', () => {
it('doesn\'t show a gutter', () => {
cy.get('@codeinput')
.fill('```javascript \nlet x = 0\n```')
cy.codemirrorFill('```javascript \nlet x = 0\n```')
cy.get('.markdown-body > pre > code.hljs')
.should('be.visible')
.should('not.have.class', 'showGutter')
@ -33,8 +25,7 @@ describe('Code', () => {
describe('and line wrapping', () => {
it('doesn\'t show a gutter', () => {
cy.get('@codeinput')
.fill('```javascript! \nlet x = 0\n```')
cy.codemirrorFill('```javascript! \nlet x = 0\n```')
cy.get('.markdown-body > pre > code.hljs')
.should('be.visible')
.should('not.have.class', 'showGutter')
@ -47,8 +38,7 @@ describe('Code', () => {
describe('with the language and show gutter', () => {
it('shows the correct line number', () => {
cy.get('@codeinput')
.fill('```javascript= \nlet x = 0\n```')
cy.codemirrorFill('```javascript= \nlet x = 0\n```')
cy.get('.markdown-body > pre > code.hljs')
.should('be.visible')
.should('have.class', 'showGutter')
@ -60,8 +50,7 @@ describe('Code', () => {
describe('and line wrapping', () => {
it('shows the correct line number', () => {
cy.get('@codeinput')
.fill('```javascript=! \nlet x = 0\n```')
cy.codemirrorFill('```javascript=! \nlet x = 0\n```')
cy.get('.markdown-body > pre > code.hljs')
.should('be.visible')
.should('have.class', 'showGutter')
@ -76,8 +65,7 @@ describe('Code', () => {
describe('with the language, show gutter with a start number', () => {
it('shows the correct line number', () => {
cy.get('@codeinput')
.fill('```javascript=100 \nlet x = 0\n```')
cy.codemirrorFill('```javascript=100 \nlet x = 0\n```')
cy.get('.markdown-body > pre > code.hljs')
.should('be.visible')
.should('have.class', 'showGutter')
@ -88,8 +76,7 @@ describe('Code', () => {
})
it('shows the correct line number and continues in another codeblock', () => {
cy.get('@codeinput')
.fill('```javascript=100 \nlet x = 0\nlet y = 1\n```\n\n```javascript=+\nlet y = 2\n```\n')
cy.codemirrorFill('```javascript=100 \nlet x = 0\nlet y = 1\n```\n\n```javascript=+\nlet y = 2\n```\n')
cy.get('.markdown-body > pre > code.hljs')
.should('be.visible')
.should('have.class', 'showGutter')
@ -117,8 +104,7 @@ describe('Code', () => {
describe('and line wrapping', () => {
it('shows the correct line number', () => {
cy.get('@codeinput')
.fill('```javascript=100! \nlet x = 0\n```')
cy.codemirrorFill('```javascript=100! \nlet x = 0\n```')
cy.get('.markdown-body > pre > code.hljs')
.should('be.visible')
.should('have.class', 'showGutter')
@ -130,8 +116,7 @@ describe('Code', () => {
})
it('shows the correct line number and continues in another codeblock', () => {
cy.get('@codeinput')
.fill('```javascript=100! \nlet x = 0\nlet y = 1\n```\n\n```javascript=+\nlet y = 2\n```\n')
cy.codemirrorFill('```javascript=100! \nlet x = 0\nlet y = 1\n```\n\n```javascript=+\nlet y = 2\n```\n')
cy.get('.markdown-body > pre > code.hljs')
.should('be.visible')
.should('have.class', 'showGutter')
@ -161,8 +146,7 @@ describe('Code', () => {
})
it('has a working copy button', () => {
cy.get('@codeinput')
.fill('```javascript \nlet x = 0\n```')
cy.codemirrorFill('```javascript \nlet x = 0\n```')
cy.get('.markdown-body > pre > div > button > i')
.should('have.class', 'fa-files-o')
.click()

7
cypress/integration/import.spec.ts
View file

@ -7,8 +7,6 @@
describe('Import markdown file', () => {
beforeEach(() => {
cy.visit('/n/test')
cy.get('.btn.active.btn-outline-secondary > i.fa-columns')
.should('exist')
})
it('import on blank note', () => {
@ -26,10 +24,7 @@ describe('Import markdown file', () => {
it('import on note with content', () => {
cy.get('.CodeMirror')
.click()
.get('textarea')
.fill('test\nabc')
cy.codemirrorFill('test\nabc')
cy.get('button#editor-menu-import')
.click()
cy.get('.import-md-file')

14
cypress/integration/maxLength.spec.ts
View file

@ -11,11 +11,6 @@ describe('The status bar text length info', () => {
beforeEach(() => {
cy.visit('/n/test')
cy.get('.CodeMirror ')
.click()
cy.get('.CodeMirror textarea')
.as('codeinput')
})
it('shows the maximal length of the document as number of available characters in the tooltip', () => {
@ -25,22 +20,19 @@ describe('The status bar text length info', () => {
})
it('color is set to "warning" on <= 100 characters remaining', () => {
cy.get('@codeinput')
.fill(warningTestContent)
cy.codemirrorFill(warningTestContent)
cy.get('.status-bar [data-cy="remainingCharacters"]')
.should('have.class', 'text-warning')
})
it('color is set to danger on <= 0 characters remaining', () => {
cy.get('@codeinput')
.fill(dangerTestContent)
cy.codemirrorFill(dangerTestContent)
cy.get('.status-bar [data-cy="remainingCharacters"]')
.should('have.class', 'text-danger')
})
it('shows a warning and opens a modal', () => {
cy.get('@codeinput')
.fill(tooMuchTestContent)
cy.codemirrorFill(tooMuchTestContent)
cy.get('[data-cy="limitReachedModal"]')
.should('be.visible')
cy.get('[data-cy="limitReachedMessage"]')

445
cypress/integration/toolbar.spec.ts
View file

@ -4,7 +4,7 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
describe('Toolbar', () => {
describe('Toolbar Buttons', () => {
const testText = 'textText'
const testLink = 'http://hedgedoc.org'
@ -17,258 +17,238 @@ describe('Toolbar', () => {
.as('codeinput')
})
const fillTestText = () => {
cy.get('@codeinput')
.fill(testText)
cy.get('.CodeMirror-line > span')
.should("exist")
.should('have.text', testText)
}
const fillTestLink = () => {
cy.get('@codeinput')
.fill(testLink)
cy.get('.CodeMirror-line > span')
.should("exist")
.should('have.text', testLink)
}
it('bold', () => {
fillTestText()
cy.get('@codeinput')
.type('{ctrl}a')
cy.get('.fa-bold')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `**${testText}**`)
})
it('italic', () => {
fillTestText()
cy.get('@codeinput')
.type('{ctrl}a')
cy.get('.fa-italic')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `*${testText}*`)
})
it('underline', () => {
fillTestText()
cy.get('@codeinput')
.type('{ctrl}a')
cy.get('.fa-underline')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `++${testText}++`)
})
it('strikethrough', () => {
fillTestText()
cy.get('@codeinput')
.type('{ctrl}a')
cy.get('.fa-strikethrough')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `~~${testText}~~`)
})
it('subscript', () => {
fillTestText()
cy.get('@codeinput')
.type('{ctrl}a')
cy.get('.fa-subscript')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `~${testText}~`)
})
it('superscript', () => {
fillTestText()
cy.get('@codeinput')
.type('{ctrl}a')
cy.get('.fa-superscript')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `^${testText}^`)
})
it('heading', () => {
fillTestText()
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}`)
})
describe('code', () => {
it('nothing selected empty line', () => {
fillTestText()
cy.get('@codeinput')
.type('{ctrl}a')
.type('{backspace}')
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.CodeMirror-activeline > .CodeMirror-line > span span')
.should('have.text', '```')
})
it('nothing selected non line', () => {
fillTestText()
cy.get('@codeinput')
.type('{ctrl}a')
.type('{leftArrow}')
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')
describe('for single line text', () => {
beforeEach(() => {
cy.codemirrorFill(testText)
cy.get('.CodeMirror-line > span')
.should("exist")
.should('have.text', testText)
cy.get('.CodeMirror-code > div.CodeMirror-activeline > .CodeMirror-line > span span')
.should('have.text', '```')
})
it('line selected', () => {
fillTestText()
cy.get('@codeinput')
.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', '```')
describe('with selection', () => {
beforeEach(() => {
cy.get('@codeinput')
.type('{ctrl}a')
})
it('should format as bold', () => {
cy.get('.btn-toolbar [data-cy="format-bold"]')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `**${testText}**`)
})
it('should format as italic', () => {
cy.get('.btn-toolbar [data-cy="format-italic"]')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `*${testText}*`)
})
it('should format as underline', () => {
cy.get('.btn-toolbar [data-cy="format-underline"]')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `++${testText}++`)
})
it('should format as strikethrough', () => {
cy.get('.btn-toolbar [data-cy="format-strikethrough"]')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `~~${testText}~~`)
})
it('should format as subscript', () => {
cy.get('.btn-toolbar [data-cy="format-subscript"]')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `~${testText}~`)
})
it('should format as superscript', () => {
cy.get('.btn-toolbar [data-cy="format-superscript"]')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `^${testText}^`)
})
it('should format the line as code block', () => {
cy.get('.btn-toolbar [data-cy="format-code-block"]')
.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('should format links', () => {
cy.get('.btn-toolbar [data-cy="format-link"]')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `[${testText}](https://)`)
})
it('should format as image', () => {
cy.get('.btn-toolbar [data-cy="format-image"]')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `![${testText}](https://)`)
})
})
})
it('quote', () => {
fillTestText()
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', () => {
fillTestText()
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', () => {
fillTestText()
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', () => {
fillTestText()
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', () => {
fillTestText()
cy.get('@codeinput')
.type('{ctrl}a')
cy.get('.fa-link')
it('should format line as heading', () => {
cy.get('.btn-toolbar [data-cy="format-heading"]')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `[${testText}](https://)`)
.should('have.text', `# ${testText}`)
cy.get('.btn-toolbar [data-cy="format-heading"]')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `## ${testText}`)
})
it('without selection', () => {
fillTestText()
cy.get('.fa-link')
it('should format the line as code', () => {
cy.get('.btn-toolbar [data-cy="format-code-block"]')
.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('should add a quote', () => {
cy.get('.btn-toolbar [data-cy="format-block-quote"]')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `> ${testText}`)
cy.get('.btn-toolbar [data-cy="format-block-quote"]')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `> > ${testText}`)
})
it('should format as unordered list', () => {
cy.get('.btn-toolbar [data-cy="format-unordered-list"]')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `- ${testText}`)
cy.get('.btn-toolbar [data-cy="format-unordered-list"]')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `- - ${testText}`)
})
it('should format as ordered list', () => {
cy.get('.btn-toolbar [data-cy="format-ordered-list"]')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `1. ${testText}`)
cy.get('.btn-toolbar [data-cy="format-ordered-list"]')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `1. 1. ${testText}`)
})
it('should format as check list', () => {
cy.get('.btn-toolbar [data-cy="format-check-list"]')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `- [ ] ${testText}`)
cy.get('.btn-toolbar [data-cy="format-check-list"]')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `- [ ] - [ ] ${testText}`)
})
it('should insert links', () => {
cy.get('.btn-toolbar [data-cy="format-link"]')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `${testText}[](https://)`)
})
it('with selection link', () => {
fillTestLink()
cy.get('@codeinput')
.type('{ctrl}a')
cy.get('.fa-link')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `[](${testLink})`)
})
})
describe('image', () => {
it('with selection', () => {
fillTestText()
cy.get('@codeinput')
.type('{ctrl}a')
cy.get('.fa-picture-o')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `![${testText}](https://)`)
})
it('without selection', () => {
fillTestText()
cy.get('.fa-picture-o')
it('should insert an empty image link', () => {
cy.get('.btn-toolbar [data-cy="format-image"]')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `${testText}![](https://)`)
})
})
it('with selection link', () => {
fillTestLink()
describe('for single line link with selection', () => {
beforeEach(() => {
cy.codemirrorFill(testLink)
cy.get('.CodeMirror-line > span')
.should("exist")
.should('have.text', testLink)
cy.get('@codeinput')
.type('{ctrl}a')
cy.get('.fa-picture-o')
})
it('should format as link', () => {
cy.get('.btn-toolbar [data-cy="format-link"]')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `[](${testLink})`)
})
it('should format as image', () => {
cy.get('.btn-toolbar [data-cy="format-image"]')
.click()
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', `![](${testLink})`)
})
})
describe('table', () => {
describe('for no text', () => {
it('should add an empty code block', () => {
cy.get('.btn-toolbar [data-cy="format-code-block"]')
.click()
cy.get('.CodeMirror-code > div:nth-of-type(1) > .CodeMirror-line > span > span')
.should('have.text', '```')
cy.get('.CodeMirror-code > div.CodeMirror-activeline > .CodeMirror-line > span span')
.should('have.text', '```')
})
it('should insert lines', () => {
cy.get('.btn-toolbar [data-cy="format-add-line"]')
.click()
cy.get('.CodeMirror-code > div:nth-of-type(2) > .CodeMirror-line > span span')
.should('have.text', '----')
})
it('should add a collapsable block', () => {
cy.get('.btn-toolbar [data-cy="format-collapsable-block"]')
.click()
cy.get('.CodeMirror-code > div:nth-of-type(2) > .CodeMirror-line > span span')
.should('have.text', ':::spoiler Toggle label')
})
it('should add a comment', () => {
cy.get('.btn-toolbar [data-cy="format-add-comment"]')
.click()
cy.get('.CodeMirror-code > div:nth-of-type(2) > .CodeMirror-line > span span')
.should('have.text', '> []')
})
})
describe('for new tables', () => {
beforeEach(() => {
cy.get('.table-picker-container')
.should('not.be.visible')
cy.get('.fa-table')
cy.get('[data-cy="show-table-overlay"]')
.last()
.click()
cy.get('.table-picker-container')
.should('be.visible')
})
it('overlay', () => {
it('should open an overlay', () => {
cy.get('.table-container > div:nth-of-type(25)')
.trigger('mouseover')
cy.get('.table-cell.bg-primary')
@ -279,10 +259,10 @@ describe('Toolbar', () => {
.click()
})
it('custom', () => {
it('should open a modal for custom table sizes in the overlay', () => {
cy.get('.modal-dialog')
.should('not.exist')
cy.get('.fa-table')
cy.get('[data-cy="show-custom-table-modal"]')
.first()
.click()
cy.get('.modal-dialog')
@ -311,32 +291,11 @@ describe('Toolbar', () => {
})
})
it('line', () => {
cy.get('.fa-minus')
.click()
cy.get('.CodeMirror-code > div:nth-of-type(2) > .CodeMirror-line > span span')
.should('have.text', '----')
})
it('collapsable block', () => {
cy.get('.fa-caret-square-o-down')
.click()
cy.get('.CodeMirror-code > div:nth-of-type(2) > .CodeMirror-line > span span')
.should('have.text', ':::spoiler Toggle label')
})
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-picker', () => {
it('show when clicked', () => {
describe('for the emoji-picker', () => {
it('should open overlay', () => {
cy.get('emoji-picker')
.should('not.be.visible')
cy.get('.fa-smile-o')
cy.get('[data-cy="show-emoji-picker"]')
.click()
cy.get('emoji-picker')
.should('be.visible')

14
cypress/integration/yamlArrayDeprecationMessage.spec.ts
View file

@ -7,30 +7,22 @@
describe('YAML Array for deprecated syntax of document tags in frontmatter', () => {
beforeEach(() => {
cy.visit('/n/features')
cy.get('.CodeMirror')
.click()
.get('textarea')
.as('codeinput')
})
it('is shown when using old syntax', () => {
cy.get('@codeinput')
.fill('---\ntags: a, b, c\n---')
cy.codemirrorFill('---\ntags: a, b, c\n---')
cy.get('[data-cy="yamlArrayDeprecationAlert"]')
.should('be.visible')
})
it('isn\'t shown when using inline yaml-array', () => {
cy.get('@codeinput')
.fill('---\ntags: [\'a\', \'b\', \'c\']\n---')
cy.codemirrorFill('---\ntags: [\'a\', \'b\', \'c\']\n---')
cy.get('[data-cy="yamlArrayDeprecationAlert"]')
.should('not.exist')
})
it('isn\'t shown when using multi line yaml-array', () => {
cy.get('@codeinput')
.fill('---\ntags:\n - a\n - b\n - c\n---')
cy.codemirrorFill('---\ntags:\n - a\n - b\n - c\n---')
cy.get('[data-cy="yamlArrayDeprecationAlert"]')
.should('not.exist')
})

18
cypress/support/fill.ts
View file

@ -12,12 +12,26 @@ declare namespace Cypress {
* @example cy.get(input).fill('content')
*/
fill (value: string): Chainable<Element>
codemirrorFill (value: string): Chainable<Element>
}
}
Cypress.Commands.add('fill', {
prevSubject: 'element'
}, (subject, value) => {
cy.wrap(subject).invoke('val', value)
.trigger('change', { force: true })
return cy.wrap(subject)
.invoke('val', value)
.trigger('change', { force: true })
})
Cypress.Commands.add('codemirrorFill', (content: string) => {
const line = content.split("\n").find(value => value !== '');
cy.get('.CodeMirror')
.click()
.get('textarea')
.fill(content)
if(line) {
cy.get('.CodeMirror')
.contains('.CodeMirror-line', line)
}
})

2
src/components/editor/editor-pane/tool-bar/emoji-picker/emoji-picker-button.tsx
View file

@ -29,7 +29,7 @@ export const EmojiPickerButton: React.FC<EmojiPickerButtonProps> = ({ editor })
addEmoji(emoji, editor)
}}
onDismiss={() => setShowEmojiPicker(false)}/>
<Button variant='light' onClick={() => setShowEmojiPicker(old => !old)} title={t('editor.editorToolbar.emoji')}>
<Button data-cy={'show-emoji-picker'} variant='light' onClick={() => setShowEmojiPicker(old => !old)} title={t('editor.editorToolbar.emoji')}>
<ForkAwesomeIcon icon="smile-o"/>
</Button>
</Fragment>

2
src/components/editor/editor-pane/tool-bar/table-picker/table-picker-button.tsx
View file

@ -30,7 +30,7 @@ export const TablePickerButton: React.FC<TablePickerButtonProps> = ({ editor })
addTable(editor, rows, cols)
}}
/>
<Button variant='light' onClick={() => setShowTablePicker(old => !old)} title={t('editor.editorToolbar.table.title')}>
<Button data-cy={'show-table-overlay'} variant='light' onClick={() => setShowTablePicker(old => !old)} title={t('editor.editorToolbar.table.title')}>
<ForkAwesomeIcon icon="table"/>
</Button>
</Fragment>

2
src/components/editor/editor-pane/tool-bar/table-picker/table-picker.tsx
View file

@ -72,7 +72,7 @@ export const TablePicker: React.FC<TablePickerProps> = ({ show, onDismiss, onTab
))}
</div>
<div className="d-flex justify-content-center mt-2">
<Button className={'text-center'} onClick={() => setShowDialog(true)}>
<Button data-cy={'show-custom-table-modal'} className={'text-center'} onClick={() => setShowDialog(true)}>
<ForkAwesomeIcon icon="table"/>&nbsp;{t('editor.editorToolbar.table.customSize')}
</Button>
<CustomTableSizeModal

34
src/components/editor/editor-pane/tool-bar/tool-bar.tsx
View file

@ -57,50 +57,50 @@ export const ToolBar: React.FC<ToolBarProps> = ({ editor }) => {
return (
<ButtonToolbar className='bg-light'>
<ButtonGroup className={'mx-1 flex-wrap'}>
<Button variant='light' onClick={() => makeSelectionBold(editor)} title={t('editor.editorToolbar.bold')}>
<Button data-cy={'format-bold'} variant='light' onClick={() => makeSelectionBold(editor)} title={t('editor.editorToolbar.bold')}>
<ForkAwesomeIcon icon="bold"/>
</Button>
<Button variant='light' onClick={() => makeSelectionItalic(editor)} title={t('editor.editorToolbar.italic')}>
<Button data-cy={'format-italic'} variant='light' onClick={() => makeSelectionItalic(editor)} title={t('editor.editorToolbar.italic')}>
<ForkAwesomeIcon icon="italic"/>
</Button>
<Button variant='light' onClick={() => underlineSelection(editor)} title={t('editor.editorToolbar.underline')}>
<Button data-cy={'format-underline'} variant='light' onClick={() => underlineSelection(editor)} title={t('editor.editorToolbar.underline')}>
<ForkAwesomeIcon icon="underline"/>
</Button>
<Button variant='light' onClick={() => strikeThroughSelection(editor)} title={t('editor.editorToolbar.strikethrough')}>
<Button data-cy={'format-strikethrough'} variant='light' onClick={() => strikeThroughSelection(editor)} title={t('editor.editorToolbar.strikethrough')}>
<ForkAwesomeIcon icon="strikethrough"/>
</Button>
<Button variant='light' onClick={() => subscriptSelection(editor)} title={t('editor.editorToolbar.subscript')}>
<Button data-cy={'format-subscript'} variant='light' onClick={() => subscriptSelection(editor)} title={t('editor.editorToolbar.subscript')}>
<ForkAwesomeIcon icon="subscript"/>
</Button>
<Button variant='light' onClick={() => superscriptSelection(editor)} title={t('editor.editorToolbar.superscript')}>
<Button data-cy={'format-superscript'} variant='light' onClick={() => superscriptSelection(editor)} title={t('editor.editorToolbar.superscript')}>
<ForkAwesomeIcon icon="superscript"/>
</Button>
</ButtonGroup>
<ButtonGroup className={'mx-1 flex-wrap'}>
<Button variant='light' onClick={() => addHeaderLevel(editor)} title={t('editor.editorToolbar.header')}>
<Button data-cy={'format-heading'} variant='light' onClick={() => addHeaderLevel(editor)} title={t('editor.editorToolbar.header')}>
<ForkAwesomeIcon icon="header"/>
</Button>
<Button variant='light' onClick={() => addCodeFences(editor)} title={t('editor.editorToolbar.code')}>
<Button data-cy={'format-code-block'} variant='light' onClick={() => addCodeFences(editor)} title={t('editor.editorToolbar.code')}>
<ForkAwesomeIcon icon="code"/>
</Button>
<Button variant='light' onClick={() => addQuotes(editor)} title={t('editor.editorToolbar.blockquote')}>
<Button data-cy={'format-block-quote'} variant='light' onClick={() => addQuotes(editor)} title={t('editor.editorToolbar.blockquote')}>
<ForkAwesomeIcon icon="quote-right"/>
</Button>
<Button variant='light' onClick={() => addList(editor)} title={t('editor.editorToolbar.unorderedList')}>
<Button data-cy={'format-unordered-list'} variant='light' onClick={() => addList(editor)} title={t('editor.editorToolbar.unorderedList')}>
<ForkAwesomeIcon icon="list"/>
</Button>
<Button variant='light' onClick={() => addOrderedList(editor)} title={t('editor.editorToolbar.orderedList')}>
<Button data-cy={'format-ordered-list'} variant='light' onClick={() => addOrderedList(editor)} title={t('editor.editorToolbar.orderedList')}>
<ForkAwesomeIcon icon="list-ol"/>
</Button>
<Button variant='light' onClick={() => addTaskList(editor)} title={t('editor.editorToolbar.checkList')}>
<Button data-cy={'format-check-list'} variant='light' onClick={() => addTaskList(editor)} title={t('editor.editorToolbar.checkList')}>
<ForkAwesomeIcon icon="check-square"/>
</Button>
</ButtonGroup>
<ButtonGroup className={'mx-1 flex-wrap'}>
<Button variant='light' onClick={() => addLink(editor)} title={t('editor.editorToolbar.link')}>
<Button data-cy={'format-link'} variant='light' onClick={() => addLink(editor)} title={t('editor.editorToolbar.link')}>
<ForkAwesomeIcon icon="link"/>
</Button>
<Button variant='light' onClick={() => addImage(editor)} title={t('editor.editorToolbar.image')}>
<Button data-cy={'format-image'} variant='light' onClick={() => addImage(editor)} title={t('editor.editorToolbar.image')}>
<ForkAwesomeIcon icon="picture-o"/>
</Button>
<HiddenInputMenuEntry
@ -113,13 +113,13 @@ export const ToolBar: React.FC<ToolBarProps> = ({ editor }) => {
</ButtonGroup>
<ButtonGroup className={'mx-1 flex-wrap'}>
<TablePickerButton editor={editor}/>
<Button variant='light' onClick={() => addLine(editor)} title={t('editor.editorToolbar.line')}>
<Button data-cy={'format-add-line'} variant='light' onClick={() => addLine(editor)} title={t('editor.editorToolbar.line')}>
<ForkAwesomeIcon icon="minus"/>
</Button>
<Button variant='light' onClick={() => addCollapsableBlock(editor)} title={t('editor.editorToolbar.collapsableBlock')}>
<Button data-cy={'format-collapsable-block'} variant='light' onClick={() => addCollapsableBlock(editor)} title={t('editor.editorToolbar.collapsableBlock')}>
<ForkAwesomeIcon icon="caret-square-o-down"/>
</Button>
<Button variant='light' onClick={() => addComment(editor)} title={t('editor.editorToolbar.comment')}>
<Button data-cy={'format-add-comment'} variant='light' onClick={() => addComment(editor)} title={t('editor.editorToolbar.comment')}>
<ForkAwesomeIcon icon="comment"/>
</Button>
<EmojiPickerButton editor={editor}/>