fix tests

docs/CHANGELOG.md

@@ -11,6 +11,7 @@
 - `Fix` — `blocks.render()` won't lead the `onChange` call in Safari
 - `Fix` — Editor wrapper element growing on the Inline Toolbar close
 - `Fix` — Fix errors thrown by clicks on a document when the editor is being initialized
+- `Fix` — Inline Toolbar sometimes opened in an incorrect position. Now it will be aligned by the left side of the selected text. And won't overflow the right side of the text column.
 
 ### 2.28.2
 

package.json

@@ -14,7 +14,8 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vite build --mode production",
+    "build:test": "vite build --mode test",
     "lint": "eslint src/ --ext .ts && yarn lint:tests",
     "lint:errors": "eslint src/ --ext .ts --quiet",
     "lint:fix": "eslint src/ --ext .ts --fix",
@@ -26,8 +27,8 @@
     "_tools:build": "git submodule foreach yarn build",
     "_tools:make": "yarn _tools:yarn && yarn _tools:build",
     "tools:update": "yarn _tools:checkout && yarn _tools:pull && yarn _tools:make",
-    "test:e2e": "yarn build && cypress run",
-    "test:e2e:open": "yarn build && cypress open",
+    "test:e2e": "yarn build:test && cypress run",
+    "test:e2e:open": "yarn build:test && cypress open",
     "devserver:start": "yarn build && node ./devserver.js"
   },
   "author": "CodeX",

src/components/modules/toolbar/inline.ts

@@ -224,6 +224,11 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
       this.CSS.inlineToolbar,
       ...(this.isRtl ? [ this.Editor.UI.CSS.editorRtlFix ] : []),
     ]);
+
+    if (import.meta.env.MODE === 'test') {
+      this.nodes.wrapper.setAttribute('data-cy', 'inline-toolbar');
+    }
+
     /**
      * Creates a different wrapper for toggler and buttons.
      */

src/env.d.ts

@@ -0,0 +1,11 @@
+interface ImportMetaEnv {
+  /**
+   * Build environment.
+   * For example, used to detect building for tests and add "data-cy" attributes for DOM querying.
+   */
+  readonly MODE: "test" | "development" | "production";
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

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

@@ -17,7 +17,7 @@ describe('Inline Toolbar', () => {
       .find('.ce-paragraph')
       .selectText('block');
 
-    cy.get('.ce-inline-toolbar')
+    cy.get('[data-cy="inline-toolbar"]')
       .should('be.visible')
       .then(($toolbar) => {
         const editorWindow = $toolbar.get(0).ownerDocument.defaultView;
@@ -59,7 +59,7 @@ describe('Inline Toolbar', () => {
           .selectTextByOffset([firstLineWrapIndex - 5, firstLineWrapIndex - 1]);
       });
 
-    cy.get('.ce-inline-toolbar')
+    cy.get('[data-cy="inline-toolbar"]')
       .should('be.visible')
       .then(($toolbar) => {
         cy.get('@blockWrapper')