From 780633da8a8b80778ada602ae740cef9586a69d4 Mon Sep 17 00:00:00 2001
From: BE-Webdesign <cromleyedwin89@gmail.com>
Date: Mon, 29 May 2017 13:26:32 -0400
Subject: [PATCH] Adds button component tests.

Adds basic button component tests.  Covers cases where the tag name or
other properties are conditionally rendered.  Related to progress on
#641.  This PR adds the components directory to the list of entry points
configured for tests by webpack.
---
 components/button/test/index.js | 94 +++++++++++++++++++++++++++++++++
 package.json                    |  2 +
 webpack.config.js               |  2 +-
 3 files changed, 97 insertions(+), 1 deletion(-)
 create mode 100644 components/button/test/index.js

diff --git a/components/button/test/index.js b/components/button/test/index.js
new file mode 100644
index 00000000000000..9831ac781bb57c
--- /dev/null
+++ b/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.equal( true );
+			expect( button.hasClass( 'button' ) ).to.equal( false );
+			expect( button.hasClass( 'button-large' ) ).to.equal( false );
+			expect( button.hasClass( 'button-primary' ) ).to.equal( false );
+			expect( button.hasClass( 'is-toggled' ) ).to.equal( false );
+			expect( button.hasClass( 'is-borderless' ) ).to.equal( false );
+			expect( button.prop( 'disabled' ) ).to.equal( 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.equal( true );
+			expect( button.hasClass( 'button-large' ) ).to.equal( false );
+			expect( button.hasClass( 'button-primary' ) ).to.equal( true );
+		} );
+
+		it( 'with isLarge', () => {
+			const button = shallow( <Button isLarge /> );
+			expect( button.hasClass( 'button' ) ).to.equal( true );
+			expect( button.hasClass( 'button-large' ) ).to.equal( true );
+			expect( button.hasClass( 'button-primary' ) ).to.equal( false );
+		} );
+
+		it( 'with isToggled', () => {
+			const button = shallow( <Button isToggled /> );
+			expect( button.hasClass( 'button' ) ).to.equal( false );
+			expect( button.hasClass( 'is-toggled' ) ).to.equal( true );
+		} );
+
+		it( 'with disabled', () => {
+			const button = shallow( <Button disabled /> );
+			expect( button.prop( 'disabled' ) ).to.equal( true );
+		} );
+
+		it( 'does not render target without href present', () => {
+			const button = shallow( <Button target="_blank" /> );
+			expect( button.prop( 'target' ) ).to.equal( 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.equal( true );
+		} );
+	} );
+
+	describe( 'with additonal properties', () => {
+		it( 'renders WordPress property', () => {
+			const button = <Button WordPress="awesome" />;
+
+			expect( button.props.WordPress ).to.equal( 'awesome' );
+		} );
+	} );
+} );
diff --git a/package.json b/package.json
index 39bd858bd0bbdb..82bff5f30a01a9 100644
--- a/package.json
+++ b/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",
diff --git a/webpack.config.js b/webpack.config.js
index 5be6aca10602f8..4764cb657364fb 100644
--- a/webpack.config.js
+++ b/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',