refactor(render): cleanup access to native dom elements
BREAKING CHANGES: - rename `ElementRef.domElement` to `ElementRef.nativeElement` - add `Renderer.getNativeElementSync` to make the app side less dependent on the dom renderer. - don’t use `ElementRef.nativeElement` in directives but use the methods on `Renderer` directly. - Removed `ElementRef.setAttribute`. Use `Renderer.setElementAttribute` instead. Closes #2712 Last part of #2476 Closes #2476
This commit is contained in:
@ -41,7 +41,7 @@ export function main() {
|
||||
|
||||
loader.loadIntoLocation(DynamicallyLoaded, tc.elementRef, 'loc')
|
||||
.then(ref => {
|
||||
expect(tc.domElement).toHaveText("Location;DynamicallyLoaded;");
|
||||
expect(tc.nativeElement).toHaveText("Location;DynamicallyLoaded;");
|
||||
async.done();
|
||||
});
|
||||
});
|
||||
@ -60,7 +60,7 @@ export function main() {
|
||||
loader.loadIntoLocation(DynamicallyLoaded, tc.elementRef, 'loc')
|
||||
.then(ref => {
|
||||
ref.dispose();
|
||||
expect(tc.domElement).toHaveText("Location;");
|
||||
expect(tc.nativeElement).toHaveText("Location;");
|
||||
async.done();
|
||||
});
|
||||
});
|
||||
@ -81,7 +81,7 @@ export function main() {
|
||||
|
||||
tc.detectChanges();
|
||||
|
||||
var newlyInsertedElement = DOM.childNodes(tc.domElement)[1];
|
||||
var newlyInsertedElement = DOM.childNodes(tc.nativeElement)[1];
|
||||
expect(newlyInsertedElement.id)
|
||||
.toEqual("new value")
|
||||
|
||||
|
@ -256,8 +256,8 @@ export function main() {
|
||||
|
||||
view.detectChanges();
|
||||
|
||||
expect(q.query.first.domElement).toHaveText("1d");
|
||||
expect(q.query.last.domElement).toHaveText("2d");
|
||||
expect(q.query.first.nativeElement).toHaveText("1d");
|
||||
expect(q.query.last.nativeElement).toHaveText("2d");
|
||||
|
||||
async.done();
|
||||
});
|
||||
|
@ -16,14 +16,12 @@ import {
|
||||
proxy
|
||||
} from 'angular2/test_lib';
|
||||
|
||||
import {MapWrapper} from 'angular2/src/facade/collection';
|
||||
import {IMPLEMENTS} from 'angular2/src/facade/lang';
|
||||
|
||||
import {AppView, AppProtoView, AppViewContainer} from 'angular2/src/core/compiler/view';
|
||||
import {ProtoViewRef, ViewRef, internalView} from 'angular2/src/core/compiler/view_ref';
|
||||
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
|
||||
import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
|
||||
import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
|
||||
import {ElementBinder} from 'angular2/src/core/compiler/element_binder';
|
||||
|
||||
export function main() {
|
||||
// TODO(tbosch): add missing tests
|
||||
@ -33,9 +31,11 @@ export function main() {
|
||||
var view;
|
||||
var viewManager;
|
||||
|
||||
function wrapView(view: AppView): ViewRef { return new ViewRef(view); }
|
||||
|
||||
function createProtoView() { return new AppProtoView(null, null, null, null); }
|
||||
function createProtoView() {
|
||||
var pv = new AppProtoView(null, null, null, null);
|
||||
pv.elementBinders = [new ElementBinder(0, null, 0, null, null)];
|
||||
return pv;
|
||||
}
|
||||
|
||||
function createView() { return new AppView(null, createProtoView(), new Map()); }
|
||||
|
||||
@ -45,7 +45,7 @@ export function main() {
|
||||
viewManager = new AppViewManagerSpy();
|
||||
view = createView();
|
||||
view.viewContainers = [null];
|
||||
location = new ElementRef(wrapView(view), 0);
|
||||
location = view.elementRefs[0];
|
||||
});
|
||||
|
||||
describe('length', () => {
|
||||
|
@ -21,7 +21,6 @@ import {MapWrapper, ListWrapper, StringMapWrapper} from 'angular2/src/facade/col
|
||||
|
||||
import {AppProtoView, AppView, AppViewContainer} from 'angular2/src/core/compiler/view';
|
||||
import {ProtoViewRef, ViewRef, internalView} from 'angular2/src/core/compiler/view_ref';
|
||||
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
|
||||
import {Renderer, RenderViewRef, RenderProtoViewRef} from 'angular2/src/render/api';
|
||||
import {ElementBinder} from 'angular2/src/core/compiler/element_binder';
|
||||
import {DirectiveBinding, ElementInjector} from 'angular2/src/core/compiler/element_injector';
|
||||
@ -50,7 +49,7 @@ export function main() {
|
||||
function wrapView(view: AppView): ViewRef { return new ViewRef(view); }
|
||||
|
||||
function elementRef(parentView, boundElementIndex) {
|
||||
return new ElementRef(parentView, boundElementIndex);
|
||||
return parentView.elementRefs[boundElementIndex];
|
||||
}
|
||||
|
||||
function createDirectiveBinding(type) {
|
||||
@ -277,13 +276,12 @@ export function main() {
|
||||
});
|
||||
|
||||
it('should create a ViewContainerRef if not yet existing', () => {
|
||||
manager.createViewInContainer(elementRef(wrapView(parentView), 0), 0,
|
||||
wrapPv(childProtoView), null);
|
||||
manager.createViewInContainer(elementRef(parentView, 0), 0, wrapPv(childProtoView), null);
|
||||
expect(parentView.viewContainers[0]).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should create the view', () => {
|
||||
expect(internalView(manager.createViewInContainer(elementRef(wrapView(parentView), 0), 0,
|
||||
expect(internalView(manager.createViewInContainer(elementRef(parentView, 0), 0,
|
||||
wrapPv(childProtoView), null)))
|
||||
.toBe(createdViews[0]);
|
||||
expect(createdViews[0].proto).toBe(childProtoView);
|
||||
@ -291,10 +289,11 @@ export function main() {
|
||||
});
|
||||
|
||||
it('should attach the view', () => {
|
||||
var contextView = createView();
|
||||
var elRef = elementRef(wrapView(parentView), 0);
|
||||
var contextView =
|
||||
createView(createProtoView([createEmptyElBinder(), createEmptyElBinder()]));
|
||||
var elRef = elementRef(parentView, 0);
|
||||
manager.createViewInContainer(elRef, 0, wrapPv(childProtoView),
|
||||
elementRef(wrapView(contextView), 1), null);
|
||||
elementRef(contextView, 1), null);
|
||||
expect(utils.spy('attachViewInContainer'))
|
||||
.toHaveBeenCalledWith(parentView, 0, contextView, 1, 0, createdViews[0]);
|
||||
expect(renderer.spy('attachViewInContainer'))
|
||||
@ -303,25 +302,25 @@ export function main() {
|
||||
|
||||
it('should hydrate the view', () => {
|
||||
var injector = new Injector([], null, false);
|
||||
var contextView = createView();
|
||||
manager.createViewInContainer(elementRef(wrapView(parentView), 0), 0,
|
||||
wrapPv(childProtoView),
|
||||
elementRef(wrapView(contextView), 1), injector);
|
||||
var contextView =
|
||||
createView(createProtoView([createEmptyElBinder(), createEmptyElBinder()]));
|
||||
manager.createViewInContainer(elementRef(parentView, 0), 0, wrapPv(childProtoView),
|
||||
elementRef(contextView, 1), injector);
|
||||
expect(utils.spy('hydrateViewInContainer'))
|
||||
.toHaveBeenCalledWith(parentView, 0, contextView, 1, 0, injector);
|
||||
expect(renderer.spy('hydrateView')).toHaveBeenCalledWith(createdViews[0].render);
|
||||
});
|
||||
|
||||
it('should create and set the render view', () => {
|
||||
manager.createViewInContainer(elementRef(wrapView(parentView), 0), 0,
|
||||
wrapPv(childProtoView), null, null);
|
||||
manager.createViewInContainer(elementRef(parentView, 0), 0, wrapPv(childProtoView), null,
|
||||
null);
|
||||
expect(renderer.spy('createView')).toHaveBeenCalledWith(childProtoView.render);
|
||||
expect(createdViews[0].render).toBe(createdRenderViews[0]);
|
||||
});
|
||||
|
||||
it('should set the event dispatcher', () => {
|
||||
manager.createViewInContainer(elementRef(wrapView(parentView), 0), 0,
|
||||
wrapPv(childProtoView), null, null);
|
||||
manager.createViewInContainer(elementRef(parentView, 0), 0, wrapPv(childProtoView), null,
|
||||
null);
|
||||
var childView = createdViews[0];
|
||||
expect(renderer.spy('setEventDispatcher'))
|
||||
.toHaveBeenCalledWith(childView.render, childView);
|
||||
@ -337,19 +336,19 @@ export function main() {
|
||||
beforeEach(() => {
|
||||
parentView = createView(createProtoView([createEmptyElBinder()]));
|
||||
childProtoView = createProtoView();
|
||||
childView = internalView(manager.createViewInContainer(
|
||||
elementRef(wrapView(parentView), 0), 0, wrapPv(childProtoView), null));
|
||||
childView = internalView(manager.createViewInContainer(elementRef(parentView, 0), 0,
|
||||
wrapPv(childProtoView), null));
|
||||
});
|
||||
|
||||
it('should dehydrate', () => {
|
||||
manager.destroyViewInContainer(elementRef(wrapView(parentView), 0), 0);
|
||||
manager.destroyViewInContainer(elementRef(parentView, 0), 0);
|
||||
expect(utils.spy('dehydrateView'))
|
||||
.toHaveBeenCalledWith(parentView.viewContainers[0].views[0]);
|
||||
expect(renderer.spy('dehydrateView')).toHaveBeenCalledWith(childView.render);
|
||||
});
|
||||
|
||||
it('should detach', () => {
|
||||
var elRef = elementRef(wrapView(parentView), 0);
|
||||
var elRef = elementRef(parentView, 0);
|
||||
manager.destroyViewInContainer(elRef, 0);
|
||||
expect(utils.spy('detachViewInContainer')).toHaveBeenCalledWith(parentView, 0, 0);
|
||||
expect(renderer.spy('detachViewInContainer'))
|
||||
@ -357,7 +356,7 @@ export function main() {
|
||||
});
|
||||
|
||||
it('should return the view to the pool', () => {
|
||||
manager.destroyViewInContainer(elementRef(wrapView(parentView), 0), 0);
|
||||
manager.destroyViewInContainer(elementRef(parentView, 0), 0);
|
||||
expect(viewPool.spy('returnView')).toHaveBeenCalledWith(childView);
|
||||
});
|
||||
});
|
||||
@ -367,8 +366,8 @@ export function main() {
|
||||
beforeEach(() => {
|
||||
parentView = createView(createProtoView([createEmptyElBinder()]));
|
||||
childProtoView = createProtoView();
|
||||
childView = internalView(manager.createViewInContainer(
|
||||
elementRef(wrapView(parentView), 0), 0, wrapPv(childProtoView), null));
|
||||
childView = internalView(manager.createViewInContainer(elementRef(parentView, 0), 0,
|
||||
wrapPv(childProtoView), null));
|
||||
});
|
||||
|
||||
it('should dehydrate', () => {
|
||||
|
Reference in New Issue
Block a user