cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ivy): adding event listeners for global objects (window, document, body) (#27772)

Browse Source 
This update introduces support for global object (window, document, body) listeners, that can be defined via host listeners on Components and Directives.

PR Close #27772
This commit is contained in:
Andrew Kushnir
2018-12-19 15:03:47 -08:00
committed by Kara Erickson
parent 917c09cfc8
commit 6e7c46af1b
15 changed files with 373 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/core/src/core_render3_private_export.ts
View File

@ -120,6 +120,9 @@ export {
i18nApply as ɵi18nApply,
i18nPostprocess as ɵi18nPostprocess,
setClassMetadata as ɵsetClassMetadata,
resolveWindow as ɵresolveWindow,
resolveDocument as ɵresolveDocument,
resolveBody as ɵresolveBody,
} from './render3/index';

1
packages/core/src/render3/index.ts
View File

@ -144,6 +144,7 @@ export {
export {templateRefExtractor} from './view_engine_compatibility_prebound';
export {resolveWindow, resolveDocument, resolveBody} from './util';
// clang-format on

24
packages/core/src/render3/instructions.ts
View File

@ -29,7 +29,7 @@ import {AttributeMarker, InitialInputData, InitialInputs, LocalRefExtractor, Pro
import {PlayerFactory} from './interfaces/player';
import {CssSelectorList, NG_PROJECT_AS_ATTR_NAME} from './interfaces/projection';
import {LQueries} from './interfaces/query';
import {ProceduralRenderer3, RComment, RElement, RText, Renderer3, RendererFactory3, isProceduralRenderer} from './interfaces/renderer';
import {GlobalTargetResolver, ProceduralRenderer3, RComment, RElement, RText, Renderer3, RendererFactory3, isProceduralRenderer} from './interfaces/renderer';
import {SanitizerFn} from './interfaces/sanitization';
import {BINDING_INDEX, CLEANUP, CONTAINER_INDEX, CONTENT_QUERIES, CONTEXT, DECLARATION_VIEW, FLAGS, HEADER_OFFSET, HOST, HOST_NODE, INJECTOR, LView, LViewFlags, NEXT, OpaqueViewState, PARENT, QUERIES, RENDERER, RENDERER_FACTORY, RootContext, RootContextFlags, SANITIZER, TAIL, TVIEW, TView} from './interfaces/view';
import {assertNodeOfPossibleTypes, assertNodeType} from './node_assert';
@ -822,10 +822,13 @@ export function locateHostElement(
*
* @param eventName Name of the event
* @param listenerFn The function to be called when event emits
* @param useCapture Whether or not to use capture in event listener.
* @param useCapture Whether or not to use capture in event listener
* @param eventTargetResolver Function that returns global target information in case this listener
* should be attached to a global object like window, document or body
*/
export function listener(
eventName: string, listenerFn: (e?: any) => any, useCapture = false): void {
eventName: string, listenerFn: (e?: any) => any, useCapture = false,
eventTargetResolver?: GlobalTargetResolver): void {
const lView = getLView();
const tNode = getPreviousOrParentTNode();
const tView = lView[TVIEW];
@ -837,6 +840,8 @@ export function listener(
// add native event listener - applicable to elements only
if (tNode.type === TNodeType.Element) {
const native = getNativeByTNode(tNode, lView) as RElement;
const resolved = eventTargetResolver ? eventTargetResolver(native) : {} as any;
const target = resolved.target || native;
ngDevMode && ngDevMode.rendererAddEventListener++;
const renderer = lView[RENDERER];
const lCleanup = getCleanup(lView);
@ -846,15 +851,22 @@ export function listener(
// In order to match current behavior, native DOM event listeners must be added for all
// events (including outputs).
if (isProceduralRenderer(renderer)) {
const cleanupFn = renderer.listen(native, eventName, listenerFn);
// The first argument of `listen` function in Procedural Renderer is:
// - either a target name (as a string) in case of global target (window, document, body)
// - or element reference (in all other cases)
const cleanupFn = renderer.listen(resolved.name || target, eventName, listenerFn);
lCleanup.push(listenerFn, cleanupFn);
useCaptureOrSubIdx = lCleanupIndex + 1;
} else {
const wrappedListener = wrapListenerWithPreventDefault(listenerFn);
native.addEventListener(eventName, wrappedListener, useCapture);
target.addEventListener(eventName, wrappedListener, useCapture);
lCleanup.push(wrappedListener);
}
tCleanup && tCleanup.push(eventName, tNode.index, lCleanupIndex, useCaptureOrSubIdx);
const idxOrTargetGetter = eventTargetResolver ?
(_lView: LView) => eventTargetResolver(readElementValue(_lView[tNode.index])).target :
tNode.index;
tCleanup && tCleanup.push(eventName, idxOrTargetGetter, lCleanupIndex, useCaptureOrSubIdx);
}
// subscribe to directive outputs

10
packages/core/src/render3/interfaces/renderer.ts
View File

@ -26,6 +26,12 @@ export enum RendererStyleFlags3 {
export type Renderer3 = ObjectOrientedRenderer3 | ProceduralRenderer3;
export type GlobalTargetName = 'document' | 'window' | 'body';
export type GlobalTargetResolver = (element: any) => {
name: GlobalTargetName, target: EventTarget
};
/**
* Object Oriented style of API needed to create elements and text nodes.
*
@ -86,7 +92,9 @@ export interface ProceduralRenderer3 {
setValue(node: RText|RComment, value: string): void;
// TODO(misko): Deprecate in favor of addEventListener/removeEventListener
listen(target: RNode, eventName: string, callback: (event: any) => boolean | void): () => void;
listen(
target: GlobalTargetName|RNode, eventName: string,
callback: (event: any) => boolean | void): () => void;
}
export interface RendererFactory3 {

6
packages/core/src/render3/interfaces/view.ts
View File

@ -446,7 +446,11 @@ export interface TView {
*
* If it's a native DOM listener or output subscription being stored:
* 1st index is: event name `name = tView.cleanup[i+0]`
* 2nd index is: index of native element `element = lView[tView.cleanup[i+1]]`
* 2nd index is: index of native element or a function that retrieves global target (window,
* document or body) reference based on the native element:
* `typeof idxOrTargetGetter === 'function'`: global target getter function
* `typeof idxOrTargetGetter === 'number'`: index of native element
*
* 3rd index is: index of listener function `listener = lView[CLEANUP][tView.cleanup[i+2]]`
* 4th index is: `useCaptureOrIndx = tView.cleanup[i+3]`
* `typeof useCaptureOrIndx == 'boolean' : useCapture boolean

3
packages/core/src/render3/jit/environment.ts
View File

@ -107,6 +107,9 @@ export const angularCoreEnv: {[name: string]: Function} = {
'ɵi18nEnd': r3.i18nEnd,
'ɵi18nApply': r3.i18nApply,
'ɵi18nPostprocess': r3.i18nPostprocess,
'ɵresolveWindow': r3.resolveWindow,
'ɵresolveDocument': r3.resolveDocument,
'ɵresolveBody': r3.resolveBody,
'ɵsanitizeHtml': sanitization.sanitizeHtml,
'ɵsanitizeStyle': sanitization.sanitizeStyle,

8
packages/core/src/render3/node_manipulation.ts
View File

@ -445,13 +445,15 @@ function removeListeners(lView: LView): void {
for (let i = 0; i < tCleanup.length - 1; i += 2) {
if (typeof tCleanup[i] === 'string') {
// This is a listener with the native renderer
const idx = tCleanup[i + 1];
const idxOrTargetGetter = tCleanup[i + 1];
const target = typeof idxOrTargetGetter === 'function' ?
idxOrTargetGetter(lView) :
readElementValue(lView[idxOrTargetGetter]);
const listener = lCleanup[tCleanup[i + 2]];
const native = readElementValue(lView[idx]);
const useCaptureOrSubIdx = tCleanup[i + 3];
if (typeof useCaptureOrSubIdx === 'boolean') {
// DOM listener
native.removeEventListener(tCleanup[i], listener, useCaptureOrSubIdx);
target.removeEventListener(tCleanup[i], listener, useCaptureOrSubIdx);
} else {
if (useCaptureOrSubIdx >= 0) {
// unregister

14
packages/core/src/render3/util.ts
View File

@ -14,7 +14,7 @@ import {LContext, MONKEY_PATCH_KEY_NAME} from './interfaces/context';
import {ComponentDef, DirectiveDef} from './interfaces/definition';
import {NO_PARENT_INJECTOR, RelativeInjectorLocation, RelativeInjectorLocationFlags} from './interfaces/injector';
import {TContainerNode, TElementNode, TNode, TNodeFlags, TNodeType} from './interfaces/node';
import {RComment, RElement, RText} from './interfaces/renderer';
import {GlobalTargetName, GlobalTargetResolver, RComment, RElement, RText} from './interfaces/renderer';
import {StylingContext} from './interfaces/styling';
import {CONTEXT, DECLARATION_VIEW, FLAGS, HEADER_OFFSET, HOST, HOST_NODE, LView, LViewFlags, PARENT, RootContext, TData, TVIEW, TView} from './interfaces/view';
@ -276,3 +276,15 @@ export function findComponentView(lView: LView): LView {
return lView;
}
export function resolveWindow(element: RElement & {ownerDocument: Document}) {
return {name: 'window', target: element.ownerDocument.defaultView};
}
export function resolveDocument(element: RElement & {ownerDocument: Document}) {
return {name: 'document', target: element.ownerDocument};
}
export function resolveBody(element: RElement & {ownerDocument: Document}) {
return {name: 'body', target: element.ownerDocument.body};
}

131
packages/core/test/linker/integration_spec.ts
View File

@ -845,52 +845,48 @@ function declareTests(config?: {useJit: boolean}) {
dir.triggerChange('two');
}));
fixmeIvy(
'FW-743: Registering events on global objects (document, window, body) is not supported')
.it('should support render events', () => {
TestBed.configureTestingModule({declarations: [MyComp, DirectiveListeningDomEvent]});
const template = '<div listener></div>';
TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp);
it('should support render events', () => {
TestBed.configureTestingModule({declarations: [MyComp, DirectiveListeningDomEvent]});
const template = '<div listener></div>';
TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp);
const tc = fixture.debugElement.children[0];
const listener = tc.injector.get(DirectiveListeningDomEvent);
const tc = fixture.debugElement.children[0];
const listener = tc.injector.get(DirectiveListeningDomEvent);
dispatchEvent(tc.nativeElement, 'domEvent');
dispatchEvent(tc.nativeElement, 'domEvent');
expect(listener.eventTypes).toEqual([
'domEvent', 'body_domEvent', 'document_domEvent', 'window_domEvent'
]);
expect(listener.eventTypes).toEqual([
'domEvent', 'body_domEvent', 'document_domEvent', 'window_domEvent'
]);
fixture.destroy();
listener.eventTypes = [];
dispatchEvent(tc.nativeElement, 'domEvent');
expect(listener.eventTypes).toEqual([]);
});
fixture.destroy();
listener.eventTypes = [];
dispatchEvent(tc.nativeElement, 'domEvent');
expect(listener.eventTypes).toEqual([]);
});
fixmeIvy(
'FW-743: Registering events on global objects (document, window, body) is not supported')
.it('should support render global events', () => {
TestBed.configureTestingModule({declarations: [MyComp, DirectiveListeningDomEvent]});
const template = '<div listener></div>';
TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp);
const doc = TestBed.get(DOCUMENT);
it('should support render global events', () => {
TestBed.configureTestingModule({declarations: [MyComp, DirectiveListeningDomEvent]});
const template = '<div listener></div>';
TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp);
const doc = TestBed.get(DOCUMENT);
const tc = fixture.debugElement.children[0];
const listener = tc.injector.get(DirectiveListeningDomEvent);
dispatchEvent(getDOM().getGlobalEventTarget(doc, 'window'), 'domEvent');
expect(listener.eventTypes).toEqual(['window_domEvent']);
const tc = fixture.debugElement.children[0];
const listener = tc.injector.get(DirectiveListeningDomEvent);
dispatchEvent(getDOM().getGlobalEventTarget(doc, 'window'), 'domEvent');
expect(listener.eventTypes).toEqual(['window_domEvent']);
listener.eventTypes = [];
dispatchEvent(getDOM().getGlobalEventTarget(doc, 'document'), 'domEvent');
expect(listener.eventTypes).toEqual(['document_domEvent', 'window_domEvent']);
listener.eventTypes = [];
dispatchEvent(getDOM().getGlobalEventTarget(doc, 'document'), 'domEvent');
expect(listener.eventTypes).toEqual(['document_domEvent', 'window_domEvent']);
fixture.destroy();
listener.eventTypes = [];
dispatchEvent(getDOM().getGlobalEventTarget(doc, 'body'), 'domEvent');
expect(listener.eventTypes).toEqual([]);
});
fixture.destroy();
listener.eventTypes = [];
dispatchEvent(getDOM().getGlobalEventTarget(doc, 'body'), 'domEvent');
expect(listener.eventTypes).toEqual([]);
});
it('should support updating host element via hostAttributes on root elements', () => {
@Component({host: {'role': 'button'}, template: ''})
@ -1027,44 +1023,41 @@ function declareTests(config?: {useJit: boolean}) {
});
}
fixmeIvy(
'FW-743: Registering events on global objects (document, window, body) is not supported')
.it('should support render global events from multiple directives', () => {
TestBed.configureTestingModule({
declarations: [MyComp, DirectiveListeningDomEvent, DirectiveListeningDomEventOther]
});
const template = '<div *ngIf="ctxBoolProp" listener listenerother></div>';
TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp);
const doc = TestBed.get(DOCUMENT);
it('should support render global events from multiple directives', () => {
TestBed.configureTestingModule(
{declarations: [MyComp, DirectiveListeningDomEvent, DirectiveListeningDomEventOther]});
const template = '<div *ngIf="ctxBoolProp" listener listenerother></div>';
TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp);
const doc = TestBed.get(DOCUMENT);
globalCounter = 0;
fixture.componentInstance.ctxBoolProp = true;
fixture.detectChanges();
globalCounter = 0;
fixture.componentInstance.ctxBoolProp = true;
fixture.detectChanges();
const tc = fixture.debugElement.children[0];
const tc = fixture.debugElement.children[0];
const listener = tc.injector.get(DirectiveListeningDomEvent);
const listenerother = tc.injector.get(DirectiveListeningDomEventOther);
dispatchEvent(getDOM().getGlobalEventTarget(doc, 'window'), 'domEvent');
expect(listener.eventTypes).toEqual(['window_domEvent']);
expect(listenerother.eventType).toEqual('other_domEvent');
expect(globalCounter).toEqual(1);
const listener = tc.injector.get(DirectiveListeningDomEvent);
const listenerother = tc.injector.get(DirectiveListeningDomEventOther);
dispatchEvent(getDOM().getGlobalEventTarget(doc, 'window'), 'domEvent');
expect(listener.eventTypes).toEqual(['window_domEvent']);
expect(listenerother.eventType).toEqual('other_domEvent');
expect(globalCounter).toEqual(1);
fixture.componentInstance.ctxBoolProp = false;
fixture.detectChanges();
dispatchEvent(getDOM().getGlobalEventTarget(doc, 'window'), 'domEvent');
expect(globalCounter).toEqual(1);
fixture.componentInstance.ctxBoolProp = false;
fixture.detectChanges();
dispatchEvent(getDOM().getGlobalEventTarget(doc, 'window'), 'domEvent');
expect(globalCounter).toEqual(1);
fixture.componentInstance.ctxBoolProp = true;
fixture.detectChanges();
dispatchEvent(getDOM().getGlobalEventTarget(doc, 'window'), 'domEvent');
expect(globalCounter).toEqual(2);
fixture.componentInstance.ctxBoolProp = true;
fixture.detectChanges();
dispatchEvent(getDOM().getGlobalEventTarget(doc, 'window'), 'domEvent');
expect(globalCounter).toEqual(2);
// need to destroy to release all remaining global event listeners
fixture.destroy();
});
// need to destroy to release all remaining global event listeners
fixture.destroy();
});
describe('ViewContainerRef', () => {
beforeEach(() => {

158
packages/core/test/render3/listeners_spec.ts
View File

@ -6,17 +6,21 @@
* found in the LICENSE file at https://angular.io/license
*/
import {bind, defineComponent, defineDirective, markDirty, reference, textBinding} from '../../src/render3/index';
import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util';
import {bind, defineComponent, defineDirective, markDirty, reference, resolveBody, resolveDocument, textBinding} from '../../src/render3/index';
import {container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementStart, embeddedViewEnd, embeddedViewStart, getCurrentView, listener, text} from '../../src/render3/instructions';
import {RenderFlags} from '../../src/render3/interfaces/definition';
import {GlobalTargetResolver} from '../../src/render3/interfaces/renderer';
import {restoreView} from '../../src/render3/state';
import {getRendererFactory2} from './imported_renderer2';
import {ComponentFixture, containerEl, createComponent, getDirectiveOnNode, renderToHtml, requestAnimationFrame} from './render_util';
import {ComponentFixture, TemplateFixture, containerEl, createComponent, getDirectiveOnNode, renderToHtml, requestAnimationFrame} from './render_util';
describe('event listeners', () => {
let comps: MyComp[] = [];
let comps: any[] = [];
let events: any[] = [];
class MyComp {
showing = true;
@ -48,6 +52,67 @@ describe('event listeners', () => {
});
}
class MyCompWithGlobalListeners {
/* @HostListener('document:custom') */
onDocumentCustomEvent() { events.push('component - document:custom'); }
/* @HostListener('body:click') */
onBodyClick() { events.push('component - body:click'); }
static ngComponentDef = defineComponent({
type: MyCompWithGlobalListeners,
selectors: [['comp']],
consts: 1,
vars: 0,
template: function CompTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
text(0, 'Some text');
}
},
factory: () => {
let comp = new MyCompWithGlobalListeners();
comps.push(comp);
return comp;
},
hostBindings: function HostListenerDir_HostBindings(
rf: RenderFlags, ctx: any, elIndex: number) {
if (rf & RenderFlags.Create) {
listener('custom', function() {
return ctx.onDocumentCustomEvent();
}, false, resolveDocument as GlobalTargetResolver);
listener('click', function() {
return ctx.onBodyClick();
}, false, resolveBody as GlobalTargetResolver);
}
}
});
}
class GlobalHostListenerDir {
/* @HostListener('document:custom') */
onDocumentCustomEvent() { events.push('directive - document:custom'); }
/* @HostListener('body:click') */
onBodyClick() { events.push('directive - body:click'); }
static ngDirectiveDef = defineDirective({
type: GlobalHostListenerDir,
selectors: [['', 'hostListenerDir', '']],
factory: function HostListenerDir_Factory() { return new GlobalHostListenerDir(); },
hostBindings: function HostListenerDir_HostBindings(
rf: RenderFlags, ctx: any, elIndex: number) {
if (rf & RenderFlags.Create) {
listener('custom', function() {
return ctx.onDocumentCustomEvent();
}, false, resolveDocument as GlobalTargetResolver);
listener('click', function() {
return ctx.onBodyClick();
}, false, resolveBody as GlobalTargetResolver);
}
}
});
}
class PreventDefaultComp {
handlerReturnValue: any = true;
// TODO(issue/24571): remove '!'.
@ -84,7 +149,10 @@ describe('event listeners', () => {
});
}
beforeEach(() => { comps = []; });
beforeEach(() => {
comps = [];
events = [];
});
it('should call function on event emit', () => {
const fixture = new ComponentFixture(MyComp);
@ -477,6 +545,7 @@ describe('event listeners', () => {
const fixture = new ComponentFixture(MyComp);
const host = fixture.hostElement;
host.click();
expect(events).toEqual(['click!']);
@ -484,6 +553,20 @@ describe('event listeners', () => {
expect(events).toEqual(['click!', 'click!']);
});
it('should support global host listeners on components', () => {
const fixture = new ComponentFixture(MyCompWithGlobalListeners);
const doc = fixture.hostElement.ownerDocument !;
dispatchEvent(doc, 'custom');
expect(events).toEqual(['component - document:custom']);
dispatchEvent(doc.body, 'click');
expect(events).toEqual(['component - document:custom', 'component - body:click']);
// invoke destroy for this fixture to cleanup all listeners setup for global objects
fixture.destroy();
});
it('should support host listeners on directives', () => {
let events: string[] = [];
@ -504,16 +587,14 @@ describe('event listeners', () => {
});
}
function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'button', ['hostListenerDir', '']);
text(1, 'Click');
elementEnd();
}
}
const fixture = new TemplateFixture(() => {
elementStart(0, 'button', ['hostListenerDir', '']);
text(1, 'Click');
elementEnd();
}, () => {}, 2, 0, [HostListenerDir]);
const button = fixture.hostElement.querySelector('button') !;
renderToHtml(Template, {}, 2, 0, [HostListenerDir]);
const button = containerEl.querySelector('button') !;
button.click();
expect(events).toEqual(['click!']);
@ -521,6 +602,23 @@ describe('event listeners', () => {
expect(events).toEqual(['click!', 'click!']);
});
it('should support global host listeners on directives', () => {
const fixture = new TemplateFixture(() => {
element(0, 'div', ['hostListenerDir', '']);
}, () => {}, 1, 0, [GlobalHostListenerDir]);
const doc = fixture.hostElement.ownerDocument !;
dispatchEvent(doc, 'custom');
expect(events).toEqual(['directive - document:custom']);
dispatchEvent(doc.body, 'click');
expect(events).toEqual(['directive - document:custom', 'directive - body:click']);
// invoke destroy for this fixture to cleanup all listeners setup for global objects
fixture.destroy();
});
it('should support listeners with specified set of args', () => {
class MyComp {
counter = 0;
@ -673,6 +771,40 @@ describe('event listeners', () => {
expect(comps[1] !.counter).toEqual(1);
});
it('should destroy global listeners in component views', () => {
const ctx = {showing: true};
const fixture = new TemplateFixture(
() => { container(0); },
() => {
containerRefreshStart(0);
{
if (ctx.showing) {
let rf1 = embeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'comp');
}
embeddedViewEnd();
}
}
containerRefreshEnd();
},
1, 0, [MyCompWithGlobalListeners]);
const body = fixture.hostElement.ownerDocument !.body;
body.click();
expect(events).toEqual(['component - body:click']);
// the child view listener should be removed when the parent view is removed
ctx.showing = false;
fixture.update();
body.click();
// expecting no changes in events array
expect(events).toEqual(['component - body:click']);
});
it('should support listeners with sibling nested containers', () => {
/**
* % if (condition) {

12
packages/core/test/render3/render_util.ts
View File

@ -31,6 +31,8 @@ import {DirectiveDefList, DirectiveTypesOrFactory, PipeDef, PipeDefList, PipeTyp
import {PlayerHandler} from '../../src/render3/interfaces/player';
import {ProceduralRenderer3, RComment, RElement, RNode, RText, Renderer3, RendererFactory3, RendererStyleFlags3, domRendererFactory3} from '../../src/render3/interfaces/renderer';
import {HEADER_OFFSET, LView} from '../../src/render3/interfaces/view';
import {destroyLView} from '../../src/render3/node_manipulation';
import {getRootView} from '../../src/render3/util';
import {Sanitizer} from '../../src/sanitization/security';
import {Type} from '../../src/type';
@ -130,6 +132,11 @@ export class TemplateFixture extends BaseFixture {
this.hostElement, updateBlock || this.updateBlock, 0, this.vars, null !,
this._rendererFactory, this.hostView, this._directiveDefs, this._pipeDefs, this._sanitizer);
}
destroy(): void {
this.containerElement.removeChild(this.hostElement);
destroyLView(this.hostView);
}
}
@ -171,6 +178,11 @@ export class ComponentFixture<T> extends BaseFixture {
tick(this.component);
this.requestAnimationFrame.flush();
}
destroy(): void {
this.containerElement.removeChild(this.hostElement);
destroyLView(getRootView(this.component));
}
}
///////////////////////////////////////////////////////////////////////////////////