tests added

test/cypress/support/commands.ts

@@ -155,3 +155,82 @@ Cypress.Commands.add('selectText', {
 
   return cy.wrap(subject);
 });
+
+/**
+ * Select element's text by offset
+ * Note. Previous subject should have 'textNode' as firstChild
+ *
+ * Usage
+ * cy.get('[data-cy=editorjs]')
+ *  .find('.ce-paragraph')
+ *  .selectTextByOffset([0, 5])
+ *
+ * @param offset - offset to select
+ */
+Cypress.Commands.add('selectTextByOffset', {
+  prevSubject: true,
+}, (subject, offset: [number, number]) => {
+  const el = subject[0];
+  const document = el.ownerDocument;
+  const range = document.createRange();
+  const textNode = el.firstChild;
+  const selectionPositionStart = offset[0];
+  const selectionPositionEnd = offset[1];
+
+  range.setStart(textNode, selectionPositionStart);
+  range.setEnd(textNode, selectionPositionEnd);
+  document.getSelection().removeAllRanges();
+  document.getSelection().addRange(range);
+
+  return cy.wrap(subject);
+});
+
+/**
+ * Returns line wrap positions for passed element
+ *
+ * Usage
+ * cy.get('[data-cy=editorjs]')
+ *  .find('.ce-paragraph')
+ *  .getLineWrapPositions()
+ *
+ * @returns number[] - array of line wrap positions
+ */
+Cypress.Commands.add('getLineWrapPositions', {
+  prevSubject: true,
+}, (subject) => {
+  const element = subject[0];
+  const document = element.ownerDocument;
+  const text = element.textContent;
+  const lineWraps = [];
+
+  let currentLineY = 0;
+
+  /**
+   * Iterate all chars in text, create range for each char and get its position
+   */
+  for (let i = 0; i < text.length; i++) {
+    const range = document.createRange();
+
+    range.setStart(element.firstChild, i);
+    range.setEnd(element.firstChild, i);
+
+    const rect = range.getBoundingClientRect();
+
+    if (i === 0) {
+      currentLineY = rect.top;
+
+      continue;
+    }
+
+    /**
+     * If current char Y position is higher than previously saved line Y, that means a line wrap
+     */
+    if (rect.top > currentLineY) {
+      lineWraps.push(i);
+
+      currentLineY = rect.top;
+    }
+  }
+
+  return cy.wrap(lineWraps);
+});

test/cypress/support/index.d.ts

@@ -60,6 +60,31 @@ declare global {
        * @param text - text to select
        */
       selectText(text: string): Chainable<Subject>;
+
+      /**
+       * Select element's text by offset
+       * Note. Previous subject should have 'textNode' as firstChild
+       *
+       * Usage
+       * cy.get('[data-cy=editorjs]')
+       *  .find('.ce-paragraph')
+       *  .selectTextByOffset([0, 5])
+       *
+       * @param offset - offset to select
+       */
+      selectTextByOffset(offset: [number, number]): Chainable<Subject>;
+
+      /**
+       * Returns line wrap positions for passed element
+       *
+       * Usage
+       * cy.get('[data-cy=editorjs]')
+       *  .find('.ce-paragraph')
+       *  .getLineWrapPositions()
+       *
+       * @returns number[] - array of line wrap positions
+       */
+      getLineWrapPositions(): Chainable<number[]>;
     }
 
     interface ApplicationWindow {

test/cypress/tests/modules/InlineToolbar.cy.ts

@@ -0,0 +1,76 @@
+describe('Inline Toolbar', () => {
+  it('should appear aligned with left coord of selection rect', () => {
+    cy.createEditor({
+      data: {
+        blocks: [
+          {
+            type: 'paragraph',
+            data: {
+              text: 'First block text',
+            },
+          },
+        ],
+      },
+    });
+
+    cy.get('[data-cy=editorjs]')
+      .find('.ce-paragraph')
+      .selectText('block');
+
+    cy.get('.ce-inline-toolbar')
+      .should('be.visible')
+      .then(($toolbar) => {
+        const editorWindow = $toolbar.get(0).ownerDocument.defaultView;
+        const selection = editorWindow.getSelection();
+
+        const range = selection.getRangeAt(0);
+        const rect = range.getBoundingClientRect();
+
+        expect($toolbar.offset().left).to.closeTo(rect.left, 0.5);
+      });
+  });
+
+  it('should appear aligned with right side of text column when toolbar\'s width is not fit at right', () => {
+    cy.createEditor({
+      data: {
+        blocks: [
+          {
+            type: 'paragraph',
+            data: {
+              text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.',
+            },
+          },
+        ],
+      },
+    });
+
+    cy.get('[data-cy=editorjs]')
+      .find('.ce-paragraph')
+      .as('blockWrapper')
+      .getLineWrapPositions()
+      .then((lineWrapIndexes) => {
+        const firstLineWrapIndex = lineWrapIndexes[0];
+
+        /**
+         * Select last 5 chars of the first line
+         */
+        cy.get('[data-cy=editorjs]')
+          .find('.ce-paragraph')
+          .selectTextByOffset([firstLineWrapIndex - 5, firstLineWrapIndex - 1]);
+      });
+
+    cy.get('.ce-inline-toolbar')
+      .should('be.visible')
+      .then(($toolbar) => {
+        cy.get('@blockWrapper')
+          .then(($blockWrapper) => {
+            const blockWrapperRect = $blockWrapper.get(0).getBoundingClientRect();
+
+            /**
+             * Toolbar should be aligned with right side of text column
+             */
+            expect($toolbar.offset().left + $toolbar.width()).to.closeTo(blockWrapperRect.right, 3);
+          });
+      });
+  });
+});