From 904d9b526a5271575f8945adbce13e586671b278 Mon Sep 17 00:00:00 2001 From: Donna Peplinskie Date: Fri, 6 Dec 2024 12:27:58 -0500 Subject: [PATCH 1/9] Remove obsolete translation check --- .../site-migration-how-to-migrate/index.tsx | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx index 23e096f8d55dc..a905fa2658548 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx @@ -1,4 +1,3 @@ -import { useHasEnTranslation } from '@automattic/i18n-utils'; import { StepContainer } from '@automattic/onboarding'; import { useTranslate } from 'i18n-calypso'; import { FC, useCallback, useMemo } from 'react'; @@ -32,21 +31,13 @@ const SiteMigrationHowToMigrate: FC< Props > = ( props ) => { usePresalesChat( 'wpcom' ); - const hasEnTranslation = useHasEnTranslation(); - const options = useMemo( () => [ { label: translate( 'Do it for me' ), - description: hasEnTranslation( - "Share your site with us. We'll review it and handle the migration if possible." - ) - ? translate( - "Share your site with us. We'll review it and handle the migration if possible." - ) - : translate( - "Share your site with us, and we'll review it and handle the migration if possible." - ), + description: translate( + "Share your site with us, and we'll review it and handle the migration if possible." + ), value: HOW_TO_MIGRATE_OPTIONS.DO_IT_FOR_ME, selected: true, }, From 943ed96c4219adf352a6e1fb5234ee59c5d8c1d8 Mon Sep 17 00:00:00 2001 From: Donna Peplinskie Date: Mon, 9 Dec 2024 15:31:03 -0500 Subject: [PATCH 2/9] Conditionally update UI on DIFM vs. DIY page --- .../site-migration-how-to-migrate/index.tsx | 167 ++++++++++++++---- .../site-migration-how-to-migrate/style.scss | 54 ++++++ 2 files changed, 189 insertions(+), 32 deletions(-) diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx index a905fa2658548..207430105eaf6 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx @@ -1,4 +1,7 @@ -import { StepContainer } from '@automattic/onboarding'; +import config from '@automattic/calypso-config'; +import { PLAN_BUSINESS, getPlan, isWpComBusinessPlan } from '@automattic/calypso-products'; +import { NextButton, StepContainer } from '@automattic/onboarding'; +import { Icon, copy, globe, lockOutline, scheduled } from '@wordpress/icons'; import { useTranslate } from 'i18n-calypso'; import { FC, useCallback, useMemo } from 'react'; import DocumentHead from 'calypso/components/data/document-head'; @@ -21,9 +24,10 @@ interface Props extends StepProps { subHeaderText?: string; } +const isMigrationExperimentEnabled = config.isEnabled( 'migration-flow/experiment' ); + const SiteMigrationHowToMigrate: FC< Props > = ( props ) => { const { navigation, headerText } = props; - const translate = useTranslate(); const importSiteQueryParam = useQuery().get( 'from' ) || ''; const site = useSite(); @@ -36,7 +40,7 @@ const SiteMigrationHowToMigrate: FC< Props > = ( props ) => { { label: translate( 'Do it for me' ), description: translate( - "Share your site with us, and we'll review it and handle the migration if possible." + "Share your site with us. We'll review it and handle the migration if possible." ), value: HOW_TO_MIGRATE_OPTIONS.DO_IT_FOR_ME, selected: true, @@ -52,6 +56,36 @@ const SiteMigrationHowToMigrate: FC< Props > = ( props ) => { [ translate ] ); + const experimentalOptions = useMemo( + () => [ + { + icon: lockOutline, + description: translate( + 'Upgrade your site and securely share access to your current site.' + ), + }, + { + icon: copy, + description: translate( + "We'll bring over a copy of your site, without affecting the current live version." + ), + }, + { + icon: scheduled, + description: translate( + "You'll get an update on the progress of your migration within 2-3 business days." + ), + }, + { + icon: globe, + description: translate( + "We'll help you switch your domain over after the migration's completed." + ), + }, + ], + [ translate ] + ); + let importSiteHostName = ''; try { @@ -79,39 +113,104 @@ const SiteMigrationHowToMigrate: FC< Props > = ( props ) => { } }; - const hostingProviderSlug = hostingProviderData?.hosting_provider?.slug; - const shouldDisplayHostIdentificationMessage = - hostingProviderSlug && - hostingProviderSlug !== 'unknown' && - hostingProviderSlug !== 'automattic'; - - const stepContent = ( -
- { options.map( ( option, i ) => ( - handleClick( option.value ) } - /> - ) ) } -
- ); - - const platformText = shouldDisplayHostIdentificationMessage - ? translate( 'Your WordPress site is hosted with %(hostingProviderName)s.', { - args: { hostingProviderName }, - } ) - : ''; - const goBack = useCallback( () => { cancelMigration(); navigation.goBack?.(); }, [ cancelMigration, navigation ] ); + function renderSubHeaderText() { + if ( isMigrationExperimentEnabled ) { + const planName = getPlan( PLAN_BUSINESS )?.getTitle() ?? ''; + const isBusinessPlan = site?.plan?.product_slug + ? isWpComBusinessPlan( site?.plan?.product_slug ) + : false; + + return isBusinessPlan + ? // translators: %(planName)s is the name of the Business plan. + translate( + 'Save yourself the headache of migrating. Our expert team takes care of everything without interrupting your current site. Plus it’s included in your %(planName)s plan.', + { + args: { + planName, + }, + } + ) + : translate( + 'Save yourself the headache of migrating. Our expert team takes care of everything without interrupting your current site. Plus you get 50% off our annual %(planName)s plan.', + { + args: { + planName, + }, + } + ); + } + + // Maybe extract this code to a separate component if we keep it post-experiment. + const hostingProviderSlug = hostingProviderData?.hosting_provider?.slug; + const shouldDisplayHostIdentificationMessage = + hostingProviderSlug && + hostingProviderSlug !== 'unknown' && + hostingProviderSlug !== 'automattic'; + + return shouldDisplayHostIdentificationMessage + ? // translators: %(hostingProviderName)s is the name of the hosting provider. + translate( 'Your WordPress site is hosted with %(hostingProviderName)s.', { + args: { hostingProviderName }, + } ) + : ''; + } + + function renderStepContent() { + if ( isMigrationExperimentEnabled ) { + return ( +
+ handleClick( HOW_TO_MIGRATE_OPTIONS.DO_IT_FOR_ME ) }> + { translate( 'Get started' ) } + +
+

{ translate( 'How it works' ) }

+
    + { experimentalOptions.map( ( option, index ) => ( +
  • + +

    + { option.description } +

    +
    • + ) ) } +
+
+
+ ); + } + + return ( +
+ { options.map( ( option, i ) => ( + handleClick( option.value ) } + /> + ) ) } +
+ ); + } + return ( <> - + = ( props ) => { formattedHeader={ } - stepContent={ stepContent } + stepContent={ renderStepContent() } recordTracksEvent={ recordTracksEvent } goBack={ goBack } /> diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/style.scss index 7f28d87751bd9..49736b2148571 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/style.scss +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/style.scss @@ -49,3 +49,57 @@ margin: 0 auto; } } + +.how-to-migrate__experiment { + .action-buttons__next { + display: block; + margin: auto; + width: 50%; + } + + .how-to-migrate__process-details { + margin: 40px auto 0 auto; + max-width: 350px; + + &-title { + color: var(--studio-gray-100); + font-size: 1.25rem; + font-weight: 500; + margin-bottom: 0.5rem; + text-align: center; + } + + &-list { + background-color: #f6f7f7; + font-size: 0.75rem; + list-style: none; + margin: 0; + padding: 2rem; + + &-item { + display: flex; + gap: 0.5rem; + margin-bottom: 1rem; + + &:last-child { + margin-bottom: 0; + } + } + } + + &-icon { + background-color: #dcdcde; + border: 2px solid #dcdcde; + border-radius: 4px; + display: flex; + fill: var(--studio-gray-70); + flex: 0 0 24px; + padding: 4px; + } + + &-description { + color: var(--studio-black); + line-height: 1.66666667; + } + } +} From 4ad14347d44468722e5b147e20ef6b0219e8e599 Mon Sep 17 00:00:00 2001 From: Donna Peplinskie Date: Tue, 10 Dec 2024 11:59:40 -0500 Subject: [PATCH 3/9] Fix whitespace on mobile --- .../site-migration-how-to-migrate/index.tsx | 2 +- .../site-migration-how-to-migrate/style.scss | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx index 207430105eaf6..8e1c01dcadf2e 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx @@ -163,7 +163,7 @@ const SiteMigrationHowToMigrate: FC< Props > = ( props ) => { function renderStepContent() { if ( isMigrationExperimentEnabled ) { return ( -
+
handleClick( HOW_TO_MIGRATE_OPTIONS.DO_IT_FOR_ME ) }> { translate( 'Get started' ) } diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/style.scss index 49736b2148571..f92e29efa0557 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/style.scss +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/style.scss @@ -50,7 +50,13 @@ } } -.how-to-migrate__experiment { +.how-to-migrate__experiment-expectations { + padding: 0 0 60px; + + @include break-large { + padding: 0; + } + .action-buttons__next { display: block; margin: auto; From cfc6f21bb34398d584c025a351d59fd27e7641b5 Mon Sep 17 00:00:00 2001 From: Donna Peplinskie Date: Tue, 10 Dec 2024 14:56:01 -0500 Subject: [PATCH 4/9] Add "I'll do it myself" link --- .../diy-option/index.tsx | 23 ++++++++ .../diy-option/style.scss | 5 ++ .../site-migration-how-to-migrate/index.tsx | 56 +++++++++++-------- 3 files changed, 62 insertions(+), 22 deletions(-) create mode 100644 client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/diy-option/index.tsx create mode 100644 client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/diy-option/style.scss diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/diy-option/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/diy-option/index.tsx new file mode 100644 index 0000000000000..e7c7b5f6d5dfb --- /dev/null +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/diy-option/index.tsx @@ -0,0 +1,23 @@ +import { Button } from '@automattic/components'; +import { useTranslate } from 'i18n-calypso'; +import React, { FC } from 'react'; +import { HOW_TO_MIGRATE_OPTIONS } from 'calypso/landing/stepper/constants'; +import './style.scss'; + +interface Props { + onClick: () => void; +} + +export const DIYOption: FC< Props > = ( { onClick } ) => { + const translate = useTranslate(); + + return ( + + ); +}; diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/diy-option/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/diy-option/style.scss new file mode 100644 index 0000000000000..7843c70abdf49 --- /dev/null +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/diy-option/style.scss @@ -0,0 +1,5 @@ +.how-to-migrate__experiment-diy { + color: var(--studio-gray-90); + font-weight: 500; + text-decoration: underline; +} diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx index 8e1c01dcadf2e..b1d79b547f5bf 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx @@ -16,6 +16,7 @@ import { recordTracksEvent } from 'calypso/lib/analytics/tracks'; import { usePresalesChat } from 'calypso/lib/presales-chat'; import useHostingProviderName from 'calypso/site-profiler/hooks/use-hosting-provider-name'; import FlowCard from '../components/flow-card'; +import { DIYOption } from './diy-option'; import type { StepProps } from '../../types'; import './style.scss'; @@ -27,7 +28,7 @@ interface Props extends StepProps { const isMigrationExperimentEnabled = config.isEnabled( 'migration-flow/experiment' ); const SiteMigrationHowToMigrate: FC< Props > = ( props ) => { - const { navigation, headerText } = props; + const { navigation, headerText, stepName, subHeaderText } = props; const translate = useTranslate(); const importSiteQueryParam = useQuery().get( 'from' ) || ''; const site = useSite(); @@ -56,6 +57,8 @@ const SiteMigrationHowToMigrate: FC< Props > = ( props ) => { [ translate ] ); + // Extract the display of items to a separate component if we keep this version post-experiment, + // as this format is also used on the site identification page and further into the DIFM flow. const experimentalOptions = useMemo( () => [ { @@ -202,6 +205,35 @@ const SiteMigrationHowToMigrate: FC< Props > = ( props ) => { ); } + let stepContainerProps = { + stepName: stepName ?? 'site-migration-how-to-migrate', + className: 'how-to-migrate', + shouldHideNavButtons: false, + hideSkip: true, + formattedHeader: ( + + ), + stepContent: renderStepContent(), + recordTracksEvent: recordTracksEvent, + goBack: goBack, + }; + + if ( isMigrationExperimentEnabled ) { + stepContainerProps = { + ...stepContainerProps, + customizedActionButtons: , + }; + } + return ( <> = ( props ) => { : translate( 'How do you want to migrate?' ) } /> - - } - stepContent={ renderStepContent() } - recordTracksEvent={ recordTracksEvent } - goBack={ goBack } - /> + ); }; From d186a87248248972dff142775227d11f4ebb497a Mon Sep 17 00:00:00 2001 From: Donna Peplinskie Date: Tue, 10 Dec 2024 15:17:19 -0500 Subject: [PATCH 5/9] Fix missing argument in TypeScript definition --- .../site-migration-how-to-migrate/diy-option/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/diy-option/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/diy-option/index.tsx index e7c7b5f6d5dfb..0ad0334e20bdd 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/diy-option/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/diy-option/index.tsx @@ -5,7 +5,7 @@ import { HOW_TO_MIGRATE_OPTIONS } from 'calypso/landing/stepper/constants'; import './style.scss'; interface Props { - onClick: () => void; + onClick: ( option: string ) => void; } export const DIYOption: FC< Props > = ( { onClick } ) => { From 45ec037b7b536325d9f2d9a61802e5c7ddc75cf9 Mon Sep 17 00:00:00 2001 From: Donna Peplinskie Date: Tue, 10 Dec 2024 16:35:08 -0500 Subject: [PATCH 6/9] Simplify passing of conditional prop --- .../site-migration-how-to-migrate/index.tsx | 54 +++++++++---------- 1 file changed, 24 insertions(+), 30 deletions(-) diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx index b1d79b547f5bf..3315e7ff1c1d5 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx @@ -205,35 +205,6 @@ const SiteMigrationHowToMigrate: FC< Props > = ( props ) => { ); } - let stepContainerProps = { - stepName: stepName ?? 'site-migration-how-to-migrate', - className: 'how-to-migrate', - shouldHideNavButtons: false, - hideSkip: true, - formattedHeader: ( - - ), - stepContent: renderStepContent(), - recordTracksEvent: recordTracksEvent, - goBack: goBack, - }; - - if ( isMigrationExperimentEnabled ) { - stepContainerProps = { - ...stepContainerProps, - customizedActionButtons: , - }; - } - return ( <> = ( props ) => { : translate( 'How do you want to migrate?' ) } /> - + + } + stepContent={ renderStepContent() } + recordTracksEvent={ recordTracksEvent } + goBack={ goBack } + customizedActionButtons={ + isMigrationExperimentEnabled ? : undefined + } + /> ); }; From 7cd38c5fe7b66055f3c1e52b4bddecadb2c8d301 Mon Sep 17 00:00:00 2001 From: Donna Peplinskie Date: Tue, 10 Dec 2024 16:52:14 -0500 Subject: [PATCH 7/9] Use function expressions to align with rest of component code --- .../site-migration-how-to-migrate/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx index 3315e7ff1c1d5..e2e99b81ceada 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx @@ -121,7 +121,7 @@ const SiteMigrationHowToMigrate: FC< Props > = ( props ) => { navigation.goBack?.(); }, [ cancelMigration, navigation ] ); - function renderSubHeaderText() { + const renderSubHeaderText = () => { if ( isMigrationExperimentEnabled ) { const planName = getPlan( PLAN_BUSINESS )?.getTitle() ?? ''; const isBusinessPlan = site?.plan?.product_slug @@ -161,9 +161,9 @@ const SiteMigrationHowToMigrate: FC< Props > = ( props ) => { args: { hostingProviderName }, } ) : ''; - } + }; - function renderStepContent() { + const renderStepContent = () => { if ( isMigrationExperimentEnabled ) { return (
@@ -203,7 +203,7 @@ const SiteMigrationHowToMigrate: FC< Props > = ( props ) => { ) ) }
); - } + }; return ( <> From f56daaf22c324e7f8c428f49fcfb10fce84f7c8e Mon Sep 17 00:00:00 2001 From: Donna Peplinskie Date: Wed, 11 Dec 2024 08:04:21 -0500 Subject: [PATCH 8/9] Add light test coverage for DIYOption component --- .../diy-option/test/index.tsx | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/diy-option/test/index.tsx diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/diy-option/test/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/diy-option/test/index.tsx new file mode 100644 index 0000000000000..526f9a7b2a353 --- /dev/null +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/diy-option/test/index.tsx @@ -0,0 +1,31 @@ +/** + * @jest-environment jsdom + */ +import config, { isEnabled } from '@automattic/calypso-config'; +import { render, screen } from '@testing-library/react'; +import { DIYOption } from '..'; + +const isMigrationExperimentEnabled = isEnabled( 'migration-flow/experiment' ); +const onClick = jest.fn(); + +const restoreIsMigrationExperimentEnabled = () => { + if ( isMigrationExperimentEnabled ) { + config.enable( 'migration-flow/experiment' ); + } else { + config.disable( 'migration-flow/experiment' ); + } +}; + +describe( 'DIYOption', () => { + afterEach( () => { + restoreIsMigrationExperimentEnabled(); + } ); + + it( 'should render the DIY link', () => { + config.enable( 'migration-flow/experiment' ); + + render( ); + + expect( screen.queryByText( /I'll do it myself/ ) ).toBeInTheDocument(); + } ); +} ); From 89b152277bddf3aeb4f4060e5f2dcf8c2dcb2648 Mon Sep 17 00:00:00 2001 From: Donna Peplinskie Date: Wed, 11 Dec 2024 12:22:22 -0500 Subject: [PATCH 9/9] Add test coverage for SiteMigrationHowToMigrate component --- .../site-migration-how-to-migrate/index.tsx | 3 +- .../test/index.tsx | 87 +++++++++++++++++++ 2 files changed, 88 insertions(+), 2 deletions(-) create mode 100644 client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/test/index.tsx diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx index e2e99b81ceada..b9b99d1942c2f 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx @@ -25,10 +25,9 @@ interface Props extends StepProps { subHeaderText?: string; } -const isMigrationExperimentEnabled = config.isEnabled( 'migration-flow/experiment' ); - const SiteMigrationHowToMigrate: FC< Props > = ( props ) => { const { navigation, headerText, stepName, subHeaderText } = props; + const isMigrationExperimentEnabled = config.isEnabled( 'migration-flow/experiment' ); const translate = useTranslate(); const importSiteQueryParam = useQuery().get( 'from' ) || ''; const site = useSite(); diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/test/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/test/index.tsx new file mode 100644 index 0000000000000..9cf522a66f121 --- /dev/null +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/test/index.tsx @@ -0,0 +1,87 @@ +/** + * @jest-environment jsdom + */ +import config, { isEnabled } from '@automattic/calypso-config'; +import { screen } from '@testing-library/react'; +import { ComponentProps } from 'react'; +import { useSite } from 'calypso/landing/stepper/hooks/use-site'; +import SiteMigrationHowToMigrate from '../'; +import { defaultSiteDetails } from '../../launchpad/test/lib/fixtures'; +import { mockStepProps, renderStep, RenderStepOptions } from '../../test/helpers'; + +const isMigrationExperimentEnabled = isEnabled( 'migration-flow/experiment' ); +const navigation = { submit: jest.fn() }; + +type Props = ComponentProps< typeof SiteMigrationHowToMigrate >; + +const render = ( props?: Partial< Props >, renderOptions?: RenderStepOptions ) => { + const combinedProps = { ...mockStepProps( props ), stepName: 'site-migration-how-to-migrate' }; + + return renderStep( , renderOptions ); +}; + +jest.mock( 'calypso/landing/stepper/hooks/use-site', () => ( { + useSite: jest.fn(), +} ) ); + +jest.mock( 'calypso/lib/presales-chat', () => ( { + usePresalesChat: () => {}, +} ) ); + +describe( 'SiteMigrationHowToMigrate', () => { + beforeAll( () => { + config.enable( 'migration-flow/experiment' ); + } ); + + afterAll( () => { + if ( isMigrationExperimentEnabled ) { + config.enable( 'migration-flow/experiment' ); + } else { + config.disable( 'migration-flow/experiment' ); + } + } ); + + afterEach( () => { + jest.resetAllMocks(); + } ); + + it( 'should render proper subheading for free plan', () => { + const mockSite = { + ...defaultSiteDetails, + }; + + ( useSite as jest.Mock ).mockReturnValue( mockSite ); + + render( { navigation } ); + + expect( screen.queryByText( /Plus you get 50% off our annual/ ) ).toBeInTheDocument(); + } ); + + it( 'should render proper subheading for Business plan', () => { + const mockSite = { + ...defaultSiteDetails, + plan: { + ...defaultSiteDetails.plan, + product_slug: 'business-bundle', + }, + }; + + ( useSite as jest.Mock ).mockReturnValue( mockSite ); + + render( { navigation } ); + + expect( screen.queryByText( /Plus it’s included in your/ ) ).toBeInTheDocument(); + } ); + + it( 'should render step content', () => { + render( { navigation } ); + + expect( screen.queryByText( /How it works/ ) ).toBeInTheDocument(); + } ); + + it( 'should render component', () => { + render( { navigation } ); + + expect( screen.queryByText( /I'll do it myself/ ) ).toBeInTheDocument(); + } ); +} );