From e19dd6c5dd3079f6881bc364e30a29662abd6b9c Mon Sep 17 00:00:00 2001 From: Cory Forsyth Date: Thu, 10 Sep 2015 11:56:51 -0400 Subject: [PATCH] Refactor dom helpers, run some tests that were skipped in phantom --- src/js/utils/key.js | 9 ++++- src/js/views/prompt.js | 5 +-- tests/acceptance/editor-commands-test.js | 2 +- tests/acceptance/editor-sections-test.js | 2 +- tests/acceptance/editor-selections-test.js | 8 ++--- tests/helpers/dom.js | 39 ++++++++++------------ 6 files changed, 33 insertions(+), 32 deletions(-) diff --git a/src/js/utils/key.js b/src/js/utils/key.js index a0d230763..2fb61fcb4 100644 --- a/src/js/utils/key.js +++ b/src/js/utils/key.js @@ -6,7 +6,8 @@ export const DIRECTION = { export const MODIFIERS = { META: 1, // also called "command" on OS X - CTRL: 2 + CTRL: 2, + SHIFT: 3 }; /** @@ -49,12 +50,18 @@ const Key = class Key { return this.keyCode === Keycodes.ENTER; } + isShift() { + return this.hasModifier(MODIFIERS.SHIFT); + } + hasModifier(modifier) { switch (modifier) { case MODIFIERS.META: return this.metaKey; case MODIFIERS.CTRL: return this.ctrlKey; + case MODIFIERS.SHIFT: + return this.shiftKey; default: throw new Error(`Cannot check for unknown modifier ${modifier}`); } diff --git a/src/js/views/prompt.js b/src/js/views/prompt.js index 97cfe7b0a..c088d685e 100644 --- a/src/js/views/prompt.js +++ b/src/js/views/prompt.js @@ -1,7 +1,7 @@ import View from './view'; import { restoreRange } from '../utils/selection-utils'; import { createDiv, positionElementToRect } from '../utils/element-utils'; -import Keycodes from '../utils/keycodes'; +import Key from '../utils/key'; var container = document.body; var hiliter = createDiv('ck-editor-hilite'); @@ -26,9 +26,10 @@ class Prompt extends View { e.stopPropagation(); }); this.addEventListener(this.element, 'keyup', (e) => { + const key = Key.fromEvent(e); const entry = this.element.value; - if (entry && this.range && !e.shiftKey && e.which === Keycodes.ENTER) { + if (entry && this.range && !key.isShift() && key.isEnter()) { restoreRange(this.range); this.doComplete(entry); } diff --git a/tests/acceptance/editor-commands-test.js b/tests/acceptance/editor-commands-test.js index 3e68af8eb..6c5bdc8dd 100644 --- a/tests/acceptance/editor-commands-test.js +++ b/tests/acceptance/editor-commands-test.js @@ -226,7 +226,7 @@ Helpers.skipInPhantom('highlight text, click "link" button shows input for URL, const input = assert.hasElement('.ck-toolbar-prompt input'); const url = 'http://google.com'; $(input).val(url); - Helpers.dom.triggerKeyEvent(input[0], 'keyup'); + Helpers.dom.triggerEnterKeyupEvent(input[0]); assert.toolbarHidden(); diff --git a/tests/acceptance/editor-sections-test.js b/tests/acceptance/editor-sections-test.js index af7b14c28..317cfec4b 100644 --- a/tests/acceptance/editor-sections-test.js +++ b/tests/acceptance/editor-sections-test.js @@ -198,7 +198,7 @@ test('hitting enter in a section creates a new basic section', (assert) => { }); // Phantom does not recognize toggling contenteditable off -Helpers.skipInPhantom('deleting across 2 sections does nothing if editing is disabled', (assert) => { +test('deleting across 2 sections does nothing if editing is disabled', (assert) => { editor = new Editor({mobiledoc: mobileDocWith2Sections}); editor.render(editorElement); editor.disableEditing(); diff --git a/tests/acceptance/editor-selections-test.js b/tests/acceptance/editor-selections-test.js index a355ffeb1..e02bd8ba2 100644 --- a/tests/acceptance/editor-selections-test.js +++ b/tests/acceptance/editor-selections-test.js @@ -265,7 +265,7 @@ test('selecting text across sections and hitting enter deletes and moves cursor }); }); -Helpers.skipInPhantom('keystroke of printable character while text is selected deletes the text', (assert) => { +test('keystroke of printable character while text is selected deletes the text', (assert) => { const done = assert.async(); editor = new Editor({mobiledoc: mobileDocWith2Sections}); editor.render(editorElement); @@ -284,11 +284,9 @@ Helpers.skipInPhantom('keystroke of printable character while text is selected d Helpers.dom.selectText('section', firstSectionTextNode, 'secon', secondSectionTextNode); - const key = 'A'; - const charCodeA = 65; - Helpers.dom.triggerKeyEvent(document, 'keydown', charCodeA, key); + Helpers.dom.insertText(editor, 'X'); - assert.ok($(`#editor h2:contains(first ${key}d section)`).length, + assert.ok($(`#editor h2:contains(first Xd section)`).length, 'updates the section'); done(); diff --git a/tests/helpers/dom.js b/tests/helpers/dom.js index afd3a3857..14200882c 100644 --- a/tests/helpers/dom.js +++ b/tests/helpers/dom.js @@ -3,8 +3,7 @@ const TEXT_NODE = 3; import { clearSelection } from 'content-kit-editor/utils/selection-utils'; import { walkDOMUntil } from 'content-kit-editor/utils/dom-utils'; import KEY_CODES from 'content-kit-editor/utils/keycodes'; -import { MODIFIERS } from 'content-kit-editor/utils/key'; -import isPhantom from './is-phantom'; +import { DIRECTION, MODIFIERS } from 'content-kit-editor/utils/key'; function selectRange(startNode, startOffset, endNode, endOffset) { clearSelection(); @@ -76,12 +75,11 @@ function createKeyEvent(eventType, keyCode) { return oEvent; } -function triggerKeyEvent(node, eventType, keyCode=KEY_CODES.ENTER, character=null) { +function triggerEnterKeyupEvent(node) { + const keyCode = KEY_CODES.ENTER; + const eventType = 'keyup'; let oEvent = createKeyEvent(eventType, keyCode); node.dispatchEvent(oEvent); - if (character) { - document.execCommand('insertText', false, character); - } } function _buildDOM(tagName, attributes={}, children=[]) { @@ -130,26 +128,22 @@ function getCursorPosition() { }; } -function triggerDelete(editor) { +function triggerDelete(editor, direction=DIRECTION.BACKWARD) { if (!editor) { throw new Error('Must pass `editor` to `triggerDelete`'); } - if (isPhantom()) { - // simulate deletion for phantomjs - let event = { preventDefault() {} }; - editor.handleDeletion(event); - } else { - triggerKeyEvent(editor.element, 'keydown', KEY_CODES.BACKSPACE); - } + const keyCode = direction === DIRECTION.BACKWARD ? KEY_CODES.BACKSPACE : + KEY_CODES.DELETE; + const event = { keyCode, preventDefault() {} }; + editor.triggerEvent(editor.element, 'keydown', event); +} + +function triggerForwardDelete(editor) { + return triggerDelete(editor, DIRECTION.FORWARD); } function triggerEnter(editor) { if (!editor) { throw new Error('Must pass `editor` to `triggerEnter`'); } - if (isPhantom()) { - // simulate event when testing with phantom - let event = { preventDefault() {} }; - editor.handleNewline(event); - } else { - triggerKeyEvent(editor.element, 'keydown', KEY_CODES.ENTER); - } + const event = { preventDefault() {}, keyCode: KEY_CODES.ENTER }; + editor.triggerEvent(editor.element, 'keydown', event); } function insertText(editor, string) { @@ -181,12 +175,13 @@ const DOMHelper = { selectText, clearSelection, triggerEvent, - triggerKeyEvent, + triggerEnterKeyupEvent, build, KEY_CODES, getCursorPosition, getSelectedText, triggerDelete, + triggerForwardDelete, triggerEnter, insertText, triggerKeyCommand