From a2f3f4550d6e87e64987ba27b961c8d39f25899b Mon Sep 17 00:00:00 2001 From: Marc Laval Date: Wed, 3 Jan 2018 11:42:48 +0100 Subject: [PATCH] test(core): properly stringify HTML elements in render3 tests (#21279) PR Close #21279 --- packages/core/test/render3/BUILD.bazel | 3 +++ packages/core/test/render3/component_spec.ts | 14 +++++++------- packages/core/test/render3/exports_spec.ts | 2 +- packages/core/test/render3/integration_spec.ts | 2 +- packages/core/test/render3/load_domino.ts | 9 ++++++--- packages/core/test/render3/properties_spec.ts | 4 ++-- packages/core/test/render3/render_util.ts | 7 ++++++- .../core/test/render3/renderer_factory_spec.ts | 6 +++--- 8 files changed, 29 insertions(+), 18 deletions(-) diff --git a/packages/core/test/render3/BUILD.bazel b/packages/core/test/render3/BUILD.bazel index b237d7c817..c7520c46b5 100644 --- a/packages/core/test/render3/BUILD.bazel +++ b/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", ], ) diff --git a/packages/core/test/render3/component_spec.ts b/packages/core/test/render3/component_spec.ts index 88c21aeea0..07039a2e96 100644 --- a/packages/core/test/render3/component_spec.ts +++ b/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'); }); }); diff --git a/packages/core/test/render3/exports_spec.ts b/packages/core/test/render3/exports_spec.ts index b7bff98f66..6f474a6918 100644 --- a/packages/core/test/render3/exports_spec.ts +++ b/packages/core/test/render3/exports_spec.ts @@ -176,7 +176,7 @@ describe('exports', () => { } expect(renderToHtml(Template, {})) - .toEqual('
'); + .toEqual('
'); }); it('should work with component refs', () => { diff --git a/packages/core/test/render3/integration_spec.ts b/packages/core/test/render3/integration_spec.ts index a28fa95415..3a50e0b939 100644 --- a/packages/core/test/render3/integration_spec.ts +++ b/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', () => { diff --git a/packages/core/test/render3/load_domino.ts b/packages/core/test/render3/load_domino.ts index e07ef10a9c..49e7b406df 100644 --- a/packages/core/test/render3/load_domino.ts +++ b/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'); - (global as any).document = window.document; + + DominoAdapter.makeCurrent(); + (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 diff --git a/packages/core/test/render3/properties_spec.ts b/packages/core/test/render3/properties_spec.ts index 2a62921ad0..d5be8b17eb 100644 --- a/packages/core/test/render3/properties_spec.ts +++ b/packages/core/test/render3/properties_spec.ts @@ -396,7 +396,7 @@ describe('elementProperty', () => { } } - expect(renderToHtml(Template, {})).toEqual(`
`); + expect(renderToHtml(Template, {})).toEqual(`
`); expect(myDir !.role).toEqual('button'); expect(myDir !.direction).toEqual('rtl'); }); @@ -444,7 +444,7 @@ describe('elementProperty', () => { } expect(renderToHtml(Template, {})) - .toEqual(`
`); + .toEqual(`
`); expect(myDir !.role).toEqual('button'); expect(myDir !.direction).toEqual('rtl'); expect(dirB !.roleB).toEqual('listbox'); diff --git a/packages/core/test/render3/render_util.ts b/packages/core/test/render3/render_util.ts index 0602cf0005..e7b7936b32 100644 --- a/packages/core/test/render3/render_util.ts +++ b/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(componentOrElement: T | RElement): string { if (node) { return toHtml(node.native); } else { - return containerEl.innerHTML.replace(' style=""', '').replace(//g, ''); + return stringifyElement(componentOrElement) + .replace(/^
/, '') + .replace(/<\/div>$/, '') + .replace(' style=""', '') + .replace(//g, ''); } } diff --git a/packages/core/test/render3/renderer_factory_spec.ts b/packages/core/test/render3/renderer_factory_spec.ts index 3640d91823..3f885f42b5 100644 --- a/packages/core/test/render3/renderer_factory_spec.ts +++ b/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(/
foo<\/div>/); component.exp = 'on';