it('100', function () {
const App = CE.define(
{
name: 'app',
template: '${a}<foo b.two-way="a"></foo>',
dependencies: [
CE.define(
{
name: 'foo',
template: '${b}',
bindables: ['b']
},
class {
public b: string;
public attached(this: this & ICustomElement<Node>): void {
expect(this.b).to.equal('x');
expect(this.$host.textContent).to.equal('x');
this.b = 'y';
}
}
)
]
},
class {
public a: string;
public bound(this: this & ICustomElement<Node>): void {
expect(this.a).to.equal('x');
}
public attached(this: this & ICustomElement<Node>): void {
expect(this.a).to.equal('y');
expect(this.$host.textContent).to.equal('xx');
}
}
);
const host = ctx.createElement('div');
const component = new App();
component.a = 'x';
const au = new Aurelia(ctx.container);
au.app({ host, component });
au.start();
expect(host.textContent).to.equal('xx');
ctx.lifecycle.processFlushQueue(LF.none);
expect(component.a).to.equal('y');
expect(host.textContent).to.equal('yy');
});
export function registerComponent(container, ...components) {
for (const component of components) {
const name = component.description ? component.description.name : component.name;
container.register(component);
Registration.alias(CustomElementResource.keyFrom(name), component).register(container);
}
}
it(`bindSpec ${bindSpec.t}, templateSpec ${templateSpec.t}`, function () {
const { forof, item, expected, initialize } = bindSpec;
const { createTemplate } = templateSpec;
const ctx = TestContext.createHTMLTestContext();
const { container } = ctx;
container.register(TestConfiguration);
const markup = createTemplate(forof, item);
const App = CustomElementResource.define({ name: 'app', template: markup }, class {});
const host = ctx.createElement('div');
const component = new App();
initialize(component);
const au = new Aurelia(container);
au.app({ host, component });
au.start();
expect(host.textContent).to.equal(expected);
au.stop();
expect(host.textContent).to.equal('');
});
it(`@containerless yields ContainerlessProjector (with child)`, function () {
const parent = ctx.createElement('div');
const host = ctx.createElement('div');
const child = ctx.createElement('div');
parent.appendChild(host);
host.appendChild(child);
const Foo = CustomElementResource.define(
{
name: 'foo',
containerless: true
},
class {}
) as ICustomElementType<Node>;
const component = new Foo();
const projector = locator.getElementProjector(dom, component, host, Foo.description);
expect(projector).to.be.instanceof(ContainerlessProjector);
expect(projector['childNodes'][0]).to.equal(child);
expect(host.parentNode).to.equal(null);
expect(parent.firstChild).to.be.instanceof(ctx.Comment);
expect(parent.firstChild.textContent).to.equal('au-start');
expect(parent.lastChild).to.be.instanceof(ctx.Comment);
expect(parent.lastChild.textContent).to.equal('au-end');
expect(parent.firstChild.nextSibling['$customElement']).to.equal(component);
expect(projector.provideEncapsulationSource()).not.to.equal(projector['host']);
expect(projector.provideEncapsulationSource()).to.equal(parent);
});
export function hydrateCustomElement<T>(Type: Constructable<T>, ctx: HTMLTestContext) {
const { container, dom } = ctx;
const ElementType: ICustomElementType = Type as any;
const parent = ctx.createElement('div');
const host = ctx.createElement(ElementType.description.name);
const renderable = new FakeView(ctx);
const instruction: IHydrateElementInstruction = {
type: TargetedInstructionType.hydrateElement,
res: 'au-compose',
instructions: []
};
dom.appendChild(parent, host);
const renderableProvider = new InstanceProvider();
const elementProvider = new InstanceProvider();
const instructionProvider = new InstanceProvider<ITargetedInstruction>();
renderableProvider.prepare(renderable);
elementProvider.prepare(host);
instructionProvider.prepare(instruction);
container.register(ElementType);
container.registerResolver(IRenderable, renderableProvider);
container.registerResolver(ITargetedInstruction, instructionProvider);
dom.registerElementResolver(container, elementProvider);
const element = container.get<T & ICustomElement>(
CustomElementResource.keyFrom(ElementType.description.name)
) as T & ICustomElement & InstanceType<typeof Type>;
element.$hydrate(LF.none, container, host);
return { element, parent };
}
public componentType(context: IRenderContext): IRouteableCustomElementType {
if (this.component !== null) {
return this.component;
}
const container = context.get(IContainer);
const resolver = container.getResolver(CustomElementResource.keyFrom(this.componentName));
if (resolver !== null) {
return resolver.getFactory(container).Type as IRouteableCustomElementType;
}
return null;
}
public componentInstance(context: IRenderContext): IRouteableCustomElement {
if (this.content === null) {
return null;
}
// TODO: Remove once "local registration is fixed"
const component = this.componentName();
const container = context.get(IContainer);
if (typeof component !== 'string') {
return container.get<IRouteableCustomElement>(component);
} else {
return container.get<IRouteableCustomElement>(CustomElementResource.keyFrom(component));
}
}
req(depsToLoad, function (): void {
const templateImport = parseImport(name);
const templateSource = {
name: kebabCase(templateImport.basename),
template: description.template,
build: {
required: true,
compiler: 'default'
},
dependencies: Array.prototype.slice.call(arguments, 1)
};
onLoad({default: CustomElementResource.define(templateSource, null)});
});
it(`@containerless + hasSlots throws`, function () {
const host = ctx.createElement('div');
const Foo = CustomElementResource.define(
{
name: 'foo',
containerless: true,
hasSlots: true
},
class {}
) as ICustomElementType<Node>;
const component = new Foo();
expect(() => locator.getElementProjector(dom, component, host, Foo.description)).to.throw(/21/);
});
it(`no shadowDOM, slots or containerless yields HostProjector`, function () {
const host = ctx.createElement('div');
const Foo = CustomElementResource.define(
{
name: 'foo'
},
class {}
) as ICustomElementType<Node>;
const component = new Foo();
const projector = locator.getElementProjector(dom, component, host, Foo.description);
expect(host['$customElement']).to.equal(component);
expect(projector).to.be.instanceof(HostProjector);
expect(projector.children).to.equal(projector.host.childNodes);
expect(projector.provideEncapsulationSource()).to.equal(host);
});
