diff --git a/client/landing/stepper/declarative-flow/internals/hooks/use-step-navigation-with-tracking/index.ts b/client/landing/stepper/declarative-flow/internals/hooks/use-step-navigation-with-tracking/index.ts index 1b2cc8d23ed1ea..ec4fd1adb72b91 100644 --- a/client/landing/stepper/declarative-flow/internals/hooks/use-step-navigation-with-tracking/index.ts +++ b/client/landing/stepper/declarative-flow/internals/hooks/use-step-navigation-with-tracking/index.ts @@ -19,20 +19,14 @@ interface Params< FlowSteps extends StepperStep[] > { flow: Flow; currentStepRoute: string; navigate: Navigate< FlowSteps >; - steps: StepperStep[]; } export const useStepNavigationWithTracking = ( { flow, currentStepRoute, navigate, - steps, }: Params< ReturnType< Flow[ 'useSteps' ] > > ) => { - const stepNavigation = flow.useStepNavigation( - currentStepRoute, - navigate, - steps.map( ( step ) => step.slug ) - ); + const stepNavigation = flow.useStepNavigation( currentStepRoute, navigate ); const intent = useSelect( ( select ) => ( select( ONBOARD_STORE ) as OnboardSelect ).getIntent(), [] ) ?? ''; const tracksEventPropsFromFlow = flow.useTracksEventProps?.(); diff --git a/client/landing/stepper/declarative-flow/internals/hooks/use-step-navigation-with-tracking/test/index.tsx b/client/landing/stepper/declarative-flow/internals/hooks/use-step-navigation-with-tracking/test/index.tsx index 241795508f3a63..48d969d6187634 100644 --- a/client/landing/stepper/declarative-flow/internals/hooks/use-step-navigation-with-tracking/test/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/hooks/use-step-navigation-with-tracking/test/index.tsx @@ -22,27 +22,26 @@ jest.mock( '../../../analytics/record-step-navigation', () => ( { recordStepNavigation: jest.fn(), } ) ); -describe( 'useStepNavigationWithTracking', () => { - const stepNavControls = { - submit: jest.fn(), - exitFlow: jest.fn(), - goBack: jest.fn(), - goNext: jest.fn(), - goToStep: jest.fn(), - }; - - const mockParams = { - flow: { - name: 'mock-flow', - isSignupFlow: false, - useSteps: () => [], - useStepNavigation: () => stepNavControls, - }, - currentStepRoute: 'mock-step', - navigate: () => {}, - steps: [], - }; +const stepNavControls = { + submit: jest.fn(), + exitFlow: jest.fn(), + goBack: jest.fn(), + goNext: jest.fn(), + goToStep: jest.fn(), +}; + +const mockParams = { + flow: { + name: 'mock-flow', + isSignupFlow: false, + useSteps: () => [], + useStepNavigation: () => stepNavControls, + }, + currentStepRoute: 'mock-step', + navigate: () => {}, +}; +describe( 'useStepNavigationWithTracking', () => { beforeEach( () => { jest.clearAllMocks(); } ); @@ -57,6 +56,20 @@ describe( 'useStepNavigationWithTracking', () => { expect( result.current ).toHaveProperty( 'goToStep' ); } ); + it( 'ensures reference equality given same input', () => { + const { result, rerender } = renderHook( + ( params ) => useStepNavigationWithTracking( params ), + { + initialProps: mockParams, + } + ); + + const previous = result.current; + + rerender( mockParams ); + expect( result.current ).toBe( previous ); + } ); + it( 'calls the wrapped submit control with correct parameters and records the respective event', () => { const { result } = renderHook( () => useStepNavigationWithTracking( mockParams ) ); const providedDependencies = { foo: 'foo' }; diff --git a/client/landing/stepper/declarative-flow/internals/index.tsx b/client/landing/stepper/declarative-flow/internals/index.tsx index 6e127bf1576eaf..4b64429e2f0a3a 100644 --- a/client/landing/stepper/declarative-flow/internals/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/index.tsx @@ -108,7 +108,6 @@ export const FlowRenderer: React.FC< { flow: Flow } > = ( { flow } ) => { flow, currentStepRoute, navigate, - steps: flowSteps, } ); // Retrieve any extra step data from the stepper-internal store. This will be passed as a prop to the current step. diff --git a/client/landing/stepper/declarative-flow/internals/types.ts b/client/landing/stepper/declarative-flow/internals/types.ts index 6b294e06058bc2..cc46d0c276dfde 100644 --- a/client/landing/stepper/declarative-flow/internals/types.ts +++ b/client/landing/stepper/declarative-flow/internals/types.ts @@ -101,8 +101,7 @@ export type UseStepsHook = () => StepperStep[]; export type UseStepNavigationHook< FlowSteps extends StepperStep[] > = ( currentStepSlug: FlowSteps[ number ][ 'slug' ], - navigate: Navigate< FlowSteps >, - steps?: FlowSteps[ number ][ 'slug' ][] + navigate: Navigate< FlowSteps > ) => NavigationControls; export type UseAssertConditionsHook< FlowSteps extends StepperStep[] > = ( diff --git a/client/landing/stepper/declarative-flow/plugin-bundle-flow.ts b/client/landing/stepper/declarative-flow/plugin-bundle-flow.ts index cf29d9b035a181..34ffdbb7b7ffc5 100644 --- a/client/landing/stepper/declarative-flow/plugin-bundle-flow.ts +++ b/client/landing/stepper/declarative-flow/plugin-bundle-flow.ts @@ -27,9 +27,10 @@ import { } from './plugin-bundle-data'; import type { OnboardSelect, SiteSelect, UserSelect } from '@automattic/data-stores'; -const getNextStep = ( currentStep: string, steps: string[] ): string | undefined => { - const currentStepIndex = steps.indexOf( currentStep ); - const nextStep = steps[ currentStepIndex + 1 ]; +const getNextStep = ( currentStep: string, steps: StepperStep[] ): string | undefined => { + const stepsIndex = steps.map( ( step ) => step.slug ); + const currentStepIndex = stepsIndex.indexOf( currentStep ); + const nextStep = stepsIndex[ currentStepIndex + 1 ]; return nextStep; }; @@ -54,7 +55,8 @@ const pluginBundleFlow: Flow = { } return [ ...initialBundleSteps, ...bundlePluginSteps ]; }, - useStepNavigation( currentStep, navigate, steps = [] ) { + useStepNavigation( currentStep, navigate ) { + const steps = this.useSteps(); const intent = useSelect( ( select ) => ( select( ONBOARD_STORE ) as OnboardSelect ).getIntent(), []