Refactor and add tests for the marketing WelcomeCard component (https://github.com/woocommerce/woocommerce-admin/pull/4495)

* Convert welcome card to functional component

* Add tests for the WelcomeCard

plugins/woocommerce-admin/client/marketing/overview/welcome-card/index.js

@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { get } from 'lodash';
 import { Button } from '@wordpress/components';
 import Gridicon from 'gridicons';
 import { compose } from '@wordpress/compose';
 import { withDispatch } from '@wordpress/data';
+import PropTypes from 'prop-types';
 
 /**
  * WooCommerce dependencies
@@ -22,44 +22,54 @@ import { recordEvent } from 'lib/tracks';
 import withSelect from 'wc-api/with-select';
 import WelcomeImage from './images/welcome.svg';
 
-class WelcomeCard extends Component {
+const WelcomeCard = ( {
-	constructor( props ) {
+	isHidden,
-		super( props );
+	updateOptions,
+} ) => {
 
-		this.hide = this.hide.bind( this );
+	const hide = () => {
-	}
+		updateOptions( {
-
-	hide() {
-		this.props.updateOptions( {
 			woocommerce_marketing_overview_welcome_hidden: 'yes',
 		} );
-
 		recordEvent( 'marketing_intro_close', {} );
 	}
 
-	render() {
+	if ( isHidden ) {
-		if ( this.props.isHidden ) {
+		return null;
-			return null;
-		}
-
-		return (
-			<Card
-				className="woocommerce-marketing-overview-welcome-card"
-			>
-				<Button
-					label={ __( 'Hide', 'woocommerce-admin' ) }
-					onClick={ this.hide }
-					className="woocommerce-marketing-overview-welcome-card__hide-button"
-				>
-					<Gridicon icon="cross" />
-				</Button>
-				<img src={ WelcomeImage } alt="" />
-				<h3>{ __( 'Grow your customer base and increase your sales with marketing tools built for WooCommerce', 'woocommerce-admin' ) }</h3>
-			</Card>
-		)
 	}
+
+	return (
+		<Card
+			className="woocommerce-marketing-overview-welcome-card"
+		>
+			<Button
+				label={ __( 'Hide', 'woocommerce-admin' ) }
+				onClick={ hide }
+				className="woocommerce-marketing-overview-welcome-card__hide-button"
+			>
+				<Gridicon icon="cross" />
+			</Button>
+			<img src={ WelcomeImage } alt="" />
+			<h3>{ __( 'Grow your customer base and increase your sales with marketing tools built for WooCommerce', 'woocommerce-admin' ) }</h3>
+		</Card>
+	)
 }
 
+WelcomeCard.propTypes = {
+	/**
+	 * Whether the card is hidden.
+	 */
+	isHidden: PropTypes.bool.isRequired,
+	/**
+	 * updateOptions function.
+	 */
+	updateOptions: PropTypes.func.isRequired,
+};
+
+// named export
+export { WelcomeCard }
+
+// default export
 export default compose(
 	withSelect( ( select ) => {
 		const { getOptions, isUpdateOptionsRequesting } = select( 'wc-api' );
@@ -67,7 +77,6 @@ export default compose(
 		const options = getOptions( [ hideOptionName ] );
 		const isHidden = get( options, [ hideOptionName ], 'no' ) === 'yes';
 		const isUpdateRequesting = Boolean( isUpdateOptionsRequesting( [ hideOptionName ] ) );
-
 		return {
 			isHidden: isHidden || isUpdateRequesting,
 		};

plugins/woocommerce-admin/client/marketing/overview/welcome-card/test/index.js

@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+import { recordEvent } from 'lib/tracks';
+import { Button } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { WelcomeCard } from '../index.js';
+
+jest.mock( 'lib/tracks' );
+jest.mock( '@woocommerce/wc-admin-settings' );
+
+describe( 'WelcomeCard hide button', () => {
+	let welcomeCardWrapper;
+	let mockUpdateOptions;
+
+	beforeEach( () => {
+		mockUpdateOptions = jest.fn();
+		welcomeCardWrapper = shallow(
+			<WelcomeCard
+				isHidden={ false }
+				updateOptions={ mockUpdateOptions }
+			/>
+		);
+	} );
+
+	it( 'should record an event when clicked', () => {
+		const welcomeHideButton = welcomeCardWrapper.find( Button );
+		expect( welcomeHideButton.length ).toBe( 1 );
+		welcomeHideButton.simulate( 'click' );
+		expect( recordEvent ).toHaveBeenCalledTimes( 1 );
+		expect( recordEvent ).toHaveBeenCalledWith(
+			'marketing_intro_close',
+			{}
+		);
+	} );
+
+	it( 'should update option when clicked', () => {
+		const welcomeHideButton = welcomeCardWrapper.find( Button );
+		expect( welcomeHideButton.length ).toBe( 1 );
+		welcomeHideButton.simulate( 'click' );
+		expect( mockUpdateOptions ).toHaveBeenCalledTimes( 1 );
+		expect( mockUpdateOptions ).toHaveBeenCalledWith( {
+			woocommerce_marketing_overview_welcome_hidden: 'yes',
+		} );
+	} );
+} );
+
+describe( 'Component visibility can be toggled', () => {
+	const mockUpdateOptions = jest.fn();
+
+	it( 'WelcomeCard should be visible if isHidden is false', () => {
+		const welcomeCardWrapper = shallow(
+			<WelcomeCard
+				isHidden={ false }
+				updateOptions={ mockUpdateOptions }
+			/>
+		);
+		const welcomeCardButton = welcomeCardWrapper.find( Button );
+		expect( welcomeCardButton.length ).toBe( 1 );
+		expect( mockUpdateOptions ).toHaveBeenCalledTimes( 0 );
+	} );
+
+	it( 'WelcomeCard should be hidden if isHidden is true', () => {
+		const welcomeCardWrapper = shallow(
+			<WelcomeCard
+				isHidden={ true }
+				updateOptions={ mockUpdateOptions }
+			/>
+		);
+		const welcomeCardButton = welcomeCardWrapper.find( Button );
+		expect( welcomeCardButton.length ).toBe( 0 );
+		expect( mockUpdateOptions ).toHaveBeenCalledTimes( 0 );
+	} );
+} );