Added test cases and other improvements.

WordPress · May 30, 2018 · a943aa6 · a943aa6
1 parent 0334269
commit a943aa6
Show file tree

Hide file tree

Showing 3 changed files with 175 additions and 15 deletions.
diff --git a/blocks/store/test/selectors.js b/blocks/store/test/selectors.js
@@ -0,0 +1,137 @@
+/**
+ * Internal dependencies
+ */
+import { getChildBlockNames } from '../selectors';
+
+describe( 'selectors', () => {
+	describe( 'getChildBlockNames', () => {
+		it( 'should return an empty array if state is empty', () => {
+			const state = {};
+
+			expect( getChildBlockNames( state, 'parent1' ) ).toHaveLength( 0 );
+		} );
+
+		it( 'should return an empty array if no childs exist', () => {
+			const state = {
+				blockTypes: [
+					{
+						name: 'child1',
+						parent: [ 'parent1' ],
+					},
+					{
+						name: 'child2',
+						parent: [ 'parent2' ],
+					},
+					{
+						name: 'parent3',
+					},
+				],
+			};
+
+			expect( getChildBlockNames( state, 'parent3' ) ).toHaveLength( 0 );
+		} );
+
+		it( 'should return an empty array if the parent block is not found', () => {
+			const state = {
+				blockTypes: [
+					{
+						name: 'child1',
+						parent: [ 'parent1' ],
+					},
+					{
+						name: 'parent1',
+					},
+				],
+			};
+
+			expect( getChildBlockNames( state, 'parent3' ) ).toHaveLength( 0 );
+		} );
+
+		it( 'should return an array with the child block names', () => {
+			const state = {
+				blockTypes: [
+					{
+						name: 'child1',
+						parent: [ 'parent1' ],
+					},
+					{
+						name: 'child2',
+						parent: [ 'parent2' ],
+					},
+					{
+						name: 'child3',
+						parent: [ 'parent1' ],
+					},
+					{
+						name: 'child4',
+					},
+					{
+						name: 'parent1',
+					},
+					{
+						name: 'parent2',
+					},
+				],
+			};
+
+			expect( getChildBlockNames( state, 'parent1' ) ).toEqual( [ 'child1', 'child3' ] );
+		} );
+
+		it( 'should return an array with the child block names even if only one child exists', () => {
+			const state = {
+				blockTypes: [
+					{
+						name: 'child1',
+						parent: [ 'parent1' ],
+					},
+					{
+						name: 'child2',
+						parent: [ 'parent2' ],
+					},
+					{
+						name: 'child4',
+					},
+					{
+						name: 'parent1',
+					},
+					{
+						name: 'parent2',
+					},
+				],
+			};
+
+			expect( getChildBlockNames( state, 'parent1' ) ).toEqual( [ 'child1' ] );
+		} );
+
+		it( 'should return an array with the child block names even if childs have multiple parents', () => {
+			const state = {
+				blockTypes: [
+					{
+						name: 'child1',
+						parent: [ 'parent1' ],
+					},
+					{
+						name: 'child2',
+						parent: [ 'parent1', 'parent2' ],
+					},
+					{
+						name: 'child3',
+						parent: [ 'parent1' ],
+					},
+					{
+						name: 'child4',
+					},
+					{
+						name: 'parent1',
+					},
+					{
+						name: 'parent2',
+					},
+				],
+			};
+
+			expect( getChildBlockNames( state, 'parent1' ) ).toEqual( [ 'child1', 'child2', 'child3' ] );
+			expect( getChildBlockNames( state, 'parent2' ) ).toEqual( [ 'child2' ] );
+		} );
+	} );
+} );
diff --git a/editor/components/inserter/child-blocks.js b/editor/components/inserter/child-blocks.js
@@ -0,0 +1,29 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import ItemList from './item-list';
+import BlockIcon from '../block-icon';
+
+function ChildBlocks( { rootBlockIcon, rootBlockTitle, items, ...props } ) {
+	if ( ! items || ! items.length ) {
+		return null;
+	}
+	return (
+		<div className="editor-inserter__child-blocks">
+			{ ( rootBlockIcon || rootBlockTitle ) && (
+				<div className="editor-inserter__parent-block-header">
+					{ rootBlockIcon && (
+						<div className="editor-inserter__parent-block-icon">
+							<BlockIcon icon={ rootBlockIcon } />
+						</div>
+					) }
+					{ rootBlockTitle && <h2>{ rootBlockTitle }</h2> }
+				</div>
+			) }
+			<ItemList items={ items } { ...props } />
+		</div>
+	);
+}
+
+export default ChildBlocks;
diff --git a/editor/components/inserter/menu.js b/editor/components/inserter/menu.js
@@ -34,7 +34,7 @@ import { withDispatch, withSelect } from '@wordpress/data';
 import './style.scss';
 import BlockPreview from '../block-preview';
 import ItemList from './item-list';
-import BlockIcon from '../block-icon';
+import ChildBlocks from './child-blocks';
 
 const MAX_SUGGESTED_ITEMS = 9;
 
@@ -115,9 +115,7 @@ export class InserterMenu extends Component {
 		const { items, rootChildBlocks } = this.props;
 		const filteredItems = searchItems( items, filterValue );
 
-		const childItems = rootChildBlocks ?
-			filter( filteredItems, ( { name } ) => includes( rootChildBlocks, name ) ) :
-			[];
+		const childItems = filter( filteredItems, ( { name } ) => includes( rootChildBlocks, name ) );
 
 		let suggestedItems = [];
 		if ( ! filterValue ) {
@@ -184,17 +182,13 @@ export class InserterMenu extends Component {
 				/>
 
 				<div className="editor-inserter__results">
-					{ !! childItems.length &&
-						<div className="editor-inserter__child-blocks">
-							<div className="editor-inserter__parent-block-header">
-								<div className="editor-inserter__parent-block-icon">
-									<BlockIcon icon={ rootBlockIcon } />
-								</div>
-								<h2>{ rootBlockTitle }</h2>
-							</div>
-							<ItemList items={ childItems } onSelect={ onSelect } onHover={ this.onHover } />
-						</div>
-					}
+					<ChildBlocks
+						rootBlockIcon={ rootBlockIcon }
+						rootBlockTitle={ rootBlockTitle }
+						items={ childItems }
+						onSelect={ onSelect }
+						onHover={ this.onHover }
+					/>
 
 					{ !! suggestedItems.length &&
 						<PanelBody