woocommerce/plugins/woocommerce-admin/client/homescreen/stats-overview/test/install-jetpack-cta.js

132 lines
3.3 KiB
JavaScript

/**
* External dependencies
*/
import { render, fireEvent } from '@testing-library/react';
import { recordEvent } from '@woocommerce/tracks';
/**
* Internal dependencies
*/
import { JetpackCTA } from '../install-jetpack-cta';
jest.mock( '@woocommerce/tracks', () => ( {
recordEvent: jest.fn(),
} ) );
describe( 'JetpackCTA', () => {
it( 'shows buttons as busy and disabled when isBusy is true', () => {
const { queryAllByRole } = render(
<JetpackCTA
onClickInstall={ () => {} }
onClickDismiss={ () => {} }
isBusy={ true }
jetpackInstallState={ '' }
/>
);
const buttons = queryAllByRole( 'button' );
expect( buttons[ 0 ] ).toHaveClass( 'is-busy' );
expect( buttons[ 1 ] ).toHaveClass( 'is-busy' );
expect( buttons[ 0 ] ).toHaveAttribute( 'disabled' );
expect( buttons[ 1 ] ).toHaveAttribute( 'disabled' );
} );
it( 'shows buttons as not busy and enabled when isBusy is false', () => {
const { queryAllByRole } = render(
<JetpackCTA
onClickInstall={ () => {} }
onClickDismiss={ () => {} }
isBusy={ false }
jetpackInstallState={ '' }
/>
);
const buttons = queryAllByRole( 'button' );
expect( buttons[ 0 ] ).not.toHaveClass( 'is-busy' );
expect( buttons[ 1 ] ).not.toHaveClass( 'is-busy' );
expect( buttons[ 0 ] ).not.toHaveAttribute( 'disabled' );
expect( buttons[ 1 ] ).not.toHaveAttribute( 'disabled' );
} );
it( 'calls the onClickInstall handler and records a track when the install button is clicked', () => {
const onClickInstallSpy = jest.fn();
const { queryAllByRole } = render(
<JetpackCTA
onClickInstall={ onClickInstallSpy }
onClickDismiss={ () => {} }
isBusy={ false }
jetpackInstallState={ '' }
/>
);
const installButton = queryAllByRole( 'button' )[ 0 ];
fireEvent.click( installButton );
expect( recordEvent ).toHaveBeenCalledWith(
'statsoverview_install_jetpack'
);
expect( onClickInstallSpy ).toHaveBeenCalledTimes( 1 );
} );
it( 'calls the onClickDismiss handler and records a track when the dismiss button is clicked', () => {
const onClickDismissSpy = jest.fn();
const { queryAllByRole } = render(
<JetpackCTA
onClickInstall={ () => {} }
onClickDismiss={ onClickDismissSpy }
isBusy={ false }
jetpackInstallState={ '' }
/>
);
const dismissButton = queryAllByRole( 'button' )[ 1 ];
fireEvent.click( dismissButton );
expect( recordEvent ).toHaveBeenCalledWith(
'statsoverview_dismiss_install_jetpack'
);
expect( onClickDismissSpy ).toHaveBeenCalledTimes( 1 );
} );
it( 'displays text based on the install status of Jetpack', () => {
const { queryByText, rerender } = render(
<JetpackCTA
onClickInstall={ () => {} }
onClickDismiss={ () => {} }
isBusy={ false }
jetpackInstallState={ 'unavailable' }
/>
);
expect( queryByText( 'Get Jetpack' ) ).toBeInTheDocument();
rerender(
<JetpackCTA
onClickInstall={ () => {} }
onClickDismiss={ () => {} }
isBusy={ false }
jetpackInstallState={ 'installed' }
/>
);
expect( queryByText( 'Activate Jetpack' ) ).toBeInTheDocument();
rerender(
<JetpackCTA
onClickInstall={ () => {} }
onClickDismiss={ () => {} }
isBusy={ false }
jetpackInstallState={ 'activated' }
/>
);
expect( queryByText( 'Connect Jetpack' ) ).toBeInTheDocument();
} );
} );