Merge pull request #946 from WordPress/update/test/components/new-con…

…ventions

Updates tests.

components/button/test/index.js

@@ -11,7 +11,7 @@ import Button from '../';
 
 describe( 'Button', () => {
 	describe( 'basic rendering', () => {
-		it( 'without modifiers', () => {
+		it( 'should render a button element with only one class', () => {
 			const button = shallow( <Button /> );
 			expect( button.hasClass( 'components-button' ) ).to.be.true();
 			expect( button.hasClass( 'button' ) ).to.be.false();
@@ -24,71 +24,67 @@ describe( 'Button', () => {
 			expect( button.type() ).to.equal( 'button' );
 		} );
 
-		it( 'with isPrimary', () => {
+		it( 'should render a button element with button-primary class', () => {
 			const button = shallow( <Button isPrimary /> );
 			expect( button.hasClass( 'button' ) ).to.be.true();
 			expect( button.hasClass( 'button-large' ) ).to.be.false();
 			expect( button.hasClass( 'button-primary' ) ).to.be.true();
 		} );
 
-		it( 'with isLarge', () => {
+		it( 'should render a button element with button-large class', () => {
 			const button = shallow( <Button isLarge /> );
 			expect( button.hasClass( 'button' ) ).to.be.true();
 			expect( button.hasClass( 'button-large' ) ).to.be.true();
 			expect( button.hasClass( 'button-primary' ) ).to.be.false();
 		} );
 
-		it( 'with isToggled', () => {
+		it( 'should render a button element with is-toggled without button class', () => {
 			const button = shallow( <Button isToggled /> );
 			expect( button.hasClass( 'button' ) ).to.be.false();
 			expect( button.hasClass( 'is-toggled' ) ).to.be.true();
 		} );
 
-		it( 'with disabled', () => {
+		it( 'should add a disabled prop to the button', () => {
 			const button = shallow( <Button disabled /> );
 			expect( button.prop( 'disabled' ) ).to.be.true();
 		} );
 
-		it( 'does not render target without href present', () => {
+		it( 'should not poss the prop target into the element', () => {
 			const button = shallow( <Button target="_blank" /> );
 			expect( button.prop( 'target' ) ).to.be.undefined();
 		} );
+
+		it( 'should render with an additional className', () => {
+			const button = shallow( <Button className="gutenberg" /> );
+
+			expect( button.hasClass( 'gutenberg' ) ).to.be.true();
+		} );
+
+		it( 'should render and additional WordPress prop of value awesome', () => {
+			const button = shallow( <Button WordPress="awesome" /> );
+
+			expect( button.prop( 'WordPress' ) ).to.equal( 'awesome' );
+		} );
 	} );
 
 	describe( 'with href property', () => {
-		it( 'renders as a link', () => {
+		it( 'should render a link instead of a button with href prop', () => {
 			const button = shallow( <Button href="https://wordpress.org/" /> );
 
 			expect( button.type() ).to.equal( 'a' );
 			expect( button.prop( 'href' ) ).to.equal( 'https://wordpress.org/' );
 		} );
 
-		it( 'including target renders', () => {
+		it( 'should allow for the passing of the target prop when a link is created', () => {
 			const button = shallow( <Button href="https://wordpress.org/" target="_blank" /> );
 
 			expect( button.prop( 'target' ) ).to.equal( '_blank' );
 		} );
 
-		it( 'will turn it into a button by using disabled property', () => {
+		it( 'should become a button again when disabled is supplied', () => {
 			const button = shallow( <Button href="https://wordpress.org/" disabled /> );
 
 			expect( button.type() ).to.equal( 'button' );
 		} );
 	} );
-
-	describe( 'with className property', () => {
-		it( 'renders with an extra className', () => {
-			const button = shallow( <Button className="gutenberg" /> );
-
-			expect( button.hasClass( 'gutenberg' ) ).to.be.true();
-		} );
-	} );
-
-	describe( 'with additonal properties', () => {
-		it( 'renders WordPress property', () => {
-			const button = <Button WordPress="awesome" />;
-
-			expect( button.props.WordPress ).to.equal( 'awesome' );
-		} );
-	} );
 } );

components/dashicon/test/index.js

@@ -11,13 +11,19 @@ import Dashicon from '../';
 
 describe( 'Dashicon', () => {
 	describe( 'basic rendering', () => {
-		it( 'without properties', () => {
+		it( 'should render an empty null element when icon is not provided', () => {
 			const dashicon = shallow( <Dashicon /> );
 			// Unrendered element.
 			expect( dashicon.type() ).to.be.null();
 		} );
 
-		it( 'with icon property', () => {
+		it( 'should render an empty null element when a non dashicon is provided', () => {
+			const dashicon = shallow( <Dashicon icon="zomg-never-gonna-be-an-icon-icon" /> );
+			// Unrendered element.
+			expect( dashicon.type() ).to.be.null();
+		} );
+
+		it( 'should render a SVG icon element when a matching icon is provided', () => {
 			const dashicon = shallow( <Dashicon icon="wordpress" /> );
 			expect( dashicon.find( 'title' ).text() ).to.equal( 'WordPress' );
 			expect( dashicon.hasClass( 'dashicon' ) ).to.be.true();
@@ -29,7 +35,7 @@ describe( 'Dashicon', () => {
 			expect( dashicon.prop( 'viewBox' ) ).to.equal( '0 0 20 20' );
 		} );
 
-		it( 'with additional class name', () => {
+		it( 'should render an additional class to the SVG element', () => {
 			const dashicon = shallow( <Dashicon icon="wordpress" className="capital-p-dangit" /> );
 			expect( dashicon.hasClass( 'capital-p-dangit' ) ).to.be.true();
 		} );

components/form-toggle/test/index.js

@@ -12,7 +12,7 @@ import FormToggle from '../';
 
 describe( 'FormToggle', () => {
 	describe( 'basic rendering', () => {
-		it( 'without modifiers', () => {
+		it( 'should render a span element with an unchecked checkbox', () => {
 			const formToggle = shallow( <FormToggle /> );
 			expect( formToggle.hasClass( 'components-form-toggle' ) ).to.be.true();
 			expect( formToggle.hasClass( 'is-checked' ) ).to.be.false();
@@ -22,39 +22,41 @@ describe( 'FormToggle', () => {
 			expect( formToggle.find( '.components-form-toggle__hint' ).prop( 'aria-hidden' ) ).to.be.true();
 		} );
 
-		it( 'with checked modifier', () => {
+		it( 'should render a checked checkbox and change the accessability text to On when providing checked prop', () => {
 			const formToggle = shallow( <FormToggle checked /> );
 			expect( formToggle.hasClass( 'is-checked' ) ).to.be.true();
 			expect( formToggle.find( '.components-form-toggle__input' ).prop( 'value' ) ).to.be.true();
 			expect( formToggle.find( '.components-form-toggle__hint' ).text() ).to.equal( 'On' );
 		} );
 
-		it( 'with additonal className', () => {
+		it( 'should render with an additional className', () => {
 			const formToggle = shallow( <FormToggle className="testing" /> );
 			expect( formToggle.hasClass( 'testing' ) ).to.be.true();
 		} );
 
-		it( 'with id property', () => {
+		it( 'should render an id prop for the input checkbox', () => {
 			const formToggle = shallow( <FormToggle id="test" /> );
 			expect( formToggle.find( '.components-form-toggle__input' ).prop( 'id' ) ).to.equal( 'test' );
 		} );
 
-		it( 'with onChange handler', () => {
-			let formToggle = shallow( <FormToggle /> );
-			let checkBox = formToggle.node.props.children.find( child => 'input' === child.type && 'checkbox' === child.props.type );
+		it( 'should render a checkbox with a noop onChange', () => {
+			const formToggle = shallow( <FormToggle /> );
+			const checkBox = formToggle.prop( 'children' ).find( child => 'input' === child.type && 'checkbox' === child.props.type );
 			expect( checkBox.props.onChange ).to.equal( noop );
+		} );
 
+		it( 'should render a checkbox with a user-provided onChange', () => {
 			const testFunction = ( event ) => event;
-			formToggle = shallow( <FormToggle onChange={ testFunction } /> );
-			checkBox = formToggle.node.props.children.find( child => 'input' === child.type && 'checkbox' === child.props.type );
+			const formToggle = shallow( <FormToggle onChange={ testFunction } /> );
+			const checkBox = formToggle.prop( 'children' ).find( child => 'input' === child.type && 'checkbox' === child.props.type );
 			expect( checkBox.props.onChange ).to.equal( testFunction );
 		} );
 
-		it( 'with showHint false', () => {
+		it( 'should not render the hint when showHint is set to false', () => {
 			const formToggle = shallow( <FormToggle showHint={ false } /> );
 
 			// When showHint is not provided this element is not rendered.
-			expect( formToggle.find( '.components-form-toggle__hint' ).length ).to.equal( 0 );
+			expect( formToggle.find( '.components-form-toggle__hint' ).exists() ).to.be.false();
 		} );
 	} );
 } );