feat(nav-bar-content): handle getting started in AssessmentViewUpdate…

…Handler (#2669)

* handle gettingStartedSubview in AssessmentViewUpdateHandler

* move update handler to TestStepView for current assessment components

* remove update handler from ReflowAssessmentView

* rename isStepEnabled to isRequirementEnabled in update handler

src/DetailsView/components/assessment-test-view.tsx

@@ -73,7 +73,6 @@ export const AssessmentTestView = NamedFC<AssessmentTestViewProps>(
                     currentTarget={currentTarget}
                     prevTarget={prevTarget}
                     assessmentTestResult={assessmentTestResult}
-                    selectedRequirementIsEnabled={selectedRequirementIsEnabled}
                 />
             );
         };

src/DetailsView/components/assessment-view-update-handler.ts

@@ -26,7 +26,7 @@ export interface AssessmentViewUpdateHandlerProps {
     deps: AssessmentViewUpdateHandlerDeps;
     assessmentNavState: AssessmentNavState;
     assessmentData: AssessmentData;
-    selectedRequirementIsEnabled: boolean;
+    isRequirementEnabled: boolean;
     currentTarget: Tab;
     prevTarget: PersistedTabInfo;
 }
@@ -65,12 +65,12 @@ export class AssessmentViewUpdateHandler {
             return;
         }
 
-        const isStepNotScanned = !props.assessmentData.testStepStatus[step].isStepScanned;
-        if (props.selectedRequirementIsEnabled === false || isStepNotScanned) {
+        const isRequirementNotScanned = !props.assessmentData.testStepStatus[step].isStepScanned;
+        if (props.isRequirementEnabled === false || isRequirementNotScanned) {
             props.deps.detailsViewActionMessageCreator.enableVisualHelper(
                 test,
                 step,
-                isStepNotScanned,
+                isRequirementNotScanned,
                 sendTelemetry,
             );
         }

src/DetailsView/components/assessment-view.tsx

@@ -92,23 +92,13 @@ export class AssessmentView extends React.Component<AssessmentViewProps> {
         );
     }
 
-    public componentDidMount(): void {
-        this.deps.assessmentViewUpdateHandler.onMount(this.props);
-    }
-
     public componentDidUpdate(prevProps: AssessmentViewProps): void {
-        this.deps.assessmentViewUpdateHandler.update(prevProps, this.props);
-
         const { assessmentTestResult } = this.props;
         this.deps.detailsViewExtensionPoint
             .apply(assessmentTestResult.definition.extensions)
             .onAssessmentViewUpdate(prevProps, this.props);
     }
 
