-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create pending sticker when loading the "how to migrate" step (#95413)
* Create pending sticker when loading the step * Extract pending migration status hook * Add tests * Update function name to not be opinionated Co-authored-by: Gabriel Caires <[email protected]> --------- Co-authored-by: Gabriel Caires <[email protected]>
- Loading branch information
1 parent
0fd871d
commit 2101023
Showing
3 changed files
with
149 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
100 changes: 100 additions & 0 deletions
100
.../declarative-flow/internals/steps-repository/site-migration-how-to-migrate/test/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| /** | ||
| * @jest-environment jsdom | ||
| */ | ||
| import { fireEvent } from '@testing-library/react'; | ||
| import React from 'react'; | ||
| import { useUpdateMigrationStatus } from 'calypso/data/site-migration/use-update-migration-status'; | ||
| import { RenderStepOptions, mockStepProps, renderStep } from '../../test/helpers'; | ||
| import SiteMigrationHowToMigrate from '../index'; | ||
| import type { StepProps } from '../../../types'; | ||
|
|
||
| const siteId = 1; | ||
|
|
||
| jest.mock( 'calypso/data/site-migration/use-update-migration-status', () => ( { | ||
| useUpdateMigrationStatus: jest.fn(), | ||
| } ) ); | ||
|
|
||
| jest.mock( 'calypso/lib/presales-chat', () => ( { | ||
| usePresalesChat: jest.fn(), | ||
| } ) ); | ||
|
|
||
| jest.mock( 'calypso/data/site-profiler/use-analyze-url-query', () => ( { | ||
| useAnalyzeUrlQuery: () => ( { data: {} } ), | ||
| } ) ); | ||
|
|
||
| jest.mock( 'calypso/data/site-profiler/use-hosting-provider-query', () => ( { | ||
| useHostingProviderQuery: () => ( { data: {} } ), | ||
| } ) ); | ||
|
|
||
| jest.mock( 'calypso/site-profiler/hooks/use-hosting-provider-name', () => jest.fn() ); | ||
|
|
||
| jest.mock( 'calypso/landing/stepper/hooks/use-site', () => ( { | ||
| useSite: jest.fn( () => ( { | ||
| ID: siteId, | ||
| } ) ), | ||
| } ) ); | ||
|
|
||
| const render = ( props?: Partial< StepProps >, renderOptions?: RenderStepOptions ) => { | ||
| const combinedProps = { ...mockStepProps( props ) }; | ||
| return renderStep( <SiteMigrationHowToMigrate { ...combinedProps } />, renderOptions ); | ||
| }; | ||
|
|
||
| describe( 'SiteMigrationHowToMigrate', () => { | ||
| const mockSubmit = jest.fn(); | ||
| let mockUpdateMigrationStatus; | ||
|
|
||
| beforeEach( () => { | ||
| mockUpdateMigrationStatus = jest.fn(); | ||
| ( useUpdateMigrationStatus as jest.Mock ).mockReturnValue( { | ||
| updateMigrationStatus: mockUpdateMigrationStatus, | ||
| } ); | ||
| } ); | ||
|
|
||
| it( 'should register pending migration status when the component is loaded', () => { | ||
| render( { navigation: { submit: mockSubmit } } ); | ||
|
|
||
| expect( mockUpdateMigrationStatus ).toHaveBeenCalledWith( siteId, 'migration-pending' ); | ||
| } ); | ||
|
|
||
| it( 'should call updateMigrationStatus with correct value for DIFM option', () => { | ||
| const { getByText } = render( { navigation: { submit: mockSubmit } } ); | ||
|
|
||
| const optionButton = getByText( 'Do it for me' ); | ||
| fireEvent.click( optionButton ); | ||
|
|
||
| // Check the last call value | ||
| const lastCallValue = | ||
| mockUpdateMigrationStatus.mock.calls[ mockUpdateMigrationStatus.mock.calls.length - 1 ][ 1 ]; | ||
| expect( lastCallValue ).toBe( 'migration-pending-difm' ); | ||
| } ); | ||
|
|
||
| it( 'should call updateMigrationStatus with correct value for DIY option', () => { | ||
| const { getByText } = render( { navigation: { submit: mockSubmit } } ); | ||
|
|
||
| const optionButton = getByText( "I'll do it myself" ); | ||
| fireEvent.click( optionButton ); | ||
|
|
||
| // Check the last call value | ||
| const lastCallValue = | ||
| mockUpdateMigrationStatus.mock.calls[ mockUpdateMigrationStatus.mock.calls.length - 1 ][ 1 ]; | ||
| expect( lastCallValue ).toBe( 'migration-pending-diy' ); | ||
| } ); | ||
|
|
||
| it( 'should call submit with correct value when DIFM option is clicked', () => { | ||
| const { getByText } = render( { navigation: { submit: mockSubmit } } ); | ||
|
|
||
| const optionButton = getByText( 'Do it for me' ); | ||
| fireEvent.click( optionButton ); | ||
|
|
||
| expect( mockSubmit ).toHaveBeenCalledWith( { destination: 'upgrade', how: 'difm' } ); | ||
| } ); | ||
|
|
||
| it( 'should call submit with correct value for DIY option', () => { | ||
| const { getByText } = render( { navigation: { submit: mockSubmit } } ); | ||
|
|
||
| const optionButton = getByText( "I'll do it myself" ); | ||
| fireEvent.click( optionButton ); | ||
|
|
||
| expect( mockSubmit ).toHaveBeenCalledWith( { destination: 'upgrade', how: 'myself' } ); | ||
| } ); | ||
| } ); |
45 changes: 45 additions & 0 deletions
45
.../internals/steps-repository/site-migration-how-to-migrate/use-pending-migration-status.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { useEffect } from 'react'; | ||
| import { useUpdateMigrationStatus } from 'calypso/data/site-migration/use-update-migration-status'; | ||
| import { HOW_TO_MIGRATE_OPTIONS } from 'calypso/landing/stepper/constants'; | ||
| import { useSite } from 'calypso/landing/stepper/hooks/use-site'; | ||
| import type { NavigationControls } from '../../types'; | ||
|
|
||
| interface PendingMigrationStatusProps { | ||
| onSubmit?: Pick< NavigationControls, 'submit' >[ 'submit' ]; | ||
| } | ||
|
|
||
| const usePendingMigrationStatus = ( { onSubmit }: PendingMigrationStatusProps ) => { | ||
| const site = useSite(); | ||
| const siteId = site?.ID; | ||
|
|
||
| const canInstallPlugins = site?.plan?.features?.active.find( | ||
| ( feature ) => feature === 'install-plugins' | ||
| ) | ||
| ? true | ||
| : false; | ||
|
|
||
| const { updateMigrationStatus } = useUpdateMigrationStatus(); | ||
|
|
||
| // Register pending migration status when loading the step. | ||
| useEffect( () => { | ||
| if ( siteId ) { | ||
| updateMigrationStatus( siteId, 'migration-pending' ); | ||
| } | ||
| }, [ siteId, updateMigrationStatus ] ); | ||
|
|
||
| const setPendingMigration = ( how: string ) => { | ||
| const destination = canInstallPlugins ? 'migrate' : 'upgrade'; | ||
| if ( siteId ) { | ||
| const parsedHow = how === HOW_TO_MIGRATE_OPTIONS.DO_IT_MYSELF ? 'diy' : how; | ||
| updateMigrationStatus( siteId, `migration-pending-${ parsedHow }` ); | ||
| } | ||
|
|
||
| if ( onSubmit ) { | ||
| return onSubmit( { how, destination } ); | ||
| } | ||
| }; | ||
|
|
||
| return { setPendingMigration }; | ||
| }; | ||
|
|
||
| export default usePendingMigrationStatus; |