refactor(core): remove innerHTML and outerHTML testing utilities from DomAdapters (#32278)

PR Close #32278

packages/compiler-cli/test/transformers/r3_transform_spec.ts

@@ -8,8 +8,6 @@
 
 import {PartialModule} from '@angular/compiler';
 import * as o from '@angular/compiler/src/output/output_ast';
-import {MockAotCompilerHost} from '@angular/compiler/test/aot/test_util';
-import {initDomAdapter} from '@angular/platform-browser/src/browser';
 import * as ts from 'typescript';
 
 import {getAngularClassTransformerFactory} from '../../src/transformers/r3_transform';

packages/core/test/animation/animations_with_web_animations_integration_spec.ts

@@ -13,7 +13,6 @@ import {Component, ViewChild} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
-import {ivyEnabled} from '@angular/private/testing';
 
 (function() {
   // these tests are only mean't to be run within the DOM (for now)

packages/core/test/dom/dom_adapter_spec.ts

@@ -54,7 +54,7 @@ import {el, stringifyElement} from '@angular/platform-browser/testing/src/browse
       expect(getDOM().isTextNode(t)).toBe(true);
       const d = getDOM().createElement('div');
       getDOM().appendChild(d, t);
-      expect(getDOM().getInnerHTML(d)).toEqual('hello');
+      expect(d.innerHTML).toEqual('hello');
     });
 
     it('should set className via the class attribute', () => {

packages/core/test/linker/integration_spec.ts

@@ -199,12 +199,12 @@ function declareTests(config?: {useJit: boolean}) {
 
         fixture.componentInstance.ctxProp = 'Some <span>HTML</span>';
         fixture.detectChanges();
-        expect(getDOM().getInnerHTML(fixture.debugElement.children[0].nativeElement))
+        expect(fixture.debugElement.children[0].nativeElement.innerHTML)
             .toEqual('Some <span>HTML</span>');
 
         fixture.componentInstance.ctxProp = 'Some other <div>HTML</div>';
         fixture.detectChanges();
-        expect(getDOM().getInnerHTML(fixture.debugElement.children[0].nativeElement))
+        expect(fixture.debugElement.children[0].nativeElement.innerHTML)
             .toEqual('Some other <div>HTML</div>');
       });
 
@@ -1726,7 +1726,7 @@ function declareTests(config?: {useJit: boolean}) {
         fixture.componentInstance.ctxProp = 'hello';
         fixture.detectChanges();
 
-        const html = getDOM().getInnerHTML(fixture.nativeElement);
+        const html = fixture.nativeElement.innerHTML;
         expect(html).toContain('ng-reflect-dir-prop="hello"');
       });
 
@@ -1737,7 +1737,7 @@ function declareTests(config?: {useJit: boolean}) {
         const fixture = TestBed.createComponent(MyComp);
         fixture.detectChanges();
 
-        const html = getDOM().getInnerHTML(fixture.nativeElement);
+        const html = fixture.nativeElement.innerHTML;
         expect(html).toContain('ng-reflect-dir-prop="hello"');
         expect(html).not.toContain('ng-reflect-title');
       });
@@ -1747,7 +1747,7 @@ function declareTests(config?: {useJit: boolean}) {
         const fixture = TestBed.createComponent(ParentCmp);
         fixture.detectChanges();
 
-        const html = getDOM().getInnerHTML(fixture.nativeElement);
+        const html = fixture.nativeElement.innerHTML;
         expect(html).toContain('ng-reflect-test_="hello"');
       });
 
@@ -1761,7 +1761,7 @@ function declareTests(config?: {useJit: boolean}) {
         fixture.componentInstance.ctxBoolProp = true;
         fixture.detectChanges();
 
-        const html = getDOM().getInnerHTML(fixture.nativeElement);
+        const html = fixture.nativeElement.innerHTML;
         expect(html).toContain('"ng-reflect-ng-if": "true"');
       });
 
@@ -1776,7 +1776,7 @@ function declareTests(config?: {useJit: boolean}) {
         fixture.componentInstance.ctxBoolProp = true;
         fixture.detectChanges();
 
-        const html = getDOM().getInnerHTML(fixture.nativeElement);
+        const html = fixture.nativeElement.innerHTML;
         expect(html).toContain('"ng-reflect-ng-if": "true"');
       });
 
