feat(nav-bar-content): adding requirement table section

src/DetailsView/components/left-nav/requirement-table-section.tsx

@@ -0,0 +1,86 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { AssessmentDefaultMessageGenerator } from 'assessments/assessment-default-message-generator';
+import { AssessmentsProvider } from 'assessments/types/assessments-provider';
+import { Requirement } from 'assessments/types/requirement';
+import { NamedFC } from 'common/react/named-fc';
+import {
+    AssessmentNavState,
+    GeneratedAssessmentInstance,
+    ManualTestStepResult,
+} 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';
+import { AssessmentInstanceTable } from 'DetailsView/components/assessment-instance-table';
+import { ManualTestStepView } from 'DetailsView/components/manual-test-step-view';
+import { AssessmentInstanceTableHandler } from 'DetailsView/handlers/assessment-instance-table-handler';
+import { Spinner, SpinnerSize } from 'office-ui-fabric-react';
+import * as React from 'react';
+import { DictionaryStringTo } from 'types/common-types';
+
+export type RequirementTableSectionProps = {
+    assessmentNavState: AssessmentNavState;
+    requirement: Requirement;
+    instancesMap: DictionaryStringTo<GeneratedAssessmentInstance>;
+    assessmentInstanceTableHandler: AssessmentInstanceTableHandler;
+    assessmentsProvider: AssessmentsProvider;
+    featureFlagStoreData: FeatureFlagStoreData;
+    pathSnippetStoreData: PathSnippetStoreData;
+    scanningInProgress: boolean;
+    manualRequirementResultMap: DictionaryStringTo<ManualTestStepResult>;
+    assessmentDefaultMessageGenerator: AssessmentDefaultMessageGenerator;
+    isRequirementScanned: boolean;
+    selectedRequirementHasVisualHelper: boolean;
+};
+
+export const RequirementTableSection = NamedFC<RequirementTableSectionProps>(
+    'RequirementTableSection',
+    props => {
+        if (props.requirement.isManual) {
+            return (
+                <ManualTestStepView
+                    test={props.assessmentNavState.selectedTestType}
+                    step={props.assessmentNavState.selectedTestSubview}
+                    manualTestStepResultMap={props.manualRequirementResultMap}
+                    assessmentInstanceTableHandler={props.assessmentInstanceTableHandler}
+                    assessmentsProvider={props.assessmentsProvider}
+                    featureFlagStoreData={props.featureFlagStoreData}
+                    pathSnippetStoreData={props.pathSnippetStoreData}
+                />
+            );
+        }
+
+        if (props.scanningInProgress) {
+            return (
+                <Spinner
+                    className="details-view-spinner"
+                    size={SpinnerSize.large}
+                    label={'Scanning'}
+                />
+            );
+        }
+
+        const renderScanCompleteAlert = () => {
+            if (!props.requirement.isManual && props.isRequirementScanned) {
+                return <div role="alert" aria-live="polite" aria-label="Scan Complete" />;
+            }
+        };
+
+        return (
+            <React.Fragment>
+                {renderScanCompleteAlert()}
+                <h3>Instances</h3>
+                <AssessmentInstanceTable
+                    instancesMap={props.instancesMap}
+                    assessmentInstanceTableHandler={props.assessmentInstanceTableHandler}
+                    assessmentNavState={props.assessmentNavState}
+                    renderInstanceTableHeader={props.requirement.renderInstanceTableHeader}
+                    getDefaultMessage={props.requirement.getDefaultMessage}
+                    assessmentDefaultMessageGenerator={props.assessmentDefaultMessageGenerator}
+                    hasVisualHelper={props.selectedRequirementHasVisualHelper}
+                />
+            </React.Fragment>
+        );
+    },
+);

src/tests/unit/tests/DetailsView/components/left-nav/__snapshots__/requirement-table-section.test.tsx.snap

