nymag · mheiber · May 10, 2017 · May 5, 2017 · May 5, 2017 · May 5, 2017
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
   },
   "scripts": {
     "lint": "eslint src",
-    "test": "npm run lint",
+    "test": "mocha; npm run lint",
     "watch": "webpack -w",
     "prepublish": "webpack -p"
   },
@@ -37,10 +37,13 @@
     "babel-core": "^6.14.0",
     "babel-loader": "^7.0.0",
     "babel-preset-es2015": "^6.14.0",
+    "chai": "^3.5.0",
     "css-loader": "^0.24.0",
     "eslint": "^3.3.1",
     "extract-text-webpack-plugin": "^2.1.0",
+    "jsdom": "^10.1.0",
     "lodash": "^4.14.2",
+    "mocha": "^3.3.0",
     "node-sass": "^3.8.0",
     "sass-loader": "^4.0.0",
     "style-loader": "^0.13.1",

diff --git a/src/index.js b/src/index.js
@@ -3,32 +3,32 @@ import {
 } from './mutationTypes';
 // import invisibleLists from './services/invisible-lists';
 import selectorService from './services/selector';
-import { closest } from '@nymag/dom';
 const PLUGIN_NAME = 'spaces-edit';
 
 window.kiln = window.kiln || {};
 window.kiln.plugins = window.kiln.plugins || {};
 
-// TODO: remove this
-window.kiln.on = window.kiln.on || function () {};
 window.kiln.plugins[PLUGIN_NAME] = function spaceEdit(store) {
   store.subscribe(function spaceEditHandleMutation(mutation, state) {
     // wrap in a `try` so the UI doesn't stop working entirely
-    // if the DOM scraping below doesn't work
+    // if the code below breaks
     try {
       switch (mutation.type) {
         case SELECT:
-          const el = mutation.payload,
-            ref = el.dataset.uri,
-            data = state.components[ref],
-            // find the <html> data-layout-uri attribute value
-            layoutRef = document.documentElement.dataset.layoutUri,
-            layoutData = state.components[layoutRef],
-            componentListName = closest(el, '[data-editable]').getAttribute('data-editable'),
-            componentList = layoutData[componentListName];
+          const {
+              el,
+              parentField,
+              parentURI,
+              uri
+            } = mutation.payload,
+            data = state.components[uri],
+            layoutData = state.components[parentURI],
+            componentListName = parentField.path,
+            componentList = layoutData[parentField.path],
+            componentListLayout = state.schemas.layout[componentListName];
 
           if (componentList) {
-            selectorService.updateSelector(el, {data, ref}, state.schemas.layout[componentListName]);
+            selectorService.updateSelector(el, {data, uri}, componentListLayout);
           }
           // TODO: fix implementation of invisibleLists
           // invisibleLists(el);

diff --git a/src/services/references.js b/src/services/references.js
@@ -8,7 +8,7 @@ const kilnUtils = window.kiln.utils;
  * the template (from template.hbs) to create a DOM element.
  * If the template is not found, returns `null`.
  * @return {Object | null}
- * @param {String} templateSelector
+ * @param {String} selector
  */
 function getFromTemplate(selector) {
   const el = document.querySelector(selector);

diff --git a/src/services/selector.js b/src/services/selector.js
@@ -8,12 +8,35 @@ var _ = require('lodash'),
   SpaceSettings = require('../controllers/space-settings-controller'),
   SpaceController = require('./../controllers/space-controller');
 
+/* helper, will go away when API changes */
+const addCreateSpaceButtonToPanel = clickHandler => panelEl => {
+  const createSpaceButton = references.getFromTemplate('.create-space');
+
+  panelEl.appendChild(createSpaceButton);
+  createSpaceButton.addEventListener('click', clickHandler);
+};
+
+/**
+ * TODO: swap this out with call to
+ * Kiln API for adding buttons when that API exists
+ *
+ * @param {Object} el
+ * @param {Object} options
+ * @param {Object} parent
+ *
+ */
 function addCreateSpaceButton(el, options, parent) {
-  const parentButton = dom.find(el, '.selected-actions'),
-    createSpaceButton = references.getFromTemplate('.create-space');
+  const clickHandler = createService.createSpace.bind(null, options, parent);
+
+  // we need to find the component settings panels (there are two) in the DOM,
+  // and we wait for a bit because the panel doesn't display
+  // right away
+  window.requestAnimationFrame(() => {
+    const settingsButtons = dom.findAll(document, '[title="Component Settings"]'),
+      panelEls = [].map.call(settingsButtons, el => el.parentElement);
 
-  parentButton.appendChild(createSpaceButton);
-  createSpaceButton.addEventListener('click', createService.createSpace.bind(null, options, parent));
+    panelEls.forEach(addCreateSpaceButtonToPanel(clickHandler));
+  });
 }
 
 /**
@@ -181,7 +204,7 @@ function updateSelector(el, options, parent) {
     SpaceController(el, parent);
     addToComponentList(el, options, parent);
   } else if (!_.isEmpty(availableSpaces)) { // if element is space sibling
-    // addAvailableSpaces(el, availableSpaces);
+    addAvailableSpaces(el, availableSpaces);
     addCreateSpaceButton(el, options, parent);
     // TODO: figure this out, now that we're using Vuex
     // we don't want it to be possible to add a space directly

diff --git a/test/mocha.opts b/test/mocha.opts
@@ -0,0 +1,4 @@
+--reporter spec
+--ui bdd
+--recursive
+src/**/*.test.js
diff --git a/test/setup.js b/test/setup.js
@@ -0,0 +1,3 @@
+'use strict';
+// don't truncate diffs
+chai.config.truncateThreshold = 0;