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

190 lines
4.8 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import { render, fireEvent, screen, waitFor } from '@testing-library/react';
import { useUserPreferences } from '@woocommerce/data';
import { recordEvent } from '@woocommerce/tracks';
/**
* Internal dependencies
*/
import { StatsOverview } from '../index';
import StatsList from '../stats-list';
jest.mock( '@woocommerce/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 {
InstallJetpackCTA: jest
.fn()
.mockImplementation( () => <div>mocked install jetpack cta</div> ),
};
} );
jest.mock( '@woocommerce/data', () => {
// Require the original module to not be mocked...
const originalModule = jest.requireActual( '@woocommerce/data' );
return {
__esModule: true, // Use it when dealing with esModules
...originalModule,
useUserPreferences: jest.fn(),
};
} );
jest.mock( '@wordpress/data', () => {
// Require the original module to not be mocked...
const originalModule = jest.requireActual( '@wordpress/data' );
return {
__esModule: true, // Use it when dealing with esModules
...originalModule,
useSelect: jest.fn().mockReturnValue( {} ),
};
} );
Migrate user store to wp.data (https://github.com/woocommerce/woocommerce-admin/pull/4505) * Initial user preferences custom hook (wc meta). * Organize dependencies. * Specify dependencies in useSelect() call. * Remove specifying preference keys. There's currently no performance benefit to be had. * Add HoC for hydrating current user data. * Add user prefs update method. * Export user prefs hook and HoC in data package. * Handle error condition when updating user preferences. * Use closure to get user ID for prefs update. * Refactor analytics dashboard to use new user hook. * Refactor ReportTable component to use new user hook. * Move prop access to top of function component. * Add todo for potential manual resolution logic. * Refactor DashboardCharts component to use new user preferences hook. * Move code out of functional component where possible. * Fix chart interval query property. * Refactor Leaderboards component to use new user preferences hook. * Move code out of functional component where possible. * Refactor Inbox panel to use user prefs hook. @todo - updating last read isn't working. * Use user prefs hook in StatsOverview component. * Export user preferences store name. * Use new store for unread inbox indicator. * Hydrate current user data higher up in the app. * Update "last read" timestamp in inbox panel. * Fix StatsOverview test. * Remove unused dispatch method from StorePerformance component. * Remove now defunct user methods from wc-api spec. * Add tests for isRequesting. * JSON decode WC meta on updated user object. * Test user prefs retrieval and save. * Remove todo comment. * Use user prefs hook in Jetpack install CTA on homepage.
2020-06-10 16:46:46 +00:00
jest.mock( '@woocommerce/data' );
describe( 'StatsOverview tracking', () => {
it( 'should record an event when a stat is toggled', () => {
Migrate user store to wp.data (https://github.com/woocommerce/woocommerce-admin/pull/4505) * Initial user preferences custom hook (wc meta). * Organize dependencies. * Specify dependencies in useSelect() call. * Remove specifying preference keys. There's currently no performance benefit to be had. * Add HoC for hydrating current user data. * Add user prefs update method. * Export user prefs hook and HoC in data package. * Handle error condition when updating user preferences. * Use closure to get user ID for prefs update. * Refactor analytics dashboard to use new user hook. * Refactor ReportTable component to use new user hook. * Move prop access to top of function component. * Add todo for potential manual resolution logic. * Refactor DashboardCharts component to use new user preferences hook. * Move code out of functional component where possible. * Fix chart interval query property. * Refactor Leaderboards component to use new user preferences hook. * Move code out of functional component where possible. * Refactor Inbox panel to use user prefs hook. @todo - updating last read isn't working. * Use user prefs hook in StatsOverview component. * Export user preferences store name. * Use new store for unread inbox indicator. * Hydrate current user data higher up in the app. * Update "last read" timestamp in inbox panel. * Fix StatsOverview test. * Remove unused dispatch method from StorePerformance component. * Remove now defunct user methods from wc-api spec. * Add tests for isRequesting. * JSON decode WC meta on updated user object. * Test user prefs retrieval and save. * Remove todo comment. * Use user prefs hook in Jetpack install CTA on homepage.
2020-06-10 16:46:46 +00:00
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', () => {
Migrate user store to wp.data (https://github.com/woocommerce/woocommerce-admin/pull/4505) * Initial user preferences custom hook (wc meta). * Organize dependencies. * Specify dependencies in useSelect() call. * Remove specifying preference keys. There's currently no performance benefit to be had. * Add HoC for hydrating current user data. * Add user prefs update method. * Export user prefs hook and HoC in data package. * Handle error condition when updating user preferences. * Use closure to get user ID for prefs update. * Refactor analytics dashboard to use new user hook. * Refactor ReportTable component to use new user hook. * Move prop access to top of function component. * Add todo for potential manual resolution logic. * Refactor DashboardCharts component to use new user preferences hook. * Move code out of functional component where possible. * Fix chart interval query property. * Refactor Leaderboards component to use new user preferences hook. * Move code out of functional component where possible. * Refactor Inbox panel to use user prefs hook. @todo - updating last read isn't working. * Use user prefs hook in StatsOverview component. * Export user preferences store name. * Use new store for unread inbox indicator. * Hydrate current user data higher up in the app. * Update "last read" timestamp in inbox panel. * Fix StatsOverview test. * Remove unused dispatch method from StorePerformance component. * Remove now defunct user methods from wc-api spec. * Add tests for isRequesting. * JSON decode WC meta on updated user object. * Test user prefs retrieval and save. * Remove todo comment. * Use user prefs hook in Jetpack install CTA on homepage.
2020-06-10 16:46:46 +00:00
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 () => {
Migrate user store to wp.data (https://github.com/woocommerce/woocommerce-admin/pull/4505) * Initial user preferences custom hook (wc meta). * Organize dependencies. * Specify dependencies in useSelect() call. * Remove specifying preference keys. There's currently no performance benefit to be had. * Add HoC for hydrating current user data. * Add user prefs update method. * Export user prefs hook and HoC in data package. * Handle error condition when updating user preferences. * Use closure to get user ID for prefs update. * Refactor analytics dashboard to use new user hook. * Refactor ReportTable component to use new user hook. * Move prop access to top of function component. * Add todo for potential manual resolution logic. * Refactor DashboardCharts component to use new user preferences hook. * Move code out of functional component where possible. * Fix chart interval query property. * Refactor Leaderboards component to use new user preferences hook. * Move code out of functional component where possible. * Refactor Inbox panel to use user prefs hook. @todo - updating last read isn't working. * Use user prefs hook in StatsOverview component. * Export user preferences store name. * Use new store for unread inbox indicator. * Hydrate current user data higher up in the app. * Update "last read" timestamp in inbox panel. * Fix StatsOverview test. * Remove unused dispatch method from StorePerformance component. * Remove now defunct user methods from wc-api spec. * Add tests for isRequesting. * JSON decode WC meta on updated user object. * Test user prefs retrieval and save. * Remove todo comment. * Use user prefs hook in Jetpack install CTA on homepage.
2020-06-10 16:46:46 +00:00
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( () => {
Migrate user store to wp.data (https://github.com/woocommerce/woocommerce-admin/pull/4505) * Initial user preferences custom hook (wc meta). * Organize dependencies. * Specify dependencies in useSelect() call. * Remove specifying preference keys. There's currently no performance benefit to be had. * Add HoC for hydrating current user data. * Add user prefs update method. * Export user prefs hook and HoC in data package. * Handle error condition when updating user preferences. * Use closure to get user ID for prefs update. * Refactor analytics dashboard to use new user hook. * Refactor ReportTable component to use new user hook. * Move prop access to top of function component. * Add todo for potential manual resolution logic. * Refactor DashboardCharts component to use new user preferences hook. * Move code out of functional component where possible. * Fix chart interval query property. * Refactor Leaderboards component to use new user preferences hook. * Move code out of functional component where possible. * Refactor Inbox panel to use user prefs hook. @todo - updating last read isn't working. * Use user prefs hook in StatsOverview component. * Export user preferences store name. * Use new store for unread inbox indicator. * Hydrate current user data higher up in the app. * Update "last read" timestamp in inbox panel. * Fix StatsOverview test. * Remove unused dispatch method from StorePerformance component. * Remove now defunct user methods from wc-api spec. * Add tests for isRequesting. * JSON decode WC meta on updated user object. * Test user prefs retrieval and save. * Remove todo comment. * Use user prefs hook in Jetpack install CTA on homepage.
2020-06-10 16:46:46 +00:00
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', () => {
Migrate user store to wp.data (https://github.com/woocommerce/woocommerce-admin/pull/4505) * Initial user preferences custom hook (wc meta). * Organize dependencies. * Specify dependencies in useSelect() call. * Remove specifying preference keys. There's currently no performance benefit to be had. * Add HoC for hydrating current user data. * Add user prefs update method. * Export user prefs hook and HoC in data package. * Handle error condition when updating user preferences. * Use closure to get user ID for prefs update. * Refactor analytics dashboard to use new user hook. * Refactor ReportTable component to use new user hook. * Move prop access to top of function component. * Add todo for potential manual resolution logic. * Refactor DashboardCharts component to use new user preferences hook. * Move code out of functional component where possible. * Fix chart interval query property. * Refactor Leaderboards component to use new user preferences hook. * Move code out of functional component where possible. * Refactor Inbox panel to use user prefs hook. @todo - updating last read isn't working. * Use user prefs hook in StatsOverview component. * Export user preferences store name. * Use new store for unread inbox indicator. * Hydrate current user data higher up in the app. * Update "last read" timestamp in inbox panel. * Fix StatsOverview test. * Remove unused dispatch method from StorePerformance component. * Remove now defunct user methods from wc-api spec. * Add tests for isRequesting. * JSON decode WC meta on updated user object. * Test user prefs retrieval and save. * Remove todo comment. * Use user prefs hook in Jetpack install CTA on homepage.
2020-06-10 16:46:46 +00:00
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', () => {
Migrate user store to wp.data (https://github.com/woocommerce/woocommerce-admin/pull/4505) * Initial user preferences custom hook (wc meta). * Organize dependencies. * Specify dependencies in useSelect() call. * Remove specifying preference keys. There's currently no performance benefit to be had. * Add HoC for hydrating current user data. * Add user prefs update method. * Export user prefs hook and HoC in data package. * Handle error condition when updating user preferences. * Use closure to get user ID for prefs update. * Refactor analytics dashboard to use new user hook. * Refactor ReportTable component to use new user hook. * Move prop access to top of function component. * Add todo for potential manual resolution logic. * Refactor DashboardCharts component to use new user preferences hook. * Move code out of functional component where possible. * Fix chart interval query property. * Refactor Leaderboards component to use new user preferences hook. * Move code out of functional component where possible. * Refactor Inbox panel to use user prefs hook. @todo - updating last read isn't working. * Use user prefs hook in StatsOverview component. * Export user preferences store name. * Use new store for unread inbox indicator. * Hydrate current user data higher up in the app. * Update "last read" timestamp in inbox panel. * Fix StatsOverview test. * Remove unused dispatch method from StorePerformance component. * Remove now defunct user methods from wc-api spec. * Add tests for isRequesting. * JSON decode WC meta on updated user object. * Test user prefs retrieval and save. * Remove todo comment. * Use user prefs hook in Jetpack install CTA on homepage.
2020-06-10 16:46:46 +00:00
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', () => {
Migrate user store to wp.data (https://github.com/woocommerce/woocommerce-admin/pull/4505) * Initial user preferences custom hook (wc meta). * Organize dependencies. * Specify dependencies in useSelect() call. * Remove specifying preference keys. There's currently no performance benefit to be had. * Add HoC for hydrating current user data. * Add user prefs update method. * Export user prefs hook and HoC in data package. * Handle error condition when updating user preferences. * Use closure to get user ID for prefs update. * Refactor analytics dashboard to use new user hook. * Refactor ReportTable component to use new user hook. * Move prop access to top of function component. * Add todo for potential manual resolution logic. * Refactor DashboardCharts component to use new user preferences hook. * Move code out of functional component where possible. * Fix chart interval query property. * Refactor Leaderboards component to use new user preferences hook. * Move code out of functional component where possible. * Refactor Inbox panel to use user prefs hook. @todo - updating last read isn't working. * Use user prefs hook in StatsOverview component. * Export user preferences store name. * Use new store for unread inbox indicator. * Hydrate current user data higher up in the app. * Update "last read" timestamp in inbox panel. * Fix StatsOverview test. * Remove unused dispatch method from StorePerformance component. * Remove now defunct user methods from wc-api spec. * Add tests for isRequesting. * JSON decode WC meta on updated user object. * Test user prefs retrieval and save. * Remove todo comment. * Use user prefs hook in Jetpack install CTA on homepage.
2020-06-10 16:46:46 +00:00
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',
},
],
},
{}
);
} );
} );