Skip to content

Commit 4b30fca

Browse files
hdeshevhdeshev
committed
fix(tests): Use Renderer2. Update template anchor tests.
No longer using "template" elements, but #comment nodes.
1 parent ecd6e61 commit 4b30fca

File tree

6 files changed

+42
-63
lines changed

6 files changed

+42
-63
lines changed

Diff for: ‎nativescript-angular/directives/action-bar.ts

+2-5
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ActionItem, ActionBar, NavigationButton } from "tns-core-modules/ui/act
33
import { isBlank } from "../lang-facade";
44
import { Page } from "tns-core-modules/ui/page";
55
import { View } from "tns-core-modules/ui/core/view";
6-
import { registerElement, ViewClassMeta, NgView, TEMPLATE } from "../element-registry";
6+
import { registerElement, ViewClassMeta, NgView } from "../element-registry";
77

88
let actionBarMeta: ViewClassMeta = {
99
skipAddToDom: true,
@@ -17,8 +17,6 @@ let actionBarMeta: ViewClassMeta = {
1717
} else if (child instanceof ActionItem) {
1818
bar.actionItems.addItem(childView);
1919
childView.parent = bar;
20-
} else if (child.nodeName === TEMPLATE) {
21-
child.templateParent = parent;
2220
} else if (child.nodeName !== "#text" && child instanceof View) {
2321
bar.titleView = childView;
2422
}
@@ -34,8 +32,7 @@ let actionBarMeta: ViewClassMeta = {
3432
} else if (child instanceof ActionItem) {
3533
bar.actionItems.removeItem(childView);
3634
childView.parent = null;
37-
} else if (child.nodeName !== TEMPLATE && child instanceof View &&
38-
bar.titleView && bar.titleView === childView) {
35+
} else if (child instanceof View && bar.titleView && bar.titleView === childView) {
3936
bar.titleView = null;
4037
}
4138
},

Diff for: ‎nativescript-angular/element-registry.ts

-8
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,10 @@ import { View } from "tns-core-modules/ui/core/view";
22

33
export type ViewResolver = () => ViewClass;
44
export type NgView = View & ViewExtensions;
5-
export const TEMPLATE = "ng-template";
6-
75
export interface ViewClassMeta {
86
skipAddToDom?: boolean;
97
insertChild?: (parent: NgView, child: NgView, atIndex: number) => void;
108
removeChild?: (parent: NgView, child: NgView) => void;
11-
isTemplateAnchor?: boolean;
129
}
1310

