Feature/browserstack (#902)

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

cypress/integration/maxLength.spec.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-const tenChars: string = '0123456789'
+const tenChars = '0123456789'
 
 describe('status-bar text-length info', () => {
   beforeEach(() => {
@@ -22,14 +22,14 @@ describe('status-bar text-length info', () => {
 
   it('color is warning on <= 100 chars remaining', () => {
     cy.get('.CodeMirror textarea')
-    .type(`${tenChars.repeat(10)}`)
+    .fill(tenChars.repeat(10))
     cy.get('.status-bar div:nth-child(2) span:nth-child(2)')
       .should('have.class', 'text-warning')
   })
 
   it('color is danger on <= 0 chars remaining', () => {
     cy.get('.CodeMirror textarea')
-    .type(`${tenChars.repeat(20)}`)
+    .fill(tenChars.repeat(20))
     cy.get('.status-bar div:nth-child(2) span:nth-child(2)')
     .should('have.class', 'text-danger')
   })
@@ -41,7 +41,7 @@ describe('show warning if content length > configured max length', () => {
     cy.get('.CodeMirror textarea')
     .type('{ctrl}a', { force: true })
     .type('{backspace}')
-    .type(`${tenChars.repeat(20)}`)
+    .fill(tenChars.repeat(20))
   })
 
   it('show warning alert in renderer and as modal', () => {

cypress/integration/upload.spec.ts

@@ -41,9 +41,6 @@ describe('Upload', () => {
           link: imageUrl
         }
       })
-      cy.fixture('acme.png').then(image => {
-        this.image = image
-      })
     })
     it('via button', () => {
       cy.get('.fa-upload')
@@ -55,27 +52,31 @@ describe('Upload', () => {
     })
 
     it('via paste', () => {
-      const pasteEvent = {
-        clipboardData: {
-          files: [Cypress.Blob.base64StringToBlob(this.image, 'image/png')]
+      cy.fixture('acme.png').then((image: string) => {
+        const pasteEvent = {
+          clipboardData: {
+            files: [Cypress.Blob.base64StringToBlob(image, 'image/png')]
+          }
         }
-      }
-      cy.get('.CodeMirror-scroll').trigger('paste', pasteEvent)
-      cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
+        cy.get('.CodeMirror-scroll').trigger('paste', pasteEvent)
+        cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
         .should('have.text', `![](${imageUrl})`)
+      })
     })
 
     it('via drag and drop', () => {
-      const dropEvent = {
-        dataTransfer: {
-          files: [Cypress.Blob.base64StringToBlob(this.image, 'image/png')],
-          effectAllowed: 'uninitialized'
+      cy.fixture('acme.png').then((image: string) => {
+        const dropEvent = {
+          dataTransfer: {
+            files: [Cypress.Blob.base64StringToBlob(image, 'image/png')],
+            effectAllowed: 'uninitialized'
+          }
         }
-      }
-      cy.get('.CodeMirror-scroll').trigger('dragenter', dropEvent)
-      cy.get('.CodeMirror-scroll').trigger('drop', dropEvent)
-      cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
+        cy.get('.CodeMirror-scroll').trigger('dragenter', dropEvent)
+        cy.get('.CodeMirror-scroll').trigger('drop', dropEvent)
+        cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
         .should('have.text', `![](${imageUrl})`)
+      })
     })
   })
 

cypress/support/fill.ts

@@ -0,0 +1,23 @@
+/*
+ * SPDX-FileCopyrightText: 2020 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress {
+  interface Chainable {
+    /**
+     * Custom command to fill an input field with text and trigger a change event.
+     * @example cy.get(input).fill('content')
+     */
+    fill (value: string): Chainable<Element>
+  }
+}
+
+Cypress.Commands.add('fill', {
+  prevSubject: 'element'
+}, (subject, value) => {
+  cy.wrap(subject).invoke('val', value)
+  .trigger('change', { force: true })
+})

cypress/support/index.ts

@@ -23,4 +23,5 @@ import 'cypress-commands'
 import 'cypress-file-upload'
 import './checkLinks'
 import './config'
+import './fill'
 import './login'

cypress/tsconfig.json

@@ -4,7 +4,7 @@
     "baseUrl": "../node_modules",
     "target": "es6",
     "lib": ["es6", "dom"],
-    "types": ["cypress-commands", "cypress"]
+    "types": ["cypress" ,"cypress-commands", "cypress-file-upload"]
   },
   "include": [
     "**/*.ts"