1233 lines
46 KiB
TypeScript
1233 lines
46 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright Google Inc. All Rights Reserved.
|
|
*
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://angular.io/license
|
|
*/
|
|
|
|
import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, ApplicationRef, Component, ComponentFactory, DoCheck, EventEmitter, Inject, Injector, Input, NgModule, NgModuleRef, NgZone, OnChanges, OnDestroy, OnInit, Output, SimpleChange, SimpleChanges, destroyPlatform} from '@angular/core';
|
|
import {BrowserModule} from '@angular/platform-browser';
|
|
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
|
|
import {NgElementImpl, NgElementInput, NgElementOutput} from '../src/ng-element';
|
|
import {NgElementApplicationContext} from '../src/ng-element-application-context';
|
|
import {scheduler} from '../src/utils';
|
|
import {AsyncMockScheduler, installMockScheduler, patchEnv, restoreEnv, supportsCustomElements} from '../testing/index';
|
|
|
|
type WithFooBar = {
|
|
foo: string,
|
|
bar: string
|
|
};
|
|
|
|
export function main() {
|
|
if (!supportsCustomElements()) {
|
|
return;
|
|
}
|
|
|
|
describe('NgElement', () => {
|
|
const DESTROY_DELAY = 10;
|
|
const disconnectSync = (elem: NgElementImpl<any>) => {
|
|
elem.disconnectedCallback();
|
|
mockScheduler.tick(DESTROY_DELAY);
|
|
};
|
|
|
|
let mockScheduler: AsyncMockScheduler;
|
|
let moduleRef: NgModuleRef<TestModule>;
|
|
let nodeName: string;
|
|
let e: NgElementImpl<TestComponent>&WithFooBar;
|
|
let host: HTMLElement;
|
|
|
|
beforeAll(() => patchEnv());
|
|
afterAll(() => restoreEnv());
|
|
|
|
[true, false].forEach(instantiateDirectly => {
|
|
[true, false].forEach(useItselfAsHost => {
|
|
const methodStr = instantiateDirectly ? 'directly' : 'with `document.createElement()`';
|
|
const hostStr = useItselfAsHost ? 'itself' : 'another element';
|
|
const description = `(instantiated ${methodStr} with ${hostStr} as host)`;
|
|
|
|
describe(description, () => {
|
|
beforeEach(done => {
|
|
mockScheduler = installMockScheduler();
|
|
|
|
destroyPlatform();
|
|
platformBrowserDynamic()
|
|
.bootstrapModule(TestModule)
|
|
.then(ref => {
|
|
moduleRef = ref;
|
|
nodeName = useItselfAsHost ? 'TEST-COMPONENT-FOR-NGE' : 'TEST-HOST';
|
|
e = instantiateDirectly ? new TestNgElement() :
|
|
document.createElement(TestNgElement.is) as any;
|
|
|
|
if (!useItselfAsHost) {
|
|
e.setHost(document.createElement('test-host'));
|
|
}
|
|
|
|
host = e.getHost();
|
|
})
|
|
.then(done, done.fail);
|
|
});
|
|
|
|
afterEach(() => destroyPlatform());
|
|
|
|
it('should be an HTMLElement', () => { expect(e).toEqual(jasmine.any(HTMLElement)); });
|
|
|
|
it(`should have ${useItselfAsHost ? 'itself' : 'another element'} as host`,
|
|
() => { expect(host.nodeName).toBe(nodeName); });
|
|
|
|
describe('attributeChangedCallback()', () => {
|
|
let markDirtySpy: jasmine.Spy;
|
|
|
|
beforeEach(() => markDirtySpy = spyOn(e, 'markDirty'));
|
|
|
|
it('should update the corresponding property when unconnected', () => {
|
|
expect(e.foo).toBeUndefined();
|
|
expect(e.bar).toBeUndefined();
|
|
|
|
e.attributeChangedCallback('foo', null, 'newFoo');
|
|
e.attributeChangedCallback('b-a-r', null, 'newBar');
|
|
|
|
expect(e.foo).toBe('newFoo');
|
|
expect(e.bar).toBe('newBar');
|
|
|
|
expect(markDirtySpy).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should update the corresponding property (when connected)', () => {
|
|
e.connectedCallback();
|
|
|
|
expect(e.foo).toBe('foo');
|
|
expect(e.bar).toBeUndefined();
|
|
|
|
e.attributeChangedCallback('foo', null, 'newFoo');
|
|
e.attributeChangedCallback('b-a-r', null, 'newBar');
|
|
|
|
expect(e.foo).toBe('newFoo');
|
|
expect(e.bar).toBe('newBar');
|
|
|
|
expect(markDirtySpy).toHaveBeenCalledTimes(2);
|
|
});
|
|
|
|
it('should update the component instance (when connected)', () => {
|
|
e.connectedCallback();
|
|
const component = e.componentRef !.instance;
|
|
|
|
expect(component.foo).toBe('foo');
|
|
expect(component.bar).toBeUndefined();
|
|
|
|
e.attributeChangedCallback('foo', null, 'newFoo');
|
|
e.attributeChangedCallback('b-a-r', null, 'newBar');
|
|
|
|
expect(component.foo).toBe('newFoo');
|
|
expect(component.bar).toBe('newBar');
|
|
|
|
expect(markDirtySpy).toHaveBeenCalledTimes(2);
|
|
});
|
|
|
|
it('should mark as dirty (when connected)', () => {
|
|
e.connectedCallback();
|
|
e.attributeChangedCallback('foo', null, 'newFoo');
|
|
e.attributeChangedCallback('b-a-r', null, 'newBar');
|
|
|
|
expect(markDirtySpy).toHaveBeenCalledTimes(2);
|
|
});
|
|
|
|
it('should not mark as dirty if the new value equals the old one', () => {
|
|
e.connectedCallback();
|
|
|
|
e.attributeChangedCallback('foo', null, 'newFoo');
|
|
e.attributeChangedCallback('b-a-r', null, 'newBar');
|
|
markDirtySpy.calls.reset();
|
|
|
|
e.attributeChangedCallback('foo', null, 'newFoo');
|
|
e.attributeChangedCallback('b-a-r', null, 'newBar');
|
|
expect(markDirtySpy).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should throw when disconnected', () => {
|
|
const errorMessage =
|
|
'Calling \'setInputValue()\' on disconnected component \'TestComponent\' is not allowed.';
|
|
|
|
e.connectedCallback();
|
|
disconnectSync(e);
|
|
|
|
const fn = () => e.attributeChangedCallback('foo', null, 'newFoo');
|
|
|
|
expect(fn).toThrowError(errorMessage);
|
|
expect(markDirtySpy).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should throw when called with unknown attribute', () => {
|
|
const fn = () => e.attributeChangedCallback('unknown', null, 'newUnknown');
|
|
const errorMessage =
|
|
'Calling \'attributeChangedCallback()\' with unknown attribute \'unknown\' ' +
|
|
'on component \'TestComponent\' is not allowed.';
|
|
|
|
expect(fn).toThrowError(errorMessage);
|
|
expect((e as any).unknown).toBeUndefined();
|
|
expect(markDirtySpy).not.toHaveBeenCalled();
|
|
|
|
e.connectedCallback();
|
|
|
|
expect(fn).toThrowError(errorMessage);
|
|
expect((e as any).unknown).toBeUndefined();
|
|
expect(markDirtySpy).not.toHaveBeenCalled();
|
|
|
|
e.disconnectedCallback();
|
|
|
|
expect(fn).toThrowError(errorMessage);
|
|
expect((e as any).unknown).toBeUndefined();
|
|
expect(markDirtySpy).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe('connectedCallback()', () => {
|
|
let detectChangesSpy: jasmine.Spy;
|
|
|
|
beforeEach(() => detectChangesSpy = spyOn(e, 'detectChanges').and.callThrough());
|
|
|
|
it('should create the component', () => {
|
|
expect(e.componentRef).toBeNull();
|
|
|
|
e.connectedCallback();
|
|
|
|
const componentRef = e.componentRef !;
|
|
expect(componentRef).not.toBeNull();
|
|
expect(componentRef.instance).toEqual(jasmine.any(TestComponent));
|
|
expect(host.textContent).toContain('TestComponent');
|
|
});
|
|
|
|
it('should instantiate the component inside the Angular zone', () => {
|
|
e.connectedCallback();
|
|
|
|
expect(NgZone.isInAngularZone()).toBe(false);
|
|
expect(e.componentRef !.instance.createdInNgZone).toBe(true);
|
|
});
|
|
|
|
it('should use the provided injector as parent', () => {
|
|
e.connectedCallback();
|
|
|
|
expect(e.componentRef !.instance.testValue).toBe('TEST');
|
|
expect(e.componentRef !.injector).not.toBe(moduleRef.injector);
|
|
});
|
|
|
|
it('should project any content', () => {
|
|
host.innerHTML = 'rest-1' +
|
|
'<span class="baz">baz-1</span>' +
|
|
'<span class="not-baz">rest-2</span>' +
|
|
'<div class="baz">baz-2</div>';
|
|
|
|
e.connectedCallback();
|
|
|
|
expect(host.textContent)
|
|
.toBe('TestComponent|foo(foo)|bar()|baz(baz-1baz-2)|rest(rest-1rest-2)');
|
|
});
|
|
|
|
it('should initialize component inputs with already set property values', () => {
|
|
e.foo = 'newFoo';
|
|
e.bar = 'newBar';
|
|
e.connectedCallback();
|
|
|
|
expect(e.componentRef !.instance.foo).toBe('newFoo');
|
|
expect(e.componentRef !.instance.bar).toBe('newBar');
|
|
});
|
|
|
|
it('should use the most recent property value', () => {
|
|
e.foo = 'newFoo';
|
|
e.foo = 'newerFoo';
|
|
e.foo = 'newestFoo';
|
|
e.connectedCallback();
|
|
|
|
expect(e.componentRef !.instance.foo).toBe('newestFoo');
|
|
});
|
|
|
|
it('should initialize component inputs from attributes (if properties are not set)',
|
|
() => {
|
|
host.setAttribute('foo', 'newFoo');
|
|
host.setAttribute('b-a-r', 'newBar');
|
|
host.setAttribute('bar', 'ignored');
|
|
host.setAttribute('bA-r', 'ignored');
|
|
e.connectedCallback();
|
|
|
|
expect(e.componentRef !.instance.foo).toBe('newFoo');
|
|
expect(e.componentRef !.instance.bar).toBe('newBar');
|
|
});
|
|
|
|
it('should prioritize properties over attributes (if both have been set)', () => {
|
|
host.setAttribute('foo', 'newFoo');
|
|
host.setAttribute('b-a-r', 'newBar');
|
|
e.bar = 'newerBar';
|
|
e.connectedCallback();
|
|
|
|
expect(e.componentRef !.instance.foo).toBe('newFoo');
|
|
expect(e.componentRef !.instance.bar).toBe('newerBar');
|
|
});
|
|
|
|
it('should not ignore undefined as an input value', () => {
|
|
host.setAttribute('foo', 'newFoo');
|
|
e.foo = 'newerFoo';
|
|
e.foo = undefined as any;
|
|
e.connectedCallback();
|
|
|
|
expect(e.componentRef !.instance.foo).toBeUndefined();
|
|
});
|
|
|
|
it('should convert component output emissions to custom events', () => {
|
|
const listeners = {
|
|
bazOnNgElement: jasmine.createSpy('bazOnNgElement'),
|
|
BAZOnNgElement: jasmine.createSpy('BAZOnNgElement'),
|
|
quxOnNgElement: jasmine.createSpy('quxOnNgElement'),
|
|
'q-u-xOnNgElement': jasmine.createSpy('q-u-xOnNgElement'),
|
|
bazOnHost: jasmine.createSpy('bazOnHost'),
|
|
BAZOnHost: jasmine.createSpy('BAZOnHost'),
|
|
quxOnHost: jasmine.createSpy('quxOnHost'),
|
|
'q-u-xOnHost': jasmine.createSpy('q-u-xOnHost'),
|
|
};
|
|
|
|
// Only events `baz` and `q-u-x` exist (regardless of pre-/post-connected phase).
|
|
e.addEventListener('baz', listeners.bazOnNgElement);
|
|
e.addEventListener('BAZ', listeners.BAZOnNgElement);
|
|
host.addEventListener('qux', listeners.quxOnHost);
|
|
host.addEventListener('q-u-x', listeners['q-u-xOnHost']);
|
|
e.connectedCallback();
|
|
host.addEventListener('baz', listeners.bazOnHost);
|
|
host.addEventListener('BAZ', listeners.BAZOnHost);
|
|
e.addEventListener('qux', listeners.quxOnNgElement);
|
|
e.addEventListener('q-u-x', listeners['q-u-xOnNgElement']);
|
|
|
|
Object.keys(listeners).forEach(
|
|
(k: keyof typeof listeners) => expect(listeners[k]).not.toHaveBeenCalled());
|
|
|
|
e.componentRef !.instance.baz.emit(false);
|
|
e.componentRef !.instance.qux.emit({qux: true});
|
|
|
|
['BAZOnNgElement', 'BAZOnHost', 'quxOnNgElement', 'quxOnHost'].forEach(
|
|
(k: keyof typeof listeners) => expect(listeners[k]).not.toHaveBeenCalled());
|
|
|
|
expect(listeners.bazOnNgElement).toHaveBeenCalledTimes(1);
|
|
expect(listeners.bazOnNgElement).toHaveBeenCalledWith(jasmine.objectContaining({
|
|
type: 'baz',
|
|
detail: false,
|
|
}));
|
|
expect(listeners.bazOnHost).toHaveBeenCalledTimes(1);
|
|
expect(listeners.bazOnHost).toHaveBeenCalledWith(jasmine.objectContaining({
|
|
type: 'baz',
|
|
detail: false,
|
|
}));
|
|
|
|
expect(listeners['q-u-xOnNgElement']).toHaveBeenCalledTimes(1);
|
|
expect(listeners['q-u-xOnNgElement']).toHaveBeenCalledWith(jasmine.objectContaining({
|
|
type: 'q-u-x',
|
|
detail: {qux: true},
|
|
}));
|
|
expect(listeners['q-u-xOnHost']).toHaveBeenCalledTimes(1);
|
|
expect(listeners['q-u-xOnHost']).toHaveBeenCalledWith(jasmine.objectContaining({
|
|
type: 'q-u-x',
|
|
detail: {qux: true},
|
|
}));
|
|
});
|
|
|
|
it('should run output event listeners outside the Angular zone', () => {
|
|
const expectOutsideNgZone = () => expect(NgZone.isInAngularZone()).toBe(false);
|
|
const listeners = {
|
|
bazOnNgElement:
|
|
jasmine.createSpy('bazOnNgElement').and.callFake(expectOutsideNgZone),
|
|
bazOnHost: jasmine.createSpy('bazOnHost').and.callFake(expectOutsideNgZone),
|
|
};
|
|
|
|
e.addEventListener('baz', listeners.bazOnNgElement);
|
|
e.connectedCallback();
|
|
host.addEventListener('baz', listeners.bazOnHost);
|
|
|
|
const ngZone = moduleRef.injector.get<NgZone>(NgZone);
|
|
ngZone.run(() => e.componentRef !.instance.baz.emit(true));
|
|
|
|
expect(listeners.bazOnNgElement).toHaveBeenCalledTimes(1);
|
|
expect(listeners.bazOnHost).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it('should trigger change detection', () => {
|
|
expect(detectChangesSpy).not.toHaveBeenCalled();
|
|
|
|
e.connectedCallback();
|
|
expect(detectChangesSpy).toHaveBeenCalledWith();
|
|
});
|
|
|
|
it('should wire up the component for change detection', () => {
|
|
const appRef = moduleRef.injector.get<ApplicationRef>(ApplicationRef);
|
|
const expectedContent1 = 'TestComponent|foo(foo)|bar()|baz()|rest()';
|
|
const expectedContent2 = 'TestComponent|foo(foo)|bar(newBar)|baz()|rest()';
|
|
|
|
e.connectedCallback();
|
|
const detectChangesSpy =
|
|
spyOn(e.componentRef !.changeDetectorRef, 'detectChanges').and.callThrough();
|
|
|
|
expect(host.textContent).toBe(expectedContent1);
|
|
|
|
e.componentRef !.instance.bar = 'newBar';
|
|
appRef.tick();
|
|
|
|
expect(detectChangesSpy).toHaveBeenCalledWith();
|
|
expect(host.textContent).toBe(expectedContent2);
|
|
});
|
|
|
|
it('should set `ngElement` on both itself and the host (if not the same)', () => {
|
|
expect(e.ngElement).toBeFalsy();
|
|
expect((host as typeof e).ngElement).toBeFalsy();
|
|
|
|
e.connectedCallback();
|
|
|
|
expect(e.ngElement).toBe(e);
|
|
expect((host as typeof e).ngElement).toBe(e);
|
|
});
|
|
|
|
it('should emit an `onConnected` event', () => {
|
|
const onConnectedSpy = jasmine.createSpy('onConnectedSpy');
|
|
|
|
e.onConnected.subscribe(onConnectedSpy);
|
|
e.connectedCallback();
|
|
|
|
expect(onConnectedSpy).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it('should throw if the host is already upgraded (ignoreUpgraded: false)', () => {
|
|
(host as typeof e).ngElement = {
|
|
componentRef: {componentType: class FooComponent{}}
|
|
} as any;
|
|
const errorMessage =
|
|
`Upgrading '${nodeName}' element to component 'TestComponent' is not allowed, ` +
|
|
'because the element is already upgraded to component \'FooComponent\'.';
|
|
|
|
expect(() => e.connectedCallback()).toThrowError(errorMessage);
|
|
expect(e.componentRef).toBeNull();
|
|
|
|
expect(() => e.connectedCallback(false)).toThrowError(errorMessage);
|
|
expect(e.componentRef).toBeNull();
|
|
|
|
expect(detectChangesSpy).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should do nothing if the host is already upgraded (ignoreUpgraded: true)', () => {
|
|
(host as typeof e).ngElement = {} as any;
|
|
|
|
expect(() => e.connectedCallback(true)).not.toThrow();
|
|
expect(e.componentRef).toBeNull();
|
|
|
|
expect(detectChangesSpy).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should do nothing if already connected', () => {
|
|
e.connectedCallback();
|
|
|
|
const componentRef = e.componentRef;
|
|
detectChangesSpy.calls.reset();
|
|
|
|
e.connectedCallback();
|
|
|
|
expect(e.componentRef).toBe(componentRef);
|
|
expect(detectChangesSpy).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should cancel a scheduled destruction (and do nothing)', () => {
|
|
const onDisconnectedSpy = jasmine.createSpy('onDisconnected');
|
|
|
|
e.onDisconnected.subscribe(onDisconnectedSpy);
|
|
e.connectedCallback();
|
|
e.disconnectedCallback();
|
|
e.disconnectedCallback();
|
|
|
|
const componentRef = e.componentRef;
|
|
detectChangesSpy.calls.reset();
|
|
|
|
mockScheduler.tick(DESTROY_DELAY - 1);
|
|
e.connectedCallback();
|
|
mockScheduler.tick(DESTROY_DELAY);
|
|
|
|
expect(e.componentRef).toBe(componentRef);
|
|
expect(detectChangesSpy).not.toHaveBeenCalled();
|
|
expect(onDisconnectedSpy).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should throw when disconnected', () => {
|
|
const errorMessage =
|
|
'Calling \'connectedCallback()\' on disconnected component \'TestComponent\' is not allowed.';
|
|
|
|
e.connectedCallback();
|
|
disconnectSync(e);
|
|
detectChangesSpy.calls.reset();
|
|
|
|
expect(() => e.connectedCallback()).toThrowError(errorMessage);
|
|
expect(e.ngElement).toBeNull();
|
|
expect(detectChangesSpy).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe('detach()', () => {
|
|
it('should delegate to `disconnectedCallback()`', () => {
|
|
const disconnectedCallbackSpy = spyOn(e, 'disconnectedCallback');
|
|
|
|
expect(disconnectedCallbackSpy).not.toHaveBeenCalled();
|
|
|
|
e.detach();
|
|
expect(disconnectedCallbackSpy).toHaveBeenCalledWith();
|
|
});
|
|
});
|
|
|
|
describe('detectChanges()', () => {
|
|
it('should throw when unconnected', () => {
|
|
const errorMessage =
|
|
'Calling \'detectChanges()\' on unconnected component \'TestComponent\' is not allowed.';
|
|
expect(() => e.detectChanges()).toThrowError(errorMessage);
|
|
});
|
|
|
|
it('should allow scheduling more change detection', () => {
|
|
e.connectedCallback();
|
|
|
|
const detectChangesSpy = spyOn(e, 'detectChanges').and.callThrough();
|
|
|
|
e.markDirty();
|
|
e.markDirty();
|
|
mockScheduler.flushBeforeRender();
|
|
|
|
expect(detectChangesSpy).toHaveBeenCalledTimes(1);
|
|
|
|
detectChangesSpy.calls.reset();
|
|
e.markDirty();
|
|
e.detectChanges();
|
|
e.markDirty();
|
|
mockScheduler.flushBeforeRender();
|
|
|
|
expect(detectChangesSpy).toHaveBeenCalledTimes(3);
|
|
});
|
|
|
|
it('should call `ngOnChanges()` (if implemented and there are changes)', () => {
|
|
e.connectedCallback();
|
|
|
|
const compRef = e.componentRef !;
|
|
const ngOnChangesSpy = spyOn(compRef.instance, 'ngOnChanges');
|
|
|
|
e.foo = 'newFoo';
|
|
e.detectChanges();
|
|
|
|
expect(ngOnChangesSpy).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it('should call `ngOnChanges()` inside the Angular zone', () => {
|
|
e.connectedCallback();
|
|
|
|
const compRef = e.componentRef !;
|
|
const ngOnChangesSpy =
|
|
spyOn(compRef.instance, 'ngOnChanges')
|
|
.and.callFake(() => expect(NgZone.isInAngularZone()).toBe(true));
|
|
|
|
e.foo = 'newFoo';
|
|
e.detectChanges();
|
|
|
|
expect(NgZone.isInAngularZone()).toBe(false);
|
|
expect(ngOnChangesSpy).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it('should not call `ngOnChanges()` if the component does not implement it', () => {
|
|
const ngOnChanges = TestComponent.prototype.ngOnChanges;
|
|
|
|
try {
|
|
TestComponent.prototype.ngOnChanges = null as any;
|
|
e.connectedCallback();
|
|
} finally {
|
|
TestComponent.prototype.ngOnChanges = ngOnChanges;
|
|
}
|
|
|
|
const compRef = e.componentRef !;
|
|
const ngOnChangesSpy = spyOn(compRef.instance, 'ngOnChanges');
|
|
|
|
e.foo = 'newFoo';
|
|
e.detectChanges();
|
|
|
|
expect(ngOnChangesSpy).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should not call `ngOnChanges()` if there are no changes', () => {
|
|
e.connectedCallback();
|
|
|
|
const compRef = e.componentRef !;
|
|
const ngOnChangesSpy = spyOn(compRef.instance, 'ngOnChanges');
|
|
|
|
e.detectChanges();
|
|
|
|
expect(ngOnChangesSpy).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should reset the "pending changes" flag', () => {
|
|
e.connectedCallback();
|
|
|
|
const compRef = e.componentRef !;
|
|
const ngOnChangesSpy = spyOn(compRef.instance, 'ngOnChanges');
|
|
|
|
e.foo = 'newFoo';
|
|
e.detectChanges();
|
|
|
|
expect(ngOnChangesSpy).toHaveBeenCalledTimes(1);
|
|
|
|
ngOnChangesSpy.calls.reset();
|
|
e.detectChanges();
|
|
|
|
expect(ngOnChangesSpy).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should call `detectChanges()` on the component (after `ngOnChanges()`)', () => {
|
|
e.connectedCallback();
|
|
|
|
const compRef = e.componentRef !;
|
|
const ngOnChangesSpy =
|
|
spyOn(compRef.instance, 'ngOnChanges')
|
|
.and.callFake(() => expect(cdDetectChangesSpy).not.toHaveBeenCalled());
|
|
const cdDetectChangesSpy =
|
|
spyOn(compRef.changeDetectorRef, 'detectChanges').and.callThrough();
|
|
|
|
e.foo = 'newFoo';
|
|
e.detectChanges();
|
|
|
|
expect(ngOnChangesSpy).toHaveBeenCalledTimes(1);
|
|
expect(cdDetectChangesSpy).toHaveBeenCalledWith();
|
|
});
|
|
|
|
it('should call `detectChanges()` inside the Angular zone', () => {
|
|
e.connectedCallback();
|
|
|
|
const compRef = e.componentRef !;
|
|
const originalCdDetectChanges = compRef.changeDetectorRef.detectChanges;
|
|
const cdDetectChangesSpy =
|
|
spyOn(compRef.changeDetectorRef, 'detectChanges').and.callFake(() => {
|
|
expect(NgZone.isInAngularZone()).toBe(true);
|
|
originalCdDetectChanges.call(compRef.changeDetectorRef);
|
|
});
|
|
|
|
e.foo = 'newFoo';
|
|
e.detectChanges();
|
|
|
|
expect(NgZone.isInAngularZone()).toBe(false);
|
|
expect(cdDetectChangesSpy).toHaveBeenCalledWith();
|
|
});
|
|
|
|
it('should do nothing when disconnected', () => {
|
|
e.connectedCallback();
|
|
disconnectSync(e);
|
|
|
|
const cdDetectChangesSpy = spyOn(e.componentRef !.changeDetectorRef, 'detectChanges');
|
|
|
|
e.detectChanges();
|
|
|
|
expect(cdDetectChangesSpy).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe('disconnectedCallback()', () => {
|
|
it('should throw when unconnected', () => {
|
|
const errorMessage =
|
|
'Calling \'disconnectedCallback()\' on unconnected component \'TestComponent\' ' +
|
|
'is not allowed.';
|
|
|
|
expect(() => disconnectSync(e)).toThrowError(errorMessage);
|
|
});
|
|
|
|
it('should not be immediately disconnected', () => {
|
|
const errorMessage =
|
|
'Calling \'setInputValue()\' on disconnected component \'TestComponent\' is not allowed.';
|
|
|
|
e.connectedCallback();
|
|
e.disconnectedCallback();
|
|
|
|
expect(() => e.foo = 'newFoo').not.toThrow();
|
|
expect(e.componentRef !.instance.foo).toBe('newFoo');
|
|
|
|
mockScheduler.tick(DESTROY_DELAY);
|
|
|
|
expect(() => e.foo = 'newerFoo').toThrowError(errorMessage);
|
|
});
|
|
|
|
it('should do nothing when already disconnected', () => {
|
|
e.connectedCallback();
|
|
disconnectSync(e);
|
|
|
|
const destroySpy = spyOn(e.componentRef !, 'destroy');
|
|
const onDisconnectedSpy = jasmine.createSpy('onDisconnectedSpy');
|
|
e.onDisconnected.subscribe(onDisconnectedSpy);
|
|
|
|
disconnectSync(e);
|
|
|
|
expect(destroySpy).not.toHaveBeenCalled();
|
|
expect(onDisconnectedSpy).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should do nothing when already scheduled for destruction', () => {
|
|
e.connectedCallback();
|
|
e.disconnectedCallback();
|
|
|
|
const destroySpy = spyOn(e.componentRef !, 'destroy');
|
|
const onDisconnectedSpy = jasmine.createSpy('onDisconnectedSpy');
|
|
e.onDisconnected.subscribe(onDisconnectedSpy);
|
|
|
|
mockScheduler.reset();
|
|
disconnectSync(e);
|
|
disconnectSync(e);
|
|
|
|
expect(destroySpy).not.toHaveBeenCalled();
|
|
expect(onDisconnectedSpy).not.toHaveBeenCalled();
|
|
});
|
|
|
|
describe('after some delay', () => {
|
|
it('should destroy the component', () => {
|
|
e.connectedCallback();
|
|
const destroySpy = spyOn(e.componentRef !, 'destroy');
|
|
|
|
e.disconnectedCallback();
|
|
expect(destroySpy).not.toHaveBeenCalled();
|
|
|
|
mockScheduler.tick(DESTROY_DELAY - 1);
|
|
expect(destroySpy).not.toHaveBeenCalled();
|
|
|
|
mockScheduler.tick(1);
|
|
expect(destroySpy).toHaveBeenCalledWith();
|
|
});
|
|
|
|
it('should destroy the component inside the Angular zone', () => {
|
|
e.connectedCallback();
|
|
const destroySpy =
|
|
spyOn(e.componentRef !, 'destroy')
|
|
.and.callFake(() => expect(NgZone.isInAngularZone()).toBe(true));
|
|
|
|
disconnectSync(e);
|
|
|
|
expect(NgZone.isInAngularZone()).toBe(false);
|
|
expect(destroySpy).toHaveBeenCalledWith();
|
|
});
|
|
|
|
it('should stop converting component output emissions to custom events', () => {
|
|
const listenerForConnected = jasmine.createSpy('listenerForConnected');
|
|
const listenerForDisconnected = jasmine.createSpy('listenerForDisconnected');
|
|
|
|
e.connectedCallback();
|
|
|
|
const component = e.componentRef !.instance;
|
|
const emit = () => {
|
|
component.baz.emit(false);
|
|
component.qux.emit({qux: true});
|
|
};
|
|
|
|
e.addEventListener('baz', listenerForConnected);
|
|
e.addEventListener('q-u-x', listenerForConnected);
|
|
host.addEventListener('baz', listenerForConnected);
|
|
host.addEventListener('q-u-x', listenerForConnected);
|
|
emit();
|
|
|
|
expect(listenerForConnected).toHaveBeenCalledTimes(useItselfAsHost ? 2 : 4);
|
|
|
|
listenerForConnected.calls.reset();
|
|
disconnectSync(e);
|
|
|
|
e.addEventListener('baz', listenerForDisconnected);
|
|
e.addEventListener('q-u-x', listenerForDisconnected);
|
|
host.addEventListener('baz', listenerForDisconnected);
|
|
host.addEventListener('q-u-x', listenerForDisconnected);
|
|
emit();
|
|
|
|
expect(listenerForConnected).not.toHaveBeenCalled();
|
|
expect(listenerForDisconnected).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should unset `ngElement` on both itself and the host (if not the same)', () => {
|
|
e.connectedCallback();
|
|
disconnectSync(e);
|
|
|
|
expect(e.ngElement).toBeNull();
|
|
expect((host as typeof e).ngElement).toBeNull();
|
|
});
|
|
|
|
it('should empty the host', () => {
|
|
host.innerHTML = 'not empty';
|
|
|
|
e.connectedCallback();
|
|
disconnectSync(e);
|
|
|
|
expect(host.innerHTML).toBe('');
|
|
});
|
|
|
|
it('should emit an `onDisconnected` event', () => {
|
|
const onDisconnectedSpy = jasmine.createSpy('onDisconnectedSpy');
|
|
e.onDisconnected.subscribe(onDisconnectedSpy);
|
|
|
|
e.connectedCallback();
|
|
expect(onDisconnectedSpy).not.toHaveBeenCalled();
|
|
|
|
e.disconnectedCallback();
|
|
expect(onDisconnectedSpy).not.toHaveBeenCalled();
|
|
|
|
mockScheduler.tick(DESTROY_DELAY - 1);
|
|
expect(onDisconnectedSpy).not.toHaveBeenCalled();
|
|
|
|
mockScheduler.tick(1);
|
|
expect(onDisconnectedSpy).toHaveBeenCalledTimes(1);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('getHost()', () => {
|
|
it('should return the current host (regardless of the lifecycle phase)', () => {
|
|
expect(e.getHost()).toBe(host);
|
|
|
|
const newHost = document.createElement('new-test-host');
|
|
|
|
e.setHost(newHost);
|
|
expect(e.getHost()).toBe(newHost);
|
|
|
|
e.connectedCallback();
|
|
expect(e.getHost()).toBe(newHost);
|
|
|
|
e.disconnectedCallback();
|
|
expect(e.getHost()).toBe(newHost);
|
|
});
|
|
});
|
|
|
|
describe('getInputValue()', () => {
|
|
it('should return the corresponding property when unconnected', () => {
|
|
expect(e.getInputValue('foo')).toBeUndefined();
|
|
expect(e.getInputValue('bar')).toBeUndefined();
|
|
|
|
e.foo = 'newFoo';
|
|
e.bar = 'newBar';
|
|
|
|
expect(e.getInputValue('foo')).toBe('newFoo');
|
|
expect(e.getInputValue('bar')).toBe('newBar');
|
|
});
|
|
|
|
it('should return the corresponding component property (when connected)', () => {
|
|
e.connectedCallback();
|
|
const component = e.componentRef !.instance;
|
|
|
|
expect(e.getInputValue('foo')).toBe('foo');
|
|
expect(e.getInputValue('bar')).toBeUndefined();
|
|
|
|
e.foo = 'newFoo';
|
|
e.bar = 'newBar';
|
|
|
|
expect(e.getInputValue('foo')).toBe('newFoo');
|
|
expect(e.getInputValue('bar')).toBe('newBar');
|
|
|
|
component.foo = 'newerFoo';
|
|
component.bar = 'newerBar';
|
|
|
|
expect(e.getInputValue('foo')).toBe('newerFoo');
|
|
expect(e.getInputValue('bar')).toBe('newerBar');
|
|
});
|
|
|
|
it('should throw when disconnected', () => {
|
|
const errorMessage =
|
|
'Calling \'getInputValue()\' on disconnected component \'TestComponent\' is not allowed.';
|
|
|
|
e.connectedCallback();
|
|
disconnectSync(e);
|
|
|
|
expect(() => e.getInputValue('foo')).toThrowError(errorMessage);
|
|
});
|
|
});
|
|
|
|
describe('markDirty()', () => {
|
|
let detectChangesSpy: jasmine.Spy;
|
|
|
|
beforeEach(() => {
|
|
e.connectedCallback();
|
|
detectChangesSpy = spyOn(e, 'detectChanges');
|
|
});
|
|
|
|
it('should schedule change detection', () => {
|
|
e.markDirty();
|
|
expect(detectChangesSpy).not.toHaveBeenCalled();
|
|
|
|
mockScheduler.flushBeforeRender();
|
|
expect(detectChangesSpy).toHaveBeenCalledWith();
|
|
});
|
|
|
|
it('should not schedule change detection if already scheduled', () => {
|
|
e.markDirty();
|
|
e.markDirty();
|
|
e.markDirty();
|
|
mockScheduler.flushBeforeRender();
|
|
|
|
expect(detectChangesSpy).toHaveBeenCalledTimes(1);
|
|
});
|
|
});
|
|
|
|
describe('setHost()', () => {
|
|
it('should set the host (when unconnected)', () => {
|
|
const newHost = document.createElement('new-test-host');
|
|
e.setHost(newHost);
|
|
expect(e.getHost()).toBe(newHost);
|
|
});
|
|
|
|
it('should throw when connected', () => {
|
|
const errorMessage =
|
|
'Calling \'setHost()\' on connected component \'TestComponent\' is not allowed.';
|
|
|
|
e.connectedCallback();
|
|
|
|
expect(() => e.setHost({} as any)).toThrowError(errorMessage);
|
|
expect(e.getHost()).toBe(host);
|
|
});
|
|
|
|
it('should throw when disconnected', () => {
|
|
const errorMessage =
|
|
'Calling \'setHost()\' on disconnected component \'TestComponent\' is not allowed.';
|
|
|
|
e.connectedCallback();
|
|
disconnectSync(e);
|
|
|
|
expect(() => e.setHost({} as any)).toThrowError(errorMessage);
|
|
expect(e.getHost()).toBe(host);
|
|
});
|
|
});
|
|
|
|
describe('setInputValue()', () => {
|
|
let markDirtySpy: jasmine.Spy;
|
|
|
|
beforeEach(() => markDirtySpy = spyOn(e, 'markDirty'));
|
|
|
|
it('should update the corresponding property when unconnected', () => {
|
|
expect(e.foo).toBeUndefined();
|
|
expect(e.bar).toBeUndefined();
|
|
|
|
e.setInputValue('foo', 'newFoo');
|
|
e.setInputValue('bar', 'newBar');
|
|
|
|
expect(e.foo).toBe('newFoo');
|
|
expect(e.bar).toBe('newBar');
|
|
|
|
expect(markDirtySpy).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should update the corresponding component property (when connected)', () => {
|
|
e.connectedCallback();
|
|
const component = e.componentRef !.instance;
|
|
|
|
expect(component.foo).toBe('foo');
|
|
expect(component.bar).toBeUndefined();
|
|
|
|
e.setInputValue('foo', 'newFoo');
|
|
e.setInputValue('bar', 'newBar');
|
|
|
|
expect(component.foo).toBe('newFoo');
|
|
expect(component.bar).toBe('newBar');
|
|
});
|
|
|
|
it('should mark as dirty (when connected)', () => {
|
|
e.connectedCallback();
|
|
|
|
e.setInputValue('foo', 'newFoo');
|
|
expect(markDirtySpy).toHaveBeenCalledTimes(1);
|
|
|
|
e.setInputValue('bar', 'newBar');
|
|
expect(markDirtySpy).toHaveBeenCalledTimes(2);
|
|
});
|
|
|
|
it('should not mark as dirty if the new value equals the old one', () => {
|
|
e.connectedCallback();
|
|
|
|
e.setInputValue('foo', 'newFoo');
|
|
expect(markDirtySpy).toHaveBeenCalledTimes(1);
|
|
|
|
e.setInputValue('foo', 'newFoo');
|
|
expect(markDirtySpy).toHaveBeenCalledTimes(1);
|
|
|
|
e.setInputValue('foo', NaN as any);
|
|
expect(markDirtySpy).toHaveBeenCalledTimes(2);
|
|
|
|
e.setInputValue('foo', NaN as any);
|
|
expect(markDirtySpy).toHaveBeenCalledTimes(2);
|
|
});
|
|
|
|
it('should record an input change', () => {
|
|
e.connectedCallback();
|
|
const component = e.componentRef !.instance;
|
|
|
|
e.setInputValue('foo', 'newFoo');
|
|
e.detectChanges();
|
|
|
|
expect(component.lastChanges).toEqual({
|
|
foo: new SimpleChange(undefined, 'newFoo', true),
|
|
});
|
|
|
|
e.setInputValue('foo', 'newerFoo');
|
|
e.setInputValue('bar', 'newBar');
|
|
e.detectChanges();
|
|
|
|
expect(component.lastChanges).toEqual({
|
|
foo: new SimpleChange('newFoo', 'newerFoo', false),
|
|
bar: new SimpleChange(undefined, 'newBar', true),
|
|
});
|
|
});
|
|
|
|
it('should aggregate multiple recorded changes (retaining `firstChange`)', () => {
|
|
e.connectedCallback();
|
|
const component = e.componentRef !.instance;
|
|
|
|
e.setInputValue('foo', 'newFoo');
|
|
e.setInputValue('foo', 'newerFoo');
|
|
e.setInputValue('foo', 'newestFoo');
|
|
e.detectChanges();
|
|
|
|
expect(component.lastChanges).toEqual({
|
|
foo: new SimpleChange(undefined, 'newestFoo', true),
|
|
});
|
|
|
|
e.setInputValue('foo', 'newesterFoo');
|
|
e.setInputValue('foo', 'newestestFoo');
|
|
e.detectChanges();
|
|
|
|
expect(component.lastChanges).toEqual({
|
|
foo: new SimpleChange('newestFoo', 'newestestFoo', false),
|
|
});
|
|
});
|
|
|
|
it('should throw when disconnected', () => {
|
|
const errorMessage =
|
|
'Calling \'setInputValue()\' on disconnected component \'TestComponent\' is not allowed.';
|
|
|
|
e.connectedCallback();
|
|
disconnectSync(e);
|
|
|
|
expect(() => e.setInputValue('foo', 'newFoo')).toThrowError(errorMessage);
|
|
});
|
|
});
|
|
|
|
describe('component lifecycle hooks', () => {
|
|
let log: string[];
|
|
|
|
beforeEach(() => {
|
|
log = [];
|
|
|
|
['AfterContentChecked', 'AfterContentInit', 'AfterViewChecked', 'AfterViewInit',
|
|
'DoCheck', 'OnChanges', 'OnDestroy', 'OnInit',
|
|
]
|
|
.forEach(
|
|
hook => spyOn(TestComponent.prototype, `ng${hook}` as keyof TestComponent)
|
|
.and.callFake(
|
|
() => log.push(`${hook}(${NgZone.isInAngularZone()})`)));
|
|
});
|
|
|
|
it('should be run on initialization (with initial input changes)', () => {
|
|
e.bar = 'newBar';
|
|
e.connectedCallback();
|
|
|
|
expect(log).toEqual([
|
|
// Initialization and local change detection, due to `detectChanges()` (from
|
|
// `connectedCallback()`).
|
|
'OnChanges(true)',
|
|
'OnInit(true)',
|
|
'DoCheck(true)',
|
|
'AfterContentInit(true)',
|
|
'AfterContentChecked(true)',
|
|
'AfterViewInit(true)',
|
|
'AfterViewChecked(true)',
|
|
// Global change detection, due to `ngZone.run()` (from `connectedCallback()`).
|
|
'DoCheck(true)',
|
|
'AfterContentChecked(true)',
|
|
'AfterViewChecked(true)',
|
|
]);
|
|
});
|
|
|
|
it('should be run on initialization (without initial input changes)', () => {
|
|
e.connectedCallback();
|
|
|
|
expect(log).toEqual([
|
|
// Initialization and local change detection, due to `detectChanges()` (from
|
|
// `connectedCallback()`).
|
|
'OnInit(true)',
|
|
'DoCheck(true)',
|
|
'AfterContentInit(true)',
|
|
'AfterContentChecked(true)',
|
|
'AfterViewInit(true)',
|
|
'AfterViewChecked(true)',
|
|
// Global change detection, due to `ngZone.run()` (from `connectedCallback()`).
|
|
'DoCheck(true)',
|
|
'AfterContentChecked(true)',
|
|
'AfterViewChecked(true)',
|
|
]);
|
|
});
|
|
|
|
it('should be run on explicit change detection (with input changes)', () => {
|
|
e.connectedCallback();
|
|
log.length = 0;
|
|
|
|
e.bar = 'newBar';
|
|
e.detectChanges();
|
|
|
|
expect(log).toEqual([
|
|
// Local change detection, due to `detectChanges()`.
|
|
'OnChanges(true)',
|
|
'DoCheck(true)',
|
|
'AfterContentChecked(true)',
|
|
'AfterViewChecked(true)',
|
|
// Global change detection, due to `ngZone.run()` (from `detectChanges()`).
|
|
'DoCheck(true)',
|
|
'AfterContentChecked(true)',
|
|
'AfterViewChecked(true)',
|
|
]);
|
|
});
|
|
|
|
it('should be run on explicit change detection (without input changes)', () => {
|
|
e.connectedCallback();
|
|
log.length = 0;
|
|
|
|
e.detectChanges();
|
|
|
|
expect(log).toEqual([
|
|
// Local change detection, due to `detectChanges()`.
|
|
'DoCheck(true)',
|
|
'AfterContentChecked(true)',
|
|
'AfterViewChecked(true)',
|
|
// Global change detection, due to `ngZone.run()` (from `detectChanges()`).
|
|
'DoCheck(true)',
|
|
'AfterContentChecked(true)',
|
|
'AfterViewChecked(true)',
|
|
]);
|
|
});
|
|
|
|
it('should be run on implicit change detection (with input changes)', () => {
|
|
const appRef = moduleRef.injector.get<ApplicationRef>(ApplicationRef);
|
|
|
|
e.connectedCallback();
|
|
log.length = 0;
|
|
|
|
e.bar = 'newBar';
|
|
appRef.tick();
|
|
|
|
expect(NgZone.isInAngularZone()).toBe(false);
|
|
expect(log).toEqual([
|
|
// Since inputs are updated outside of Angular
|
|
// `appRef` doesn't know about them (so no `ngOnChanges()`).
|
|
'DoCheck(false)',
|
|
'AfterContentChecked(false)',
|
|
'AfterViewChecked(false)',
|
|
]);
|
|
});
|
|
|
|
it('should be run on implicit change detection (without input changes)', () => {
|
|
const appRef = moduleRef.injector.get<ApplicationRef>(ApplicationRef);
|
|
|
|
e.connectedCallback();
|
|
log.length = 0;
|
|
|
|
appRef.tick();
|
|
|
|
expect(NgZone.isInAngularZone()).toBe(false);
|
|
expect(log).toEqual([
|
|
'DoCheck(false)',
|
|
'AfterContentChecked(false)',
|
|
'AfterViewChecked(false)',
|
|
]);
|
|
});
|
|
|
|
it('should be run on destruction', () => {
|
|
e.connectedCallback();
|
|
log.length = 0;
|
|
|
|
disconnectSync(e);
|
|
|
|
expect(log).toEqual([
|
|
'OnDestroy(true)',
|
|
]);
|
|
});
|
|
|
|
it('should not be run after destruction', () => {
|
|
const appRef = moduleRef.injector.get<ApplicationRef>(ApplicationRef);
|
|
|
|
e.connectedCallback();
|
|
disconnectSync(e);
|
|
log.length = 0;
|
|
|
|
appRef.tick();
|
|
|
|
expect(log).toEqual([]);
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
// Helpers
|
|
@Component({
|
|
selector: 'test-component-for-nge',
|
|
template: 'TestComponent|' +
|
|
'foo({{ foo }})|' +
|
|
'bar({{ bar }})|' +
|
|
'baz(<ng-content select=".baz"></ng-content>)|' +
|
|
'rest(<ng-content></ng-content>)',
|
|
})
|
|
class TestComponent implements AfterContentChecked,
|
|
AfterContentInit, AfterViewChecked, AfterViewInit, DoCheck, OnChanges, OnDestroy, OnInit {
|
|
@Input() foo: string = 'foo';
|
|
@Input('b-a-r') bar: string;
|
|
createdInNgZone = NgZone.isInAngularZone();
|
|
lastChanges: SimpleChanges;
|
|
|
|
@Output() baz = new EventEmitter<boolean>();
|
|
@Output('q-u-x') qux = new EventEmitter<object>();
|
|
|
|
constructor(@Inject('TEST_VALUE') public testValue: string) {}
|
|
|
|
ngOnChanges(changes: SimpleChanges) { this.lastChanges = changes; }
|
|
|
|
ngAfterContentChecked() {}
|
|
ngAfterContentInit() {}
|
|
ngAfterViewChecked() {}
|
|
ngAfterViewInit() {}
|
|
ngDoCheck() {}
|
|
ngOnDestroy() {}
|
|
ngOnInit() {}
|
|
}
|
|
|
|
@NgModule({
|
|
imports: [BrowserModule],
|
|
providers: [
|
|
{provide: 'TEST_VALUE', useValue: 'TEST'},
|
|
],
|
|
declarations: [TestComponent],
|
|
entryComponents: [TestComponent],
|
|
})
|
|
class TestModule {
|
|
ngDoBootstrap() {}
|
|
}
|
|
|
|
class TestNgElement extends NgElementImpl<TestComponent> {
|
|
static is = 'test-component-for-nge';
|
|
static observedAttributes = ['foo', 'b-a-r'];
|
|
|
|
get foo() { return this.getInputValue('foo'); }
|
|
set foo(v) { this.setInputValue('foo', v); }
|
|
|
|
get bar() { return this.getInputValue('bar'); }
|
|
set bar(v) { this.setInputValue('bar', v); }
|
|
|
|
constructor() {
|
|
const appContext = new NgElementApplicationContext(moduleRef.injector);
|
|
const factory = moduleRef.componentFactoryResolver.resolveComponentFactory(TestComponent);
|
|
|
|
const inputs = factory.inputs.map(({propName, templateName}) => ({
|
|
propName,
|
|
attrName: templateName,
|
|
}));
|
|
const outputs = factory.outputs.map(({propName, templateName}) => ({
|
|
propName,
|
|
eventName: templateName,
|
|
}));
|
|
|
|
super(appContext, factory, inputs, outputs);
|
|
}
|
|
}
|
|
|
|
// The `@webcomponents/custom-elements/src/native-shim.js` polyfill, that we use to enable
|
|
// ES2015 classes transpiled to ES5 constructor functions to be used as Custom Elements in
|
|
// tests, only works if the elements have been registered with `customElements.define()`.
|
|
customElements.define(TestNgElement.is, TestNgElement);
|
|
});
|
|
}
|