Wrap markdown rendering in iframe (#837)

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
Tilman Vatteroth 2021-01-24 20:50:51 +01:00 committed by GitHub
parent bd31076928
commit 586969f368
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
45 changed files with 1014 additions and 287 deletions

View file

@ -4,33 +4,37 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
const findHljsCodeBlock = () => {
return cy.getMarkdownBody()
.find('pre > code.hljs')
.should('be.visible')
}
describe('Code', () => {
beforeEach(() => {
cy.visit('/n/test', {
onBeforeLoad (win: Window): void {
cy.spy(win.navigator.clipboard, 'writeText').as('copy')
}
})
cy.visit('/n/test')
})
describe('with just the language', () => {
it('doesn\'t show a gutter', () => {
cy.codemirrorFill('```javascript \nlet x = 0\n```')
cy.get('.markdown-body > pre > code.hljs')
.should('be.visible')
findHljsCodeBlock()
.should('not.have.class', 'showGutter')
cy.get('.markdown-body > pre > code.hljs > .linenumber')
findHljsCodeBlock()
.find('.linenumber')
.should('not.be.visible')
})
describe('and line wrapping', () => {
it('doesn\'t show a gutter', () => {
cy.codemirrorFill('```javascript! \nlet x = 0\n```')
cy.get('.markdown-body > pre > code.hljs')
.should('be.visible')
findHljsCodeBlock()
.should('not.have.class', 'showGutter')
.should('have.class', 'wrapLines')
cy.get('.markdown-body > pre > code.hljs > .linenumber')
findHljsCodeBlock()
.find('.linenumber')
.should('not.be.visible')
})
})
@ -39,10 +43,11 @@ describe('Code', () => {
describe('with the language and show gutter', () => {
it('shows the correct line number', () => {
cy.codemirrorFill('```javascript= \nlet x = 0\n```')
cy.get('.markdown-body > pre > code.hljs')
.should('be.visible')
findHljsCodeBlock()
.should('have.class', 'showGutter')
cy.get('.markdown-body > pre > code.hljs > .linenumber')
findHljsCodeBlock()
.find('.linenumber')
.should('be.visible')
.text()
.should('eq', '1')
@ -51,11 +56,12 @@ describe('Code', () => {
describe('and line wrapping', () => {
it('shows the correct line number', () => {
cy.codemirrorFill('```javascript=! \nlet x = 0\n```')
cy.get('.markdown-body > pre > code.hljs')
.should('be.visible')
findHljsCodeBlock()
.should('have.class', 'showGutter')
.should('have.class', 'wrapLines')
cy.get('.markdown-body > pre > code.hljs > .linenumber')
findHljsCodeBlock()
.find('.linenumber')
.should('be.visible')
.text()
.should('eq', '1')
@ -66,10 +72,11 @@ describe('Code', () => {
describe('with the language, show gutter with a start number', () => {
it('shows the correct line number', () => {
cy.codemirrorFill('```javascript=100 \nlet x = 0\n```')
cy.get('.markdown-body > pre > code.hljs')
.should('be.visible')
findHljsCodeBlock()
.should('have.class', 'showGutter')
cy.get('.markdown-body > pre > code.hljs > .linenumber')
findHljsCodeBlock()
.find('.linenumber')
.should('be.visible')
.text()
.should('eq', '100')
@ -77,8 +84,7 @@ describe('Code', () => {
it('shows the correct line number and continues in another codeblock', () => {
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')
findHljsCodeBlock()
.should('have.class', 'showGutter')
.first()
.find('.linenumber')
@ -86,14 +92,14 @@ describe('Code', () => {
.should('be.visible')
.text()
.should('eq', '100')
cy.get('.markdown-body > pre > code.hljs')
findHljsCodeBlock()
.first()
.find('.linenumber')
.last()
.should('be.visible')
.text()
.should('eq', '101')
cy.get('.markdown-body > pre > code.hljs')
findHljsCodeBlock()
.last()
.find('.linenumber')
.first()
@ -105,11 +111,11 @@ describe('Code', () => {
describe('and line wrapping', () => {
it('shows the correct line number', () => {
cy.codemirrorFill('```javascript=100! \nlet x = 0\n```')
cy.get('.markdown-body > pre > code.hljs')
.should('be.visible')
findHljsCodeBlock()
.should('have.class', 'showGutter')
.should('have.class', 'wrapLines')
cy.get('.markdown-body > pre > code.hljs > .linenumber')
findHljsCodeBlock()
.find('.linenumber')
.should('be.visible')
.text()
.should('eq', '100')
@ -117,8 +123,7 @@ describe('Code', () => {
it('shows the correct line number and continues in another codeblock', () => {
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')
findHljsCodeBlock()
.should('have.class', 'showGutter')
.should('have.class', 'wrapLines')
.first()
@ -127,14 +132,14 @@ describe('Code', () => {
.should('be.visible')
.text()
.should('eq', '100')
cy.get('.markdown-body > pre > code.hljs')
findHljsCodeBlock()
.first()
.find('.linenumber')
.last()
.should('be.visible')
.text()
.should('eq', '101')
cy.get('.markdown-body > pre > code.hljs')
findHljsCodeBlock()
.last()
.find('.linenumber')
.first()
@ -147,9 +152,22 @@ describe('Code', () => {
it('has a working copy button', () => {
cy.codemirrorFill('```javascript \nlet x = 0\n```')
cy.get('.markdown-body > pre > div > button > i')
.should('have.class', 'fa-files-o')
cy.get(`iframe[data-cy="documentIframe"]`)
.then(($element: JQuery) => {
const frame = $element[0] as HTMLIFrameElement
if (frame === null || frame.contentWindow === null) {
return cy.wrap(null)
}
cy.spy(frame.contentWindow.navigator.clipboard, 'writeText').as("copy")
})
cy.getMarkdownRenderer()
.find('[data-cy="copy-code-button"]')
.click()
cy.get('@copy').should('be.calledWithExactly', 'let x = 0\n')
cy.get("@copy")
.should('be.calledWithExactly', 'let x = 0\n')
})
})