test(slash): add cases about keyboard

lakejs · Aug 25, 2024 · 73a3a34 · 73a3a34
1 parent a15b1a2
commit 73a3a34
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 4 deletions.
diff --git a/tests/plugins/escape-key.test.ts b/tests/plugins/escape-key.test.ts
@@ -12,6 +12,7 @@ describe('plugins / escape-key', () => {
       content,
       output,
       editor => {
+        editor.focus();
         expect(editor.hasFocus).to.equal(true);
         editor.keystroke.keydown('escape');
         expect(editor.hasFocus).to.equal(false);

diff --git a/tests/plugins/slash.test.ts b/tests/plugins/slash.test.ts
@@ -102,6 +102,20 @@ describe('plugins / slash', () => {
     expect(value).to.equal('<h1><focus /><br /></h1>');
   });
 
+  it('should set current block to heading 1 using enter key', () => {
+    editor.setValue('<p>/heading<focus /></p>');
+    const event = new KeyboardEvent('keyup', {
+      key: '/',
+    });
+    editor.container.emit('keyup', event);
+    document.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'Enter',
+    }));
+    expect(editor.popupContainer.find('.lake-slash-popup').computedCSS('display')).to.equal('none');
+    const value = editor.getValue();
+    expect(value).to.equal('<h1><focus /><br /></h1>');
+  });
+
   it('should set current block to heading 6', () => {
     editor.setValue('<p>/heading 6<focus /></p>');
     editor.container.emit('keyup', new KeyboardEvent('keyup', {

diff --git a/tests/ui/slash-popup.test.ts b/tests/ui/slash-popup.test.ts
@@ -30,7 +30,7 @@ describe('ui / slash-popup', () => {
     range.selectNodeContents(editor.container);
     popup.show(range);
     expect(popup.visible).to.equal(true);
-    const firstItem = editor.popupContainer.find('.lake-slash-item').eq(0);
+    const firstItem = popup.container.find('.lake-slash-item').eq(0);
     firstItem.emit('mouseenter');
     expect(firstItem.hasClass('lake-slash-item-selected')).to.equal(true);
     firstItem.emit('mouseleave');
@@ -44,6 +44,38 @@ describe('ui / slash-popup', () => {
     editor.unmount();
   });
 
+  it('keydown event: should select an item using keyboard', () => {
+    const editor = new Editor({
+      root: rootNode,
+      value: '<p>/<focus /></p>',
+    });
+    editor.render();
+    const popup = new SlashPopup({
+      editor,
+    });
+    const range = new Range();
+    range.selectNodeContents(editor.container);
+    popup.show(range);
+    document.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'ArrowDown',
+    }));
+    document.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'ArrowDown',
+    }));
+    expect(popup.container.find('.lake-slash-item').eq(2).hasClass('lake-slash-item-selected')).to.equal(true);
+    document.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'ArrowUp',
+    }));
+    expect(popup.container.find('.lake-slash-item').eq(1).hasClass('lake-slash-item-selected')).to.equal(true);
+    expect(popup.visible).to.equal(true);
+    document.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'Escape',
+    }));
+    expect(popup.visible).to.equal(false);
+    popup.unmount();
+    editor.unmount();
+  });
+
   it('show method: should search an item', () => {
     const editor = new Editor({
       root: rootNode,
@@ -56,7 +88,7 @@ describe('ui / slash-popup', () => {
     const range = new Range();
     range.selectNodeContents(editor.container);
     popup.show(range, 'code block');
-    expect(editor.popupContainer.find('.lake-slash-item').length).to.equal(1);
+    expect(popup.container.find('.lake-slash-item').length).to.equal(1);
     popup.unmount();
     editor.unmount();
   });
@@ -73,9 +105,9 @@ describe('ui / slash-popup', () => {
     const range = new Range();
     range.selectNodeContents(editor.container);
     popup.show(range);
-    expect(editor.popupContainer.find('.lake-slash-item').length > 1).to.equal(true);
+    expect(popup.container.find('.lake-slash-item').length > 1).to.equal(true);
     popup.update('code block');
-    expect(editor.popupContainer.find('.lake-slash-item').length).to.equal(1);
+    expect(popup.container.find('.lake-slash-item').length).to.equal(1);
     popup.unmount();
     editor.unmount();
   });