test: add minor tests for markviews

demos/src/GuideMarkViews/ReactComponent/React/Component.tsx

@@ -6,10 +6,10 @@ export default (props: MarkViewRendererProps) => {
   const [count, setCount] = React.useState(0)
 
   return (
-    <span className="content">
+    <span className="content" data-test-id="mark-view">
       <MarkViewContent />
       <label contentEditable={false}>
-        React component::
+        React component:
         <button
           onClick={() => {
             setCount(count + 1)

demos/src/GuideMarkViews/ReactComponent/React/index.spec.js

@@ -0,0 +1,32 @@
+/// <reference types="cypress" />
+
+context('/src/GuideMarkViews/ReactComponent/React/', () => {
+  before(() => {
+    cy.visit('/src/GuideMarkViews/ReactComponent/React/')
+  })
+
+  beforeEach(() => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.setContent('<p>Example Text</p><react-component>Mark View Text</react-component>')
+    })
+    cy.get('.tiptap').type('{selectall}')
+  })
+
+  it('should show the markview', () => {
+    cy.get('.tiptap').find('[data-test-id="mark-view"]').should('exist')
+  })
+
+  it('should allow clicking the button', () => {
+    cy.get('.tiptap')
+      .find('[data-test-id="mark-view"] button')
+      .should('contain', 'This button has been clicked 0 times.')
+    cy.get('.tiptap')
+      .find('[data-test-id="mark-view"] button')
+      .click()
+      .then(() => {
+        cy.get('.tiptap')
+          .find('[data-test-id="mark-view"] button')
+          .should('contain', 'This button has been clicked 1 times.')
+      })
+  })
+})

demos/src/GuideMarkViews/VueComponent/Vue/Component.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class="vue-component">
+  <span className="content" data-test-id="mark-view">
     <mark-view-content />
     <label contenteditable="false"
       >Vue Component::

demos/src/GuideMarkViews/VueComponent/Vue/index.spec.js

@@ -0,0 +1,32 @@
+/// <reference types="cypress" />
+
+context('/src/GuideMarkViews/VueComponent/Vue/', () => {
+  before(() => {
+    cy.visit('/src/GuideMarkViews/VueComponent/Vue/')
+  })
+
+  beforeEach(() => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.setContent('<p>Example Text</p><vue-component>Mark View Text</vue-component>')
+    })
+    cy.get('.tiptap').type('{selectall}')
+  })
+
+  it('should show the markview', () => {
+    cy.get('.tiptap').find('[data-test-id="mark-view"]').should('exist')
+  })
+
+  it('should allow clicking the button', () => {
+    cy.get('.tiptap')
+      .find('[data-test-id="mark-view"] button')
+      .should('contain', 'This button has been clicked 0 times.')
+    cy.get('.tiptap')
+      .find('[data-test-id="mark-view"] button')
+      .click()
+      .then(() => {
+        cy.get('.tiptap')
+          .find('[data-test-id="mark-view"] button')
+          .should('contain', 'This button has been clicked 1 times.')
+      })
+  })
+})