Breaking: Update CDP to use a copy of the DOM

Fix webhintio#1879

packages/connector-chrome/package.json

@@ -14,17 +14,19 @@
   },
   "description": "hint connector for Google Chrome",
   "devDependencies": {
+    "@hint/parser-html": "^2.0.2",
     "@hint/utils-create-server": "^3.0.0",
     "@types/is-ci": "^1.1.0",
     "@types/lockfile": "^1.0.0",
     "@types/lodash": "^4.14.120",
     "@types/sinon": "^7.0.5",
+    "@typescript-eslint/eslint-plugin": "^1.3.0",
     "ava": "^1.2.1",
     "cpx": "^1.5.0",
     "eslint": "^5.13.0",
     "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-markdown": "^1.0.0",
-    "@typescript-eslint/eslint-plugin": "^1.3.0",
+    "eventemitter2": "^5.0.1",
     "hint": "^4.4.0",
     "lodash": "^4.17.11",
     "npm-run-all": "^4.1.5",

packages/connector-chrome/src/connector.ts

@@ -11,13 +11,14 @@
  */
 
 import { Connector } from '@hint/utils-debugging-protocol-common/dist/src/debugging-protocol-connector';
+import { HTMLEvents } from '@hint/parser-html';
 import { ILauncher } from 'hint/dist/src/lib/types';
-import { CDPLauncher } from './chrome-launcher';
-
 import { Engine } from 'hint/dist/src/lib/engine';
 
+import { CDPLauncher } from './chrome-launcher';
+
 export default class ChromeConnector extends Connector {
-    public constructor(server: Engine, config?: object) {
+    public constructor(server: Engine<HTMLEvents>, config?: object) {
         const launcher: ILauncher = new CDPLauncher(config || {});
 
         super(server, config || {}, launcher);

packages/connector-chrome/tests/collect.ts

@@ -6,34 +6,38 @@ import { URL } from 'url';
 
 import * as sinon from 'sinon';
 import anyTest, { TestInterface, ExecutionContext } from 'ava';
+import { EventEmitter2 } from 'eventemitter2';
 
+import ParserHTML, { HTMLEvents } from '@hint/parser-html';
 import { Server, ServerConfiguration } from '@hint/utils-create-server';
-import { Events, IConnector, IConnectorConstructor } from 'hint/dist/src/lib/types';
+import { IConnector, IConnectorConstructor } from 'hint/dist/src/lib/types';
 import generateHTMLPage from 'hint/dist/src/lib/utils/misc/generate-html-page';
-import ChromeConnector from '../src/connector';
 import { Engine } from 'hint';
 
+import ChromeConnector from '../src/connector';
+
 const name: string = 'chrome';
 
 type CollectContext = {
-    engine: Engine<Events>;
+    engine: Engine<HTMLEvents>;
     engineEmitSpy: sinon.SinonSpy;
     engineEmitAsyncSpy: sinon.SinonSpy;
 };
 
 const test = anyTest as TestInterface<CollectContext>;
 
 test.beforeEach((t) => {
-    const engine: Engine<Events> = {
-        emit(): boolean {
-            return false;
-        },
-        async emitAsync(): Promise<any> { }
-    } as any;
+    const engine = new EventEmitter2({
+        delimiter: '::',
+        maxListeners: 0,
+        wildcard: true
+    }) as Engine<HTMLEvents>;
 
     t.context.engineEmitSpy = sinon.spy(engine, 'emit');
     t.context.engineEmitAsyncSpy = sinon.spy(engine, 'emitAsync');
 
+    new ParserHTML(engine); // eslint-disable-line no-new
+
     t.context.engine = engine;
 });
 
@@ -45,7 +49,7 @@ test.afterEach.always((t) => {
 const pathToFaviconInDir = path.join(__dirname, './fixtures/common/favicon.ico');
 const pathToFaviconInLinkElement = path.join(__dirname, './fixtures/common/favicon-32x32.png');
 
-const runTest = async (t: ExecutionContext<CollectContext>, ConnectorConstructor: IConnectorConstructor, serverConfig: ServerConfiguration): Promise<Server> => {
+const runTest = async (t: ExecutionContext<CollectContext>, ConnectorConstructor: IConnectorConstructor<HTMLEvents>, serverConfig: ServerConfiguration): Promise<Server> => {
     const server = await Server.create({ configuration: serverConfig });
     const { engine } = t.context;
     const connector: IConnector = new ConnectorConstructor(engine, {});

packages/connector-chrome/tests/evaluate.ts

@@ -1,10 +1,12 @@
 import { URL } from 'url';
 
 import test from 'ava';
+import { EventEmitter2 } from 'eventemitter2';
 
+import ParserHTML, { HTMLEvents } from '@hint/parser-html';
 import { Server } from '@hint/utils-create-server';
 import generateHTMLPage from 'hint/dist/src/lib/utils/misc/generate-html-page';
-import { IConnector, Events } from 'hint/dist/src/lib/types';
+import { IConnector } from 'hint/dist/src/lib/types';
 import { Engine } from 'hint';
 
 import ChromeConnector from '../src/connector';
@@ -48,13 +50,15 @@ const scripts = [
 ];
 
 test(`[${name}] Evaluate JavaScript`, async (t) => {
-    const engine: Engine<Events> = {
-        emit(): boolean {
-            return false;
-        },
-        async emitAsync(): Promise<any> { },
-        timeout: 10000
-    } as any;
+    const engine = new EventEmitter2({
+        delimiter: '::',
+        maxListeners: 0,
+        wildcard: true
+    }) as Engine<HTMLEvents>;
+
+    (engine as any).timeout = 10000;
+
+    new ParserHTML(engine); // eslint-disable-line no-new
 
     const server = await Server.create({ configuration: generateHTMLPage('', '') });
     const connector: IConnector = new ChromeConnector(engine, {});

packages/connector-chrome/tests/events.ts

@@ -9,18 +9,21 @@ import * as fs from 'fs';
 import * as path from 'path';
 import { URL } from 'url';
 
+import { EventEmitter2 } from 'eventemitter2';
 import { groupBy, every } from 'lodash';
 import * as sinon from 'sinon';
 import anyTest, { TestInterface } from 'ava';
+
+import ParserHTML, { HTMLEvents } from '@hint/parser-html';
 import { Server } from '@hint/utils-create-server';
-import { IConnector, Events } from 'hint/dist/src/lib/types';
+import { IConnector } from 'hint/dist/src/lib/types';
 import { Engine } from 'hint';
 
 import ChromeConnector from '../src/connector';
 
 type EventsContext = {
     connector?: IConnector;
-    engine: Engine<Events>;
+    engine: Engine<HTMLEvents>;
     engineEmitSpy: sinon.SinonSpy;
     engineEmitAsyncSpy: sinon.SinonSpy;
 };
@@ -202,12 +205,13 @@ const validEvent = (eventsToSearch: any[], expectedEvent: any) => {
 };
 
 test.beforeEach((t) => {
-    const engine: Engine<Events> = {
-        emit(): boolean {
-            return false;
-        },
-        async emitAsync(): Promise<any> { }
-    } as any;
+    const engine = new EventEmitter2({
+        delimiter: '::',
+        maxListeners: 0,
+        wildcard: true
+    }) as Engine<HTMLEvents>;
+
+    new ParserHTML(engine); // eslint-disable-line no-new
 
     t.context.engineEmitAsyncSpy = sinon.spy(engine, 'emitAsync');
     t.context.engineEmitSpy = sinon.spy(engine, 'emit');

packages/connector-chrome/tests/fetch-content.ts

@@ -5,21 +5,25 @@ import * as path from 'path';
 import { URL } from 'url';
 
 import test from 'ava';
+import { EventEmitter2 } from 'eventemitter2';
+
+import ParserHTML, { HTMLEvents } from '@hint/parser-html';
 import { Server } from '@hint/utils-create-server';
-import { IConnector, NetworkData, Events } from 'hint/dist/src/lib/types';
+import { IConnector, NetworkData } from 'hint/dist/src/lib/types';
 import { Engine } from 'hint';
 
 import ChromeConnector from '../src/connector';
 
 const name: string = 'chrome';
 
 test(`[${name}] Fetch Content`, async (t) => {
-    const engine: Engine<Events> = {
-        emit(): boolean {
-            return false;
-        },
-        async emitAsync(): Promise<any> { }
-    } as any;
+    const engine = new EventEmitter2({
+        delimiter: '::',
+        maxListeners: 0,
+        wildcard: true
+    }) as Engine<HTMLEvents>;
+
+    new ParserHTML(engine); // eslint-disable-line no-new
 
     const file = fs.readFileSync(path.join(__dirname, './fixtures/common/nellie.png'));
     const connector: IConnector = new ChromeConnector(engine, {});

packages/connector-chrome/tests/invalid-url.ts

@@ -1,20 +1,24 @@
 import { URL } from 'url';
 
 import test from 'ava';
-import { IConnector, Events } from 'hint/dist/src/lib/types';
+import { EventEmitter2 } from 'eventemitter2';
+
+import ParserHTML, { HTMLEvents } from '@hint/parser-html';
+import { IConnector } from 'hint/dist/src/lib/types';
 import { Engine } from 'hint';
 
 import ChromeConnector from '../src/connector';
 
 const name: string = 'chrome';
 
 test(`[${name}] Load an invalid url throws an error`, async (t) => {
-    const engine: Engine<Events> = {
-        emit(): boolean {
-            return false;
-        },
-        async emitAsync(): Promise<any> { }
-    } as any;
+    const engine = new EventEmitter2({
+        delimiter: '::',
+        maxListeners: 0,
+        wildcard: true
+    }) as Engine<HTMLEvents>;
+
+    new ParserHTML(engine); // eslint-disable-line no-new
 
     const connector: IConnector = new ChromeConnector(engine, {});
 

packages/connector-chrome/tests/request-response.ts

@@ -10,10 +10,13 @@ import * as path from 'path';
 import { URL } from 'url';
 import * as zlib from 'zlib';
 
+import { EventEmitter2 } from 'eventemitter2';
 import * as sinon from 'sinon';
 import test from 'ava';
+
+import ParserHTML, { HTMLEvents } from '@hint/parser-html';
 import { Server } from '@hint/utils-create-server';
-import { IConnector, Events } from 'hint/dist/src/lib/types';
+import { IConnector } from 'hint/dist/src/lib/types';
 import { Engine } from 'hint';
 
 import ChromeConnector from '../src/connector';
@@ -35,12 +38,13 @@ const findEvent = (func: sinon.SinonSpy, eventName: string) => {
 test(`[${name}] requestResponse`, async (t) => {
     const sourceHtml = fs.readFileSync(path.join(__dirname, './fixtures/common/index.html'), 'utf8');
 
-    const engine: Engine<Events> = {
-        emit(): boolean {
-            return false;
-        },
-        async emitAsync(): Promise<any> { }
-    } as any;
+    const engine = new EventEmitter2({
+        delimiter: '::',
+        maxListeners: 0,
+        wildcard: true
+    }) as Engine<HTMLEvents>;
+
+    new ParserHTML(engine); // eslint-disable-line no-new
 
     const engineEmitAsyncSpy = sinon.spy(engine, 'emitAsync');
     const engineEmitSpy = sinon.spy(engine, 'emit');

packages/utils-debugging-protocol-common/package.json

@@ -8,19 +8,20 @@
   },
   "description": "hint debugging protocol common functionality",
   "devDependencies": {
+    "@hint/parser-html": "^2.0.2",
     "@types/lodash": "^4.14.120",
     "@types/node": "11.9.0",
+    "@typescript-eslint/eslint-plugin": "^1.3.0",
+    "@typescript-eslint/parser": "1.3.0",
     "chrome-remote-debug-protocol": "^1.2.20180422",
     "cpx": "^1.5.0",
     "eslint": "^5.13.0",
     "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-markdown": "^1.0.0",
-    "@typescript-eslint/eslint-plugin": "^1.3.0",
     "hint": "^4.4.0",
     "npm-run-all": "^4.1.5",
     "rimraf": "^2.6.3",
-    "typescript": "^3.3.3",
-    "@typescript-eslint/parser": "1.3.0"
+    "typescript": "^3.3.3"
   },
   "engines": {
     "node": ">=8.0.0"