woocommerce/plugins/woocommerce-admin/client/homescreen/stats-overview/test/index.js

178 lines
4.2 KiB
JavaScript

/**
* External dependencies
*/
import { render, fireEvent, screen, waitFor } from '@testing-library/react';
/**
* Internal dependencies
*/
import { StatsOverview } from '../index';
import StatsList from '../stats-list';
import { recordEvent } from 'lib/tracks';
jest.mock( 'lib/tracks' );
// Mock the stats list so that it can be tested separately.
jest.mock( '../stats-list', () =>
jest.fn().mockImplementation( () => <div>mocked stats list</div> )
);
// Mock the Install Jetpack CTA
jest.mock( '../install-jetpack-cta', () => {
return jest
.fn()
.mockImplementation( () => <div>mocked install jetpack cta</div> );
} );
import { useUserPreferences } from '@woocommerce/data';
jest.mock( '@woocommerce/data' );
describe( 'StatsOverview tracking', () => {
it( 'should record an event when a stat is toggled', () => {
useUserPreferences.mockReturnValue( {
updateUserPreferences: () => {},
hiddenStats: null,
} );
render(
<StatsOverview />
);
const ellipsisBtn = screen.getByRole( 'button', {
name: 'Choose which values to display',
} );
fireEvent.click( ellipsisBtn );
const totalSalesBtn = screen.getByRole( 'menuitemcheckbox', {
name: 'Total Sales',
} );
fireEvent.click( totalSalesBtn );
expect( recordEvent ).toHaveBeenCalledWith(
'statsoverview_indicators_toggle',
{
indicator_name: 'revenue/total_sales',
status: 'off',
}
);
} );
it( 'should record an event when a period is clicked', () => {
useUserPreferences.mockReturnValue( {
updateUserPreferences: () => {},
hiddenStats: null,
} );
render(
<StatsOverview />
);
const monthBtn = screen.getByRole( 'tab', {
name: 'Month to date',
} );
fireEvent.click( monthBtn );
expect( recordEvent ).toHaveBeenCalledWith(
'statsoverview_date_picker_update',
{
period: 'month',
}
);
} );
} );
describe( 'StatsOverview toggle and persist stat preference', () => {
it( 'should update preferences', async () => {
const updateUserPreferences = jest.fn();
useUserPreferences.mockReturnValue( {
updateUserPreferences,
hiddenStats: null,
} );
render(
<StatsOverview />
);
const ellipsisBtn = screen.getByRole( 'button', {
name: 'Choose which values to display',
} );
fireEvent.click( ellipsisBtn );
const totalSalesBtn = screen.getByRole( 'menuitemcheckbox', {
name: 'Total Sales',
} );
fireEvent.click( totalSalesBtn );
await waitFor( () => {
expect( updateUserPreferences ).toHaveBeenCalledWith( {
homepage_stats: {
hiddenStats: [
'revenue/net_revenue',
'products/items_sold',
'revenue/total_sales',
],
},
} );
} );
} );
} );
describe( 'StatsOverview rendering correct elements', () => {
it( 'should include a link to all the overview page', () => {
useUserPreferences.mockReturnValue( {
updateUserPreferences: () => {},
hiddenStats: null,
} );
render(
<StatsOverview />
);
const viewDetailedStatsLink = screen.getByText( 'View detailed stats' );
expect( viewDetailedStatsLink ).toBeDefined();
expect( viewDetailedStatsLink.href ).toBe(
'http://localhost/admin.php?page=wc-admin&path=%2Fanalytics%2Foverview'
);
} );
} );
describe( 'StatsOverview period selection', () => {
it( 'should have Today selected by default', () => {
useUserPreferences.mockReturnValue( {
updateUserPreferences: () => {},
hiddenStats: null,
} );
render(
<StatsOverview />
);
const todayBtn = screen.getByRole( 'tab', { name: 'Today' } );
expect( todayBtn.classList ).toContain( 'is-active' );
} );
it( 'should select a new period', () => {
useUserPreferences.mockReturnValue( {
updateUserPreferences: () => {},
hiddenStats: null,
} );
render(
<StatsOverview />
);
fireEvent.click( screen.getByRole( 'tab', { name: 'Month to date' } ) );
// Check props handed down to StatsList have the right period
expect( StatsList ).toHaveBeenLastCalledWith(
{
query: { compare: 'previous_period', period: 'month' },
stats: [
{
chart: 'total_sales',
label: 'Total Sales',
stat: 'revenue/total_sales',
},
{
chart: 'orders_count',
label: 'Orders',
stat: 'orders/orders_count',
},
],
},
{}
);
} );
} );