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
This commit is contained in:
Jason Conroy 2020-06-10 11:00:25 +09:30 committed by GitHub
parent 55a9bdbc11
commit 987b2bf5eb
2 changed files with 118 additions and 31 deletions

View File

@ -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 {
constructor( props ) {
super( props );
const WelcomeCard = ( {
isHidden,
updateOptions,
} ) => {
this.hide = this.hide.bind( this );
}
hide() {
this.props.updateOptions( {
const hide = () => {
updateOptions( {
woocommerce_marketing_overview_welcome_hidden: 'yes',
} );
recordEvent( 'marketing_intro_close', {} );
}
render() {
if ( this.props.isHidden ) {
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>
)
if ( isHidden ) {
return null;
}
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,
};

View File

@ -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 );
} );
} );