@@ -1790,7 +1790,7 @@ function declareTests(config?: {useJit: boolean}) {
            fixture.componentInstance.ctxProp = 'hello';
            fixture.detectChanges();
 
-           const html = getDOM().getInnerHTML(fixture.nativeElement);
+           const html = fixture.nativeElement.innerHTML;
            expect(html).toContain('ng-reflect-dir-prop="hello"');
            expect(html).toContain('ng-reflect-dir-prop2="hello"');
          });
@@ -1802,7 +1802,7 @@ function declareTests(config?: {useJit: boolean}) {
         const fixture = TestBed.createComponent(MyComp);
 
         fixture.detectChanges();
-        expect(getDOM().getInnerHTML(fixture.nativeElement)).toContain('[ERROR]');
+        expect(fixture.nativeElement.innerHTML).toContain('[ERROR]');
       });
 
       it('should not reflect undefined values', () => {
@@ -1814,13 +1814,12 @@ function declareTests(config?: {useJit: boolean}) {
         fixture.componentInstance.ctxProp = 'hello';
         fixture.detectChanges();
 
-        expect(getDOM().getInnerHTML(fixture.nativeElement))
+        expect(fixture.nativeElement.innerHTML).toContain('ng-reflect-dir-prop="hello"');
-            .toContain('ng-reflect-dir-prop="hello"');
 
         fixture.componentInstance.ctxProp = undefined !;
         fixture.detectChanges();
 
-        expect(getDOM().getInnerHTML(fixture.nativeElement)).not.toContain('ng-reflect-');
+        expect(fixture.nativeElement.innerHTML).not.toContain('ng-reflect-');
       });
 
       it('should not reflect null values', () => {
@@ -1832,13 +1831,12 @@ function declareTests(config?: {useJit: boolean}) {
         fixture.componentInstance.ctxProp = 'hello';
         fixture.detectChanges();
 
-        expect(getDOM().getInnerHTML(fixture.nativeElement))
+        expect(fixture.nativeElement.innerHTML).toContain('ng-reflect-dir-prop="hello"');
-            .toContain('ng-reflect-dir-prop="hello"');
 
         fixture.componentInstance.ctxProp = null !;
         fixture.detectChanges();
 
-        expect(getDOM().getInnerHTML(fixture.nativeElement)).not.toContain('ng-reflect-');
+        expect(fixture.nativeElement.innerHTML).not.toContain('ng-reflect-');
       });
 
       it('should reflect empty strings', () => {
@@ -1850,7 +1848,7 @@ function declareTests(config?: {useJit: boolean}) {
         fixture.componentInstance.ctxProp = '';
         fixture.detectChanges();
 
-        expect(getDOM().getInnerHTML(fixture.nativeElement)).toContain('ng-reflect-dir-prop=""');
+        expect(fixture.nativeElement.innerHTML).toContain('ng-reflect-dir-prop=""');
       });
 
       it('should not reflect in comment nodes when the value changes to undefined', () => {
@@ -1863,14 +1861,14 @@ function declareTests(config?: {useJit: boolean}) {
         fixture.componentInstance.ctxBoolProp = true;
         fixture.detectChanges();
 
-        let html = getDOM().getInnerHTML(fixture.nativeElement);
+        let html = fixture.nativeElement.innerHTML;
         expect(html).toContain('bindings={');
         expect(html).toContain('"ng-reflect-ng-if": "true"');
 
         fixture.componentInstance.ctxBoolProp = undefined !;
         fixture.detectChanges();
 
-        html = getDOM().getInnerHTML(fixture.nativeElement);
+        html = fixture.nativeElement.innerHTML;
         expect(html).toContain('bindings={');
         expect(html).not.toContain('ng-reflect');
       });
@@ -1885,14 +1883,14 @@ function declareTests(config?: {useJit: boolean}) {
         fixture.componentInstance.ctxBoolProp = true;
         fixture.detectChanges();
 
-        let html = getDOM().getInnerHTML(fixture.nativeElement);
+        let html = fixture.nativeElement.innerHTML;
         expect(html).toContain('bindings={');
         expect(html).toContain('"ng-reflect-ng-if": "true"');
 
         fixture.componentInstance.ctxBoolProp = null !;
         fixture.detectChanges();
 
-        html = getDOM().getInnerHTML(fixture.nativeElement);
+        html = fixture.nativeElement.innerHTML;
         expect(html).toContain('bindings={');
         expect(html).toContain('"ng-reflect-ng-if": null');
       });
@@ -1928,8 +1926,7 @@ function declareTests(config?: {useJit: boolean}) {
         dir.myAttr = 'aaa';
 
         fixture.detectChanges();
-        expect(getDOM().getOuterHTML(fixture.debugElement.children[0].nativeElement))
+        expect(fixture.debugElement.children[0].nativeElement.outerHTML).toContain('my-attr="aaa"');
-            .toContain('my-attr="aaa"');
       });
 
       if (getDOM().supportsDOMEvents()) {

packages/core/test/linker/projection_integration_spec.ts

@@ -574,7 +574,7 @@ describe('projection', () => {
     const main = TestBed.createComponent(MainComp);
 
     main.detectChanges();
-    expect(getDOM().getInnerHTML(main.nativeElement))
+    expect(main.nativeElement.innerHTML)
         .toEqual(
             '<cmp-a><cmp-b><cmp-d><i>cmp-d</i></cmp-d></cmp-b>' +
             '<cmp-c><b>cmp-c</b></cmp-c></cmp-a>');
@@ -586,7 +586,7 @@ describe('projection', () => {
     const main = TestBed.createComponent(MainComp);
 
     main.detectChanges();
-    expect(getDOM().getInnerHTML(main.nativeElement))
+    expect(main.nativeElement.innerHTML)
         .toEqual(
             '<cmp-a1>a1<cmp-b11>b11</cmp-b11><cmp-b12>b12</cmp-b12></cmp-a1>' +
             '<cmp-a2>a2<cmp-b21>b21</cmp-b21><cmp-b22>b22</cmp-b22></cmp-a2>');

packages/core/test/linker/security_integration_spec.ts

@@ -283,19 +283,19 @@ function declareTests(config?: {useJit: boolean}) {
         // Make sure binding harmless values works.
         ci.ctxProp = 'some <p>text</p>';
         fixture.detectChanges();
-        expect(getDOM().getInnerHTML(e)).toEqual('some <p>text</p>');
+        expect(e.innerHTML).toEqual('some <p>text</p>');
 
         ci.ctxProp = 'ha <script>evil()</script>';
         fixture.detectChanges();
-        expect(getDOM().getInnerHTML(e)).toEqual('ha ');
+        expect(e.innerHTML).toEqual('ha ');
 
         ci.ctxProp = 'also <img src="x" onerror="evil()"> evil';
         fixture.detectChanges();
-        expect(getDOM().getInnerHTML(e)).toEqual('also <img src="x"> evil');
+        expect(e.innerHTML).toEqual('also <img src="x"> evil');
 
         ci.ctxProp = 'also <iframe srcdoc="evil"></iframe> evil';
         fixture.detectChanges();
-        expect(getDOM().getInnerHTML(e)).toEqual('also  evil');
+        expect(e.innerHTML).toEqual('also  evil');
       });
     });
   });

packages/core/test/spies.ts

@@ -9,7 +9,6 @@
 import {ElementRef} from '@angular/core';
 import {ChangeDetectorRef} from '@angular/core/src/change_detection/change_detection';
 import {SpyObject} from '@angular/core/testing/src/testing_internal';
-import {DomAdapter} from '@angular/platform-browser/src/dom/dom_adapter';
 
 export class SpyChangeDetectorRef extends SpyObject {
   constructor() {
@@ -24,7 +23,3 @@ export class SpyIterableDifferFactory extends SpyObject {}
 export class SpyElementRef extends SpyObject {
   constructor() { super(ElementRef); }
 }
-
-export class SpyDomAdapter extends SpyObject {
-  constructor() { super(DomAdapter); }
-}

packages/platform-browser/src/browser/browser_adapter.ts

@@ -147,11 +147,9 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {
   isPrevented(evt: Event): boolean {
     return evt.defaultPrevented || evt.returnValue != null && !evt.returnValue;
   }
-  getInnerHTML(el: HTMLElement): string { return el.innerHTML; }
   getTemplateContent(el: Node): Node|null {
     return 'content' in el && this.isTemplateElement(el) ? (<any>el).content : null;
   }
-  getOuterHTML(el: HTMLElement): string { return el.outerHTML; }
   nodeName(node: Node): string { return node.nodeName; }
   nodeValue(node: Node): string|null { return node.nodeValue; }
   type(node: HTMLInputElement): string { return node.type; }

packages/platform-browser/src/dom/dom_adapter.ts

@@ -64,10 +64,8 @@ export abstract class DomAdapter {
   abstract createEvent(eventType: string): any;
   abstract preventDefault(evt: any): any;
   abstract isPrevented(evt: any): boolean;
-  abstract getInnerHTML(el: any): string;
   /** Returns content if el is a <template> element, null otherwise. */
   abstract getTemplateContent(el: any): any;
-  abstract getOuterHTML(el: any): string;
   abstract nodeName(node: any): string;
   abstract nodeValue(node: any): string|null;
   abstract type(node: any): string;

packages/platform-browser/test/dom/shared_styles_host_spec.ts

@@ -26,20 +26,20 @@ import {expect} from '@angular/platform-browser/testing/src/matchers';
     it('should add existing styles to new hosts', () => {
       ssh.addStyles(['a {};']);
       ssh.addHost(someHost);
-      expect(getDOM().getInnerHTML(someHost)).toEqual('<style>a {};</style>');
+      expect(someHost.innerHTML).toEqual('<style>a {};</style>');
     });
 
     it('should add new styles to hosts', () => {
       ssh.addHost(someHost);
       ssh.addStyles(['a {};']);
-      expect(getDOM().getInnerHTML(someHost)).toEqual('<style>a {};</style>');
+      expect(someHost.innerHTML).toEqual('<style>a {};</style>');
     });
 
     it('should add styles only once to hosts', () => {
       ssh.addStyles(['a {};']);
       ssh.addHost(someHost);
       ssh.addStyles(['a {};']);
-      expect(getDOM().getInnerHTML(someHost)).toEqual('<style>a {};</style>');
+      expect(someHost.innerHTML).toEqual('<style>a {};</style>');
     });
 
     it('should use the document head as default host', () => {
@@ -50,10 +50,10 @@ import {expect} from '@angular/platform-browser/testing/src/matchers';
     it('should remove style nodes on destroy', () => {
       ssh.addStyles(['a {};']);
       ssh.addHost(someHost);
-      expect(getDOM().getInnerHTML(someHost)).toEqual('<style>a {};</style>');
+      expect(someHost.innerHTML).toEqual('<style>a {};</style>');
 
       ssh.ngOnDestroy();
-      expect(getDOM().getInnerHTML(someHost)).toEqual('');
+      expect(someHost.innerHTML).toEqual('');
     });
   });
 }

packages/platform-webworker/src/web_workers/worker/worker_adapter.ts

@@ -65,9 +65,7 @@ export class WorkerDomAdapter extends DomAdapter {
   createEvent(eventType: string): any { throw 'not implemented'; }
   preventDefault(evt: any) { throw 'not implemented'; }
   isPrevented(evt: any): boolean { throw 'not implemented'; }
-  getInnerHTML(el: any): string { throw 'not implemented'; }
   getTemplateContent(el: any): any { throw 'not implemented'; }
-  getOuterHTML(el: any): string { throw 'not implemented'; }
   nodeName(node: any): string { throw 'not implemented'; }
   nodeValue(node: any): string { throw 'not implemented'; }
   type(node: any): string { throw 'not implemented'; }

packages/platform-webworker/test/web_workers/worker/renderer_v2_integration_spec.ts

@@ -137,7 +137,7 @@ let lastCreatedRenderer: Renderer2;
       fixture.componentInstance.ctxBoolProp = true;
       fixture.detectChanges();
       const el = getRenderElement(fixture.nativeElement);
-      expect(getDOM().getInnerHTML(el)).toContain('"ng-reflect-ng-if": "true"');
+      expect(el.innerHTML).toContain('"ng-reflect-ng-if": "true"');
     });
 
     it('should add and remove fragments', () => {