1411
export interface ViewExtensions {
@@ -71,11 +68,6 @@ export function isKnownView(elementName: string): boolean {
7168
elementMap.has(elementName.toLowerCase());
7269
}
7370

74-
// Empty view used for template anchors
75-
export class TemplateView extends View {
76-
}
77-
registerElement(TEMPLATE, () => TemplateView, { isTemplateAnchor: true });
78-
7971
// Register default NativeScript components
8072
// Note: ActionBar related components are registerd together with action-bar directives.
8173
registerElement("AbsoluteLayout", () => require("tns-core-modules/ui/layouts/absolute-layout").AbsoluteLayout);

Diff for: ‎nativescript-angular/index.ts

-2
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,11 @@ export * from "./view-util";
1717
export * from "./resource-loader";
1818
export {
1919
ViewResolver,
20-
TEMPLATE,
2120
ViewClass,
2221
ViewClassMeta,
2322
registerElement,
2423
getViewClass,
2524
getViewMeta,
2625
isKnownView,
27-
TemplateView
2826
} from "./element-registry";
2927
export * from "./value-accessors/base-value-accessor";

Diff for: ‎nativescript-angular/view-util.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export class ViewUtil {
6969
}
7070
} else if (isContentView(parent)) {
7171
// Explicit handling of template anchors inside ContentView
72-
if (child.meta.isTemplateAnchor) {
72+
if (child.nodeName === "#comment") {
7373
parent._addView(child, atIndex);
7474
} else {
7575
parent.content = child;
@@ -96,7 +96,7 @@ export class ViewUtil {
9696
}
9797

9898
// Explicit handling of template anchors inside ContentView
99-
if (child.meta.isTemplateAnchor) {
99+
if (child.nodeName === "#comment") {
100100
parent._removeView(child);
101101
}
102102
} else if (isView(parent)) {

Diff for: ‎tests/app/tests/renderer-tests.ts

+36-44
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// make sure you import mocha-config before @angular/core
22
import { assert } from "./test-config";
3-
import { Component, ElementRef, Renderer, NgZone } from "@angular/core";
3+
import { Component, ElementRef, Renderer2, NgZone } from "@angular/core";
44
import { ProxyViewContainer } from "ui/proxy-view-container";
55
import { Red } from "color/known-colors";
66
import { dumpView } from "./test-utils";
@@ -214,7 +214,7 @@ describe("Renderer E2E", () => {
214214
it("ngIf hides component when false", () => {
215215
return testApp.loadComponent(NgIfLabel).then((componentRef) => {
216216
const componentRoot = componentRef.instance.elementRef.nativeElement;
217-
assert.equal("(ProxyViewContainer (template))", dumpView(componentRoot));
217+
assert.equal("(ProxyViewContainer (#comment))", dumpView(componentRoot));
218218
});
219219
});
220220

@@ -225,15 +225,15 @@ describe("Renderer E2E", () => {
225225

226226
component.show = true;
227227
testApp.appRef.tick();
228-
assert.equal("(ProxyViewContainer (template), (Label))", dumpView(componentRoot));
228+
assert.equal("(ProxyViewContainer (#comment), (Label))", dumpView(componentRoot));
229229
});
230230
});
231231

232232
it("ngFor creates element for each item", () => {
233233
return testApp.loadComponent(NgForLabel).then((componentRef) => {
234234
const componentRoot = componentRef.instance.elementRef.nativeElement;
235235
assert.equal(
236-
"(ProxyViewContainer (template), (Label[text=one]), (Label[text=two]), (Label[text=three]))",
236+
"(ProxyViewContainer (#comment), (Label[text=one]), (Label[text=two]), (Label[text=three]))",
237237
dumpView(componentRoot, true));
238238
});
239239
});
@@ -247,7 +247,7 @@ describe("Renderer E2E", () => {
247247
testApp.appRef.tick();
248248

249249
assert.equal(
250-
"(ProxyViewContainer (template), (Label[text=one]), (Label[text=three]))",
250+
"(ProxyViewContainer (#comment), (Label[text=one]), (Label[text=three]))",
251251
dumpView(componentRoot, true));
252252
});
253253
});
@@ -261,7 +261,7 @@ describe("Renderer E2E", () => {
261261
testApp.appRef.tick();
262262

263263
assert.equal(
264-
"(ProxyViewContainer (template), " +
264+
"(ProxyViewContainer (#comment), " +
265265
"(Label[text=one]), (Label[text=new]), (Label[text=two]), (Label[text=three]))",
266266
dumpView(componentRoot, true));
267267
});
@@ -271,7 +271,7 @@ describe("Renderer E2E", () => {
271271

272272
describe("Renderer createElement", () => {
273273
let testApp: TestApp = null;
274-
let renderer: Renderer = null;
274+
let renderer: Renderer2 = null;
275275

276276
before(() => {
277277
return TestApp.create().then((app) => {
@@ -285,30 +285,30 @@ describe("Renderer createElement", () => {
285285
});
286286

287287
it("creates element from CamelCase", () => {
288-
const result = renderer.createElement(null, "StackLayout", null);
288+
const result = renderer.createElement("StackLayout");
289289
assert.instanceOf(result, StackLayout, "Renderer should create StackLayout form 'StackLayout'");
290290
});
291291

292292
it("creates element from lowercase", () => {
293-
const result = renderer.createElement(null, "stacklayout", null);
293+
const result = renderer.createElement("stacklayout");
294294
assert.instanceOf(result, StackLayout, "Renderer should create StackLayout form 'stacklayout'");
295295
});
296296

297297
it("creates element from kebab-case", () => {
298-
const result = renderer.createElement(null, "stack-layout", null);
298+
const result = renderer.createElement("stack-layout");
299299
assert.instanceOf(result, StackLayout, "Renderer should create StackLayout form 'stack-layout'");
300300
});
301301

302302
it("creates ProxyViewContainer for unknownTag", () => {
303-
const result = renderer.createElement(null, "unknown-tag", null);
303+
const result = renderer.createElement("unknown-tag");
304304
assert.instanceOf(result, ProxyViewContainer, "Renderer should create ProxyViewContainer form 'unknown-tag'");
305305
});
306306
});
307307

308308

309309
describe("Renderer attach/detach", () => {
310310
let testApp: TestApp = null;
311-
let renderer: Renderer = null;
311+
let renderer: Renderer2 = null;
312312

313313
before(() => {
314314
return TestApp.create().then((app) => {
@@ -322,65 +322,57 @@ describe("Renderer attach/detach", () => {
322322
});
323323

324324
it("createElement element with parent attaches element to content view", () => {
325-
const parent = <ContentView>renderer.createElement(null, "ContentView", null);
326-
const button = <Button>renderer.createElement(parent, "Button", null);
325+
const parent = <ContentView>renderer.createElement("ContentView");
326+
const button = <Button>renderer.createElement("Button");
327+
renderer.appendChild(parent, button);
327328

328329
assert.equal(parent.content, button);
329330
assert.equal(button.parent, parent);
330331
});
331332

332333
it("createElement element with parent attaches element to layout view", () => {
333-
const parent = <StackLayout>renderer.createElement(null, "StackLayout", null);
334-
const button = <Button>renderer.createElement(parent, "Button", null);
334+
const parent = <StackLayout>renderer.createElement("StackLayout");
335+
const button = <Button>renderer.createElement("Button");
336+
renderer.appendChild(parent, button);
335337

336338
assert.equal(parent.getChildAt(0), button);
337339
assert.equal(button.parent, parent);
338340
});
339341

340342
it("detachView element removes element from content view", () => {
341-
const parent = <ContentView>renderer.createElement(null, "ContentView", null);
342-
const button = <Button>renderer.createElement(parent, "Button", null);
343+
const parent = <ContentView>renderer.createElement("ContentView");
344+
const button = <Button>renderer.createElement("Button");
345+
renderer.appendChild(parent, button);
343346

344-
renderer.detachView([button]);
347+
renderer.removeChild(parent, button);
345348

346349
assert.isNull(parent.content);
347350
assert.isUndefined(button.parent);
348351
});
349352

350353
it("detachView element removes element from layout view", () => {
351-
const parent = <StackLayout>renderer.createElement(null, "StackLayout", null);
352-
const button = <Button>renderer.createElement(parent, "Button", null);
354+
const parent = <StackLayout>renderer.createElement("StackLayout");
355+
const button = <Button>renderer.createElement("Button");
356+
renderer.appendChild(parent, button);
353357

354-
renderer.detachView([button]);
358+
renderer.removeChild(parent, button);
355359

356360
assert.equal(parent.getChildrenCount(), 0);
357361
assert.isUndefined(button.parent);
358362
});
359363

360-
it("attaching template anchor in content view does not replace its content", () => {
361-
const parent = <ContentView>renderer.createElement(null, "ContentView", null);
362-
const button = <Button>renderer.createElement(parent, "Button", null);
364+
it("attaching and detaching comment anchor to content view does not affect its content", () => {
365+
const parent = <ContentView>renderer.createElement("ContentView");
366+
const button = <Button>renderer.createElement("Button");
367+
renderer.appendChild(parent, button);
368+
const anchor = <NgView>renderer.createComment("anchor");
369+
assert.equal(parent.content, button, "parent has button as initial content");
363370

364-
assert.equal(parent.content, button);
365-
366-
const anchor = <NgView>renderer.createTemplateAnchor(parent);
367-
368-
assert.equal(parent.content, button);
369-
assert.equal(anchor.parent, parent);
370-
assert.equal(anchor.templateParent, parent);
371-
});
371+
renderer.appendChild(parent, anchor);
372+
assert.equal(parent.content, button, "parent still has button as content after inserting anchor");
372373

373-
it("attaching and detaching template anchor to content view does not affect its content", () => {
374-
const parent = <ContentView>renderer.createElement(null, "ContentView", null);
375-
const button = <Button>renderer.createElement(parent, "Button", null);
376-
const anchor = <NgView>renderer.createTemplateAnchor(null);
377-
assert.equal(parent.content, button);
378-
379-
renderer.attachViewAfter(button, [anchor]);
380-
assert.equal(parent.content, button);
381-
382-
renderer.detachView([anchor]);
383-
assert.equal(parent.content, button);
374+
renderer.removeChild(parent, anchor);
375+
assert.equal(parent.content, button, "parent has button as content even after removing anchor");
384376
});
385377
});
386378

Diff for: ‎tests/app/tests/test-app.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { NativeScriptModule } from "nativescript-angular/nativescript.module";
33
import { NativeScriptRouterModule } from "nativescript-angular/router";
44
import {
55
Type, Component, ComponentRef,
6-
ComponentFactoryResolver, ApplicationRef, Renderer,
6+
ComponentFactoryResolver, ApplicationRef, Renderer2,
77
ViewContainerRef, NgZone, NgModule,
88
} from "@angular/core";
99

@@ -23,7 +23,7 @@ export class TestApp {
2323
private resolver: ComponentFactoryResolver,
2424
private containerRef: ViewContainerRef,
2525
public appRef: ApplicationRef,
26-
public renderer: Renderer,
26+
public renderer: Renderer2,
2727
public zone: NgZone
2828
) {
2929

0 commit comments

Comments
 (0)