diff --git a/src/DetailsView/components/left-nav/left-nav-link-builder.tsx b/src/DetailsView/components/left-nav/left-nav-link-builder.tsx
index 4832030e2b1..2f3df33e2bb 100644
--- a/src/DetailsView/components/left-nav/left-nav-link-builder.tsx
+++ b/src/DetailsView/components/left-nav/left-nav-link-builder.tsx
@@ -5,18 +5,14 @@ import { Assessment } from 'assessments/types/iassessment';
 import { Requirement } from 'assessments/types/requirement';
 import { gettingStartedSubview } from 'common/types/store-data/assessment-result-data';
 import {
-    AssessmentLeftNavLink,
     onTestGettingStartedClick,
     onTestRequirementClick,
     TestGettingStartedNavLink,
     TestRequirementLeftNavLink,
 } from 'DetailsView/components/left-nav/assessment-left-nav';
-import { GettingStartedNavLink } from 'DetailsView/components/left-nav/getting-started-nav-link';
-import { LeftNavIndexIcon, LeftNavStatusIcon } from 'DetailsView/components/left-nav/left-nav-icon';
-import { requirementStatusIcon } from 'DetailsView/components/left-nav/left-nav-link-builder.scss';
 import { NavLinkHandler } from 'DetailsView/components/left-nav/nav-link-handler';
+import { NavLinkRenderer } from 'DetailsView/components/left-nav/nav-link-renderer';
 import { map } from 'lodash';
-import * as React from 'react';
 import { OutcomeTypeSemantic } from 'reports/components/outcome-type';
 import { RequirementOutcomeStats } from 'reports/components/requirement-outcome-type';
 import { GetAssessmentSummaryModelFromProviderAndStatusData } from 'reports/get-assessment-summary-model';
@@ -25,8 +21,6 @@ import { ManualTestStatus, ManualTestStatusData } from '../../../common/types/ma
 import { VisualizationType } from '../../../common/types/visualization-type';
 import { DictionaryStringTo } from '../../../types/common-types';
 import { BaseLeftNavLink, onBaseLeftNavItemClick, onBaseLeftNavItemRender } from '../base-left-nav';
-import { OverviewLeftNavLink } from './overview-left-nav-link';
-import { TestViewLeftNavLink } from './test-view-left-nav-link';
 
 export type LeftNavLinkBuilderDeps = OverviewLinkBuilderDeps &
     AssessmentLinkBuilderDeps &
