From e65eeb2939f22bbda241043913e43b7eb359b4be Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Sat, 7 Aug 2021 20:58:22 +0530
Subject: [PATCH] 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.
---
 .../{checkLists.ts => check-lists.ts}         |  0
 .../integration/examples/editable-voids.ts    | 28 +++++++++++++++++++
 cypress/integration/examples/embeds.ts        | 14 ++++++++++
 cypress/integration/examples/forced-layout.ts | 27 ++++++++++++++++++
 .../integration/examples/hovering-toolbar.ts  | 21 ++++++++++++++
 cypress/integration/examples/huge-document.ts | 16 +++++++++++
 cypress/integration/examples/images.ts        | 12 ++++++++
 .../integration/examples/markdown-preview.ts  | 19 +++++++++++++
 8 files changed, 137 insertions(+)
 rename cypress/integration/examples/{checkLists.ts => check-lists.ts} (100%)
 create mode 100644 cypress/integration/examples/editable-voids.ts
 create mode 100644 cypress/integration/examples/embeds.ts
 create mode 100644 cypress/integration/examples/forced-layout.ts
 create mode 100644 cypress/integration/examples/hovering-toolbar.ts
 create mode 100644 cypress/integration/examples/huge-document.ts
 create mode 100644 cypress/integration/examples/images.ts
 create mode 100644 cypress/integration/examples/markdown-preview.ts

diff --git a/cypress/integration/examples/checkLists.ts b/cypress/integration/examples/check-lists.ts
similarity index 100%
rename from cypress/integration/examples/checkLists.ts
rename to cypress/integration/examples/check-lists.ts
diff --git a/cypress/integration/examples/editable-voids.ts b/cypress/integration/examples/editable-voids.ts
new file mode 100644
index 000000000..2367d1d6a
--- /dev/null
+++ b/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)
+    })
+  })
+})
diff --git a/cypress/integration/examples/embeds.ts b/cypress/integration/examples/embeds.ts
new file mode 100644
index 000000000..f019b7f3f
--- /dev/null
+++ b/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)
+  })
+})
diff --git a/cypress/integration/examples/forced-layout.ts b/cypress/integration/examples/forced-layout.ts
new file mode 100644
index 000000000..e534d170c
--- /dev/null
+++ b/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)
+    })
+  })
+})
diff --git a/cypress/integration/examples/hovering-toolbar.ts b/cypress/integration/examples/hovering-toolbar.ts
new file mode 100644
index 000000000..1fe2e5e68
--- /dev/null
+++ b/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)
+  })
+})
diff --git a/cypress/integration/examples/huge-document.ts b/cypress/integration/examples/huge-document.ts
new file mode 100644
index 000000000..b13e1d171
--- /dev/null
+++ b/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)
+    })
+  })
+})
diff --git a/cypress/integration/examples/images.ts b/cypress/integration/examples/images.ts
new file mode 100644
index 000000000..ee5b26c4e
--- /dev/null
+++ b/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)
+  })
+})
diff --git a/cypress/integration/examples/markdown-preview.ts b/cypress/integration/examples/markdown-preview.ts
new file mode 100644
index 000000000..18f4978f3
--- /dev/null
+++ b/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)
+  })
+})