Editor: Display an item in Table of Contents when only one heading pr…

…esent (#3648)

editor/components/document-outline/index.js

@@ -51,10 +51,10 @@ const getHeadingLevel = heading => {
 
 const isEmptyHeading = heading => ! heading.attributes.content || heading.attributes.content.length === 0;
 
-const DocumentOutline = ( { blocks, onSelect } ) => {
+export const DocumentOutline = ( { blocks = [], onSelect } ) => {
 	const headings = filter( blocks, ( block ) => block.name === 'core/heading' );
 
-	if ( headings.length <= 1 ) {
+	if ( headings.length < 1 ) {
 		return null;
 	}
 

editor/components/document-outline/test/__snapshots__/index.js.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DocumentOutline header blocks present should match snapshot 1`] = `
+<div
+  className="document-outline"
+>
+  <ul>
+    <TableOfContentsItem
+      isValid={2}
+      key="0"
+      level={2}
+      onClick={[Function]}
+    >
+      Heading parent
+    </TableOfContentsItem>
+    <TableOfContentsItem
+      isValid={3}
+      key="1"
+      level={3}
+      onClick={[Function]}
+    >
+      Heading child
+    </TableOfContentsItem>
+  </ul>
+</div>
+`;

editor/components/document-outline/test/index.js

@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { DocumentOutline } from '../';
+
+describe( 'DocumentOutline', () => {
+	const paragraph = createBlock( 'core/paragraph' );
+	const headingParent = createBlock( 'core/heading', {
+		content: 'Heading parent',
+		nodeName: 'H2',
+	} );
+	const headingChild = createBlock( 'core/heading', {
+		content: 'Heading child',
+		nodeName: 'H3',
+	} );
+
+	describe( 'no header blocks present', () => {
+		it( 'should not render when no blocks provided', () => {
+			const wrapper = shallow( <DocumentOutline /> );
+
+			expect( wrapper.html() ).toBe( null );
+		} );
+
+		it( 'should not render when no heading blocks provided', () => {
+			const blocks = [ paragraph ];
+			const wrapper = shallow( <DocumentOutline blocks={ blocks } /> );
+
+			expect( wrapper.html() ).toBe( null );
+		} );
+	} );
+
+	describe( 'header blocks present', () => {
+		it( 'should match snapshot', () => {
+			const blocks = [ headingParent, headingChild ];
+			const wrapper = shallow( <DocumentOutline blocks={ blocks } /> );
+
+			expect( wrapper ).toMatchSnapshot();
+		} );
+
+		it( 'should render an item when only one heading provided', () => {
+			const blocks = [ headingParent ];
+			const wrapper = shallow( <DocumentOutline blocks={ blocks } /> );
+
+			expect( wrapper.find( 'TableOfContentsItem' ) ).toHaveLength( 1 );
+		} );
+
+		it( 'should render two items when two headings and some paragraphs provided', () => {
+			const blocks = [ paragraph, headingParent, paragraph, headingChild, paragraph ];
+			const wrapper = shallow( <DocumentOutline blocks={ blocks } /> );
+
+			expect( wrapper.find( 'TableOfContentsItem' ) ).toHaveLength( 2 );
+		} );
+	} );
+} );