test(core): properly stringify HTML elements in render3 tests (#21279)

PR Close #21279

packages/core/test/render3/BUILD.bazel

@@ -23,6 +23,7 @@ ts_library(
         "//packages/core",
         "//packages/platform-browser",
         "//packages/platform-browser/animations",
+        "//packages/platform-browser/testing",
     ],
 )
 
@@ -36,6 +37,8 @@ ts_library(
     tsconfig = "//packages:tsconfig",
     deps = [
         ":render3_lib",
+        "//packages/platform-browser",
+        "//packages/platform-server",
     ],
 )
 

packages/core/test/render3/component_spec.ts

@@ -11,7 +11,7 @@ import {D, E, T, b, defineComponent, e, markDirty, t} from '../../src/render3/in
 import {createRendererType2} from '../../src/view/index';
 
 import {getRendererFactory2} from './imported_renderer2';
-import {containerEl, renderComponent, requestAnimationFrame} from './render_util';
+import {containerEl, renderComponent, requestAnimationFrame, toHtml} from './render_util';
 
 describe('component', () => {
   class CounterComponent {
@@ -37,22 +37,22 @@ describe('component', () => {
   describe('renderComponent', () => {
     it('should render on initial call', () => {
       renderComponent(CounterComponent);
-      expect(containerEl.innerHTML).toEqual('0');
+      expect(toHtml(containerEl)).toEqual('0');
     });
 
     it('should re-render on input change or method invocation', () => {
       const component = renderComponent(CounterComponent);
-      expect(containerEl.innerHTML).toEqual('0');
+      expect(toHtml(containerEl)).toEqual('0');
       component.count = 123;
       markDirty(component, requestAnimationFrame);
-      expect(containerEl.innerHTML).toEqual('0');
+      expect(toHtml(containerEl)).toEqual('0');
       requestAnimationFrame.flush();
-      expect(containerEl.innerHTML).toEqual('123');
+      expect(toHtml(containerEl)).toEqual('123');
       component.increment();
       markDirty(component, requestAnimationFrame);
-      expect(containerEl.innerHTML).toEqual('123');
+      expect(toHtml(containerEl)).toEqual('123');
       requestAnimationFrame.flush();
-      expect(containerEl.innerHTML).toEqual('124');
+      expect(toHtml(containerEl)).toEqual('124');
     });
 
   });

packages/core/test/render3/exports_spec.ts

@@ -176,7 +176,7 @@ describe('exports', () => {
       }
 
       expect(renderToHtml(Template, {}))
-          .toEqual('<div class="red"></div><input type="checkbox" checked="true">');
+          .toEqual('<div class="red"></div><input checked="true" type="checkbox">');
     });
 
     it('should work with component refs', () => {

packages/core/test/render3/integration_spec.ts

@@ -11,7 +11,7 @@ import {NO_CHANGE} from '../../src/render3/instructions';
 
 import {containerEl, renderToHtml} from './render_util';
 
-describe('iv integration test', () => {
+describe('render3 integration test', () => {
 
   describe('render', () => {
 

packages/core/test/render3/load_domino.ts

@@ -9,11 +9,14 @@
 // Needed to run animation tests
 require('zone.js/dist/zone-node.js');
 
+import {DominoAdapter} from '@angular/platform-server/src/domino_adapter';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+
 if (typeof window == 'undefined') {
   const domino = require('domino');
-  const createWindow = domino.createWindow;
+
-  const window = createWindow('', 'http://localhost');
+  DominoAdapter.makeCurrent();
-  (global as any).document = window.document;
+  (global as any).document = getDOM().getDefaultDocument();
 
   // Trick to avoid Event patching from
   // https://github.com/angular/angular/blob/7cf5e95ac9f0f2648beebf0d5bd9056b79946970/packages/platform-browser/src/dom/events/dom_events.ts#L112-L132

packages/core/test/render3/properties_spec.ts

@@ -396,7 +396,7 @@ describe('elementProperty', () => {
         }
       }
 
-      expect(renderToHtml(Template, {})).toEqual(`<div role="button" dir="rtl"></div>`);
+      expect(renderToHtml(Template, {})).toEqual(`<div dir="rtl" role="button"></div>`);
       expect(myDir !.role).toEqual('button');
       expect(myDir !.direction).toEqual('rtl');
     });
@@ -444,7 +444,7 @@ describe('elementProperty', () => {
       }
 
       expect(renderToHtml(Template, {}))
-          .toEqual(`<div role="button" dir="rtl"></div><div role="listbox"></div>`);
+          .toEqual(`<div dir="rtl" role="button"></div><div role="listbox"></div>`);
       expect(myDir !.role).toEqual('button');
       expect(myDir !.direction).toEqual('rtl');
       expect(dirB !.roleB).toEqual('listbox');

packages/core/test/render3/render_util.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {stringifyElement} from '@angular/platform-browser/testing/src/browser_util';
 import {ComponentTemplate, ComponentType, DirectiveType, PublicFeature, defineComponent, defineDirective, renderComponent as _renderComponent} from '../../src/render3/index';
 import {NG_HOST_SYMBOL, createLNode, createViewState, renderTemplate} from '../../src/render3/instructions';
 import {LElement, LNodeFlags} from '../../src/render3/interfaces';
@@ -66,7 +67,11 @@ export function toHtml<T>(componentOrElement: T | RElement): string {
   if (node) {
     return toHtml(node.native);
   } else {
-    return containerEl.innerHTML.replace(' style=""', '').replace(/<!--[\w]*-->/g, '');
+    return stringifyElement(componentOrElement)
+        .replace(/^<div host="">/, '')
+        .replace(/<\/div>$/, '')
+        .replace(' style=""', '')
+        .replace(/<!--[\w]*-->/g, '');
   }
 }
 

packages/core/test/render3/renderer_factory_spec.ts

@@ -14,7 +14,7 @@ import {D, E, L, T, b, defineComponent, detectChanges, e, p} from '../../src/ren
 import {createRendererType2} from '../../src/view/index';
 
 import {getAnimationRendererFactory2, getRendererFactory2} from './imported_renderer2';
-import {containerEl, document, renderComponent, renderToHtml} from './render_util';
+import {containerEl, document, renderComponent, renderToHtml, toHtml} from './render_util';
 
 describe('renderer factory lifecycle', () => {
   let logs: string[] = [];
@@ -178,13 +178,13 @@ describe('animation renderer factory', () => {
 
   it('should work with components without animations', () => {
     renderComponent(SomeComponent, getAnimationRendererFactory2(document));
-    expect(containerEl.innerHTML).toEqual('foo');
+    expect(toHtml(containerEl)).toEqual('foo');
   });
 
   it('should work with animated components', (done) => {
     const factory = getAnimationRendererFactory2(document);
     const component = renderComponent(SomeComponentWithAnimation, factory);
-    expect(containerEl.innerHTML)
+    expect(toHtml(containerEl))
         .toMatch(/<div class="ng-tns-c\d+-0 ng-trigger ng-trigger-myAnimation">foo<\/div>/);
 
     component.exp = 'on';