chore: Enzyme replacement in test files- PR 4 of 6 for part 3 of 3 (#…

…7238)

#### Details

Enzyme replacement with Jest and React Testing library
Below files are covered as part of this PR
src/tests/unit/tests/popup/components/diagnostic-view-toggle.test.tsx

src/tests/unit/tests/popup/components/file-url-unsupported-message-panel.test.tsx
src/tests/unit/tests/popup/components/header.test.tsx
src/tests/unit/tests/popup/components/launch-pad-item-row.test.tsx
src/tests/unit/tests/popup/components/launch-pad.test.tsx
src/tests/unit/tests/popup/components/launch-panel-header.test.tsx
src/tests/unit/tests/popup/components/popup-view.test.tsx

src/tests/unit/tests/report-export/code-pen-report-export-service.test.tsx

src/tests/unit/tests/reports/components/report-sections/automated-checks-header-section.test.tsx

src/tests/unit/tests/reports/components/report-sections/automated-checks-title-section.test.tsx

src/tests/unit/tests/reports/components/report-sections/body-section.test.tsx

src/tests/unit/tests/reports/components/report-sections/collapsible-result-section.test.tsx

src/tests/unit/tests/reports/components/report-sections/collapsible-url-result-section.test.tsx

src/tests/unit/tests/reports/components/report-sections/combined-report-failed-section.test.tsx

src/tests/unit/tests/reports/components/report-sections/combined-report-rules-only-sections.test.tsx

src/tests/unit/tests/reports/components/report-sections/combined-report-summary-section.test.tsx

src/tests/unit/tests/reports/components/report-sections/content-container.test.tsx

src/tests/unit/tests/reports/components/report-sections/failed-urls-section.test.tsx

src/tests/unit/tests/reports/components/report-sections/fast-pass-results-title-section.test.tsx

src/tests/unit/tests/reports/components/report-sections/fast-pass-title-section.test.tsx

src/tests/unit/tests/reports/components/report-sections/footer-section.test.tsx

src/tests/unit/tests/reports/components/report-sections/footer-text-for-unified.test.tsx

Associated User story: [User Story
2142859](https://dev.azure.com/mseng/1ES/_workitems/edit/2142859/)
##### Motivation

Enzyme replacement for existing files

##### Context

All changes for migrating Enzyme to Jest and RTL are added in test files
only and snapshots are updated.

#### Pull request checklist
<!-- If a checklist item is not applicable to this change, write "n/a"
in the checkbox -->
- [ ] Addresses an existing issue: #0000
- [x] Ran `yarn fastpass`
- [x] Added/updated relevant unit test(s) (and ran `yarn test`)
- [x] Verified code coverage for the changes made. Check coverage report
at: `<rootDir>/test-results/unit/coverage`
- [x] PR title *AND* final merge commit title both start with a semantic
tag (`fix:`, `chore:`, `feat(feature-name):`, `refactor:`). See
`CONTRIBUTING.md`.
- [ ] (UI changes only) Added screenshots/GIFs to description above
- [ ] (UI changes only) Verified usability with NVDA/JAWS

---------

Co-authored-by: Saanica Ghate <[email protected]>

src/tests/unit/tests/popup/components/__snapshots__/diagnostic-view-toggle.test.tsx.snap

@@ -1,158 +1,156 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DiagnosticViewToggleTest renders details view link when the test does not have a guidance 1`] = `
-<div
-  className="diagnosticViewToggle"
->
+<DocumentFragment>
   <div
-    className="title"
+    class="diagnosticViewToggle"
   >
-    Automated checks
-  </div>
-  <div
-    className="toggle"
-  >
-    <VisualizationToggle
-      checked={false}
-      componentRef={
-        {
-          "current": null,
-        }
-      }
-      disabled={false}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      visualizationName="Automated checks"
-    />
-  </div>
-  <div>
-    <StyledLinkBase
-      className="insights-link"
-      href="#"
-      onClick={[Function]}
+    <div
+      class="title"
     >
-      List view and filtering
-    </StyledLinkBase>
-  </div>
-  <div
-    className="shortcut"
-  >
-    Ctrl+Shift+1
+      Automated checks
+    </div>
+    <div
+      class="toggle"
+    >
+      <mock-visualizationtoggle
+        checked="false"
+        componentref="[object Object]"
+        disabled="false"
+        visualizationname="Automated checks"
+      />
+    </div>
+    <div>
+      <mock-styledlinkbase
+        classname="insights-link"
+        href="#"
+      >
+        List view and filtering
+      </mock-styledlinkbase>
+    </div>
+    <div
+      class="shortcut"
+    >
+      Ctrl+Shift+1
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`DiagnosticViewToggleTest renders spinner while scanning 1`] = `
-<div
-  className="diagnosticViewToggle"
->
+<DocumentFragment>
   <div
-    className="title"
+    class="diagnosticViewToggle"
   >
-    Headings
-  </div>
-  <div
-    className="toggle"
-  >
-    <StyledSpinnerBase
-      componentRef={[Function]}
-      size={1}
-    />
-  </div>
-  <div>
-    <ContentLink
-      deps={{}}
-      linkText="How to test headings"
-      reference={[Function]}
-    />
-  </div>
-  <div
-    className="shortcut"
-  >
-    Ctrl+Shift+3
+    <div
+      class="title"
+    >
+      Headings
+    </div>
+    <div
+      class="toggle"
+    >
+      <mock-styledspinnerbase
+        size="1"
+      />
+    </div>
+    <div>
+      <mock-contentlink
+        deps="[object Object]"
+        linktext="How to test headings"
+      />
+    </div>
+    <div
+      class="shortcut"
+    >
+      Ctrl+Shift+3
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`DiagnosticViewToggleTest renders toggle when not scanning 1`] = `
-<div
-  className="diagnosticViewToggle"
->
+<DocumentFragment>
   <div
