Add insertText and run ember-mobiledoc-kit editor helpers

README.md

@@ -294,6 +294,32 @@ The component will be provided with the following `attrs`:
   * `editor` A reference to the [mobiledoc-kit](https://github.com/bustlelabs/mobiledoc-kit)
   * `postModel` A reference to this card's model in the editor's abstract tree. This may be necessary to do programmatic editing (such as moving the card via the `postEditor#moveSection` API that Mobiledoc editor provides)
 
+### Test Helpers
+
+ember-mobiledoc-editor exposes two test helpers for use in your acceptance tests:
+  * `insertText(editorElement, text)` -- inserts text into the editor (at the end)
+  * `run(editorElement, callback)` -- equivalent to [`editor.run`](http://bustlelabs.github.io/mobiledoc-kit/demo/docs/Editor.html#run), it calls the callback with the `postEditor`
+
+Example usage:
+```javascript
+// acceptance test
+import { insertText, run } from '../../helpers/ember-mobiledoc-editor';
+
+test('visit /', function(assert) {
+  visit('/');
+  andThen(() => {
+    let editorEl = find('.mobiledoc-kit')[0];
+    return insertText(editorEl, 'here is some text');
+    /* Or:
+      return run(editorEl, (postEditor) => ...);
+    */
+  });
+  andThen(() => {
+    // assert text inserted, etc.
+  });
+});
+```
+
 ### Developing ember-mobiledoc-editor
 
 Releasing a new version:

addon/components/mobiledoc-editor/component.js

@@ -14,6 +14,8 @@ export const REMOVE_ATOM_HOOK = 'removeAtomComponent';
 export const WILL_CREATE_EDITOR_ACTION = 'will-create-editor';
 export const DID_CREATE_EDITOR_ACTION = 'did-create-editor';
 
+export const TESTING_EXPANDO_PROPERTY = '__mobiledoc_kit_editor';
+
 const EDITOR_CARD_SUFFIX = '-editor';
 const EMPTY_MOBILEDOC = {
   version: MOBILEDOC_VERSION,
@@ -262,6 +264,7 @@ export default Component.extend({
       editor.render(editorElement);
       this._isRenderingEditor = false;
     }
+    this._setExpandoProperty(editor);
   },
 
   willDestroyElement() {
@@ -316,5 +319,12 @@ export default Component.extend({
   _addCard(cardName, payload, editMode=false) {
     let editor = this.get('editor');
     editor.insertCard(cardName, payload, editMode);
+  },
+
+  _setExpandoProperty(editor) {
+    // Store a reference to the editor for the acceptance test helpers
+    if (this.element && Ember.testing) {
+      this.element[TESTING_EXPANDO_PROPERTY] = editor;
+    }
   }
 });

test-support/helpers/ember-mobiledoc-editor.js

@@ -0,0 +1,38 @@
+import Ember from 'ember';
+import { TESTING_EXPANDO_PROPERTY } from 'ember-mobiledoc-editor/components/mobiledoc-editor/component';
+
+function findEditor(element) {
+  do {
+    if (element[TESTING_EXPANDO_PROPERTY] ) {
+      return element[TESTING_EXPANDO_PROPERTY];
+    }
+    element = element.parentNode;
+  } while (!!element);
+
+  throw new Error('Unable to find ember-mobiledoc-editor from element');
+}
+
+export function insertText(element, text) {
+  let editor = findEditor(element);
+  return new Ember.RSVP.Promise(resolve => {
+    let { post } = editor;
+    editor.run(postEditor => {
+      if (editor.post.isBlank) {
+        let section = postEditor.builder.createMarkupSection('p');
+        postEditor.insertSectionBefore(post.sections, section);
+      }
+      postEditor.insertText(post.tailPosition(), text);
+    });
+
+    requestAnimationFrame(resolve);
+  });
+}
+
+export function run(element, callback) {
+  let editor = findEditor(element);
+  editor.run(callback);
+
+  return new Ember.RSVP.Promise(resolve => {
+    requestAnimationFrame(resolve);
+  });
+}

tests/acceptance/index-test.js

@@ -0,0 +1,52 @@
+import { test } from 'qunit';
+import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';
+import { insertText, run } from '../../tests/helpers/ember-mobiledoc-editor';
+
+moduleForAcceptance('Acceptance | /');
+
+test('visiting / and insertText', function(assert) {
+  assert.expect(3);
+
+  visit('/');
+
+  andThen(() => {
+    assert.equal(find('#has-changed').text().trim(), 'HAS CHANGED 0', 'precond - no change until insert text');
+    let editorEl = find('.mobiledoc-editor')[0];
+    return insertText(editorEl, 'abcdef');
+  });
+
+  andThen(() => {
+    assert.ok(find('.mobiledoc-editor:contains(abcdef)').length, 'inserts text');
+    assert.equal(find('#has-changed').text().trim(), 'HAS CHANGED 1');
+  });
+});
+
+test('visiting / and run', function(assert) {
+  assert.expect(4);
+
+  visit('/');
+
+  andThen(() => {
+    assert.equal(find('#has-changed').text().trim(), 'HAS CHANGED 0', 'precond - no change until insert text');
+
+    let editorEl = find('.mobiledoc-editor')[0];
+    return run(editorEl, postEditor => {
+      let { editor } = postEditor;
+      let { post } = editor;
+      let section = postEditor.builder.createMarkupSection('p');
+      postEditor.insertSectionBefore(post.sections, section);
+
+      let position = post.tailPosition();
+      position = postEditor.insertText(position, 'abc');
+      let em = postEditor.builder.createMarkup('em');
+      postEditor.insertTextWithMarkup(position, 'def', [em]);
+    });
+  });
+
+  andThen(() => {
+    assert.ok(find('.mobiledoc-editor:contains(abcdef)').length, 'inserts text');
+    assert.ok(find('.mobiledoc-editor em:contains(def)').length, 'inserts marked-up text');
+    assert.equal(find('#has-changed').text().trim(), 'HAS CHANGED 1');
+  });
+});
+

tests/dummy/app/controllers/application.js

@@ -0,0 +1,11 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  changeCount: 0,
+
+  actions: {
+    onChange() {
+      this.incrementProperty('changeCount');
+    }
+  }
+});

tests/dummy/app/templates/application.hbs

@@ -1,3 +1,3 @@
-<h2 id="title">Welcome to Ember</h2>
+{{mobiledoc-editor on-change=(action 'onChange')}}
 
-{{outlet}}
+<div id="has-changed">HAS CHANGED {{changeCount}}</div>