From 4a5fb14af33748873220065631d8b3c6f1f46224 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Tue, 20 Feb 2018 13:35:21 +0100
Subject: [PATCH] Components: Stop rendering MenuItemsGroup when no menu items
 provided

---
 components/menu-items/menu-items-group.js     | 16 +++++++---
 .../__snapshots__/menu-items-group.js.snap    | 24 +++++++++++++++
 .../menu-items/test/menu-items-group.js       | 30 +++++++++++++++++++
 3 files changed, 66 insertions(+), 4 deletions(-)
 create mode 100644 components/menu-items/test/__snapshots__/menu-items-group.js.snap
 create mode 100644 components/menu-items/test/menu-items-group.js

diff --git a/components/menu-items/menu-items-group.js b/components/menu-items/menu-items-group.js
index 05895cc24551cb..3418073945f83f 100644
--- a/components/menu-items/menu-items-group.js
+++ b/components/menu-items/menu-items-group.js
@@ -16,16 +16,24 @@ import './style.scss';
 import { NavigableMenu } from '../navigable-container';
 import withInstanceId from '../higher-order/with-instance-id';
 
-function MenuItemsGroup( {
-	label,
+export function MenuItemsGroup( {
 	children,
-	instanceId,
 	className = '',
 	filterName,
+	instanceId,
+	label,
 } ) {
+	const childrenArray = Children.toArray( children );
+	const menuItems = filterName ?
+		applyFilters( filterName, childrenArray ) :
+		childrenArray;
+
+	if ( ! Array.isArray( menuItems ) || ! menuItems.length ) {
+		return null;
+	}
+
 	const labelId = `components-menu-items-group-label-${ instanceId }`;
 	const classNames = classnames( className, 'components-menu-items-group' );
-	const menuItems = filterName ? applyFilters( filterName, Children.toArray( children ) ) : children;
 
 	return (
 		<div className={ classNames }>
diff --git a/components/menu-items/test/__snapshots__/menu-items-group.js.snap b/components/menu-items/test/__snapshots__/menu-items-group.js.snap
new file mode 100644
index 00000000000000..8a9af436d57c76
--- /dev/null
+++ b/components/menu-items/test/__snapshots__/menu-items-group.js.snap
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MenuItemsGroup should match snapshot 1`] = `
+<div
+  className="components-menu-items-group"
+>
+  <div
+    className="components-menu-items-group__label"
+    id="components-menu-items-group-label-1"
+  >
+    My group
+  </div>
+  <NavigableMenu
+    aria-labelledby="components-menu-items-group-label-1"
+    orientation="vertical"
+  >
+    <p
+      key=".0"
+    >
+      My item
+    </p>
+  </NavigableMenu>
+</div>
+`;
diff --git a/components/menu-items/test/menu-items-group.js b/components/menu-items/test/menu-items-group.js
new file mode 100644
index 00000000000000..c0a13fc070eeae
--- /dev/null
+++ b/components/menu-items/test/menu-items-group.js
@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import { MenuItemsGroup } from '../menu-items-group';
+
+describe( 'MenuItemsGroup', () => {
+	test( 'should render null when no children provided', () => {
+		const wrapper = shallow( <MenuItemsGroup /> );
+
+		expect( wrapper.html() ).toBe( null );
+	} );
+
+	test( 'should match snapshot', () => {
+		const wrapper = shallow(
+			<MenuItemsGroup
+				label="My group"
+				instanceId="1"
+			>
+				<p>My item</p>
+			</MenuItemsGroup>
+		);
+
+		expect( wrapper ).toMatchSnapshot();
+	} );
+} );