hedgedoc/cypress/integration/autocompletion.spec.ts
Erik Michelson 5574f09ef5
Replace emoji-mart with emoji-picker-element (#620)
* Change dependencies

* Use emoji-picker-element instead of emoji-mart

* Optimize emoji-picker appeareance and data-source

* Add twemoji font to emoji-picker

* Add missing useEffect dependency

* Add emoji-shortcode map

* Include emoji-data into bundle and remove dynamic fetch

* Rename shortcode-map

* Fix emoji-picker being hidden on second attempt to open it

* Add support for skin-tone short-codes

* Remove whitespace line

* Don't reinitialize the picker on every open

* Fixed linting and test issues

* Update CHANGELOG entry
2020-10-10 23:12:17 +02:00

298 lines
9.5 KiB
TypeScript

describe('Autocompletion', () => {
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}')
})
describe('code block', () => {
it('via Enter', () => {
cy.get('.CodeMirror textarea')
.type('```')
cy.get('.CodeMirror-hints')
.should('exist')
cy.get('.CodeMirror textarea')
.type('{enter}')
cy.get('.CodeMirror-hints')
.should('not.exist')
cy.get('.CodeMirror-code > div:nth-of-type(1) > .CodeMirror-line > span > span')
.should('have.text', '```1c')
cy.get('.CodeMirror-code > div:nth-of-type(3) > .CodeMirror-line > span span')
.should('have.text', '```')
cy.get('.markdown-body > pre > code')
.should('exist')
})
it('via doubleclick', () => {
cy.get('.CodeMirror textarea')
.type('```')
cy.get('.CodeMirror-hints > li')
.first()
.dblclick()
cy.get('.CodeMirror-hints')
.should('not.exist')
cy.get('.CodeMirror-code > div:nth-of-type(1) > .CodeMirror-line > span > span')
.should('have.text', '```1c')
cy.get('.CodeMirror-code > div:nth-of-type(3) > .CodeMirror-line > span span')
.should('have.text', '```')
cy.get('.markdown-body > pre > code')
.should('exist')
})
})
describe('container', () => {
it('via Enter', () => {
cy.get('.CodeMirror textarea')
.type(':::')
cy.get('.CodeMirror-hints')
.should('exist')
cy.get('.CodeMirror textarea')
.type('{enter}')
cy.get('.CodeMirror-hints')
.should('not.exist')
cy.get('.CodeMirror-code > div:nth-of-type(1) > .CodeMirror-line > span > span')
.should('have.text', ':::success')
cy.get('.CodeMirror-code > div:nth-of-type(3) > .CodeMirror-line > span span')
.should('have.text', ':::')
cy.get('.markdown-body > div.alert')
.should('exist')
})
it('via doubleclick', () => {
cy.get('.CodeMirror textarea')
.type(':::')
cy.get('.CodeMirror-hints > li')
.first()
.dblclick()
cy.get('.CodeMirror-hints')
.should('not.exist')
cy.get('.CodeMirror-code > div:nth-of-type(1) > .CodeMirror-line > span > span')
.should('have.text', ':::success')
cy.get('.CodeMirror-code > div:nth-of-type(3) > .CodeMirror-line > span span')
.should('have.text', ':::')
cy.get('.markdown-body > div.alert')
.should('exist')
})
})
describe('emoji', () => {
describe('normal emoji', () => {
it('via Enter', () => {
cy.get('.CodeMirror textarea')
.type(':hedg')
cy.get('.CodeMirror-hints')
.should('exist')
cy.get('.CodeMirror textarea')
.type('{enter}')
cy.get('.CodeMirror-hints')
.should('not.exist')
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', ':hedgehog:')
cy.get('.markdown-body')
.should('have.text', '🦔')
})
it('via doubleclick', () => {
cy.get('.CodeMirror textarea')
.type(':hedg')
cy.get('.CodeMirror-hints > li')
.first()
.dblclick()
cy.get('.CodeMirror-hints')
.should('not.exist')
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', ':hedgehog:')
cy.get('.markdown-body')
.should('have.text', '🦔')
})
})
describe('fork-awesome-icon', () => {
it('via Enter', () => {
cy.get('.CodeMirror textarea')
.type(':fa-face')
cy.get('.CodeMirror-hints')
.should('exist')
cy.get('.CodeMirror textarea')
.type('{enter}')
cy.get('.CodeMirror-hints')
.should('not.exist')
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', ':fa-facebook:')
cy.get('.markdown-body > p > i.fa.fa-facebook')
.should('exist')
})
it('via doubleclick', () => {
cy.get('.CodeMirror textarea')
.type(':fa-face')
cy.get('.CodeMirror-hints > li')
.first()
.dblclick()
cy.get('.CodeMirror-hints')
.should('not.exist')
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', ':fa-facebook:')
cy.get('.markdown-body > p > i.fa.fa-facebook')
.should('exist')
})
})
})
describe('header', () => {
it('via Enter', () => {
cy.get('.CodeMirror textarea')
.type('#')
cy.get('.CodeMirror-hints')
.should('exist')
cy.get('.CodeMirror textarea')
.type('{enter}')
cy.get('.CodeMirror-hints')
.should('not.exist')
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', '# ')
cy.get('.markdown-body > h1 ')
.should('have.text', ' ')
})
it('via doubleclick', () => {
cy.get('.CodeMirror textarea')
.type('#')
cy.get('.CodeMirror-hints > li')
.first()
.dblclick()
cy.get('.CodeMirror-hints')
.should('not.exist')
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', '# ')
cy.get('.markdown-body > h1')
.should('have.text', ' ')
})
})
describe('images', () => {
it('via Enter', () => {
cy.get('.CodeMirror textarea')
.type('!')
cy.get('.CodeMirror-hints')
.should('exist')
cy.get('.CodeMirror textarea')
.type('{enter}')
cy.get('.CodeMirror-hints')
.should('not.exist')
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', '![image alt](https:// "title")')
cy.get('.markdown-body > p > img')
.should('have.attr', 'alt', 'image alt')
.should('have.attr', 'src', 'https://')
.should('have.attr', 'title', 'title')
})
it('via doubleclick', () => {
cy.get('.CodeMirror textarea')
.type('!')
cy.get('.CodeMirror-hints > li')
.first()
.dblclick()
cy.get('.CodeMirror-hints')
.should('not.exist')
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', '![image alt](https:// "title")')
cy.get('.markdown-body > p > img')
.should('have.attr', 'alt', 'image alt')
.should('have.attr', 'src', 'https://')
.should('have.attr', 'title', 'title')
})
})
describe('links', () => {
it('via Enter', () => {
cy.get('.CodeMirror textarea')
.type('[')
cy.get('.CodeMirror-hints')
.should('exist')
cy.get('.CodeMirror textarea')
.type('{enter}')
cy.get('.CodeMirror-hints')
.should('not.exist')
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', '[link text](https:// "title") ')
cy.get('.markdown-body > p > a')
.should('have.text', 'link text')
.should('have.attr', 'href', 'https://')
.should('have.attr', 'title', 'title')
})
it('via doubleclick', () => {
cy.get('.CodeMirror textarea')
.type('[')
cy.get('.CodeMirror-hints > li')
.first()
.dblclick()
cy.get('.CodeMirror-hints')
.should('not.exist')
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', '[link text](https:// "title") ')
cy.get('.markdown-body > p > a')
.should('have.text', 'link text')
.should('have.attr', 'href', 'https://')
.should('have.attr', 'title', 'title')
})
})
describe('pdf', () => {
it('via Enter', () => {
cy.get('.CodeMirror textarea')
.type('{')
cy.get('.CodeMirror-hints')
.should('exist')
cy.get('.CodeMirror textarea')
.type('{enter}')
cy.get('.CodeMirror-hints')
.should('not.exist')
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', '{%pdf https:// %}')
cy.get('.markdown-body > p')
.should('exist')
})
it('via doubleclick', () => {
cy.get('.CodeMirror textarea')
.type('{')
cy.get('.CodeMirror-hints > li')
.first()
.dblclick()
cy.get('.CodeMirror-hints')
.should('not.exist')
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', '{%pdf https:// %}')
cy.get('.markdown-body > p')
.should('exist')
})
})
describe('collapsable blocks', () => {
it('via Enter', () => {
cy.get('.CodeMirror textarea')
.type('<d')
cy.get('.CodeMirror-hints')
.should('exist')
cy.get('.CodeMirror textarea')
.type('{enter}')
cy.get('.CodeMirror-hints')
.should('not.exist')
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', '</details>') // after selecting the hint, the last line of the inserted suggestion is active
cy.get('.markdown-body > details')
.should('exist')
})
it('via doubleclick', () => {
cy.get('.CodeMirror textarea')
.type('<d')
cy.get('.CodeMirror-hints > li')
.first()
.dblclick()
cy.get('.CodeMirror-hints')
.should('not.exist')
cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
.should('have.text', '</details>')
cy.get('.markdown-body > details')
.should('exist')
})
})
})