-    className="title"
+    class="diagnosticViewToggle"
   >
-    Headings
-  </div>
-  <div
-    className="toggle"
-  >
-    <VisualizationToggle
-      checked={false}
-      componentRef={
-        {
-          "current": null,
-        }
-      }
-      disabled={false}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      visualizationName="Headings"
-    />
-  </div>
-  <div>
-    <ContentLink
-      deps={{}}
-      linkText="How to test headings"
-      reference={[Function]}
-    />
-  </div>
-  <div
-    className="shortcut"
-  >
-    Ctrl+Shift+3
+    <div
+      class="title"
+    >
+      Headings
+    </div>
+    <div
+      class="toggle"
+    >
+      <mock-visualizationtoggle
+        checked="false"
+        componentref="[object Object]"
+        disabled="false"
+        visualizationname="Headings"
+      />
+    </div>
+    <div>
+      <mock-contentlink
+        deps="[object Object]"
+        linktext="How to test headings"
+      />
+    </div>
+    <div
+      class="shortcut"
+    >
+      Ctrl+Shift+3
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`DiagnosticViewToggleTest renders toggle when scanning for a different visualization 1`] = `
-<div
-  className="diagnosticViewToggle"
->
-  <div
-    className="title"
-  >
-    Headings
-  </div>
-  <div
-    className="toggle"
-  >
-    <VisualizationToggle
-      checked={false}
-      componentRef={
-        {
-          "current": null,
-        }
-      }
-      disabled={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      visualizationName="Headings"
-    />
-  </div>
-  <div>
-    <ContentLink
-      deps={{}}
-      linkText="How to test headings"
-      reference={[Function]}
-    />
-  </div>
+<DocumentFragment>
   <div
-    className="shortcut"
+    class="diagnosticViewToggle"
   >
-    Ctrl+Shift+3
+    <div
+      class="title"
+    >
+      Headings
+    </div>
+    <div
+      class="toggle"
+    >
+      <mock-visualizationtoggle
+        checked="false"
+        componentref="[object Object]"
+        disabled="true"
+        visualizationname="Headings"
+      />
+    </div>
+    <div>
+      <mock-contentlink
+        deps="[object Object]"
+        linktext="How to test headings"
+      />
+    </div>
+    <div
+      class="shortcut"
+    >
+      Ctrl+Shift+3
+    </div>
   </div>
-</div>
+</DocumentFragment>
+`;
+
+exports[`DiagnosticViewToggleTest renders toggle when scanning for a different visualization: VisualizationToggle props 1`] = `
+{
+  "checked": false,
+  "componentRef": {
+    "current": {
+      "focus": [MockFunction],
+    },
+  },
+  "disabled": true,
+  "onBlur": [Function],
+  "onClick": [Function],
+  "onFocus": [Function],
+  "visualizationName": "Headings",
+}
 `;

src/tests/unit/tests/popup/components/__snapshots__/file-url-unsupported-message-panel.test.tsx.snap

@@ -1,48 +1,49 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FileUrlUnsupportedMessagePanel renders 1`] = `
-<div
-  className="ms-Fabric unsupported-url-info-panel"
->
-  <span>
-    TEST HEADER
-  </span>
+<DocumentFragment>
   <div
-    className="main-section"
+    class="ms-Fabric unsupported-url-info-panel"
   >
+    <span>
+      TEST HEADER
+    </span>
     <div
-      className="popup-grid"
+      class="main-section"
     >
       <div
-        className="launch-panel-general-container"
+        class="popup-grid"
       >
-        Your browser settings don't allow Accessibility Insights for Web to run on file URLs.
-      </div>
-      <div>
-        <div>
-          To allow this extension to run on file URLs:
-        </div>
-        <div>
-          1. Open 
-          <NewTabLink
-            aria-label="open test-title extension page"
-            onClick={[Function]}
-          >
-            test-title extension page
-          </NewTabLink>
-          .
+        <div
+          class="launch-panel-general-container"
+        >
+          Your browser settings don't allow Accessibility Insights for Web to run on file URLs.
         </div>
         <div>
-          2. Enable 
-          <span
-            className="ms-fontWeight-semibold"
-          >
-            Allow Access to file URLs
-          </span>
-          .
+          <div>
+            To allow this extension to run on file URLs:
+          </div>
+          <div>
+            1. Open 
+            <mock-newtablink
+              aria-label="open test-title extension page"
+            >
+              test-title extension page
+            </mock-newtablink>
+            .
+          </div>
+          <div>
+            2. Enable 
+            <span
+              class="ms-fontWeight-semibold"
+            >
+              Allow Access to file URLs
+            </span>
+            .
+          </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;