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 (
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`] = ` +
+
+ My group +
+ +

+ My item +

+
+
+`; 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( ); + + expect( wrapper.html() ).toBe( null ); + } ); + + test( 'should match snapshot', () => { + const wrapper = shallow( + +

My item

+
+ ); + + expect( wrapper ).toMatchSnapshot(); + } ); +} );