Merge pull request #933 from WordPress/add/test/components/panel

Add basic tests for Panel Component.

components/panel/test/body.js

@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import { expect } from 'chai';
+import { shallow, mount } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import PanelBody from '../body.js';
+
+describe( 'PanelBody', () => {
+	describe( 'basic rendering', () => {
+		it( 'should render an empty div with the matching className', () => {
+			const panelBody = shallow( <PanelBody /> );
+			expect( panelBody.hasClass( 'components-panel__body' ) ).to.be.true();
+			expect( panelBody.type() ).to.equal( 'div' );
+		} );
+
+		it( 'should render an IconButton matching the following props and state', () => {
+			const panelBody = shallow( <PanelBody title="Some Text" /> );
+			const iconButton = panelBody.find( 'IconButton' );
+			expect( iconButton.shallow().hasClass( 'components-panel__body-toggle' ) ).to.be.true();
+			expect( panelBody.state( 'opened' ) ).to.be.true();
+			expect( iconButton.prop( 'onClick' ) ).to.equal( panelBody.instance().toggle );
+			expect( iconButton.prop( 'icon' ) ).to.equal( 'arrow-down' );
+			expect( iconButton.prop( 'children' ) ).to.equal( 'Some Text' );
+		} );
+
+		it( 'should change state and props when sidebar is closed', () => {
+			const panelBody = shallow( <PanelBody title="Some Text" initialOpen={ false } /> );
+			expect( panelBody.state( 'opened' ) ).to.be.false();
+			const iconButton = panelBody.find( 'IconButton' );
+			expect( iconButton.prop( 'icon' ) ).to.equal( 'arrow-right' );
+		} );
+
+		it( 'should render child elements within PanelBody element', () => {
+			const panelBody = shallow( <PanelBody children="Some Text" /> );
+			expect( panelBody.instance().props.children ).to.equal( 'Some Text' );
+			expect( panelBody.text() ).to.equal( 'Some Text' );
+		} );
+
+		it( 'should pass children prop but not render when sidebar is 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( 'should mount with a default of being opened', () => {
+			const panelBody = mount( <PanelBody /> );
+			expect( panelBody.state( 'opened' ) ).to.be.true();
+		} );
+
+		it( 'should mount with a state of not opened when initialOpen set to false', () => {
+			const panelBody = mount( <PanelBody initialOpen={ false } /> );
+			expect( panelBody.state( 'opened' ) ).to.be.false();
+		} );
+	} );
+
+	describe( 'toggling behavior', () => {
+		const fakeEvent = { preventDefault: () => undefined };
+
+		it( 'should set the opened state to false when a toggle fires', () => {
+			const panelBody = mount( <PanelBody /> );
+			panelBody.instance().toggle( fakeEvent );
+			expect( panelBody.state( 'opened' ) ).to.be.false();
+		} );
+
+		it( 'should set the opened state to true when a toggle fires on a closed state', () => {
+			const panelBody = mount( <PanelBody initialOpen={ false } /> );
+			panelBody.instance().toggle( fakeEvent );
+			expect( panelBody.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( 'should render PanelHeader with empty div inside', () => {
+			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( 'should render a label matching the text provided in the prop', () => {
+			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( 'should render child elements in the panel header body when provided', () => {
+			const panelHeader = shallow( <PanelHeader children="Some Text" /> );
+			expect( panelHeader.instance().props.children ).to.equal( 'Some Text' );
+			expect( panelHeader.text() ).to.equal( 'Some Text' );
+		} );
+
+		it( 'should render both child elements and label when passed in', () => {
+			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( 'should render an empty div without any provided props', () => {
+			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( 'should render a PanelHeader component when provided text in the header prop', () => {
+			const panel = shallow( <Panel header="Header Label" /> );
+			const panelHeader = panel.find( 'PanelHeader' );
+			expect( panelHeader.prop( 'label' ) ).to.equal( 'Header Label' );
+			expect( panel.find( 'div' ).shallow().children().length ).to.equal( 1 );
+		} );
+
+		it( 'should render an additional className', () => {
+			const panel = shallow( <Panel className="the-panel" /> );
+			expect( panel.hasClass( 'the-panel' ) ).to.be.true();
+		} );
+
+		it( 'should add additional child elements to be rendered in the panel', () => {
+			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( 'should render both children and header when provided as props', () => {
+			const panel = shallow( <Panel children="The Panel" header="The Header" /> );
+			expect( panel.find( 'div' ).shallow().children().length ).to.equal( 2 );
+		} );
+	} );
+} );