tests for Slash

docs/CHANGELOG.md

@@ -5,7 +5,7 @@
 - `New` — Editor Config now has the `style.nonce` attribute that could be used to allowlist editor style tag for Content Security Policy "style-src"
 - `New` — Toolbox now will be opened by '/' in empty Block instead of Tab
 - `New` — Block Tunes now will be opened by 'CMD+/' instead of Tab in non-empty block
-- `New` — Tab now will navigate through Blocks. In last block Tab will navigate to the next page input.
+- `New` — Tab now will navigate through Blocks. In last block Tab will navigate to the next input on page.
 - `Fix` — Passing an empty array via initial data or `blocks.render()` won't break the editor
 - `Fix` — Layout did not shrink when a large document cleared in Chrome
 - `Fix` — Multiple Tooltip elements creation fixed
@@ -14,7 +14,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
-- `Improvement` — Now you can set focus via arrows/Tab to "contentless" (decorative) blocks like Delimiter that has no inputs.
+- `Improvement` — Now you can set focus via arrows/Tab to "contentless" (decorative) blocks like Delimiter which have no inputs.
 - `Improvement` — 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.
 - `Refactoring` — `ce-block--focused` class toggling removed as unused.
 

src/components/modules/toolbar/blockSettings.ts

@@ -78,6 +78,10 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
    */
   public make(): void {
     this.nodes.wrapper = $.make('div', [ this.CSS.settings ]);
+
+    if (import.meta.env.MODE === 'test') {
+      this.nodes.wrapper.setAttribute('data-cy', 'block-tunes');
+    }
   }
 
   /**

src/components/ui/toolbox.ts

@@ -154,6 +154,10 @@ export default class Toolbox extends EventsDispatcher<ToolboxEventMap> {
     this.nodes.toolbox = this.popover.getElement();
     this.nodes.toolbox.classList.add(Toolbox.CSS.toolbox);
 
+    if (import.meta.env.MODE === 'test') {
+      this.nodes.toolbox.setAttribute('data-cy', 'toolbox');
+    }
+
     return this.nodes.toolbox;
   }
 

src/components/utils/popover/index.ts

@@ -212,8 +212,8 @@ export default class Popover extends EventsDispatcher<PopoverEventMap> {
   /**
    * Returns HTML element corresponding to the popover
    */
-  public getElement(): HTMLElement | null {
-    return this.nodes.wrapper;
+  public getElement(): HTMLElement {
+    return this.nodes.wrapper as HTMLElement;
   }
 
   /**
@@ -286,6 +286,10 @@ export default class Popover extends EventsDispatcher<PopoverEventMap> {
   private make(): void {
     this.nodes.popover = Dom.make('div', [ Popover.CSS.popover ]);
 
+    if (import.meta.env.MODE === 'test') {
+      this.nodes.popover.setAttribute('data-cy', 'popover');
+    }
+
     this.nodes.nothingFoundMessage = Dom.make('div', [ Popover.CSS.nothingFoundMessage ], {
       textContent: this.messages.nothingFound,
     });

test/cypress/tests/modules/BlockEvents/Slash.cy.ts

@@ -0,0 +1,87 @@
+describe('Slash keydown', function () {
+  describe('pressed in empty block', function () {
+    it('should open Toolbox', () => {
+      cy.createEditor({
+        data: {
+          blocks: [
+            {
+              type: 'paragraph',
+              data: {
+                text: '',
+              },
+            },
+          ],
+        },
+      });
+
+      cy.get('[data-cy=editorjs]')
+        .find('.ce-paragraph')
+        .click()
+        .type('/');
+
+      cy.get('[data-cy="toolbox"]')
+        .get('[data-cy="popover"]')
+        .should('be.visible');
+    });
+  });
+
+  describe('pressed in non-empty block', function () {
+    it('should not open Toolbox', () => {
+      cy.createEditor({
+        data: {
+          blocks: [
+            {
+              type: 'paragraph',
+              data: {
+                text: 'Hello',
+              },
+            },
+          ],
+        },
+      });
+
+      cy.get('[data-cy=editorjs]')
+        .find('.ce-paragraph')
+        .click()
+        .type('/');
+
+      cy.get('[data-cy="toolbox"]')
+        .get('[data-cy="popover"]')
+        .should('not.be.visible');
+
+      /**
+       * Block content should contain slash
+       */
+      cy.get('[data-cy=editorjs]')
+        .find('.ce-paragraph')
+        .invoke('text')
+        .should('eq', 'Hello/');
+    });
+  });
+});
+
+describe('CMD+Slash keydown', function () {
+  it('should open Block Tunes', () => {
+    cy.createEditor({
+      data: {
+        blocks: [
+          {
+            type: 'paragraph',
+            data: {
+              text: '',
+            },
+          },
+        ],
+      },
+    });
+
+    cy.get('[data-cy=editorjs]')
+      .find('.ce-paragraph')
+      .click()
+      .type('{cmd}/');
+
+    cy.get('[data-cy="block-tunes"]')
+      .get('[data-cy="popover"]')
+      .should('be.visible');
+  });
+});