added cypress tests (#4420)

* created editable-voids cypress test

* created markdown-preview cypress test

* created images cypress test

* created huge-document cypress test

* added hovering-toolbar, and forced-layout cypress tests

* added embeds cypress test

No changeset as it's adding tests for the examples.

cypress/integration/examples/editable-voids.ts

@@ -0,0 +1,28 @@
+describe('editable voids', () => {
+  const elements = [
+    { tag: 'h4', count: 3 },
+    { tag: 'input[type="text"]', count: 1 },
+    { tag: 'input[type="radio"]', count: 2 },
+  ]
+
+  beforeEach(() => {
+    cy.visit('examples/editable-voids')
+  })
+
+  it('checks for the elements', () => {
+    elements.forEach(({ tag, count }) => {
+      cy.get(tag).should('have.length', count)
+    })
+  })
+
+  it('should double the elements', () => {
+    // click the `+` sign to duplicate the editable void
+    cy.get('span.material-icons')
+      .eq(1)
+      .click()
+
+    elements.forEach(({ tag, count }) => {
+      cy.get(tag).should('have.length', count * 2)
+    })
+  })
+})

cypress/integration/examples/embeds.ts

@@ -0,0 +1,14 @@
+describe('embeds example', () => {
+  const slateEditor = 'div[data-slate-editor="true"]'
+
+  beforeEach(() => {
+    cy.visit('examples/embeds')
+  })
+
+  it('contains embeded', () => {
+    cy.get(slateEditor)
+      .find('iframe')
+      .should('exist')
+      .should('have.length', 1)
+  })
+})

cypress/integration/examples/forced-layout.ts

@@ -0,0 +1,27 @@
+describe('forced layout example', () => {
+  const elements = [
+    { tag: 'h2', count: 1 },
+    { tag: 'p', count: 1 },
+  ]
+
+  beforeEach(() => {
+    cy.visit('examples/forced-layout')
+  })
+
+  it('checks for the elements', () => {
+    elements.forEach(({ tag, count }) => {
+      cy.get(tag).should('have.length', count)
+    })
+  })
+
+  it('checks if elements persist even after everything is deleted', () => {
+    // clear the textbox
+    cy.get('div[role="textbox"]')
+      .type(`{selectall}`)
+      .clear()
+
+    elements.forEach(({ tag, count }) => {
+      cy.get(tag).should('have.length', count)
+    })
+  })
+})

cypress/integration/examples/hovering-toolbar.ts

@@ -0,0 +1,21 @@
+describe('hovering toolbar example', () => {
+  beforeEach(() => {
+    cy.visit('examples/hovering-toolbar')
+  })
+
+  it('hovering toolbar appears', () => {
+    cy.get('div')
+      .eq(13)
+      .should('not.exist')
+
+    cy.get('span[data-slate-string="true"]')
+      .eq(0)
+      .type(`{selectall}`)
+      .get('div')
+      .eq(13)
+      .should('exist')
+      .should('have.css', 'opacity', '1')
+      .find('span.material-icons')
+      .should('have.length', 3)
+  })
+})

cypress/integration/examples/huge-document.ts

@@ -0,0 +1,16 @@
+describe('huge document example', () => {
+  const elements = [
+    { tag: 'h1', count: 100 },
+    { tag: 'p', count: 700 },
+  ]
+
+  beforeEach(() => {
+    cy.visit('examples/huge-document')
+  })
+
+  it('contains image', () => {
+    elements.forEach(({ tag, count }) => {
+      cy.get(tag).should('have.length', count)
+    })
+  })
+})

cypress/integration/examples/images.ts

@@ -0,0 +1,12 @@
+describe('images example', () => {
+  beforeEach(() => {
+    cy.visit('examples/images')
+  })
+
+  it('contains image', () => {
+    cy.findByRole('textbox')
+      .find('img')
+      .should('exist')
+      .should('have.length', 1)
+  })
+})

cypress/integration/examples/markdown-preview.ts

@@ -0,0 +1,19 @@
+describe('markdown preview', () => {
+  const slateEditor = 'div[data-slate-editor="true"]'
+  const markdown = 'span[data-slate-string="true"]'
+
+  beforeEach(() => {
+    cy.visit('examples/markdown-preview')
+  })
+
+  it('checks for markdown', () => {
+    cy.get(slateEditor)
+      .find(markdown)
+      .should('have.length', 9)
+
+    cy.get(slateEditor)
+      .type('{movetoend}{enter}## Try it out!{enter}')
+      .find(markdown)
+      .should('have.length', 10)
+  })
+})