@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RequirementTableSection render ManualTestStepView when requirement is manual 1`] = `
+<ManualTestStepView
+  assessmentInstanceTableHandler={
+    Object {
+      "changeRequirementStatus": null,
+    }
+  }
+  assessmentsProvider={
+    Object {
+      "all": null,
+    }
+  }
+  featureFlagStoreData={
+    Object {
+      "some feature flag": true,
+    }
+  }
+  manualTestStepResultMap={
+    Object {
+      "some manual test step result id": null,
+    }
+  }
+  pathSnippetStoreData={
+    Object {
+      "path": null,
+    }
+  }
+  step="some test view"
+  test={-1}
+/>
+`;
+
+exports[`RequirementTableSection render Spinner when scanning in progress 1`] = `
+<StyledSpinnerBase
+  className="details-view-spinner"
+  label="Scanning"
+  size={3}
+/>
+`;
+
+exports[`RequirementTableSection render instance table 1`] = `
+<React.Fragment>
+  <h3>
+    Instances
+  </h3>
+  <AssessmentInstanceTable
+    assessmentInstanceTableHandler={
+      Object {
+        "changeRequirementStatus": null,
+      }
+    }
+    assessmentNavState={
+      Object {
+        "selectedTestSubview": "some test view",
+        "selectedTestType": -1,
+      }
+    }
+    getDefaultMessage={[Function]}
+    renderInstanceTableHeader={[Function]}
+  />
+</React.Fragment>
+`;

src/tests/unit/tests/DetailsView/components/left-nav/requirement-table-section.test.tsx

@@ -0,0 +1,84 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { AssessmentsProvider } from 'assessments/types/assessments-provider';
+import { Requirement } from 'assessments/types/requirement';
+import { ManualTestStepResult } 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';
+import {
+    RequirementTableSection,
+    RequirementTableSectionProps,
+} from 'DetailsView/components/left-nav/requirement-table-section';
+import { AssessmentInstanceTableHandler } from 'DetailsView/handlers/assessment-instance-table-handler';
+import { shallow } from 'enzyme';
+import * as React from 'react';
+import { DictionaryStringTo } from 'types/common-types';
+
+describe('RequirementTableSection', () => {
+    let props: RequirementTableSectionProps;
+    let manualRequirementResultMapStub: DictionaryStringTo<ManualTestStepResult>;
+    let assessmentInstanceTableHandlerStub: AssessmentInstanceTableHandler;
+    let assessmentProviderStub: AssessmentsProvider;
+    let featureFlagStoreDataStub: FeatureFlagStoreData;
+    let pathSnippetStoreDataStub: PathSnippetStoreData;
+
+    beforeEach(() => {
+        assessmentInstanceTableHandlerStub = {
+            changeRequirementStatus: null,
+        } as AssessmentInstanceTableHandler;
+        manualRequirementResultMapStub = {
+            'some manual test step result id': null,
+        };
+        assessmentProviderStub = {
+            all: null,
+        } as AssessmentsProvider;
+        featureFlagStoreDataStub = {
+            'some feature flag': true,
+        };
+        pathSnippetStoreDataStub = {
+            path: null,
+        } as PathSnippetStoreData;
+
+        props = {
+            assessmentNavState: {
+                selectedTestSubview: 'some test view',
+                selectedTestType: -1,
+            },
+            manualRequirementResultMap: manualRequirementResultMapStub,
+            assessmentInstanceTableHandler: assessmentInstanceTableHandlerStub,
+            assessmentsProvider: assessmentProviderStub,
+            featureFlagStoreData: featureFlagStoreDataStub,
+            pathSnippetStoreData: pathSnippetStoreDataStub,
+            requirement: {
+                isManual: false,
+                getDefaultMessage: _ => null,
+                renderInstanceTableHeader: (_, a) => null,
+            },
+        } as RequirementTableSectionProps;
+    });
+
+    test('render ManualTestStepView when requirement is manual', () => {
+        props.requirement = {
+            isManual: true,
+        } as Requirement;
+
+        const testObject = shallow(<RequirementTableSection {...props} />);
+
+        expect(testObject.getElement()).toMatchSnapshot();
+    });
+
+    test('render Spinner when scanning in progress', () => {
+        props.scanningInProgress = true;
+
+        const testObject = shallow(<RequirementTableSection {...props} />);
+
+        expect(testObject.getElement()).toMatchSnapshot();
+    });
+
+    test('render instance table', () => {
+        const testObject = shallow(<RequirementTableSection {...props} />);
+
+        expect(testObject.getElement()).toMatchSnapshot();
+    });
+});