Check if the item has property in cursorDidChange -> arrayToMap

It is possible for the content-kit-editor to report that a card is the
active section. Cards do not have a `tagName` property, and as a result
an error will be thrown when trying to camelize `undefined`.

addon/components/content-kit-editor/component.js

@@ -7,8 +7,10 @@ let { capitalize, camelize } = Ember.String;
 function arrayToMap(array, propertyName) {
   let map = Object.create(null);
   array.forEach(item => {
-    item = `is${capitalize(camelize(item[propertyName]))}`;
-    map[item] = true;
+    if (item[propertyName]) {
+      item = `is${capitalize(camelize(item[propertyName]))}`;
+      map[item] = true;
+    }
   });
   return map;
 }

tests/helpers/move-cursor-to.js

@@ -0,0 +1,15 @@
+export default function moveCursorTo(context, selector) {
+  let element = context.$(selector);
+  if (!element.length) {
+    throw new Error(`could not find element from selector ${selector}`);
+  } else if (element.length > 1) {
+    throw new Error(`ambiguous selector ${selector}`);
+  }
+
+  window.getSelection().removeAllRanges();
+
+  let node = element[0].firstChild;
+  let range = document.createRange();
+  range.selectNode(node);
+  window.getSelection().addRange(range);
+}

tests/helpers/simulate-mouse-up.js

@@ -0,0 +1,5 @@
+export default function simulateMouseup() {
+  let event = document.createEvent('MouseEvents');
+  event.initMouseEvent('mouseup');
+  document.dispatchEvent(event);
+}

tests/integration/components/content-kit-component-card/component-test.js

@@ -1,5 +1,7 @@
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
+import moveCursorTo from '../../../helpers/move-cursor-to';
+import simulateMouseup from '../../../helpers/simulate-mouse-up';
 
 moduleForComponent('content-kit-component-card', 'Integration | Component | content kit component card', {
   integration: true,
@@ -10,7 +12,8 @@ moduleForComponent('content-kit-component-card', 'Integration | Component | cont
     this.registry.register('template:components/my-card-editor', hbs`
       <button {{action data.cancel}}>Cancel</button>
     `);
-  }
+  },
+
 });
 
 test('it renders', function(assert) {
@@ -25,3 +28,91 @@ test('it renders', function(assert) {
   cancelButton.click();
   assert.ok(!!this.$('button:contains(Edit)').length, '`Edit` buttons found');
 });
+
+test('#activeSectionTagNames is correct', function(assert) {
+  let done = assert.async();
+
+  this.set('mobiledoc', {
+    version: '0.2.0',
+    sections: [
+      [],
+      [
+        [1, 'p', [[[], 0, "first paragraph"]]],
+        [1, 'blockquote', [[[], 0, "blockquote section"]]]
+      ]
+    ]
+  });
+  this.render(hbs`
+    {{#content-kit-editor mobiledoc=mobiledoc as |contentKit|}}
+      {{#if contentKit.activeSectionTagNames.isBlockquote}}
+        <div id='is-block-quote'>is block quote</div>
+      {{/if}}
+      {{#if contentKit.activeSectionTagNames.isP}}
+        <div id='is-p'>is p</div>
+      {{/if}}
+    {{/content-kit-editor}}
+  `);
+
+  moveCursorTo(this, 'blockquote:contains(blockquote section)');
+  simulateMouseup();
+
+  setTimeout(() => {
+    assert.ok(this.$('#is-block-quote').length, 'is block quote');
+
+    moveCursorTo(this, 'p:contains(first paragraph)');
+    simulateMouseup();
+
+    setTimeout(() => {
+      assert.ok(this.$('#is-p').length, 'is p');
+      done();
+    }, 10);
+  }, 10);
+});
+
+test('#activeSectionTagNames is correct when a card is selected', function(assert) {
+  let done = assert.async();
+
+  this.set('mobiledoc', {
+    version: '0.2.0',
+    sections: [
+      [],
+      [
+        [1, 'p', [[[], 0, "first paragraph"]]],
+        [10, 'test-card', {}]
+      ]
+    ]
+  });
+
+  this.set('cards', [{
+    name: 'test-card',
+    display: {
+      setup(element) {
+        let input = $('<input id="test-card-inner">');
+        $(element).append(input);
+        setTimeout(() => {
+          input.focus();
+        });
+      }
+    }
+  }]);
+
+  this.render(hbs`
+    {{#content-kit-editor cards=cards mobiledoc=mobiledoc as |contentKit|}}
+      {{#if contentKit.activeSectionTagNames.isP}}
+        <div id='is-p'>is p</div>
+      {{else}}
+        <div id='not-p'>not p</div>
+      {{/if}}
+    {{/content-kit-editor}}
+  `);
+
+  // Since the card focuses on itself, the editor will report the card
+  // as the active selection after mouseup, triggering a bug in the
+  // cursorDidChange handler of the content-kit-editor component
+  simulateMouseup();
+
+  setTimeout(() => {
+    assert.ok(this.$('#not-p').length, 'is not p');
+    done();
+  });
+});