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' ); + } ); + } ); +} );