tests(storybook): adding selection commands for text

packages/storybook/cypress/storybook/markdownEditorMarks.spec.js

@@ -0,0 +1,19 @@
+// https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/
+const getIframeDocument = () =>
+  cy.get("#storybook-preview-iframe").its("0.contentDocument").should("exist");
+
+const getIframeBody = () =>
+  getIframeDocument().its("body").should("not.be.undefined").then(cy.wrap);
+
+describe('Marks', () => {
+    describe('Bold', () => {
+        it('should visit markdown editor', () => {
+          cy.visit("/");
+          cy.get("#markdown-editor").click();
+        })
+
+        it('should make paragraph text bold', () => {
+          getIframeBody().setSelection("#ap-rich-text-editor > p:nth-child(3)",'This','.');
+        })
+    })
+})

packages/storybook/cypress/support/commands.js

@@ -23,3 +23,79 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+Cypress.Commands.add('selection', { prevSubject: true }, (subject, fn) => {
+    cy.wrap(subject)
+      .trigger('mousedown')
+      .then(fn)
+      .trigger('mouseup');
+
+    cy.document().trigger('selectionchange');
+    return cy.wrap(subject);
+  });
+
+  Cypress.Commands.add('setSelection', { prevSubject: true }, (subject, query, endQuery) => {
+    return cy.wrap(subject)
+      .selection($el => {
+        if (typeof query === 'string') {
+          const anchorNode = getTextNode($el, query);
+          const focusNode = endQuery ? getTextNode($el, endQuery) : anchorNode;
+          const anchorOffset = anchorNode.wholeText.indexOf(query);
+          const focusOffset = endQuery ?
+            focusNode.wholeText.indexOf(endQuery) + endQuery.length :
+            anchorOffset + query.length;
+          setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
+        } else if (typeof query === 'object') {
+          const el = $el[0];
+          const anchorNode = getTextNode(el.querySelector(query.anchorQuery));
+          const anchorOffset = query.anchorOffset || 0;
+          const focusNode = query.focusQuery ? getTextNode(el.querySelector(query.focusQuery)) : anchorNode;
+          const focusOffset = query.focusOffset || 0;
+          setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
+        }
+      });
+  });
+
+  // Low level command reused by `setCursorBefore` and `setCursorAfter`, equal to `setCursorAfter`
+  Cypress.Commands.add('setCursor', { prevSubject: true }, (subject, query, atStart) => {
+    return cy.wrap(subject)
+      .selection($el => {
+        const node = getTextNode($el[0], query);
+        const offset = node.wholeText.indexOf(query) + (atStart ? 0 : query.length);
+        const document = node.ownerDocument;
+        document.getSelection().removeAllRanges();
+        document.getSelection().collapse(node, offset);
+      })
+      // Depending on what you're testing, you may need to chain a `.click()` here to ensure
+      // further commands are picked up by whatever you're testing (this was required for Slate, for example).
+  });
+
+  Cypress.Commands.add('setCursorBefore', { prevSubject: true }, (subject, query) => {
+    cy.wrap(subject).setCursor(query, true);
+  });
+
+  Cypress.Commands.add('setCursorAfter', { prevSubject: true }, (subject, query) => {
+    cy.wrap(subject).setCursor(query);
+  });
+
+  // Helper functions
+  function getTextNode(el, match){
+    const walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
+    if (!match) {
+      return walk.nextNode();
+    }
+
+    const nodes = [];
+    let node;
+    while(node = walk.nextNode()) {
+      if (node.wholeText.includes(match)) {
+        return node;
+      }
+    }
+  }
+
+  function setBaseAndExtent(...args) {
+    const document = args[0].ownerDocument;
+    document.getSelection().removeAllRanges();
+    document.getSelection().setBaseAndExtent(...args);
+  }