Add basic tests for Panel Component.

Adds basic Panel component tests. Related to progress on #641.  Covers
the Panel, PanelHeader, and PanelBody components.

Testing Instructions
Run npm i && npm run test-unit ensure tests pass. Change component logic
to ensure tests fail as they should.

components/panel/test/body.js

@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import { expect } from 'chai';
+import { shallow, mount } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import PanelBody from '../body.js';
+
+describe( 'PanelBody', () => {
+	describe( 'basic rendering', () => {
+		it( 'without modifiers', () => {
+			const panelBody = shallow( <PanelBody /> );
+			expect( panelBody.hasClass( 'components-panel__body' ) ).to.be.true();
+			expect( panelBody.type() ).to.equal( 'div' );
+			expect( panelBody.find( 'div' ).shallow().children().length ).to.equal( 0 );
+		} );
+
+		it( 'with title', () => {
+			const panelBody = shallow( <PanelBody title="Some Text" /> );
+			const panelBodyInstance = panelBody.instance();
+			const iconButton = panelBody.find( 'IconButton' );
+			expect( iconButton.shallow().hasClass( 'components-panel__body-toggle' ) ).to.be.true();
+			expect( panelBodyInstance.state.opened ).to.be.true();
+			expect( iconButton.node.props.onClick ).to.equal( panelBodyInstance.toggle );
+			expect( iconButton.node.props.icon ).to.equal( 'arrow-down' );
+			expect( iconButton.node.props.children ).to.equal( 'Some Text' );
+		} );
+
+		it( 'with title and sidebar closed', () => {
+			const panelBody = shallow( <PanelBody title="Some Text" initialOpen={ false } /> );
+			expect( panelBody.instance().state.opened ).to.be.false();
+			const iconButton = panelBody.find( 'IconButton' );
+			expect( iconButton.node.props.icon ).to.equal( 'arrow-right' );
+		} );
+
+		it( 'with children', () => {
+			const panelBody = shallow( <PanelBody children="Some Text" /> );
+			expect( panelBody.instance().props.children ).to.equal( 'Some Text' );
+			expect( panelBody.text() ).to.equal( 'Some Text' );
+		} );
+
+		it( 'with children and sidebar closed', () => {
+			const panelBody = shallow( <PanelBody children="Some Text" initialOpen={ false } /> );
+			expect( panelBody.instance().props.children ).to.equal( 'Some Text' );
+			// Text should be empty even though props.children is set.
+			expect( panelBody.text() ).to.equal( '' );
+		} );
+	} );
+
+	describe( 'mounting behavior', () => {
+		it( 'without modifiers', () => {
+			const panelBody = mount( <PanelBody /> );
+			expect( panelBody.instance().state.opened ).to.be.true();
+		} );
+
+		it( 'with intialOpen set to false', () => {
+			const panelBody = mount( <PanelBody initialOpen={ false } /> );
+			expect( panelBody.instance().state.opened ).to.be.false();
+		} );
+	} );
+
+	describe( 'toggling behavior', () => {
+		const fakeEvent = { preventDefault: () => undefined };
+
+		it( 'without modifiers', () => {
+			const panelBody = mount( <PanelBody /> );
+			panelBody.instance().toggle( fakeEvent );
+			expect( panelBody.instance().state.opened ).to.be.false();
+		} );
+
+		it( 'with intialOpen set to false', () => {
+			const panelBody = mount( <PanelBody initialOpen={ false } /> );
+			panelBody.instance().toggle( fakeEvent );
+			expect( panelBody.instance().state.opened ).to.be.true();
+		} );
+	} );
+} );

components/panel/test/header.js

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { expect } from 'chai';
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import PanelHeader from '../header.js';
+
+describe( 'PanelHeader', () => {
+	describe( 'basic rendering', () => {
+		it( 'without modifiers', () => {
+			const panelHeader = shallow( <PanelHeader /> );
+			expect( panelHeader.hasClass( 'components-panel__header' ) ).to.be.true();
+			expect( panelHeader.type() ).to.equal( 'div' );
+			expect( panelHeader.find( 'div' ).shallow().children().length ).to.equal( 0 );
+		} );
+
+		it( 'with label', () => {
+			const panelHeader = shallow( <PanelHeader label="Some Text" /> );
+			const label = panelHeader.find( 'strong' ).shallow();
+			expect( label.text() ).to.equal( 'Some Text' );
+			expect( label.type() ).to.equal( 'strong' );
+		} );
+
+		it( 'with children', () => {
+			const panelHeader = shallow( <PanelHeader children="Some Text" /> );
+			expect( panelHeader.instance().props.children ).to.equal( 'Some Text' );
+			expect( panelHeader.text() ).to.equal( 'Some Text' );
+		} );
+
+		it( 'with label and children', () => {
+			const panelHeader = shallow( <PanelHeader label="Some Label" children="Some Text" /> );
+			expect( panelHeader.find( 'div' ).shallow().children().length ).to.equal( 2 );
+		} );
+	} );
+} );

components/panel/test/index.js

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { expect } from 'chai';
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import Panel from '../';
+
+describe( 'Panel', () => {
+	describe( 'basic rendering', () => {
+		it( 'without modifiers', () => {
+			const panel = shallow( <Panel /> );
+			expect( panel.hasClass( 'components-panel' ) ).to.be.true();
+			expect( panel.type() ).to.equal( 'div' );
+			expect( panel.find( 'div' ).shallow().children().length ).to.equal( 0 );
+		} );
+
+		it( 'with header', () => {
+			const panel = shallow( <Panel header="Header Label" /> );
+			const panelHeader = panel.find( 'PanelHeader' );
+			expect( panelHeader.node.props.label ).to.equal( 'Header Label' );
+			expect( panel.find( 'div' ).shallow().children().length ).to.equal( 1 );
+		} );
+
+		it( 'with additional class name', () => {
+			const panel = shallow( <Panel className="the-panel" /> );
+			expect( panel.hasClass( 'the-panel' ) ).to.be.true();
+		} );
+
+		it( 'with additional children', () => {
+			const panel = shallow( <Panel children="The Panel" /> );
+			expect( panel.instance().props.children ).to.equal( 'The Panel' );
+			expect( panel.text() ).to.equal( 'The Panel' );
+			expect( panel.find( 'div' ).shallow().children().length ).to.equal( 1 );
+		} );
+
+		it( 'with children and header', () => {
+			const panel = shallow( <Panel children="The Panel" header="The Header" /> );
+			expect( panel.find( 'div' ).shallow().children().length ).to.equal( 2 );
+		} );
+	} );
+} );