@ -53,11 +53,13 @@ describe('ComponentFactoryNgElementStrategy', () => {
|
||||
strategy.connect(document.createElement('div'));
|
||||
});
|
||||
|
||||
it('should attach the component to the view',
|
||||
() => { expect(applicationRef.attachView).toHaveBeenCalledWith(componentRef.hostView); });
|
||||
it('should attach the component to the view', () => {
|
||||
expect(applicationRef.attachView).toHaveBeenCalledWith(componentRef.hostView);
|
||||
});
|
||||
|
||||
it('should detect changes',
|
||||
() => { expect(componentRef.changeDetectorRef.detectChanges).toHaveBeenCalled(); });
|
||||
it('should detect changes', () => {
|
||||
expect(componentRef.changeDetectorRef.detectChanges).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should listen to output events', () => {
|
||||
const events: NgElementStrategyEvent[] = [];
|
||||
@ -140,7 +142,9 @@ describe('ComponentFactoryNgElementStrategy', () => {
|
||||
});
|
||||
|
||||
describe('when inputs change and is connected', () => {
|
||||
beforeEach(() => { strategy.connect(document.createElement('div')); });
|
||||
beforeEach(() => {
|
||||
strategy.connect(document.createElement('div'));
|
||||
});
|
||||
|
||||
it('should be set on the component instance', () => {
|
||||
strategy.setInputValue('fooFoo', 'fooFoo-1');
|
||||
@ -249,7 +253,9 @@ export class FakeComponent {
|
||||
// Keep track of the simple changes passed to ngOnChanges
|
||||
simpleChanges: SimpleChanges[] = [];
|
||||
|
||||
ngOnChanges(simpleChanges: SimpleChanges) { this.simpleChanges.push(simpleChanges); }
|
||||
ngOnChanges(simpleChanges: SimpleChanges) {
|
||||
this.simpleChanges.push(simpleChanges);
|
||||
}
|
||||
}
|
||||
|
||||
export class FakeComponentFactory extends ComponentFactory<any> {
|
||||
@ -263,9 +269,15 @@ export class FakeComponentFactory extends ComponentFactory<any> {
|
||||
jasmine.createSpyObj('changeDetectorRef', ['detectChanges']);
|
||||
}
|
||||
|
||||
get selector(): string { return 'fake-component'; }
|
||||
get componentType(): Type<any> { return FakeComponent; }
|
||||
get ngContentSelectors(): string[] { return ['content-1', 'content-2']; }
|
||||
get selector(): string {
|
||||
return 'fake-component';
|
||||
}
|
||||
get componentType(): Type<any> {
|
||||
return FakeComponent;
|
||||
}
|
||||
get ngContentSelectors(): string[] {
|
||||
return ['content-1', 'content-2'];
|
||||
}
|
||||
get inputs(): {propName: string; templateName: string}[] {
|
||||
return [
|
||||
{propName: 'fooFoo', templateName: 'fooFoo'},
|
||||
@ -293,8 +305,9 @@ export class FakeComponentFactory extends ComponentFactory<any> {
|
||||
}
|
||||
|
||||
function expectSimpleChanges(actual: SimpleChanges, expected: SimpleChanges) {
|
||||
Object.keys(actual).forEach(
|
||||
key => { expect(expected[key]).toBeTruthy(`Change included additional key ${key}`); });
|
||||
Object.keys(actual).forEach(key => {
|
||||
expect(expected[key]).toBeTruthy(`Change included additional key ${key}`);
|
||||
});
|
||||
|
||||
Object.keys(expected).forEach(key => {
|
||||
expect(actual[key]).toBeTruthy(`Change should have included key ${key}`);
|
||||
|
@ -6,13 +6,13 @@
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {Component, DoBootstrap, EventEmitter, Injector, Input, NgModule, Output, destroyPlatform} from '@angular/core';
|
||||
import {Component, destroyPlatform, DoBootstrap, EventEmitter, Injector, Input, NgModule, Output} from '@angular/core';
|
||||
import {BrowserModule} from '@angular/platform-browser';
|
||||
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
|
||||
import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
|
||||
import {Subject} from 'rxjs';
|
||||
|
||||
import {NgElementConstructor, createCustomElement} from '../src/create-custom-element';
|
||||
import {createCustomElement, NgElementConstructor} from '../src/create-custom-element';
|
||||
import {NgElementStrategy, NgElementStrategyEvent, NgElementStrategyFactory} from '../src/element-strategy';
|
||||
|
||||
type WithFooBar = {
|
||||
@ -105,7 +105,7 @@ if (browserDetection.supportsCustomElements) {
|
||||
class TestComponent {
|
||||
@Input() fooFoo: string = 'foo';
|
||||
// TODO(issue/24571): remove '!'.
|
||||
@Input('barbar') barBar !: string;
|
||||
@Input('barbar') barBar!: string;
|
||||
|
||||
@Output() bazBaz = new EventEmitter<boolean>();
|
||||
@Output('quxqux') quxQux = new EventEmitter<Object>();
|
||||
@ -126,17 +126,27 @@ export class TestStrategy implements NgElementStrategy {
|
||||
|
||||
events = new Subject<NgElementStrategyEvent>();
|
||||
|
||||
connect(element: HTMLElement): void { this.connectedElement = element; }
|
||||
connect(element: HTMLElement): void {
|
||||
this.connectedElement = element;
|
||||
}
|
||||
|
||||
disconnect(): void { this.disconnectCalled = true; }
|
||||
disconnect(): void {
|
||||
this.disconnectCalled = true;
|
||||
}
|
||||
|
||||
getInputValue(propName: string): any { return this.inputs.get(propName); }
|
||||
getInputValue(propName: string): any {
|
||||
return this.inputs.get(propName);
|
||||
}
|
||||
|
||||
setInputValue(propName: string, value: string): void { this.inputs.set(propName, value); }
|
||||
setInputValue(propName: string, value: string): void {
|
||||
this.inputs.set(propName, value);
|
||||
}
|
||||
}
|
||||
|
||||
export class TestStrategyFactory implements NgElementStrategyFactory {
|
||||
testStrategy = new TestStrategy();
|
||||
|
||||
create(): NgElementStrategy { return this.testStrategy; }
|
||||
create(): NgElementStrategy {
|
||||
return this.testStrategy;
|
||||
}
|
||||
}
|
||||
|
@ -6,12 +6,12 @@
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {Component, ComponentFactoryResolver, EventEmitter, Input, NgModule, Output, ViewEncapsulation, destroyPlatform} from '@angular/core';
|
||||
import {Component, ComponentFactoryResolver, destroyPlatform, EventEmitter, Input, NgModule, Output, ViewEncapsulation} from '@angular/core';
|
||||
import {BrowserModule} from '@angular/platform-browser';
|
||||
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
|
||||
import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
|
||||
|
||||
import {NgElement, createCustomElement} from '../src/create-custom-element';
|
||||
import {createCustomElement, NgElement} from '../src/create-custom-element';
|
||||
|
||||
|
||||
// we only run these tests in browsers that support Shadom DOM slots natively
|
||||
@ -46,9 +46,9 @@ if (browserDetection.supportsCustomElements && browserDetection.supportsShadowDo
|
||||
it('should use slots to project content', () => {
|
||||
const tpl = `<default-slot-el><span class="projected"></span></default-slot-el>`;
|
||||
testContainer.innerHTML = tpl;
|
||||
const testEl = testContainer.querySelector('default-slot-el') !;
|
||||
const content = testContainer.querySelector('span.projected') !;
|
||||
const slot = testEl.shadowRoot !.querySelector('slot') !;
|
||||
const testEl = testContainer.querySelector('default-slot-el')!;
|
||||
const content = testContainer.querySelector('span.projected')!;
|
||||
const slot = testEl.shadowRoot!.querySelector('slot')!;
|
||||
const assignedNodes = slot.assignedNodes();
|
||||
expect(assignedNodes[0]).toBe(content);
|
||||
});
|
||||
@ -56,9 +56,9 @@ if (browserDetection.supportsCustomElements && browserDetection.supportsShadowDo
|
||||
it('should use a named slot to project content', () => {
|
||||
const tpl = `<named-slot-el><span class="projected" slot="header"></span></named-slot-el>`;
|
||||
testContainer.innerHTML = tpl;
|
||||
const testEl = testContainer.querySelector('named-slot-el') !;
|
||||
const content = testContainer.querySelector('span.projected') !;
|
||||
const slot = testEl.shadowRoot !.querySelector('slot[name=header]') as HTMLSlotElement;
|
||||
const testEl = testContainer.querySelector('named-slot-el')!;
|
||||
const content = testContainer.querySelector('span.projected')!;
|
||||
const slot = testEl.shadowRoot!.querySelector('slot[name=header]') as HTMLSlotElement;
|
||||
const assignedNodes = slot.assignedNodes();
|
||||
expect(assignedNodes[0]).toBe(content);
|
||||
});
|
||||
@ -70,11 +70,11 @@ if (browserDetection.supportsCustomElements && browserDetection.supportsShadowDo
|
||||
<span class="projected-body" slot="body"></span>
|
||||
</named-slots-el>`;
|
||||
testContainer.innerHTML = tpl;
|
||||
const testEl = testContainer.querySelector('named-slots-el') !;
|
||||
const headerContent = testContainer.querySelector('span.projected-header') !;
|
||||
const bodyContent = testContainer.querySelector('span.projected-body') !;
|
||||
const headerSlot = testEl.shadowRoot !.querySelector('slot[name=header]') as HTMLSlotElement;
|
||||
const bodySlot = testEl.shadowRoot !.querySelector('slot[name=body]') as HTMLSlotElement;
|
||||
const testEl = testContainer.querySelector('named-slots-el')!;
|
||||
const headerContent = testContainer.querySelector('span.projected-header')!;
|
||||
const bodyContent = testContainer.querySelector('span.projected-body')!;
|
||||
const headerSlot = testEl.shadowRoot!.querySelector('slot[name=header]') as HTMLSlotElement;
|
||||
const bodySlot = testEl.shadowRoot!.querySelector('slot[name=body]') as HTMLSlotElement;
|
||||
|
||||
expect(headerContent.assignedSlot).toBe(headerSlot);
|
||||
expect(bodyContent.assignedSlot).toBe(bodySlot);
|
||||
@ -88,7 +88,7 @@ if (browserDetection.supportsCustomElements && browserDetection.supportsShadowDo
|
||||
</slot-events-el>`;
|
||||
templateEl.innerHTML = tpl;
|
||||
const template = templateEl.content.cloneNode(true) as DocumentFragment;
|
||||
const testEl = template.querySelector('slot-events-el') !as NgElement & SlotEventsComponent;
|
||||
const testEl = template.querySelector('slot-events-el')! as NgElement & SlotEventsComponent;
|
||||
testEl.addEventListener('slotEventsChange', e => {
|
||||
expect(testEl.slotEvents.length).toEqual(1);
|
||||
done();
|
||||
|
Reference in New Issue
Block a user