Skip to content

Commit

Permalink
Add toolbar test helpers, triggerDelete helper
Browse files Browse the repository at this point in the history
  • Loading branch information
@bantic
bantic committed Aug 7, 2015
1 parent 9998dbb commit dd412c9
Show file tree
Hide file tree
Showing 7 changed files with 111 additions and 90 deletions.
116 changes: 44 additions & 72 deletions tests/acceptance/editor-commands-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,34 +35,6 @@ module('Acceptance: Editor commands', {
}
});

function getToolbarButton(assert, name) {
let btnSelector = `.ck-toolbar-btn[title="${name}"]`;
return assert.hasElement(btnSelector);
}

function assertToolbarVisible(assert) {
return assert.hasElement(`.ck-toolbar`);
}

function assertToolbarHidden(assert) {
return assert.hasNoElement(`.ck-toolbar`);
}

function clickToolbarButton(assert, name) {
const button = getToolbarButton(assert, name);
Helpers.dom.triggerEvent(button[0], 'click');
}

function assertActiveToolbarButton(assert, buttonTitle) {
const button = getToolbarButton(assert, buttonTitle);
assert.ok(button.is('.active'), `button ${buttonTitle} is active`);
}

function assertInactiveToolbarButton(assert, buttonTitle) {
const button = getToolbarButton(assert, buttonTitle);
assert.ok(!button.is('.active'), `button ${buttonTitle} is not active`);
}

