fix page-specific placeholders when referenced with layout uris

lib/decorators/placeholders.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import _ from 'lodash';
+import store from '../core-data/store';
 import { editAttr, placeholderAttr, placeholderProp, fieldProp, componentListProp, componentProp } from '../utils/references';
 import { get } from '../core-data/groups';
 import { isEmpty } from '../utils/comparators';
@@ -124,12 +125,17 @@ export function isGroupEmpty(fields, placeholder, path) {
 /**
  * test to see if a component property is empty
  * @param  {array|string}  field (string means it's an alias to a page area)
+ * @param {object} storeOverride for testing
  * @return {Boolean}
  */
-function isComponentListEmpty(field) {
-  return _.isEmpty(field);
-  // todo: I'm not sure if this will work for page areas in layouts,
-  // so please test against that before releasing
+function isComponentListEmpty(field, storeOverride) {
+  if (_.isString(field)) {
+    // list is in the page! fetch the page data
+    return _.isEmpty(_.get(storeOverride, `state.page.data['${field}']`, []));
+  } else {
+    // list is in the component / layout
+    return _.isEmpty(field);
+  }
 }
 
 /**
@@ -145,9 +151,10 @@ function isComponentPropEmpty(field) {
  * determine if a placeholder is needed
  * @param  {string}  uri
  * @param  {string}  path to field/group
+ * @param {object} storeOverride for testing
  * @return {Boolean}
  */
-export function hasPlaceholder(uri, path) {
+export function hasPlaceholder(uri, path, storeOverride = store) {
   const group = get(uri, path),
     fields = group.fields,
     schema = group.schema,
@@ -177,7 +184,7 @@ export function hasPlaceholder(uri, path) {
   } else if (isGroup) {
     return isGroupEmpty(fields, placeholder, path);
   } else if (isComponentList) {
-    return isComponentListEmpty(fields[path], uri, path);
+    return isComponentListEmpty(fields[path], storeOverride);
   } else if (isComponentProp) {
     return isComponentPropEmpty(fields[path]);
   } else {

lib/decorators/placeholders.test.js

@@ -195,12 +195,29 @@ describe('placeholders', () => {
     });
 
     it('returns true if empty component list', () => {
-      // note: this may not currently work for component lists in the layout that alias to page areas
-      // todo: check this and update if necessary
       groups.get.returns({ fields: { bar: null }, schema: { [componentListProp]: true, [placeholderProp]: true } });
       expect(fn('foo', 'bar')).to.equal(true);
     });
 
+    it('returns false if non-empty component list', () => {
+      groups.get.returns({ fields: { bar: ['something'] }, schema: { [componentListProp]: true, [placeholderProp]: true } });
+      expect(fn('foo', 'bar')).to.equal(false);
+    });
+
+    it('returns true if empty page-specific component list', () => {
+      // note: this may not currently work for component lists in the layout that alias to page areas
+      // todo: check this and update if necessary
+      groups.get.returns({ fields: { bar: 'bar' }, schema: { [componentListProp]: true, [placeholderProp]: true } });
+      expect(fn('foo', 'bar', { state: { page: { data: { bar: [] }}}})).to.equal(true);
+    });
+
+    it('returns false if non-empty page-specific component list', () => {
+      // note: this may not currently work for component lists in the layout that alias to page areas
+      // todo: check this and update if necessary
+      groups.get.returns({ fields: { bar: 'bar' }, schema: { [componentListProp]: true, [placeholderProp]: true } });
+      expect(fn('foo', 'bar', { state: { page: { data: { bar: ['something'] }}}})).to.equal(false);
+    });
+
     it('returns true if empty component prop', () => {
       groups.get.returns({ fields: { bar: null }, schema: { [componentProp]: true, [placeholderProp]: true } });
       expect(fn('foo', 'bar')).to.equal(true);