Components: Add tests for createSlotFill

components/slot-fill/test/index.js

@@ -0,0 +1,28 @@
+/**
+ * External dependecies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import { createSlotFill, Fill, Slot } from '../';
+
+describe( 'createSlotFill', () => {
+	const SLOT_NAME = 'MyFill';
+	const MyFill = createSlotFill( SLOT_NAME );
+
+	test( 'should match snapshot for Fill', () => {
+		const wrapper = shallow( <MyFill /> );
+
+		expect( wrapper.type() ).toBe( Fill );
+		expect( wrapper ).toHaveProp( 'name', SLOT_NAME );
+	} );
+
+	test( 'should match snapshot for Slot', () => {
+		const wrapper = shallow( <MyFill.Slot /> );
+
+		expect( wrapper.type() ).toBe( Slot );
+		expect( wrapper ).toHaveProp( 'name', SLOT_NAME );
+	} );
+} );

components/slot-fill/test/slot.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { mount } from 'enzyme';
+import { isEmpty } from 'lodash';
 
 /**
  * Internal dependencies
@@ -103,6 +104,42 @@ describe( 'Slot', () => {
 		expect( onClose ).toHaveBeenCalledTimes( 1 );
 	} );
 
+	it( 'should render empty Fills without HTML wrapper when render props used', () => {
+		const element = mount(
+			<Provider>
+				<Slot name="chicken">
+					{ ( fills ) => ( ! isEmpty( fills ) && (
+						<blockquote>
+							{ fills }
+						</blockquote>
+					) ) }
+				</Slot>
+				<Fill name="chicken" />
+			</Provider>
+		);
+
+		expect( element.find( 'Slot > div' ).html() ).toBe( '<div></div>' );
+	} );
+
+	it( 'should render a string Fill with HTML wrapper when render props used', () => {
+		const element = mount(
+			<Provider>
+				<Slot name="chicken">
+					{ ( fills ) => ( fills && (
+						<blockquote>
+							{ fills }
+						</blockquote>
+					) ) }
+				</Slot>
+				<Fill name="chicken">
+					content
+				</Fill>
+			</Provider>
+		);
+
+		expect( element.find( 'Slot > div' ).html() ).toBe( '<div><blockquote>content</blockquote></div>' );
+	} );
+
 	it( 'should re-render Slot when not bubbling virtually', () => {
 		const element = mount(
 			<Provider>

editor/components/block-inspector/index.js

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { isEmpty } from 'lodash';
 import { connect } from 'react-redux';
 
 /**
@@ -44,7 +45,7 @@ const BlockInspector = ( { selectedBlock, count } ) => {
 		</div>,
 		<InspectorControls.Slot key="inspector-controls" />,
 		<InspectorAdvancedControls.Slot key="inspector-advanced-controls">
-			{ ( fills ) => fills.length && (
+			{ ( fills ) => ! isEmpty( fills ) && (
 				<PanelBody
 					className="editor-block-inspector__advanced"
 					title={ __( 'Advanced' ) }