diff --git a/components/placeholder/index.js b/components/placeholder/index.js
index 3d074c5b7e9b9d..fdaf803246d275 100644
--- a/components/placeholder/index.js
+++ b/components/placeholder/index.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
* Internal dependencies
*/
import './style.scss';
-import { Dashicon } from '../';
+import Dashicon from '../dashicon';
function Placeholder( { icon, children, label, instructions, className, ...additionalProps } ) {
const classes = classnames( 'components-placeholder', className );
@@ -15,7 +15,7 @@ function Placeholder( { icon, children, label, instructions, className, ...addit
return (
-
+ { !! icon && }
{ label }
{ !! instructions &&
{ instructions }
}
diff --git a/components/placeholder/test/index.js b/components/placeholder/test/index.js
new file mode 100644
index 00000000000000..dc8c01ad076f39
--- /dev/null
+++ b/components/placeholder/test/index.js
@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import { expect } from 'chai';
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import { Placeholder } from 'components';
+
+describe( 'Placeholder', () => {
+ describe( 'basic rendering', () => {
+ it( 'should by default render label section and fieldset.', () => {
+ const placeholder = shallow(
);
+ const placeholderLabel = placeholder.find( '.components-placeholder__label' );
+ const placeholderInstructions = placeholder.find( '.components-placeholder__instructions' );
+ const placeholderFieldset = placeholder.find( '.components-placeholder__fieldset' );
+
+ expect( placeholder.hasClass( 'components-placeholder' ) ).to.be.true();
+ // Test for empty label.
+ expect( placeholderLabel.exists() ).to.be.true();
+ expect( placeholderLabel.find( 'Dashicon' ).exists() ).to.be.false();
+ // Test for non existant instructions.
+ expect( placeholderInstructions.exists() ).to.be.false();
+ // Test for empty fieldset.
+ expect( placeholderFieldset.exists() ).to.be.true();
+ } );
+
+ it( 'should render a Dashicon in the label section', () => {
+ const placeholder = shallow(
);
+ const placeholderLabel = placeholder.find( '.components-placeholder__label' );
+
+ expect( placeholderLabel.exists() ).to.be.true();
+ expect( placeholderLabel.find( 'Dashicon' ).exists() ).to.be.true();
+ } );
+
+ it( 'should render a label section and add aria label', () => {
+ const label = 'WordPress';
+ const placeholder = shallow(
);
+ const placeholderLabel = placeholder.find( '.components-placeholder__label' );
+ const child = placeholderLabel.childAt( 0 );
+
+ expect( placeholder.prop( 'aria-label' ) ).to.equal( label );
+ expect( child.text() ).to.equal( label );
+ } );
+
+ it( 'should display an instructions element', () => {
+ const element =
Instructions
;
+ const placeholder = shallow(
);
+ const placeholderInstructions = placeholder.find( '.components-placeholder__instructions' );
+ const child = placeholderInstructions.childAt( 0 );
+
+ expect( placeholderInstructions.exists() ).to.be.true();
+ expect( child.matchesElement( element ) ).to.be.true();
+ } );
+
+ it( 'should display a fieldset from the children property', () => {
+ const element =
Fieldset
;
+ const placeholder = shallow(
);
+ const placeholderFieldset = placeholder.find( '.components-placeholder__fieldset' );
+ const child = placeholderFieldset.childAt( 0 );
+
+ expect( placeholderFieldset.exists() ).to.be.true();
+ expect( child.matchesElement( element ) ).to.be.true();
+ } );
+
+ it( 'should add an additional className to the top container', () => {
+ const placeholder = shallow(
);
+ expect( placeholder.hasClass( 'wp-placeholder' ) ).to.be.true();
+ } );
+
+ it( 'should add additional props to the top level container', () => {
+ const placeholder = shallow(
);
+ expect( placeholder.prop( 'test' ) ).to.equal( 'test' );
+ } );
+ } );
+} );