Inserter Menu: Add unit tests

editor/inserter/menu.js

@@ -20,7 +20,7 @@ import './style.scss';
 import { getBlocks, getRecentlyUsedBlocks } from '../selectors';
 import { showInsertionPoint, hideInsertionPoint } from '../actions';
 
-class InserterMenu extends Component {
+export class InserterMenu extends Component {
 	constructor() {
 		super( ...arguments );
 		this.nodes = {};

editor/inserter/test/menu.js

@@ -0,0 +1,198 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType, unregisterBlockType, getBlockTypes } from 'blocks';
+
+/**
+ * Internal dependencies
+ */
+import { InserterMenu } from '../menu';
+
+const textBlock = {
+	name: 'core/text-block',
+	title: 'Text',
+	save: noop,
+	edit: noop,
+	category: 'common',
+};
+
+const advancedTextBlock = {
+	name: 'core/advanced-text-block',
+	title: 'Advanced Text',
+	save: noop,
+	edit: noop,
+	category: 'common',
+};
+
+const someOtherBlock = {
+	name: 'core/some-other-block',
+	title: 'Some Other Block',
+	save: noop,
+	edit: noop,
+	category: 'common',
+};
+
+const moreBlock = {
+	name: 'core/more-block',
+	title: 'More',
+	save: noop,
+	edit: noop,
+	category: 'layout',
+	useOnce: 'true',
+};
+
+const youtubeBlock = {
+	name: 'core-embed/youtube',
+	title: 'YouTube',
+	save: noop,
+	edit: noop,
+	category: 'embed',
+};
+
+const textEmbedBlock = {
+	name: 'core-embed/a-text-embed',
+	title: 'A Text Embed',
+	save: noop,
+	edit: noop,
+	category: 'embed',
+};
+
+describe( 'InserterMenu', () => {
+	const unregisterAllBlocks = () => {
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	};
+
+	afterEach( () => {
+		unregisterAllBlocks();
+	} );
+
+	beforeEach( () => {
+		unregisterAllBlocks();
+		registerBlockType( textBlock.name, textBlock );
+		registerBlockType( advancedTextBlock.name, advancedTextBlock );
+		registerBlockType( someOtherBlock.name, someOtherBlock );
+		registerBlockType( moreBlock.name, moreBlock );
+		registerBlockType( youtubeBlock.name, youtubeBlock );
+		registerBlockType( textEmbedBlock.name, textEmbedBlock );
+	} );
+
+	it( 'should show the recent tab by default', () => {
+		const wrapper = shallow(
+			<InserterMenu
+				instanceId={ 1 }
+				blocks={ [] }
+				recentlyUsedBlocks={ [] }
+			/>
+		);
+
+		const activeCategory = wrapper.find( '.editor-inserter__tab .is-active' );
+		expect( activeCategory.text() ).toBe( 'Recent' );
+
+		const visibleBlocks = wrapper.find( '.editor-inserter__block' );
+		expect( visibleBlocks.length ).toBe( 0 );
+	} );
+
+	it( 'should show the recently used blocks in the recent tab', () => {
+		const wrapper = shallow(
+			<InserterMenu
+				instanceId={ 1 }
+				blocks={ [] }
+				recentlyUsedBlocks={ [ advancedTextBlock ] }
+			/>
+		);
+
+		const visibleBlocks = wrapper.find( '.editor-inserter__block' );
+		expect( visibleBlocks.length ).toBe( 1 );
+		expect( visibleBlocks.at( 0 ).childAt( 0 ).name() ).toBe( 'BlockIcon' );
+		expect( visibleBlocks.at( 0 ).childAt( 1 ).text() ).toBe( 'Advanced Text' );
+	} );
+
+	it( 'should show blocks from the embed category in the embed tab', () => {
+		const wrapper = shallow(
+			<InserterMenu
+				instanceId={ 1 }
+				blocks={ [] }
+				recentlyUsedBlocks={ [] }
+			/>
+		);
+		const embedTab = wrapper.find( '.editor-inserter__tab' )
+			.filterWhere( ( node ) => node.text() === 'Embeds' );
+		embedTab.simulate( 'click' );
+
+		const activeCategory = wrapper.find( '.editor-inserter__tab .is-active' );
+		expect( activeCategory.text() ).toBe( 'Embeds' );
+
+		const visibleBlocks = wrapper.find( '.editor-inserter__block' );
+		expect( visibleBlocks.length ).toBe( 2 );
+		expect( visibleBlocks.at( 0 ).childAt( 1 ).text() ).toBe( 'YouTube' );
+		expect( visibleBlocks.at( 1 ).childAt( 1 ).text() ).toBe( 'A Text Embed' );
+	} );
+
+	it( 'should show all blocks except embeds in the blocks tab', () => {
+		const wrapper = shallow(
+			<InserterMenu
+				instanceId={ 1 }
+				blocks={ [] }
+				recentlyUsedBlocks={ [] }
+			/>
+		);
+		const blocksTab = wrapper.find( '.editor-inserter__tab' )
+			.filterWhere( ( node ) => node.text() === 'Blocks' );
+		blocksTab.simulate( 'click' );
+
+		const activeCategory = wrapper.find( '.editor-inserter__tab .is-active' );
+		expect( activeCategory.text() ).toBe( 'Blocks' );
+
+		const visibleBlocks = wrapper.find( '.editor-inserter__block' );
+		expect( visibleBlocks.length ).toBe( 4 );
+		expect( visibleBlocks.at( 0 ).childAt( 1 ).text() ).toBe( 'Text' );
+		expect( visibleBlocks.at( 1 ).childAt( 1 ).text() ).toBe( 'Advanced Text' );
+		expect( visibleBlocks.at( 2 ).childAt( 1 ).text() ).toBe( 'Some Other Block' );
+		expect( visibleBlocks.at( 3 ).childAt( 1 ).text() ).toBe( 'More' );
+	} );
+
+	it( 'should disable already used blocks with `usedOnce`', () => {
+		const wrapper = shallow(
+			<InserterMenu
+				instanceId={ 1 }
+				blocks={ [ { name: moreBlock.name } ] }
+				recentlyUsedBlocks={ [] }
+			/>
+		);
+		const blocksTab = wrapper.find( '.editor-inserter__tab' )
+			.filterWhere( ( node ) => node.text() === 'Blocks' );
+		blocksTab.simulate( 'click' );
+
+		const disabledBlocks = wrapper.find( '.editor-inserter__block[disabled]' );
+		expect( disabledBlocks.length ).toBe( 1 );
+		expect( disabledBlocks.at( 0 ).childAt( 1 ).text() ).toBe( 'More' );
+	} );
+
+	it( 'should allow searching for blocks', () => {
+		const wrapper = shallow(
+			<InserterMenu
+				instanceId={ 1 }
+				blocks={ [] }
+				recentlyUsedBlocks={ [] }
+			/>
+		);
+		wrapper.setState( { filterValue: 'text' } );
+
+		const tabs = wrapper.find( '.editor-inserter__tab' );
+		expect( tabs.length ).toBe( 0 );
+
+		const visibleBlocks = wrapper.find( '.editor-inserter__block' );
+		expect( visibleBlocks.length ).toBe( 3 );
+		expect( visibleBlocks.at( 0 ).childAt( 1 ).text() ).toBe( 'Text' );
+		expect( visibleBlocks.at( 1 ).childAt( 1 ).text() ).toBe( 'Advanced Text' );
+		expect( visibleBlocks.at( 2 ).childAt( 1 ).text() ).toBe( 'A Text Embed' );
+	} );
+} );