test('when text is highlighted, shows toolbar', (assert) => {
let done = assert.async();

Expand All @@ -80,7 +52,7 @@ test('highlight text, click "bold" button bolds text', (assert) => {
let done = assert.async();

setTimeout(() => {
clickToolbarButton(assert, 'bold');
Helpers.toolbar.clickButton(assert, 'bold');
assert.hasElement('#editor strong:contains(IS A)');

done();
Expand All @@ -91,7 +63,7 @@ test('highlight text, click "heading" button turns text into h2 header', (assert
const done = assert.async();

setTimeout(() => {
clickToolbarButton(assert, 'heading');
Helpers.toolbar.clickButton(assert, 'heading');
assert.hasElement('#editor h2:contains(THIS IS A TEST)');
assert.selectedText('THIS IS A TEST', 'expands selection to entire section');

Expand All @@ -103,25 +75,25 @@ test('highlighting heading text activates toolbar button', (assert) => {
const done = assert.async();

setTimeout(() => {
assertToolbarVisible(assert);
assertInactiveToolbarButton(assert, 'heading');
Helpers.toolbar.assertVisible(assert);
Helpers.toolbar.assertInactiveButton(assert, 'heading');

clickToolbarButton(assert, 'heading');
Helpers.toolbar.clickButton(assert, 'heading');

assertActiveToolbarButton(assert, 'heading');
Helpers.toolbar.assertActiveButton(assert, 'heading');

// FIXME must actually trigger the mouseup
Helpers.dom.clearSelection();
Helpers.dom.triggerEvent(document, 'mouseup');

setTimeout(() => {
assertToolbarHidden(assert);
Helpers.toolbar.assertHidden(assert);

Helpers.dom.selectText(selectedText, editorElement);
Helpers.dom.triggerEvent(document, 'mouseup');

setTimeout(() => {
assertActiveToolbarButton(assert, 'heading',
Helpers.toolbar.assertActiveButton(assert, 'heading',
'heading button is active when text is selected');

done();
Expand All @@ -134,11 +106,11 @@ test('when heading text is highlighted, clicking heading button turns it to plai
const done = assert.async();

setTimeout(() => {
clickToolbarButton(assert, 'heading');
Helpers.toolbar.clickButton(assert, 'heading');
assert.hasElement('#editor h2:contains(THIS IS A TEST)');

setTimeout(() => {
clickToolbarButton(assert, 'heading');
Helpers.toolbar.clickButton(assert, 'heading');

setTimeout(() => {
assert.hasNoElement('#editor h2:contains(THIS IS A TEST)');
Expand All @@ -155,22 +127,22 @@ test('clicking multiple heading buttons keeps the correct ones active', (assert)

setTimeout(() => {
// click subheading, makes its button active, changes the display
clickToolbarButton(assert, 'subheading');
Helpers.toolbar.clickButton(assert, 'subheading');
assert.hasElement('#editor h3:contains(THIS IS A TEST)');
assertActiveToolbarButton(assert, 'subheading');
assertInactiveToolbarButton(assert, 'heading');
Helpers.toolbar.assertActiveButton(assert, 'subheading');
Helpers.toolbar.assertInactiveButton(assert, 'heading');

// click heading, makes its button active and no others, changes display
clickToolbarButton(assert, 'heading');
Helpers.toolbar.clickButton(assert, 'heading');
assert.hasElement('#editor h2:contains(THIS IS A TEST)');
assertActiveToolbarButton(assert, 'heading');
assertInactiveToolbarButton(assert, 'subheading');
Helpers.toolbar.assertActiveButton(assert, 'heading');
Helpers.toolbar.assertInactiveButton(assert, 'subheading');

// click heading again, removes headline from display, no active buttons
clickToolbarButton(assert, 'heading');
Helpers.toolbar.clickButton(assert, 'heading');
assert.hasElement('#editor p:contains(THIS IS A TEST)');
assertInactiveToolbarButton(assert, 'heading');
assertInactiveToolbarButton(assert, 'subheading');
Helpers.toolbar.assertInactiveButton(assert, 'heading');
Helpers.toolbar.assertInactiveButton(assert, 'subheading');

done();
});
Expand All @@ -180,7 +152,7 @@ test('highlight text, click "subheading" button turns text into h3 header', (ass
const done = assert.async();

setTimeout(() => {
clickToolbarButton(assert, 'subheading');
Helpers.toolbar.clickButton(assert, 'subheading');
assert.hasElement('#editor h3:contains(THIS IS A TEST)');

done();
Expand All @@ -191,7 +163,7 @@ test('highlight text, click "quote" button turns text into blockquote', (assert)
const done = assert.async();

setTimeout(() => {
clickToolbarButton(assert, 'quote');
Helpers.toolbar.clickButton(assert, 'quote');
assert.hasElement('#editor blockquote:contains(THIS IS A TEST)');

done();
Expand All @@ -204,7 +176,7 @@ Helpers.skipInPhantom('highlight text, click "link" button shows input for URL,
const done = assert.async();

setTimeout(() => {
clickToolbarButton(assert, 'link');
Helpers.toolbar.clickButton(assert, 'link');
let input = assert.hasElement('.ck-toolbar-prompt input');
let url = 'http://google.com';
$(input).val(url);
Expand All @@ -220,22 +192,22 @@ test('highlighting bold text shows bold button as active', (assert) => {
const done = assert.async();

setTimeout(() => {
assertInactiveToolbarButton(assert, 'bold', 'precond - bold button is not active');
clickToolbarButton(assert, 'bold');
assertActiveToolbarButton(assert, 'bold');
Helpers.toolbar.assertInactiveButton(assert, 'bold', 'precond - bold button is not active');
Helpers.toolbar.clickButton(assert, 'bold');
Helpers.toolbar.assertActiveButton(assert, 'bold');

Helpers.dom.clearSelection();
Helpers.dom.triggerEvent(document, 'mouseup');

setTimeout(() => {
assertToolbarHidden(assert);
Helpers.toolbar.assertHidden(assert);

Helpers.dom.selectText(selectedText, editorElement);
Helpers.dom.triggerEvent(document, 'mouseup');

setTimeout(() => {
assertToolbarVisible(assert);
assertActiveToolbarButton(assert, 'bold');
Helpers.toolbar.assertVisible(assert);
Helpers.toolbar.assertActiveButton(assert, 'bold');

done();
});
Expand All @@ -247,20 +219,20 @@ test('click bold button applies bold to selected text', (assert) => {
const done = assert.async();

setTimeout(() => {
assertInactiveToolbarButton(assert, 'bold', 'precond - bold button is not active');
clickToolbarButton(assert, 'bold');
assertActiveToolbarButton(assert, 'bold');
Helpers.toolbar.assertInactiveButton(assert, 'bold', 'precond - bold button is not active');
Helpers.toolbar.clickButton(assert, 'bold');
Helpers.toolbar.assertActiveButton(assert, 'bold');

assert.hasNoElement('#editor strong:contains(THIS)');
assert.hasNoElement('#editor strong:contains(TEST)');
assert.hasElement('#editor strong:contains(IS A)');

assert.selectedText(selectedText);

clickToolbarButton(assert, 'bold');
Helpers.toolbar.clickButton(assert, 'bold');

assert.hasNoElement('#editor strong:contains(IS A)', 'bold text is no longer bold');
assertInactiveToolbarButton(assert, 'bold');
Helpers.toolbar.assertInactiveButton(assert, 'bold');

done();
});
Expand All @@ -270,19 +242,19 @@ test('can unbold part of a larger set of bold text', (assert) => {
const done = assert.async();

setTimeout(() => {
assertInactiveToolbarButton(assert, 'bold', 'precond - bold button is not active');
clickToolbarButton(assert, 'bold');
assertActiveToolbarButton(assert, 'bold');
Helpers.toolbar.assertInactiveButton(assert, 'bold', 'precond - bold button is not active');
Helpers.toolbar.clickButton(assert, 'bold');
Helpers.toolbar.assertActiveButton(assert, 'bold');

assert.hasElement('#editor strong:contains(IS A)');

Helpers.dom.selectText('S A', editorElement);
Helpers.dom.triggerEvent(document, 'mouseup');

setTimeout(() => {
assertToolbarVisible(assert);
assertActiveToolbarButton(assert, 'bold');
clickToolbarButton(assert, 'bold');
Helpers.toolbar.assertVisible(assert);
Helpers.toolbar.assertActiveButton(assert, 'bold');
Helpers.toolbar.clickButton(assert, 'bold');

assert.hasElement('#editor strong:contains(I)', 'unselected text is bold');
assert.hasNoElement('#editor strong:contains(IS A)', 'unselected text is bold');
Expand All @@ -297,16 +269,16 @@ test('can italicize text', (assert) => {
const done = assert.async();

setTimeout(() => {
assertInactiveToolbarButton(assert, 'italic');
clickToolbarButton(assert, 'italic');
Helpers.toolbar.assertInactiveButton(assert, 'italic');
Helpers.toolbar.clickButton(assert, 'italic');

assert.hasElement('#editor em:contains(IS A)');
assert.selectedText('IS A');
assertActiveToolbarButton(assert, 'italic');
Helpers.toolbar.assertActiveButton(assert, 'italic');

clickToolbarButton(assert, 'italic');
Helpers.toolbar.clickButton(assert, 'italic');
assert.hasNoElement('#editor em:contains(IS A)');
assertInactiveToolbarButton(assert, 'italic');
Helpers.toolbar.assertInactiveButton(assert, 'italic');

done();
});
Expand Down
20 changes: 5 additions & 15 deletions tests/acceptance/editor-selections-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ test('selecting an entire section and deleting removes it', (assert) => {
editor = new Editor(editorElement, {mobiledoc: mobileDocWith2Sections});

Helpers.dom.selectText('second section', editorElement);
Helpers.dom.triggerKeyEvent(document, 'keydown', Helpers.dom.KEY_CODES.DELETE);
Helpers.dom.triggerDelete(editor);

assert.hasElement('p:contains(first section)');
assert.hasNoElement('p:contains(second section)', 'deletes contents of second section');
Expand All @@ -81,7 +81,7 @@ test('selecting text in a section and deleting deletes it', (assert) => {
editor = new Editor(editorElement, {mobiledoc: mobileDocWith2Sections});

Helpers.dom.selectText('cond sec', editorElement);
Helpers.dom.triggerKeyEvent(document, 'keydown', Helpers.dom.KEY_CODES.DELETE);
Helpers.dom.triggerDelete(editor);

assert.hasElement('p:contains(first section)', 'first section unchanged');
assert.hasNoElement('p:contains(second section)', 'second section is no longer there');
Expand All @@ -103,24 +103,14 @@ test('selecting text across sections and deleting joins sections', (assert) => {

Helpers.dom.selectText('t section', firstSection,
'second s', secondSection);
Helpers.dom.triggerKeyEvent(document, 'keydown', Helpers.dom.KEY_CODES.DELETE);
Helpers.dom.triggerDelete(editor);

assert.hasElement('p:contains(firsection)');
assert.hasNoElement('p:contains(first section)');
assert.hasNoElement('p:contains(second section)');
assert.equal($('#editor p').length, 1, 'only 1 section after deleting to join');
});

function getToolbarButton(assert, name) {
let btnSelector = `.ck-toolbar-btn[title="${name}"]`;
return assert.hasElement(btnSelector);
}

function clickToolbarButton(assert, name) {
const button = getToolbarButton(assert, name);
Helpers.dom.triggerEvent(button[0], 'click');
}

test('selecting text across markers and deleting joins markers', (assert) => {
const done = assert.async();

Expand All @@ -130,7 +120,7 @@ test('selecting text across markers and deleting joins markers', (assert) => {
Helpers.dom.triggerEvent(document, 'mouseup');

setTimeout(() => {
clickToolbarButton(assert, 'bold');
Helpers.toolbar.clickButton(assert, 'bold');

let firstTextNode = editorElement
.childNodes[0] // p
Expand All @@ -144,7 +134,7 @@ test('selecting text across markers and deleting joins markers', (assert) => {
assert.equal(secondTextNode.textContent, 'ion', 'correct second text node');
Helpers.dom.selectText('t sect', firstTextNode,
'ion', secondTextNode);
Helpers.dom.triggerKeyEvent(document, 'keydown', Helpers.dom.KEY_CODES.DELETE);
Helpers.dom.triggerDelete(editor);

assert.hasElement('p:contains(firs)', 'deletes across markers');
assert.hasElement('strong:contains(rs)', 'maintains bold text');
Expand Down
16 changes: 15 additions & 1 deletion tests/helpers/dom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +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 isPhantom from './is-phantom';

function selectRange(startNode, startOffset, endNode, endOffset) {
clearSelection();
Expand Down Expand Up @@ -135,6 +136,16 @@ function getCursorPosition() {
};
}

function triggerDelete(editor) {
if (isPhantom()) {
// simulate deletion
let event = { preventDefault() {} };
editor.handleDeletion(event);
} else {
triggerKeyEvent(document, 'keydown', KEY_CODES.DELETE);
}
}

const DOMHelper = {
moveCursorTo,
selectText,
Expand All @@ -144,7 +155,10 @@ const DOMHelper = {
makeDOM,
KEY_CODES,
getCursorPosition,
getSelectedText
getSelectedText,
triggerDelete
};

export { triggerEvent };

export default DOMHelper;
3 changes: 3 additions & 0 deletions tests/helpers/is-phantom.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default () => {
return navigator.userAgent.indexOf('PhantomJS') !== -1;
};
4 changes: 2 additions & 2 deletions tests/helpers/skip-in-phantom.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
const { test } = QUnit;
import isPhantom from './is-phantom';

export default function(message, testFn) {
const isPhantom = navigator.userAgent.indexOf('PhantomJS') !== -1;
if (isPhantom) {
if (isPhantom()) {
message = '[SKIPPED in PhantomJS] ' + message;
testFn = (assert) => assert.ok(true);
}
Expand Down
Loading

0 comments on commit dd412c9

Please sign in to comment.