diff --git a/lib/decorators/placeholders.js b/lib/decorators/placeholders.js index fc664cb2c..a9642ca3e 100644 --- a/lib/decorators/placeholders.js +++ b/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 { diff --git a/lib/decorators/placeholders.test.js b/lib/decorators/placeholders.test.js index 0afa0f642..458f0b0c3 100644 --- a/lib/decorators/placeholders.test.js +++ b/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);