@@ -34,6 +28,7 @@ export type LeftNavLinkBuilderDeps = OverviewLinkBuilderDeps &
 
 export type OverviewLinkBuilderDeps = {
     getAssessmentSummaryModelFromProviderAndStatusData: GetAssessmentSummaryModelFromProviderAndStatusData;
+    navLinkRenderer: NavLinkRenderer;
 };
 
 export type AssessmentLinkBuilderDeps = {
@@ -43,9 +38,12 @@ export type AssessmentLinkBuilderDeps = {
     outcomeStatsFromManualTestStatus: (
         testStepStatus: ManualTestStatusData,
     ) => RequirementOutcomeStats;
+    navLinkRenderer: NavLinkRenderer;
 };
 
-export type VisualizationConfigurationLinkBuilderDeps = {};
+export type VisualizationConfigurationLinkBuilderDeps = {
+    navLinkRenderer: NavLinkRenderer;
+};
 
 export function generateReflowAssessmentTestKey(
     test: VisualizationType,
@@ -64,7 +62,7 @@ export class LeftNavLinkBuilder {
         assessmentsData: DictionaryStringTo<ManualTestStatusData>,
         index: number,
     ): BaseLeftNavLink {
-        const { getAssessmentSummaryModelFromProviderAndStatusData } = deps;
+        const { getAssessmentSummaryModelFromProviderAndStatusData, navLinkRenderer } = deps;
 
         const reportModel = getAssessmentSummaryModelFromProviderAndStatusData(
             assessmentsProvider,
@@ -76,7 +74,7 @@ export class LeftNavLinkBuilder {
             'Overview',
             'Overview',
             index,
-            l => <OverviewLeftNavLink link={l} />,
+            navLinkRenderer.renderOverviewLink,
             onLinkClick,
         );
 
@@ -100,6 +98,7 @@ export class LeftNavLinkBuilder {
             getStatusForTest,
             outcomeTypeSemanticsFromTestStatus,
             outcomeStatsFromManualTestStatus,
+            navLinkRenderer,
         } = deps;
 
         const assessments = assessmentsProvider.all();
@@ -116,7 +115,7 @@ export class LeftNavLinkBuilder {
                 name,
                 VisualizationType[assessment.visualizationType],
                 index,
-                l => <TestViewLeftNavLink link={l} renderIcon={this.renderAssessmentTestIcon} />,
+                navLinkRenderer.renderAssessmentTestLink,
                 onLinkClick,
             );
 
@@ -162,6 +161,7 @@ export class LeftNavLinkBuilder {
             outcomeTypeSemanticsFromTestStatus,
             outcomeStatsFromManualTestStatus,
             navLinkHandler,
+            navLinkRenderer,
         } = deps;
 
         const stepStatus = assessmentsData[assessment.key];
@@ -174,11 +174,12 @@ export class LeftNavLinkBuilder {
             name,
             VisualizationType[assessment.visualizationType],
             index,
-            l => <TestViewLeftNavLink link={l} renderIcon={this.renderAssessmentTestIcon} />,
+            navLinkRenderer.renderAssessmentTestLink,
             () => {},
         );
 
         const gettingStartedLink = this.buildGettingStartedLink(
+            navLinkRenderer.renderGettingStartedLink,
             navLinkHandler.onGettingStartedClick,
             assessment,
         );
@@ -216,7 +217,7 @@ export class LeftNavLinkBuilder {
         testIndex: number,
         onClick: onTestRequirementClick,
     ): TestRequirementLeftNavLink {
-        const { outcomeTypeSemanticsFromTestStatus } = deps;
+        const { outcomeTypeSemanticsFromTestStatus, navLinkRenderer } = deps;
         const name = requirement.name;
         const displayedIndex = `${testIndex}.${requirementIndex}`;
         const narratorRequirementStatus = outcomeTypeSemanticsFromTestStatus(requirementStatus)
@@ -226,7 +227,7 @@ export class LeftNavLinkBuilder {
             name,
             generateReflowAssessmentTestKey(test, requirement.key),
             requirementIndex,
-            l => <TestViewLeftNavLink link={l} renderIcon={this.renderRequirementIcon} />,
+            navLinkRenderer.renderRequirementLink,
             onClick,
         );
 
@@ -241,6 +242,7 @@ export class LeftNavLinkBuilder {
     }
 
     private buildGettingStartedLink(
+        renderGettingStartedLink: onBaseLeftNavItemRender,
         onClick: onTestGettingStartedClick,
         test: Assessment,
     ): TestGettingStartedNavLink {
@@ -251,51 +253,33 @@ export class LeftNavLinkBuilder {
                 'Getting Started',
                 generateReflowAssessmentTestKey(testType, gettingStartedSubview),
                 0,
-                () => <GettingStartedNavLink />,
+                renderGettingStartedLink,
                 onClick,
             ),
         };
     }
 
-    private renderRequirementIcon = (link: TestRequirementLeftNavLink) => {
-        if (link.status === ManualTestStatus.UNKNOWN) {
-            return <>{link.displayedIndex}</>;
-        }
-
-        return <LeftNavStatusIcon className={requirementStatusIcon} item={link} />;
-    };
-
-    private renderAssessmentTestIcon: onBaseLeftNavItemRender = (link: AssessmentLeftNavLink) => {
-        if (link.status === ManualTestStatus.UNKNOWN) {
-            return <LeftNavIndexIcon item={link} />;
-        }
-
-        return <LeftNavStatusIcon item={link} />;
-    };
-
     public buildVisualizationConfigurationLink(
+        deps: VisualizationConfigurationLinkBuilderDeps,
         configuration: VisualizationConfiguration,
         onLinkClick: onBaseLeftNavItemClick,
         visualizationType: VisualizationType,
         index: number,
     ): BaseLeftNavLink {
         const displayableData = configuration.displayableData;
+        const { navLinkRenderer } = deps;
 
         const link = this.buildBaseLink(
             displayableData.title,
             VisualizationType[visualizationType],
             index,
-            l => <TestViewLeftNavLink link={l} renderIcon={this.renderVisualizationIcon} />,
+            navLinkRenderer.renderVisualizationLink,
             onLinkClick,
         );
 
         return link;
     }
 
-    private renderVisualizationIcon: onBaseLeftNavItemRender = link => (
-        <LeftNavIndexIcon item={link} />
-    );
-
     private buildBaseLink(
         name: string,
         key: string,
diff --git a/src/DetailsView/components/left-nav/left-nav-link-builder.scss b/src/DetailsView/components/left-nav/nav-link-renderer.scss
similarity index 100%
rename from src/DetailsView/components/left-nav/left-nav-link-builder.scss
rename to src/DetailsView/components/left-nav/nav-link-renderer.scss
diff --git a/src/DetailsView/components/left-nav/nav-link-renderer.tsx b/src/DetailsView/components/left-nav/nav-link-renderer.tsx
new file mode 100644
index 00000000000..728a8bf0d33
--- /dev/null
+++ b/src/DetailsView/components/left-nav/nav-link-renderer.tsx
@@ -0,0 +1,53 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { ManualTestStatus } from 'common/types/manual-test-status';
+import { onBaseLeftNavItemRender } from 'DetailsView/components/base-left-nav';
+import {
+    AssessmentLeftNavLink,
+    TestRequirementLeftNavLink,
+} from 'DetailsView/components/left-nav/assessment-left-nav';
+import { GettingStartedNavLink } from 'DetailsView/components/left-nav/getting-started-nav-link';
+import { LeftNavIndexIcon, LeftNavStatusIcon } from 'DetailsView/components/left-nav/left-nav-icon';
+import * as styles from 'DetailsView/components/left-nav/nav-link-renderer.scss';
+import { OverviewLeftNavLink } from 'DetailsView/components/left-nav/overview-left-nav-link';
+import { TestViewLeftNavLink } from 'DetailsView/components/left-nav/test-view-left-nav-link';
+import * as React from 'react';
+
+export class NavLinkRenderer {
+    public renderVisualizationLink: onBaseLeftNavItemRender = link => (
+        <TestViewLeftNavLink link={link} renderIcon={this.renderVisualizationIcon} />
+    );
+
+    public renderRequirementLink: onBaseLeftNavItemRender = link => (
+        <TestViewLeftNavLink link={link} renderIcon={this.renderRequirementIcon} />
+    );
+
+    public renderAssessmentTestLink: onBaseLeftNavItemRender = link => (
+        <TestViewLeftNavLink link={link} renderIcon={this.renderAssessmentTestIcon} />
+    );
+
+    public renderOverviewLink: onBaseLeftNavItemRender = l => <OverviewLeftNavLink link={l} />;
+
+    public renderGettingStartedLink: onBaseLeftNavItemRender = () => <GettingStartedNavLink />;
+
+    private renderVisualizationIcon: onBaseLeftNavItemRender = link => (
+        <LeftNavIndexIcon item={link} />
+    );
+
+    private renderRequirementIcon = (link: TestRequirementLeftNavLink) => {
+        if (link.status === ManualTestStatus.UNKNOWN) {
+            return <>{link.displayedIndex}</>;
+        }
+
+        return <LeftNavStatusIcon className={styles.requirementStatusIcon} item={link} />;
+    };
+
+    private renderAssessmentTestIcon: onBaseLeftNavItemRender = (link: AssessmentLeftNavLink) => {
+        if (link.status === ManualTestStatus.UNKNOWN) {
+            return <LeftNavIndexIcon item={link} />;
+        }
+
+        return <LeftNavStatusIcon item={link} />;
+    };
+}
diff --git a/src/DetailsView/components/left-nav/visualization-based-left-nav.tsx b/src/DetailsView/components/left-nav/visualization-based-left-nav.tsx
index d6c054b5557..a50df26eeb8 100644
--- a/src/DetailsView/components/left-nav/visualization-based-left-nav.tsx
+++ b/src/DetailsView/components/left-nav/visualization-based-left-nav.tsx
@@ -36,6 +36,7 @@ export const VisualizationBasedLeftNav = NamedFC<VisualizationBasedLeftNavProps>
             const config = visualizationConfigurationFactory.getConfiguration(visualizationType);
             links.push(
                 leftNavLinkBuilder.buildVisualizationConfigurationLink(
+                    deps,
                     config,
                     onLinkClick,
                     visualizationType,
diff --git a/src/DetailsView/details-view-initializer.ts b/src/DetailsView/details-view-initializer.ts
index 8d8bcf510c8..4b4b82829d3 100644
--- a/src/DetailsView/details-view-initializer.ts
+++ b/src/DetailsView/details-view-initializer.ts
@@ -19,6 +19,7 @@ import { CardSelectionStoreData } from 'common/types/store-data/card-selection-s
 import { toolName } from 'content/strings/application';
 import { textContent } from 'content/strings/text-content';
 import { AssessmentViewUpdateHandler } from 'DetailsView/components/assessment-view-update-handler';
+import { NavLinkRenderer } from 'DetailsView/components/left-nav/nav-link-renderer';
 import { NoContentAvailableViewDeps } from 'DetailsView/components/no-content-available/no-content-available-view';
 import { AllUrlsPermissionHandler } from 'DetailsView/handlers/allurls-permission-handler';
 import { NoContentAvailableViewRenderer } from 'DetailsView/no-content-available-view-renderer';
@@ -378,6 +379,8 @@ if (isNaN(tabId) === false) {
 
             const assessmentViewUpdateHandler = new AssessmentViewUpdateHandler();
 
+            const navLinkRenderer = new NavLinkRenderer();
+
             const deps: DetailsViewContainerDeps = {
                 textContent,
                 fixInstructionProcessor,
@@ -448,6 +451,7 @@ if (isNaN(tabId) === false) {
                 Assessments,
                 assessmentViewUpdateHandler,
                 detailsViewExtensionPoint,
+                navLinkRenderer,
             };
 
             const renderer = new DetailsViewRenderer(
diff --git a/src/tests/unit/tests/DetailsView/components/left-nav/__snapshots__/left-nav-link-builder.test.tsx.snap b/src/tests/unit/tests/DetailsView/components/left-nav/__snapshots__/left-nav-link-builder.test.tsx.snap
deleted file mode 100644
index b0f2145471b..00000000000
--- a/src/tests/unit/tests/DetailsView/components/left-nav/__snapshots__/left-nav-link-builder.test.tsx.snap
+++ /dev/null
@@ -1,547 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LeftNavBuilder buildAssessmentTestLinks should build links for assessments 1`] = `
-<TestViewLeftNavLink
-  link={
-    Object {
-      "forceAnchor": true,
-      "iconProps": Object {
-        "className": "hidden",
-      },
-      "index": -1,
-      "key": "Issues",
-      "name": "some title",
-      "onClickNavLink": [Function],
-      "onRenderNavLink": [Function],
-      "status": -2,
-      "title": "-1: some title (passed)",
-      "url": "",
-    }
-  }
-  renderIcon={[Function]}
-/>
-`;
-
-exports[`LeftNavBuilder buildAssessmentTestLinks should build links for assessments 2`] = `
-<LeftNavStatusIcon
-  item={
-    Object {
-      "forceAnchor": true,
-      "iconProps": Object {
-        "className": "hidden",
-      },
-      "index": -1,
-      "key": "Issues",
-      "name": "some title",
-      "onClickNavLink": [Function],
-      "onRenderNavLink": [Function],
-      "status": -2,
-      "title": "-1: some title (passed)",
-      "url": "",
-    }
-  }
-/>
-`;
-
-exports[`LeftNavBuilder buildAssessmentTestLinks should build links for assessments 3`] = `
-<TestViewLeftNavLink
-  link={
-    Object {
-      "forceAnchor": true,
-      "iconProps": Object {
-        "className": "hidden",
-      },
-      "index": 0,
-      "key": "Issues",
-      "name": "some title",
-      "onClickNavLink": [Function],
-      "onRenderNavLink": [Function],
-      "status": -2,
-      "title": "0: some title (passed)",
-      "url": "",
-    }
-  }
-  renderIcon={[Function]}
-/>
-`;
-
-exports[`LeftNavBuilder buildAssessmentTestLinks should build links for assessments 4`] = `
-<LeftNavStatusIcon
-  item={
-    Object {
-      "forceAnchor": true,
-      "iconProps": Object {
-        "className": "hidden",
-      },
-      "index": 0,
-      "key": "Issues",
-      "name": "some title",
-      "onClickNavLink": [Function],
-      "onRenderNavLink": [Function],
-      "status": -2,
-      "title": "0: some title (passed)",
-      "url": "",
-    }
-  }
-/>
-`;
-
-exports[`LeftNavBuilder buildOverviewLink should build overview link 1`] = `
-<OverviewLeftNavLink
-  link={
-    Object {
-      "forceAnchor": true,
-      "iconProps": Object {
-        "className": "hidden",
-      },
-      "index": -1,
-      "key": "Overview",
-      "name": "Overview",
-      "onClickNavLink": [Function],
-      "onRenderNavLink": [Function],
-      "percentComplete": 75,
-      "title": "Overview 75% Completed",
-      "url": "",
-    }
-  }
-/>
-`;
-
-exports[`LeftNavBuilder buildReflowAssessmentTestLinks should build links for assessments: getting started nav link render 1`] = `<GettingStartedNavLink />`;
-
-exports[`LeftNavBuilder buildReflowAssessmentTestLinks should build links for assessments: getting started nav link render 2`] = `<GettingStartedNavLink />`;
-
-exports[`LeftNavBuilder buildReflowAssessmentTestLinks should build links for assessments: requirement nav link render 1`] = `
-<TestViewLeftNavLink
-  link={
-    Object {
-      "displayedIndex": "-1.1",
-      "forceAnchor": true,
-      "iconProps": Object {
-        "className": "hidden",
-      },
-      "index": 1,
-      "key": "Issues: requirement-key-1",
-      "name": "requirement-name-1",
-      "onClickNavLink": [Function],
-      "onRenderNavLink": [Function],
-      "requirementKey": "requirement-key-1",
-      "status": -2,
-      "testType": 1,
-      "title": "-1.1: requirement-name-1 (passed)",
-      "url": "",
-    }
-  }
-  renderIcon={[Function]}
-/>
-`;
-
-exports[`LeftNavBuilder buildReflowAssessmentTestLinks should build links for assessments: requirement nav link render 2`] = `
-<TestViewLeftNavLink
-  link={
-    Object {
-      "displayedIndex": "0.1",
-      "forceAnchor": true,
-      "iconProps": Object {
-        "className": "hidden",
-      },
-      "index": 1,
-      "key": "Issues: requirement-key-1",
-      "name": "requirement-name-1",
-      "onClickNavLink": [Function],
-      "onRenderNavLink": [Function],
-      "requirementKey": "requirement-key-1",
-      "status": -2,
-      "testType": 1,
-      "title": "0.1: requirement-name-1 (passed)",
-      "url": "",
-    }
-  }
-  renderIcon={[Function]}
-/>
-`;
-
-exports[`LeftNavBuilder buildReflowAssessmentTestLinks should build links for assessments: requirement nav link render icon 1`] = `
-<LeftNavStatusIcon
-  className="requirementStatusIcon"
-  item={
-    <TestViewLeftNavLink
-      link={
-        Object {
-          "displayedIndex": "-1.1",
-          "forceAnchor": true,
-          "iconProps": Object {
-            "className": "hidden",
-          },
-          "index": 1,
-          "key": "Issues: requirement-key-1",
-          "name": "requirement-name-1",
-          "onClickNavLink": [Function],
-          "onRenderNavLink": [Function],
-          "requirementKey": "requirement-key-1",
-          "status": -2,
-          "testType": 1,
-          "title": "-1.1: requirement-name-1 (passed)",
-          "url": "",
-        }
-      }
-      renderIcon={[Function]}
-    />
-  }
-/>
-`;
-
-exports[`LeftNavBuilder buildReflowAssessmentTestLinks should build links for assessments: requirement nav link render icon 2`] = `
-<LeftNavStatusIcon
-  className="requirementStatusIcon"
-  item={
-    <TestViewLeftNavLink
-      link={
-        Object {
-          "displayedIndex": "0.1",
-          "forceAnchor": true,
-          "iconProps": Object {
-            "className": "hidden",
-          },
-          "index": 1,
-          "key": "Issues: requirement-key-1",
-          "name": "requirement-name-1",
-          "onClickNavLink": [Function],
-          "onRenderNavLink": [Function],
-          "requirementKey": "requirement-key-1",
-          "status": -2,
-          "testType": 1,
-          "title": "0.1: requirement-name-1 (passed)",
-          "url": "",
-        }
-      }
-      renderIcon={[Function]}
-    />
-  }
-/>
-`;
-
-exports[`LeftNavBuilder buildReflowAssessmentTestLinks should build links for assessments: test nav link render 1`] = `
-<TestViewLeftNavLink
-  link={
-    Object {
-      "forceAnchor": true,
-      "iconProps": Object {
-        "className": "hidden",
-      },
-      "index": -1,
-      "isExpanded": true,
-      "key": "Issues",
-      "links": Array [
-        Object {
-          "forceAnchor": true,
-          "iconProps": Object {
-            "className": "hidden",
-          },
-          "index": 0,
-          "key": "Issues: getting-started",
-          "name": "Getting Started",
-          "onClickNavLink": [Function],
-          "onRenderNavLink": [Function],
-          "testType": 1,
-          "url": "",
-        },
-        Object {
-          "displayedIndex": "-1.1",
-          "forceAnchor": true,
-          "iconProps": Object {
-            "className": "hidden",
-          },
-          "index": 1,
-          "key": "Issues: requirement-key-1",
-          "name": "requirement-name-1",
-          "onClickNavLink": [Function],
-          "onRenderNavLink": [Function],
-          "requirementKey": "requirement-key-1",
-          "status": -2,
-          "testType": 1,
-          "title": "-1.1: requirement-name-1 (passed)",
-          "url": "",
-        },
-        Object {
-          "displayedIndex": "-1.2",
-          "forceAnchor": true,
-          "iconProps": Object {
-            "className": "hidden",
-          },
-          "index": 2,
-          "key": "Issues: requirement-key-2",
-          "name": "requirement-name-2",
-          "onClickNavLink": [Function],
-          "onRenderNavLink": [Function],
-          "requirementKey": "requirement-key-2",
-          "status": -2,
-          "testType": 1,
-          "title": "-1.2: requirement-name-2 (passed)",
-          "url": "",
-        },
-      ],
-      "name": "some title",
-      "onClickNavLink": [Function],
-      "onRenderNavLink": [Function],
-      "status": -2,
-      "title": "-1: some title (passed)",
-      "url": "",
-    }
-  }
-  renderIcon={[Function]}
-/>
-`;
-
-exports[`LeftNavBuilder buildReflowAssessmentTestLinks should build links for assessments: test nav link render 2`] = `
-<TestViewLeftNavLink
-  link={
-    Object {
-      "forceAnchor": true,
-      "iconProps": Object {
-        "className": "hidden",
-      },
-      "index": 0,
-      "isExpanded": true,
-      "key": "Issues",
-      "links": Array [
-        Object {
-          "forceAnchor": true,
-          "iconProps": Object {
-            "className": "hidden",
-          },
-          "index": 0,
-          "key": "Issues: getting-started",
-          "name": "Getting Started",
-          "onClickNavLink": [Function],
-          "onRenderNavLink": [Function],
-          "testType": 1,
-          "url": "",
-        },
-        Object {
-          "displayedIndex": "0.1",
-          "forceAnchor": true,
-          "iconProps": Object {
-            "className": "hidden",
-          },
-          "index": 1,
-          "key": "Issues: requirement-key-1",
-          "name": "requirement-name-1",
-          "onClickNavLink": [Function],
-          "onRenderNavLink": [Function],
-          "requirementKey": "requirement-key-1",
-          "status": -2,
-          "testType": 1,
-          "title": "0.1: requirement-name-1 (passed)",
-          "url": "",
-        },
-        Object {
-          "displayedIndex": "0.2",
-          "forceAnchor": true,
-          "iconProps": Object {
-            "className": "hidden",
-          },
-          "index": 2,
-          "key": "Issues: requirement-key-2",
-          "name": "requirement-name-2",
-          "onClickNavLink": [Function],
-          "onRenderNavLink": [Function],
-          "requirementKey": "requirement-key-2",
-          "status": -2,
-          "testType": 1,
-          "title": "0.2: requirement-name-2 (passed)",
-          "url": "",
-        },
-      ],
-      "name": "some title",
-      "onClickNavLink": [Function],
-      "onRenderNavLink": [Function],
-      "status": -2,
-      "title": "0: some title (passed)",
-      "url": "",
-    }
-  }
-  renderIcon={[Function]}
-/>
-`;
-
-exports[`LeftNavBuilder buildReflowAssessmentTestLinks should build links for assessments: test nav link render icon 1`] = `
-<LeftNavStatusIcon
-  item={
-    Object {
-      "forceAnchor": true,
-      "iconProps": Object {
-        "className": "hidden",
-      },
-      "index": -1,
-      "isExpanded": true,
-      "key": "Issues",
-      "links": Array [
-        Object {
-          "forceAnchor": true,
-          "iconProps": Object {
-            "className": "hidden",
-          },
-          "index": 0,
-          "key": "Issues: getting-started",
-          "name": "Getting Started",
-          "onClickNavLink": [Function],
-          "onRenderNavLink": [Function],
-          "testType": 1,
-          "url": "",
-        },
-        Object {
-          "displayedIndex": "-1.1",
-          "forceAnchor": true,
-          "iconProps": Object {
-            "className": "hidden",
-          },
-          "index": 1,
-          "key": "Issues: requirement-key-1",
-          "name": "requirement-name-1",
-          "onClickNavLink": [Function],
-          "onRenderNavLink": [Function],
-          "requirementKey": "requirement-key-1",
-          "status": -2,
-          "testType": 1,
-          "title": "-1.1: requirement-name-1 (passed)",
-          "url": "",
-        },
-        Object {
-          "displayedIndex": "-1.2",
-          "forceAnchor": true,
-          "iconProps": Object {
-            "className": "hidden",
-          },
-          "index": 2,
-          "key": "Issues: requirement-key-2",
-          "name": "requirement-name-2",
-          "onClickNavLink": [Function],
-          "onRenderNavLink": [Function],
-          "requirementKey": "requirement-key-2",
-          "status": -2,
-          "testType": 1,
-          "title": "-1.2: requirement-name-2 (passed)",
-          "url": "",
-        },
-      ],
-      "name": "some title",
-      "onClickNavLink": [Function],
-      "onRenderNavLink": [Function],
-      "status": -2,
-      "title": "-1: some title (passed)",
-      "url": "",
-    }
-  }
-/>
-`;
-
-exports[`LeftNavBuilder buildReflowAssessmentTestLinks should build links for assessments: test nav link render icon 2`] = `
-<LeftNavStatusIcon
-  item={
-    Object {
-      "forceAnchor": true,
-      "iconProps": Object {
-        "className": "hidden",
-      },
-      "index": 0,
-      "isExpanded": true,
-      "key": "Issues",
-      "links": Array [
-        Object {
-          "forceAnchor": true,
-          "iconProps": Object {
-            "className": "hidden",
-          },
-          "index": 0,
-          "key": "Issues: getting-started",
-          "name": "Getting Started",
-          "onClickNavLink": [Function],
-          "onRenderNavLink": [Function],
-          "testType": 1,
-          "url": "",
-        },
-        Object {
-          "displayedIndex": "0.1",
-          "forceAnchor": true,
-          "iconProps": Object {
-            "className": "hidden",
-          },
-          "index": 1,
-          "key": "Issues: requirement-key-1",
-          "name": "requirement-name-1",
-          "onClickNavLink": [Function],
-          "onRenderNavLink": [Function],
-          "requirementKey": "requirement-key-1",
-          "status": -2,
-          "testType": 1,
-          "title": "0.1: requirement-name-1 (passed)",
-          "url": "",
-        },
-        Object {
-          "displayedIndex": "0.2",
-          "forceAnchor": true,
-          "iconProps": Object {
-            "className": "hidden",
-          },
-          "index": 2,
-          "key": "Issues: requirement-key-2",
-          "name": "requirement-name-2",
-          "onClickNavLink": [Function],
-          "onRenderNavLink": [Function],
-          "requirementKey": "requirement-key-2",
-          "status": -2,
-          "testType": 1,
-          "title": "0.2: requirement-name-2 (passed)",
-          "url": "",
-        },
-      ],
-      "name": "some title",
-      "onClickNavLink": [Function],
-      "onRenderNavLink": [Function],
-      "status": -2,
-      "title": "0: some title (passed)",
-      "url": "",
-    }
-  }
-/>
-`;
-
-exports[`LeftNavBuilder buildVisualizationConfigurationLink should build link using configuration 1`] = `
-<TestViewLeftNavLink
-  link={
-    Object {
-      "forceAnchor": true,
-      "iconProps": Object {
-        "className": "hidden",
-      },
-      "index": -1,
-      "key": "Issues",
-      "name": "some title",
-      "onClickNavLink": [Function],
-      "onRenderNavLink": [Function],
-      "url": "",
-    }
-  }
-  renderIcon={[Function]}
-/>
-`;
-
-exports[`LeftNavBuilder buildVisualizationConfigurationLink should build link using configuration 2`] = `
-<LeftNavIndexIcon
-  item={
-    Object {
-      "forceAnchor": true,
-      "iconProps": Object {
-        "className": "hidden",
-      },
-      "index": -1,
-      "key": "Issues",
-      "name": "some title",
-      "onClickNavLink": [Function],
-      "onRenderNavLink": [Function],
-      "url": "",
-    }
-  }
-/>
-`;
diff --git a/src/tests/unit/tests/DetailsView/components/left-nav/__snapshots__/nav-link-renderer.test.tsx.snap b/src/tests/unit/tests/DetailsView/components/left-nav/__snapshots__/nav-link-renderer.test.tsx.snap
new file mode 100644
index 00000000000..5a303270c1d
--- /dev/null
+++ b/src/tests/unit/tests/DetailsView/components/left-nav/__snapshots__/nav-link-renderer.test.tsx.snap
@@ -0,0 +1,108 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NavLinkRenderer renderAssessmentTestLink render index icon when status is unknown 1`] = `
+<TestViewLeftNavLink
+  link={
+    Object {
+      "status": 1,
+    }
+  }
+  renderIcon={[Function]}
+/>
+`;
+
+exports[`NavLinkRenderer renderAssessmentTestLink render index icon when status is unknown 2`] = `<React.Fragment />`;
+
+exports[`NavLinkRenderer renderAssessmentTestLink render status icon with link 1`] = `
+<TestViewLeftNavLink
+  link={
+    Object {
+      "status": 0,
+    }
+  }
+  renderIcon={[Function]}
+/>
+`;
+
+exports[`NavLinkRenderer renderAssessmentTestLink render status icon with link 2`] = `
+<LeftNavStatusIcon
+  item={
+    Object {
+      "status": 0,
+    }
+  }
+/>
+`;
+
+exports[`NavLinkRenderer renderGettingStartedLink renders 1`] = `<GettingStartedNavLink />`;
+
+exports[`NavLinkRenderer renderOverviewLink renders 1`] = `
+<OverviewLeftNavLink
+  link={
+    Object {
+      "title": "some link",
+    }
+  }
+/>
+`;
+
+exports[`NavLinkRenderer renderRequirementLink render displayed index when status is unknown 1`] = `
+<TestViewLeftNavLink
+  link={
+    Object {
+      "displayedIndex": "some displayed index",
+      "status": 1,
+    }
+  }
+  renderIcon={[Function]}
+/>
+`;
+
+exports[`NavLinkRenderer renderRequirementLink render displayed index when status is unknown 2`] = `
+<React.Fragment>
+  some displayed index
+</React.Fragment>
+`;
+
+exports[`NavLinkRenderer renderRequirementLink render status icon with link 1`] = `
+<TestViewLeftNavLink
+  link={
+    Object {
+      "status": 0,
+    }
+  }
+  renderIcon={[Function]}
+/>
+`;
+
+exports[`NavLinkRenderer renderRequirementLink render status icon with link 2`] = `
+<LeftNavStatusIcon
+  className="requirementStatusIcon"
+  item={
+    Object {
+      "status": 0,
+    }
+  }
+/>
+`;
+
+exports[`NavLinkRenderer renderVisualizationLink renders 1`] = `
+<TestViewLeftNavLink
+  link={
+    Object {
+      "title": "some link",
+    }
+  }
+  renderIcon={[Function]}
+/>
+`;
+
+exports[`NavLinkRenderer renderVisualizationLink renders 2`] = `
+<LeftNavIndexIcon
+  item={
+    Object {
+      "title": "some link",
+    }
+  }
+/>
+`;
diff --git a/src/tests/unit/tests/DetailsView/components/left-nav/left-nav-link-builder.test.tsx b/src/tests/unit/tests/DetailsView/components/left-nav/left-nav-link-builder.test.tsx
index 21b3d351143..75ea811a86e 100644
--- a/src/tests/unit/tests/DetailsView/components/left-nav/left-nav-link-builder.test.tsx
+++ b/src/tests/unit/tests/DetailsView/components/left-nav/left-nav-link-builder.test.tsx
@@ -7,6 +7,7 @@ import { Requirement } from 'assessments/types/requirement';
 import { gettingStartedSubview } from 'common/types/store-data/assessment-result-data';
 import { TestRequirementLeftNavLink } from 'DetailsView/components/left-nav/assessment-left-nav';
 import { NavLinkHandler } from 'DetailsView/components/left-nav/nav-link-handler';
+import { NavLinkRenderer } from 'DetailsView/components/left-nav/nav-link-renderer';
 import { OverviewSummaryReportModel } from 'reports/assessment-report-model';
 import { OutcomeTypeSemantic } from 'reports/components/outcome-type';
 import { RequirementOutcomeStats } from 'reports/components/requirement-outcome-type';
@@ -38,6 +39,7 @@ describe('LeftNavBuilder', () => {
         testStepStatus: ManualTestStatusData,
     ) => RequirementOutcomeStats>;
     let navLinkHandlerMock: IMock<NavLinkHandler>;
+    let navLinkRendererMock: IMock<NavLinkRenderer>;
 
     beforeEach(() => {
         onLinkClickMock = Mock.ofInstance((e, item) => null, MockBehavior.Strict);
@@ -51,6 +53,7 @@ describe('LeftNavBuilder', () => {
         );
         assessmentsDataStub = {};
         navLinkHandlerMock = Mock.ofType(NavLinkHandler);
+        navLinkRendererMock = Mock.ofType(NavLinkRenderer);
 
         deps = {
             getStatusForTest: getStatusForTestMock.object,
@@ -59,6 +62,7 @@ describe('LeftNavBuilder', () => {
             getAssessmentSummaryModelFromProviderAndStatusData:
                 getAssessmentSummaryModelFromProviderAndStatusDataMock.object,
             navLinkHandler: navLinkHandlerMock.object,
+            navLinkRenderer: navLinkRendererMock.object,
         } as LeftNavLinkBuilderDeps;
 
         testSubject = new LeftNavLinkBuilder();
@@ -100,10 +104,10 @@ describe('LeftNavBuilder', () => {
                 onClickNavLink: onLinkClickMock.object,
                 title: expectedTitle,
                 percentComplete: expectedPercentComplete,
+                onRenderNavLink: navLinkRendererMock.object.renderOverviewLink,
             };
 
             expect(actual).toMatchObject(expected);
-            expect(actual.onRenderNavLink(actual)).toMatchSnapshot();
         });
     });
 
@@ -119,6 +123,7 @@ describe('LeftNavBuilder', () => {
             } as VisualizationConfiguration;
 
             const actual = testSubject.buildVisualizationConfigurationLink(
+                deps,
                 configStub,
                 onLinkClickMock.object,
                 visualizationTypeStub,
@@ -135,12 +140,10 @@ describe('LeftNavBuilder', () => {
                     className: 'hidden',
                 },
                 onClickNavLink: onLinkClickMock.object,
+                onRenderNavLink: navLinkRendererMock.object.renderVisualizationLink,
             };
 
-            const navLink = actual.onRenderNavLink(actual);
             expect(actual).toMatchObject(expected);
-            expect(navLink).toMatchSnapshot();
-            expect(navLink.props['renderIcon'](actual)).toMatchSnapshot();
         });
     });
 
@@ -199,12 +202,10 @@ describe('LeftNavBuilder', () => {
                     title: `${startingIndexStub + linkIndex}: ${assessmentStub.title} (${
                         narratorStatusStub.pastTense
                     })`,
+                    onRenderNavLink: navLinkRendererMock.object.renderAssessmentTestLink,
                 };
 
-                const navLink = actual.onRenderNavLink(actual);
                 expect(actual).toMatchObject(expected);
-                expect(navLink).toMatchSnapshot();
-                expect(navLink.props['renderIcon'](actual)).toMatchSnapshot();
             });
         });
     });
@@ -279,6 +280,7 @@ describe('LeftNavBuilder', () => {
                     title: `${startingIndexStub + linkIndex}: ${assessmentStub.title} (${
                         narratorStatusStub.pastTense
                     })`,
+                    onRenderNavLink: navLinkRendererMock.object.renderAssessmentTestLink,
                 };
                 const expectedGettingStartedLink = {
                     name: 'Getting Started',
@@ -289,6 +291,7 @@ describe('LeftNavBuilder', () => {
                     iconProps: {
                         className: 'hidden',
                     },
+                    onRenderNavLink: navLinkRendererMock.object.renderGettingStartedLink,
                 };
                 const expectedRequirementLinkA = getExpectedRequirementLink(
                     requirementStubA,
@@ -298,25 +301,9 @@ describe('LeftNavBuilder', () => {
 
                 const actualGettingStartedLink = testLink.links[0];
                 const actualRequirementLink = testLink.links[1] as TestRequirementLeftNavLink;
-                const testNavLink = testLink.onRenderNavLink(testLink);
-                const requirementNavLink = actualRequirementLink.onRenderNavLink(
-                    actualRequirementLink,
-                );
                 expect(testLink).toMatchObject(expectedTestLink);
                 expect(actualGettingStartedLink).toMatchObject(expectedGettingStartedLink);
                 expect(actualRequirementLink).toMatchObject(expectedRequirementLinkA);
-
-                expect(testNavLink).toMatchSnapshot('test nav link render');
-                expect(testNavLink.props['renderIcon'](testLink)).toMatchSnapshot(
-                    'test nav link render icon',
-                );
-                expect(requirementNavLink).toMatchSnapshot('requirement nav link render');
-                expect(requirementNavLink.props['renderIcon'](requirementNavLink)).toMatchSnapshot(
-                    'requirement nav link render icon',
-                );
-                expect(actualGettingStartedLink.onRenderNavLink()).toMatchSnapshot(
-                    'getting started nav link render',
-                );
             });
         });
     });
@@ -337,6 +324,7 @@ describe('LeftNavBuilder', () => {
             testType: test,
             status,
             requirementKey: requirement.key,
+            onRenderNavLink: navLinkRendererMock.object.renderRequirementLink,
         } as TestRequirementLeftNavLink;
     }
 });
diff --git a/src/tests/unit/tests/DetailsView/components/left-nav/nav-link-renderer.test.tsx b/src/tests/unit/tests/DetailsView/components/left-nav/nav-link-renderer.test.tsx
new file mode 100644
index 00000000000..a1d07253b48
--- /dev/null
+++ b/src/tests/unit/tests/DetailsView/components/left-nav/nav-link-renderer.test.tsx
@@ -0,0 +1,105 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { ManualTestStatus } from 'common/types/manual-test-status';
+import { BaseLeftNavLink } from 'DetailsView/components/base-left-nav';
+import {
+    AssessmentLeftNavLink,
+    TestRequirementLeftNavLink,
+} from 'DetailsView/components/left-nav/assessment-left-nav';
+import { NavLinkRenderer } from 'DetailsView/components/left-nav/nav-link-renderer';
+
+describe('NavLinkRenderer', () => {
+    let testSubject: NavLinkRenderer;
+
+    beforeEach(() => {
+        testSubject = new NavLinkRenderer();
+    });
+
+    describe('renderGettingStartedLink', () => {
+        test('renders', () => {
+            const linkStub = {
+                title: 'some link',
+            } as BaseLeftNavLink;
+
+            const actual = testSubject.renderGettingStartedLink(linkStub);
+
+            expect(actual).toMatchSnapshot();
+        });
+    });
+
+    describe('renderOverviewLink', () => {
+        test('renders', () => {
+            const linkStub = {
+                title: 'some link',
+            } as BaseLeftNavLink;
+
+            const actual = testSubject.renderOverviewLink(linkStub);
+
+            expect(actual).toMatchSnapshot();
+        });
+    });
+
+    describe('renderVisualizationLink', () => {
+        test('renders', () => {
+            const linkStub = {
+                title: 'some link',
+            } as BaseLeftNavLink;
+
+            const actual = testSubject.renderVisualizationLink(linkStub);
+            const renderedIcon = actual.props['renderIcon'](linkStub);
+
+            expect(actual).toMatchSnapshot();
+            expect(renderedIcon).toMatchSnapshot();
+        });
+    });
+
+    describe('renderRequirementLink', () => {
+        test('render status icon with link', () => {
+            const linkStub = {
+                status: ManualTestStatus.PASS,
+            } as TestRequirementLeftNavLink;
+
+            const actual = testSubject.renderRequirementLink(linkStub);
+            const renderedIcon = actual.props['renderIcon'](linkStub);
+            expect(actual).toMatchSnapshot();
+            expect(renderedIcon).toMatchSnapshot();
+        });
+
+        test('render displayed index when status is unknown', () => {
+            const linkStub = {
+                status: ManualTestStatus.UNKNOWN,
+                displayedIndex: 'some displayed index',
+            } as TestRequirementLeftNavLink;
+
+            const actual = testSubject.renderRequirementLink(linkStub);
+            const renderedIcon = actual.props['renderIcon'](linkStub);
+            expect(actual).toMatchSnapshot();
+            expect(renderedIcon).toMatchSnapshot();
+        });
+    });
+
+    describe('renderAssessmentTestLink', () => {
+        test('render status icon with link', () => {
+            const linkStub = {
+                status: ManualTestStatus.PASS,
+            } as AssessmentLeftNavLink;
+
+            const actual = testSubject.renderAssessmentTestLink(linkStub);
+            const renderedIcon = actual.props['renderIcon'](linkStub);
+            expect(actual).toMatchSnapshot();
+            expect(renderedIcon).toMatchSnapshot();
+        });
+
+        test('render index icon when status is unknown', () => {
+            const linkStub = {
+                status: ManualTestStatus.UNKNOWN,
+            } as AssessmentLeftNavLink;
+
+            const actual = testSubject.renderRequirementLink(linkStub);
+            const renderedIcon = actual.props['renderIcon'](linkStub);
+            expect(actual).toMatchSnapshot();
+            expect(renderedIcon).toMatchSnapshot();
+        });
+    });
+});
diff --git a/src/tests/unit/tests/DetailsView/components/left-nav/visualization-based-left-nav.test.tsx b/src/tests/unit/tests/DetailsView/components/left-nav/visualization-based-left-nav.test.tsx
index 1c4864b7576..c39ff8b306b 100644
--- a/src/tests/unit/tests/DetailsView/components/left-nav/visualization-based-left-nav.test.tsx
+++ b/src/tests/unit/tests/DetailsView/components/left-nav/visualization-based-left-nav.test.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import { IMock, Mock, MockBehavior } from 'typemoq';
+import { IMock, Mock } from 'typemoq';
 import { VisualizationConfiguration } from '../../../../../../common/configs/visualization-configuration';
 import { VisualizationConfigurationFactory } from '../../../../../../common/configs/visualization-configuration-factory';
 import { VisualizationType } from '../../../../../../common/types/visualization-type';
@@ -29,8 +29,8 @@ describe('VisualizationBasedLeftNav', () => {
 
     beforeEach(() => {
         visualizationsStub = [-1, -2];
-        leftNavLinkBuilderMock = Mock.ofType(LeftNavLinkBuilder, MockBehavior.Strict);
-        configFactoryMock = Mock.ofType(VisualizationConfigurationFactory, MockBehavior.Strict);
+        leftNavLinkBuilderMock = Mock.ofType(LeftNavLinkBuilder);
+        configFactoryMock = Mock.ofType(VisualizationConfigurationFactory);
         onLinkClickStub = (event, item) => null;
         linkStub = {} as BaseLeftNavLink;
         configStub = {} as VisualizationConfiguration;
@@ -56,6 +56,7 @@ describe('VisualizationBasedLeftNav', () => {
             leftNavLinkBuilderMock
                 .setup(lnlbm =>
                     lnlbm.buildVisualizationConfigurationLink(
+                        deps,
                         configStub,
                         onLinkClickStub,
                         visualizationType,