-    public componentWillUnmount(): void {
-        this.deps.assessmentViewUpdateHandler.onUnmount(this.props);
-    }
-
     private renderTargetChangeDialog(): JSX.Element {
         return (
             <TargetChangeDialog
@@ -184,6 +174,9 @@ export class AssessmentView extends React.Component<AssessmentViewProps> {
                         }
                         featureFlagStoreData={this.props.featureFlagStoreData}
                         pathSnippetStoreData={this.props.pathSnippetStoreData}
+                        assessmentData={this.props.assessmentData}
+                        currentTarget={this.props.currentTarget}
+                        prevTarget={this.props.prevTarget}
                     />
                 </div>
             </div>

src/DetailsView/components/reflow-assessment-view.tsx

@@ -5,7 +5,6 @@ import * as React from 'react';
 import {
     AssessmentViewUpdateHandler,
     AssessmentViewUpdateHandlerDeps,
-    AssessmentViewUpdateHandlerProps,
 } from 'DetailsView/components/assessment-view-update-handler';
 import { AssessmentTestResult } from '../../common/assessment/assessment-test-result';
 import { Tab } from '../../common/itab';
@@ -29,7 +28,7 @@ export type ReflowAssessmentViewProps = {
     currentTarget: Tab;
     prevTarget: PersistedTabInfo;
     assessmentTestResult: AssessmentTestResult;
-} & AssessmentViewUpdateHandlerProps;
+};
 
 export class ReflowAssessmentView extends React.Component<ReflowAssessmentViewProps> {
     public render(): JSX.Element {
@@ -47,18 +46,6 @@ export class ReflowAssessmentView extends React.Component<ReflowAssessmentViewPr
         return null;
     }
 
-    public componentDidMount(): void {
-        this.props.deps.assessmentViewUpdateHandler.onMount(this.props);
-    }
-
-    public componentDidUpdate(prevProps: ReflowAssessmentViewProps): void {
-        this.props.deps.assessmentViewUpdateHandler.update(prevProps, this.props);
-    }
-
-    public componentWillUnmount(): void {
-        this.props.deps.assessmentViewUpdateHandler.onUnmount(this.props);
-    }
-
     private renderTargetChangeDialog(): JSX.Element {
         return (
             <TargetChangeDialog

src/DetailsView/components/test-step-view.tsx

@@ -6,9 +6,11 @@ import { Requirement, VisualHelperToggleConfig } from 'assessments/types/require
 import { CollapsibleComponent } from 'common/components/collapsible-component';
 import { GuidanceTags, GuidanceTagsDeps } from 'common/components/guidance-tags';
 import {
+    AssessmentData,
     AssessmentNavState,
     GeneratedAssessmentInstance,
     ManualTestStepResult,
+    PersistedTabInfo,
 } from 'common/types/store-data/assessment-result-data';
 import { FeatureFlagStoreData } from 'common/types/store-data/feature-flag-store-data';
 import { PathSnippetStoreData } from 'common/types/store-data/path-snippet-store-data';
@@ -17,6 +19,12 @@ import * as React from 'react';
 import { DictionaryStringTo } from 'types/common-types';
 import { ContentPanelButton, ContentPanelButtonDeps } from 'views/content/content-panel-button';
 
+import { Tab } from 'common/itab';
+import {
+    AssessmentViewUpdateHandler,
+    AssessmentViewUpdateHandlerDeps,
+    AssessmentViewUpdateHandlerProps,
+} from 'DetailsView/components/assessment-view-update-handler';
 import { DetailsViewActionMessageCreator } from '../actions/details-view-action-message-creator';
 import { AssessmentInstanceTableHandler } from '../handlers/assessment-instance-table-handler';
 import { AssessmentInstanceTable } from './assessment-instance-table';
@@ -25,10 +33,12 @@ import * as styles from './test-step-view.scss';
 
 export type TestStepViewDeps = {
     detailsViewActionMessageCreator: DetailsViewActionMessageCreator;
+    assessmentViewUpdateHandler: AssessmentViewUpdateHandler;
 } & ContentPanelButtonDeps &
-    GuidanceTagsDeps;
+    GuidanceTagsDeps &
+    AssessmentViewUpdateHandlerDeps;
 
-export interface TestStepViewProps {
+export type TestStepViewProps = {
     deps: TestStepViewDeps;
     isStepEnabled: boolean;
     isStepScanned: boolean;
@@ -43,7 +53,10 @@ export interface TestStepViewProps {
     assessmentDefaultMessageGenerator: AssessmentDefaultMessageGenerator;
     featureFlagStoreData: FeatureFlagStoreData;
     pathSnippetStoreData: PathSnippetStoreData;
-}
+    assessmentData: AssessmentData;
+    currentTarget: Tab;
+    prevTarget: PersistedTabInfo;
+};
 
 export class TestStepView extends React.Component<TestStepViewProps> {
     public render(): JSX.Element {
@@ -77,6 +90,34 @@ export class TestStepView extends React.Component<TestStepViewProps> {
         );
     }
 
+    public componentDidMount(): void {
+        this.props.deps.assessmentViewUpdateHandler.onMount(this.getUpdateHandlerProps(this.props));
+    }
+
+    public componentDidUpdate(prevProps: TestStepViewProps): void {
+        this.props.deps.assessmentViewUpdateHandler.update(
+            this.getUpdateHandlerProps(prevProps),
+            this.getUpdateHandlerProps(this.props),
+        );
+    }
+
+    public componentWillUnmount(): void {
+        this.props.deps.assessmentViewUpdateHandler.onUnmount(
+            this.getUpdateHandlerProps(this.props),
+        );
+    }
+
+    private getUpdateHandlerProps(props: TestStepViewProps): AssessmentViewUpdateHandlerProps {
+        return {
+            deps: props.deps,
+            isRequirementEnabled: props.isStepEnabled,
+            assessmentNavState: props.assessmentNavState,
+            assessmentData: props.assessmentData,
+            prevTarget: props.prevTarget,
+            currentTarget: props.currentTarget,
+        };
+    }
+
     private renderTable(): JSX.Element {
         if (this.props.testStep.isManual) {
             return (

src/tests/unit/tests/DetailsView/components/__snapshots__/assessment-test-view.test.tsx.snap

@@ -88,7 +88,6 @@ exports[`AssessmentTestView assessment view, isScanning is false 1`] = `
             "detailsViewActionMessageCreator": Object {},
           }
         }
-        selectedRequirementIsEnabled={false}
       />
     }
     featureFlag="reflowUI"
@@ -185,7 +184,6 @@ exports[`AssessmentTestView assessment view, isScanning is true 1`] = `
             "detailsViewActionMessageCreator": Object {},
           }
         }
-        selectedRequirementIsEnabled={false}
       />
     }
     featureFlag="reflowUI"

src/tests/unit/tests/DetailsView/components/__snapshots__/assessment-view.test.tsx.snap

@@ -22,7 +22,7 @@ exports[`AssessmentViewTest render 1`] = `
         <TestStepsNav deps={{...}} ariaLabel=\\"Requirements\\" selectedTest={-1} selectedTestStep=\\"assessment-1-step-1\\" stepStatus={{...}} />
       </div>
       <div className=\\"testStepViewContainer\\">
-        <TestStepView deps={{...}} isScanning={false} testStep={{...}} renderStaticContent={[undefined]} instancesMap={{...}} assessmentNavState={{...}} assessmentInstanceTableHandler={{...}} manualTestStepResultMap={{...}} assessmentsProvider={{...}} isStepEnabled={false} isStepScanned={false} assessmentDefaultMessageGenerator={{...}} featureFlagStoreData={{...}} pathSnippetStoreData={{...}} />
+        <TestStepView deps={{...}} isScanning={false} testStep={{...}} renderStaticContent={[undefined]} instancesMap={{...}} assessmentNavState={{...}} assessmentInstanceTableHandler={{...}} manualTestStepResultMap={{...}} assessmentsProvider={{...}} isStepEnabled={false} isStepScanned={false} assessmentDefaultMessageGenerator={{...}} featureFlagStoreData={{...}} pathSnippetStoreData={{...}} assessmentData={{...}} currentTarget={{...}} prevTarget={{...}} />
       </div>
     </div>
   </AssessmentViewMainContentExtensionPoint>

src/tests/unit/tests/DetailsView/components/__snapshots__/reflow-assessment-view.test.tsx.snap

@@ -3,13 +3,7 @@
 exports[`AssessmentViewTest render for gettting started 1`] = `
 <div>
   <TargetChangeDialog
-    deps={
-      Object {
-        "assessmentViewUpdateHandler": proxy {
-          "___id": "BCDF5CE5-F0DF-40B7-8BA0-69DF395033C8",
-        },
-      }
-    }
+    deps={Object {}}
     newTab={
       Object {
         "id": 5,

src/tests/unit/tests/DetailsView/components/__snapshots__/test-step-view.test.tsx.snap

@@ -5,9 +5,9 @@ exports[`TestStepViewTest render snapshot matches with manual false and scanning
   <div className=\\"test-step-title-container\\">
     <h3 className=\\"test-step-view-title\\">
       Test Step Test Name
-      <GuidanceTags deps={[undefined]} links={{...}} />
+      <GuidanceTags deps={{...}} links={{...}} />
     </h3>
-    <ContentPanelButton deps={[undefined]} reference={[undefined]} iconName=\\"info\\" contentTitle=\\"Test Step Test Name\\">
+    <ContentPanelButton deps={{...}} reference={[undefined]} iconName=\\"info\\" contentTitle=\\"Test Step Test Name\\">
       Info &amp; examples
     </ContentPanelButton>
   </div>
@@ -25,9 +25,9 @@ exports[`TestStepViewTest render, variable part for assisted test 1`] = `
   <div className=\\"test-step-title-container\\">
     <h3 className=\\"test-step-view-title\\">
       Test Step Test Name
-      <GuidanceTags deps={[undefined]} links={{...}} />
+      <GuidanceTags deps={{...}} links={{...}} />
     </h3>
-    <ContentPanelButton deps={[undefined]} reference={[undefined]} iconName=\\"info\\" contentTitle=\\"Test Step Test Name\\">
+    <ContentPanelButton deps={{...}} reference={[undefined]} iconName=\\"info\\" contentTitle=\\"Test Step Test Name\\">
       Info &amp; examples
     </ContentPanelButton>
   </div>

src/tests/unit/tests/DetailsView/components/assessment-view-update-handler.test.ts

@@ -18,12 +18,12 @@ describe('AssessmentViewTest', () => {
     const firstAssessment = assessmentsProvider.all()[0];
     const stepName = firstAssessment.requirements[0].key;
     let detailsViewActionMessageCreatorMock: IMock<DetailsViewActionMessageCreator>;
-    let selectedRequirementIsEnabled: boolean;
+    let isRequirementEnabled: boolean;
 
     let testObject: AssessmentViewUpdateHandler;
 
     beforeEach(() => {
-        selectedRequirementIsEnabled = false;
+        isRequirementEnabled = false;
         detailsViewActionMessageCreatorMock = Mock.ofType<DetailsViewActionMessageCreator>();
         testObject = new AssessmentViewUpdateHandler();
     });
@@ -71,7 +71,7 @@ describe('AssessmentViewTest', () => {
                     a.enableVisualHelper(firstAssessment.visualizationType, stepName, false),
                 )
                 .verifiable(Times.never());
-            selectedRequirementIsEnabled = true;
+            isRequirementEnabled = true;
             const props = buildProps({ selector: {} });
 
             testObject.onMount(props);
@@ -218,7 +218,7 @@ describe('AssessmentViewTest', () => {
             deps,
             prevTarget,
             currentTarget: isTargetChanged ? anotherTarget : prevTarget,
-            selectedRequirementIsEnabled: selectedRequirementIsEnabled,
+            isRequirementEnabled: isRequirementEnabled,
             assessmentNavState,
             assessmentData,
         };

src/tests/unit/tests/DetailsView/components/assessment-view.test.tsx

@@ -37,24 +37,13 @@ describe('AssessmentViewTest', () => {
         expect(rendered.debug()).toMatchSnapshot();
     });
 
-    test('componentDidMount', () => {
-        const props = builder.buildProps();
-        builder.updateHandlerMock.setup(u => u.onMount(props)).verifiable(Times.once());
-
-        const testObject = new AssessmentView(props);
-
-        testObject.componentDidMount();
-        builder.verifyAll();
-    });
-
     test('componentDidUpdate', () => {
         const prevProps = buildPrevProps();
         const props = builder.buildProps();
         const onAssessmentViewUpdateMock = Mock.ofInstance(
             (previousProps: AssessmentViewProps, currentProps: AssessmentViewProps) => {},
         );
 
-        builder.updateHandlerMock.setup(u => u.update(prevProps, props)).verifiable(Times.once());
         builder.detailsViewExtensionPointMock
             .setup(d => d.apply(props.assessmentTestResult.definition.extensions))
             .returns(() => {
@@ -71,16 +60,6 @@ describe('AssessmentViewTest', () => {
         onAssessmentViewUpdateMock.verifyAll();
     });
 
-    test('componentWillUnmount', () => {
-        const props = builder.buildProps();
-        builder.updateHandlerMock.setup(u => u.onUnmount(props)).verifiable(Times.once());
-
-        const testObject = new AssessmentView(props);
-
-        testObject.componentWillUnmount();
-        builder.verifyAll();
-    });
-
     function buildPrevProps(): AssessmentViewProps {
         const prevStep = 'prevStep';
         const prevTest = -100 as VisualizationType;