Merge pull request #926 from WordPress/add/test/button-component

Adds button component tests.

components/button/test/index.js

@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import { expect } from 'chai';
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../';
+
+describe( 'Button', () => {
+	describe( 'basic rendering', () => {
+		it( 'without modifiers', () => {
+			const button = shallow( <Button /> );
+			expect( button.hasClass( 'components-button' ) ).to.be.true();
+			expect( button.hasClass( 'button' ) ).to.be.false();
+			expect( button.hasClass( 'button-large' ) ).to.be.false();
+			expect( button.hasClass( 'button-primary' ) ).to.be.false();
+			expect( button.hasClass( 'is-toggled' ) ).to.be.false();
+			expect( button.hasClass( 'is-borderless' ) ).to.be.false();
+			expect( button.prop( 'disabled' ) ).to.be.undefined();
+			expect( button.prop( 'type' ) ).to.equal( 'button' );
+			expect( button.type() ).to.equal( 'button' );
+		} );
+
+		it( 'with isPrimary', () => {
+			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', () => {
+			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', () => {
+			const button = shallow( <Button isToggled /> );
+			expect( button.hasClass( 'button' ) ).to.be.false();
+			expect( button.hasClass( 'is-toggled' ) ).to.be.true();
+		} );
+
+		it( 'with disabled', () => {
+			const button = shallow( <Button disabled /> );
+			expect( button.prop( 'disabled' ) ).to.be.true();
+		} );
+
+		it( 'does not render target without href present', () => {
+			const button = shallow( <Button target="_blank" /> );
+			expect( button.prop( 'target' ) ).to.be.undefined();
+		} );
+	} );
+
+	describe( 'with href property', () => {
+		it( 'renders as a link', () => {
+			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', () => {
+			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', () => {
+			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' );
+		} );
+	} );
+} );

package.json

@@ -35,6 +35,7 @@
     "cross-env": "^3.2.4",
     "deep-freeze": "0.0.1",
     "dirty-chai": "^1.2.2",
+    "enzyme": "^2.8.2",
     "eslint": "^3.17.1",
     "eslint-config-wordpress": "^1.1.0",
     "eslint-plugin-jsx-a11y": "^4.0.0",
@@ -50,6 +51,7 @@
     "pegjs-loader": "^0.5.1",
     "postcss-loader": "^1.3.3",
     "raw-loader": "^0.5.1",
+    "react-test-renderer": "^15.5.4",
     "sass-loader": "^6.0.3",
     "sinon": "^2.1.0",
     "sinon-chai": "^2.9.0",

webpack.config.js

@@ -109,7 +109,7 @@ switch ( process.env.NODE_ENV ) {
 			...config.module.rules,
 		];
 		const testFiles = glob.sync(
-			'./{' + Object.keys( config.entry ).sort() + '}/**/test/*.js'
+			'./{' + Object.keys( config.entry ).concat( 'components' ).sort() + '}/**/test/*.js'
 		);
 		config.entry = [
 			'./date/index.js',