Cypress tests for examples (#4389)

* cypress: mentions example test

* cypress: search highlighting test

* cypress: tables example test

* cypress: check html in richtext

* Update cypress/integration/mentions.ts

Co-authored-by: Tim Buckley <timothypbuckley@gmail.com>

* Update cypress/integration/search-highlighting.ts

Co-authored-by: Tim Buckley <timothypbuckley@gmail.com>

* cypress: reset page before each test case

* cypress: Custom command dataCy

* cypress: seperate directory for examples' tests

* cypress: remove comments

* cypress: add placeholder test

* cypress: add plain text test

Co-authored-by: Tim Buckley <timothypbuckley@gmail.com>

cypress/integration/examples/mentions.ts

@@ -0,0 +1,28 @@
+describe('mentions example', () => {
+  beforeEach(() => cy.visit('examples/mentions'))
+
+  it('renders mention element', () => {
+    cy.findByRole('textbox')
+      .dataCy('mention-R2-D2')
+      .should('exist')
+      .dataCy('mention-Mace-Windu')
+      .should('exist')
+  })
+
+  it('shows list of mentions', () => {
+    cy.findByRole('textbox')
+      .type('{movetoend}')
+      .type(' @ma')
+      .dataCy('mentions-portal')
+      .should('exist')
+  })
+
+  it('inserts on enter from list', () => {
+    cy.findByRole('textbox')
+      .type('{movetoend}')
+      .type(' @Ja')
+      .type('{enter}')
+      .dataCy('mention-Jabba')
+      .should('exist')
+  })
+})

cypress/integration/examples/placeholder.ts

@@ -0,0 +1,12 @@
+describe('placeholder example', () => {
+  beforeEach(() => cy.visit('examples/custom-placeholder'))
+
+  it('renders custom placeholder', () => {
+    const placeholderElement = cy.get('[data-slate-placeholder=true]')
+
+    placeholderElement
+      .should('contain.text', 'Type something')
+      .get('pre')
+      .should('contain.text', 'renderPlaceholder')
+  })
+})

cypress/integration/examples/plaintext.ts

@@ -0,0 +1,10 @@
+describe('plaintext example', () => {
+  beforeEach(() => cy.visit('examples/plaintext'))
+
+  it('inserts text when typed', () => {
+    cy.findByRole('textbox')
+      .type('{movetostart}')
+      .type('Hello World')
+      .should('contain.text', 'Hello World')
+  })
+})

cypress/integration/examples/richtext.ts

@@ -1,7 +1,15 @@
 describe('On richtext example', () => {
-  it('inserts text when typed', () => {
+  beforeEach(() => cy.visit('examples/richtext'))
-    cy.visit('examples/richtext')
 
+  it('renders rich text', () => {
+    cy.findByRole('textbox')
+      .get('strong')
+      .should('contain.text', 'rich')
+      .get('blockquote')
+      .should('contain.text', 'wise quote')
+  })
+
+  it('inserts text when typed', () => {
     cy.findByRole('textbox')
       .type('{movetostart}')
       .type('Hello World')

cypress/integration/examples/search-highlighting.ts

@@ -0,0 +1,11 @@
+describe('search highlighting', () => {
+  beforeEach(() => cy.visit('examples/search-highlighting'))
+
+  it('highlights the searched text', () => {
+    const searchField = 'input[type="search"]'
+    const highlightedText = 'search-highlighted'
+
+    cy.get(searchField).type('text')
+    cy.dataCy(highlightedText).should('have.length', 2)
+  })
+})

cypress/integration/examples/tables.ts

@@ -0,0 +1,11 @@
+describe('table example', () => {
+  beforeEach(() => {
+    cy.visit('examples/tables')
+  })
+
+  it('table tag rendered', () => {
+    cy.findByRole('textbox')
+      .get('table')
+      .should('exist')
+  })
+})

cypress/support/commands.ts

@@ -1 +1,15 @@
 import '@testing-library/cypress/add-commands'
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Custom command to select DOM element by data-cy attribute.
+       * @example cy.dataCy('greeting')
+       */
+      dataCy(value: string): Chainable<Element>
+    }
+  }
+}
+
+Cypress.Commands.add('dataCy', value => cy.get(`[data-cy="${value}"]`))

site/examples/mentions.tsx

@@ -120,6 +120,7 @@ const MentionExample = () => {
               borderRadius: '4px',
               boxShadow: '0 1px 5px rgba(0,0,0,.2)',
             }}
+            data-cy="mentions-portal"
           >
             {chars.map((char, i) => (
               <div
@@ -181,6 +182,7 @@ const Mention = ({ attributes, children, element }) => {
     <span
       {...attributes}
       contentEditable={false}
+      data-cy={`mention-${element.character.replace(' ', '-')}`}
       style={{
         padding: '3px 3px 2px',
         margin: '0 1px',

site/examples/search-highlighting.tsx

@@ -75,6 +75,7 @@ const Leaf = ({ attributes, children, leaf }) => {
   return (
     <span
       {...attributes}
+      {...(leaf.highlight && { 'data-cy': 'search-highlighted' })}
       className={css`
         font-weight: ${leaf.bold && 'bold'};
         background-color: ${leaf.highlight && '#ffeeba'};