refactor: replace NodeSelector with Document in preparation for Typescript upgrade (#1065)

Updating from Typescript 2.9 to 3.5 results in a variety of errors that look like this:

```
ERROR in Q:/repos/accessibility-insights-web/src/common/document-manipulator.ts(4,42):
TS2304: Cannot find name 'NodeSelector'.
```

It looks like microsoft/TypeScript-DOM-lib-generator#647 was the point where it was removed, merged into a separate `ParentNode` interface. We considered using `ParentNode` instead here, but `Document` seemed closer to the intended usage in most cases and led to the tests working more similarly to the product code than anything else, so that's what I went with.

Replacing the usages with Document is a no-op in Typescript 2.9 (so nice to do as a separate PR, to make the eventual Typescript upgrade PR smaller). It also forces the affected tests to be a little bit better (they create test documents for the cases where the product passes real documents, rather than creating test nodes within a global document and hoping that they act similarly and that no other test touches global document state).

Author: dbjorge

src/DetailsView/details-view-renderer.tsx

@@ -19,7 +19,7 @@ import { PreviewFeatureFlagsHandler } from './handlers/preview-feature-flags-han
 
 export class DetailsViewRenderer {
     private renderer: typeof ReactDOM.render;
-    private dom: NodeSelector & Node;
+    private dom: Document;
     private scopingActionMessageCreator: ScopingActionMessageCreator;
     private inspectActionMessageCreator: InspectActionMessageCreator;
     private issuesSelection: ISelection;
@@ -34,7 +34,7 @@ export class DetailsViewRenderer {
 
     constructor(
         private readonly deps: DetailsViewContainerDeps,
-        dom: NodeSelector & Node,
+        dom: Document,
         renderer: typeof ReactDOM.render,
         scopingActionMessageCreator: ScopingActionMessageCreator,
         inspectActionMessageCreator: InspectActionMessageCreator,

src/common/document-manipulator.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 export class DocumentManipulator {
-    constructor(private document: Node & NodeSelector) {}
+    constructor(private document: Document) {}
 
     public setShortcutIcon(href: string): void {
         const icon = this.document.querySelector('head link[rel="shortcut icon"]');

src/injected/visualization/base-drawer.ts

@@ -8,7 +8,7 @@ import { DrawerUtils } from './drawer-utils';
 import { Formatter } from './formatter';
 
 export abstract class BaseDrawer implements Drawer {
-    protected dom: NodeSelector & Node;
+    protected dom: Document;
     protected formatter: Formatter;
     protected isEnabled = false;
     protected containerClass: string;
@@ -23,7 +23,7 @@ export abstract class BaseDrawer implements Drawer {
     private shadowUtils: ShadowUtils;
 
     constructor(
-        dom: NodeSelector & Node,
+        dom: Document,
         containerClass: string,
         windowUtils: WindowUtils,
         shadowUtils: ShadowUtils,

src/injected/visualization/drawer-utils.ts

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 import { ClientRectOffset } from '../client-utils';
 export class DrawerUtils {
-    private dom: NodeSelector & Node;
+    private dom: Document;
     public clientWindowOffsetThreshold: number = 5;
 
     constructor(dom) {
@@ -18,7 +18,7 @@ export class DrawerUtils {
     }
 
     public getDocumentElement(): Document {
-        return this.dom.ownerDocument || (this.dom as Document);
+        return this.dom.ownerDocument || this.dom;
     }
 
     public getContainerWidth(

src/injected/visualization/highlight-box-drawer.ts

@@ -31,7 +31,7 @@ export class HighlightBoxDrawer extends BaseDrawer {
     };
 
     constructor(
-        dom: NodeSelector & Node,
+        dom: Document,
         containerClass: string,
         windowUtils: WindowUtils,
         shadowUtils: ShadowUtils,

src/injected/visualization/svg-drawer.ts

@@ -26,7 +26,7 @@ export class SVGDrawer extends BaseDrawer {
     private centerPositionCalculator: CenterPositionCalculator;
 
     constructor(
-        dom: NodeSelector & Node,
+        dom: Document,
         containerClass: string,
         windowUtils: WindowUtils,
         shadowUtils: ShadowUtils,

src/popup/components/diagnostic-view-toggle-factory.tsx

@@ -22,11 +22,11 @@ export class DiagnosticViewToggleFactory {
     private commandStore: BaseStore<CommandStoreData>;
     private actionMessageCreator: PopupActionMessageCreator;
     private clickHandler: DiagnosticViewClickHandler;
-    private dom: NodeSelector & Node;
+    private dom: Document;
 
     constructor(
         private readonly deps: DiagnosticViewToggleDeps,
-        dom: NodeSelector & Node,
+        dom: Document,
         visualizationTypes: VisualizationType[],
         visualizationConfigurationFactory: VisualizationConfigurationFactory,
         visualizationStore: BaseStore<VisualizationStoreData>,

src/popup/components/diagnostic-view-toggle.tsx

@@ -27,7 +27,7 @@ export interface DiagnosticViewToggleProps {
     clickHandler: DiagnosticViewClickHandler;
     shortcutCommands: chrome.commands.Command[];
     telemetrySource: TelemetryEventSource;
-    dom: NodeSelector & Node;
+    dom: Document;
 }
 
 export type DiagnosticViewToggleDeps = ContentLinkDeps;
@@ -39,7 +39,7 @@ export interface DiagnosticViewToggleState {
 export class DiagnosticViewToggle extends React.Component<DiagnosticViewToggleProps, DiagnosticViewToggleState> {
     private configuration: VisualizationConfiguration;
     private toggle: React.RefObject<IToggle> = React.createRef<IToggle>();
-    private dom: NodeSelector & Node;
+    private dom: Document;
     private userEventListenerAdded: boolean;
 
     // Must be consistent with internal react naming for same property to work

src/popup/incompatible-browser-renderer.tsx

@@ -8,7 +8,7 @@ import { NewTabLink } from '../common/components/new-tab-link';
 import { Header } from './components/header';
 
 export class IncompatibleBrowserRenderer {
-    constructor(private readonly renderer: typeof ReactDOM.render, private readonly dom: NodeSelector & Node) {}
+    constructor(private readonly renderer: typeof ReactDOM.render, private readonly dom: Document) {}
 
     public render(): void {
         const container = this.dom.querySelector('#popup-container');

src/popup/main-renderer.tsx

@@ -19,7 +19,7 @@ export class MainRenderer {
         private readonly deps: MainRendererDeps,
         private readonly popupHandlers: IPopupHandlers,
         private readonly renderer: typeof ReactDOM.render,
-        private readonly dom: NodeSelector & Node,
+        private readonly dom: Document,
         private readonly popupWindow: Window,
         private readonly targetTabUrl: string,
         private readonly hasAccess: boolean,

src/scanner/axe-options.ts

@@ -6,7 +6,7 @@ export interface AxeOptions {
     runOnly?: Axe.RunOnly;
     restoreScroll?: Boolean; // missing from axe options.
 }
-export type AxeScanContext = string | NodeSelector & Node | IncludeExcludeOptions | NodeList;
+export type AxeScanContext = string | Document | IncludeExcludeOptions | NodeList;
 export interface IncludeExcludeOptions {
     include: string[][];
     exclude: string[][];

src/scanner/launcher.ts

@@ -10,7 +10,7 @@ export class Launcher {
     constructor(
         private axe: typeof Axe,
         private scanParameterGenerator: ScanParameterGenerator,
-        private dom: NodeSelector & Node,
+        private dom: Document,
         private options: ScanOptions,
     ) {}
 

src/scanner/scan-options.ts

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 export interface ScanOptions {
     testsToRun?: string[];
-    dom?: NodeSelector & Node | NodeList;
+    dom?: Document | NodeList;
     selector?: string;
     include?: string[][];
     exclude?: string[][];

src/scanner/scan-parameter-generator.ts

@@ -24,7 +24,7 @@ export class ScanParameterGenerator {
         return result;
     }
 
-    public getContext(dom: NodeSelector & Node, options: ScanOptions): AxeScanContext {
+    public getContext(dom: Document, options: ScanOptions): AxeScanContext {
         if (options == null) {
             return dom;
         }

src/tests/unit/common/test-document-creator.ts

@@ -1,9 +1,10 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
+import { JSDOM } from 'jsdom';
+
 export class TestDocumentCreator {
-    public static createTestDocument(html: string): Node & NodeSelector {
-        const element = document.createElement('html');
-        element.innerHTML = html;
-        return element;
+    public static createTestDocument(html: string = ''): Document {
+        const jsdom = new JSDOM(`<html>${html}</html>`);
+        return jsdom.window.document;
     }
 }

src/tests/unit/tests/DetailsView/details-view-renderer.test.tsx

@@ -19,6 +19,7 @@ import { AssessmentInstanceTableHandler } from '../../../../DetailsView/handlers
 import { DetailsViewToggleClickHandlerFactory } from '../../../../DetailsView/handlers/details-view-toggle-click-handler-factory';
 import { PreviewFeatureFlagsHandler } from '../../../../DetailsView/handlers/preview-feature-flags-handler';
 import { CreateTestAssessmentProvider } from '../../common/test-assessment-provider';
+import { TestDocumentCreator } from '../../common/test-document-creator';
 
 describe('DetailsViewRendererTest', () => {
     test('render', () => {
@@ -27,8 +28,7 @@ describe('DetailsViewRendererTest', () => {
         const scopingActionMessageCreatorStrictMock = Mock.ofType<ScopingActionMessageCreator>(null, MockBehavior.Strict);
         const inspectActionMessageCreatorStrictMock = Mock.ofType<InspectActionMessageCreator>(null, MockBehavior.Strict);
 
-        const dom = document.createElement('div');
-        const detailsViewContainer = document.createElement('div');
+        const fakeDocument = TestDocumentCreator.createTestDocument('<div id="details-container"></div>');
 
         const renderMock: IMock<typeof ReactDOM.render> = Mock.ofInstance(() => null);
         const selectionMock = Mock.ofType<ISelection>(Selection);
@@ -46,9 +46,6 @@ describe('DetailsViewRendererTest', () => {
         const documentManipulatorMock = Mock.ofType(DocumentManipulator);
         documentManipulatorMock.setup(des => des.setShortcutIcon('../' + expectedIcon16)).verifiable();
 
-        detailsViewContainer.setAttribute('id', 'details-container');
-        dom.appendChild(detailsViewContainer);
-
         renderMock
             .setup(r =>
                 r(
@@ -71,14 +68,14 @@ describe('DetailsViewRendererTest', () => {
                             />
                         </>,
                     ),
-                    detailsViewContainer,
+                    fakeDocument.getElementById('details-container'),
                 ),
             )
             .verifiable();
 
         const renderer = new DetailsViewRenderer(
             deps,
-            dom,
+            fakeDocument,
             renderMock.object,
             scopingActionMessageCreatorStrictMock.object,
             inspectActionMessageCreatorStrictMock.object,