Skip to content

Commit

Permalink
feat(alias): Binding command aliases
Browse files Browse the repository at this point in the history
  • Loading branch information
@brandonseydel
brandonseydel committed Sep 11, 2019
1 parent 43f70b5 commit efffff8
Show file tree
Hide file tree
Showing 5 changed files with 153 additions and 55 deletions.
18 changes: 9 additions & 9 deletions packages/__tests__/jit-html/binding-behaviors.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ describe('value-converters', function () {
}


const customElementCtors: any[] = [WootConverter, WootConverter2, Foo4, Foo5];
const resources: any[] = [WootConverter, WootConverter2, Foo4, Foo5];
const App = class {
value = 'wOOt';
method = () => {
Expand All @@ -80,50 +80,50 @@ describe('value-converters', function () {
};

it('Simple spread Alias doesn\'t break def alias works on value converter', async function () {
const options = await setup('<template> <div foo53.bind="value & woot13:method"></div> </template>', App, ctx, true, customElementCtors);
const options = await setup('<template> <div foo53.bind="value & woot13:method"></div> </template>', App, ctx, true, resources);
assert.strictEqual(options.appHost.firstElementChild.getAttribute('test'), 'wOOt1');
await options.tearDown();
});

it('Simple spread Alias (1st position) works on value converter', async function () {
const options = await setup('<template> <div foo51.bind="value & woot11:method"></div> </template>', App, ctx, true, customElementCtors);
const options = await setup('<template> <div foo51.bind="value & woot11:method"></div> </template>', App, ctx, true, resources);
assert.strictEqual(options.appHost.firstElementChild.getAttribute('test'), 'wOOt1');
await options.tearDown();
});

it('Simple spread Alias (2nd position) works on value converter', async function () {
const options = await setup('<template> <div foo52.bind="value & woot12:method:method"></div> </template>', App, ctx, true, customElementCtors);
const options = await setup('<template> <div foo52.bind="value & woot12:method:method"></div> </template>', App, ctx, true, resources);
assert.strictEqual(options.appHost.firstElementChild.getAttribute('test'), 'wOOt1');
await options.tearDown();
});

it('Simple spread Alias doesn\'t break original value converter', async function () {
const options = await setup('<template> <div foo5.bind="value & woot2:method:method"></div> </template>', App, ctx, true, customElementCtors);
const options = await setup('<template> <div foo5.bind="value & woot2:method:method"></div> </template>', App, ctx, true, resources);
assert.strictEqual(options.appHost.firstElementChild.getAttribute('test'), 'wOOt1');
await options.tearDown();
});


it('Simple Alias doesn\'t break def alias works on value converter', async function () {
const options = await setup('<template> <div foo43.bind="value & woot23:method:method"></div> </template>', App, ctx, true, customElementCtors);
const options = await setup('<template> <div foo43.bind="value & woot23:method:method"></div> </template>', App, ctx, true, resources);
assert.strictEqual(options.appHost.firstElementChild.getAttribute('test'), 'wOOt1');
await options.tearDown();
});

it('Simple Alias (1st position) works on value converter', async function () {
const options = await setup('<template> <div foo41.bind="value & woot21:method:method"></div> </template>', App, ctx, true, customElementCtors);
const options = await setup('<template> <div foo41.bind="value & woot21:method:method"></div> </template>', App, ctx, true, resources);
assert.strictEqual(options.appHost.firstElementChild.getAttribute('test'), 'wOOt1');
await options.tearDown();
});

it('Simple Alias (2nd position) works on value converter', async function () {
const options = await setup('<template> <div foo42.bind="value & woot22:method:method"></div> </template>', App, ctx, true, customElementCtors);
const options = await setup('<template> <div foo42.bind="value & woot22:method:method"></div> </template>', App, ctx, true, resources);
assert.strictEqual(options.appHost.firstElementChild.getAttribute('test'), 'wOOt1');
await options.tearDown();
});

it('Simple Alias doesn\'t break original value converter', async function () {
const options = await setup('<template> <div foo4.bind="value & woot2:method:method"></div> </template>', App, ctx, true, customElementCtors);
const options = await setup('<template> <div foo4.bind="value & woot2:method:method"></div> </template>', App, ctx, true, resources);
assert.strictEqual(options.appHost.firstElementChild.getAttribute('test'), 'wOOt1');
await options.tearDown();
});
Expand Down
108 changes: 103 additions & 5 deletions packages/__tests__/jit-html/binding-commands.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,101 @@
import {
alias,
LifecycleFlags,
BindingType,
AttributeInstruction
} from '@aurelia/runtime';
import { HTMLTestContext, TestContext, assert, setup } from '@aurelia/testing';
import { IBindingCommand, PlainAttributeSymbol, BindingSymbol, bindingCommand, TwoWayBindingCommand, OneTimeBindingCommand } from '@aurelia/jit';

// TemplateCompiler - binding command integration
describe('binding-commans', function () {
let ctx: HTMLTestContext;

beforeEach(function () {
ctx = TestContext.createHTMLTestContext();
});

// custom elements
describe('01. Aliases', async function () {

@bindingCommand({ name: 'woot1', aliases: ['woot13'] })
@alias(...['woot11', 'woot12'])
class WootConverter implements IBindingCommand {
public readonly bindingType: BindingType.BindCommand = BindingType.BindCommand;

public compile(binding: PlainAttributeSymbol | BindingSymbol): AttributeInstruction {
return OneTimeBindingCommand.prototype.compile(binding);
}
}

@bindingCommand({ name: 'woot2', aliases: ['woot23'] })
@alias('woot21', 'woot22')
class WootConverter2 implements IBindingCommand {
public readonly bindingType: BindingType.BindCommand = BindingType.BindCommand;

public compile(binding: PlainAttributeSymbol | BindingSymbol): AttributeInstruction {
return OneTimeBindingCommand.prototype.compile(binding);
}
}

const resources: any[] = [WootConverter, WootConverter2];
const App = class {
value = 'wOOt';
};

it('Simple spread Alias doesn\'t break def alias works on value converter', async function () {
const options = await setup('<template> <a href.woot1="value"></a> </template>', App, ctx, true, resources);
assert.strictEqual(options.appHost.firstElementChild.getAttribute('href'), 'wOOt');
await options.tearDown();
});

it('Simple spread Alias (1st position) works on value converter', async function () {
const options = await setup('<template> <a href.woot11="value"></a> </template>', App, ctx, true, resources);
assert.strictEqual(options.appHost.firstElementChild.getAttribute('href'), 'wOOt');
await options.tearDown();
});

it('Simple spread Alias (2nd position) works on value converter', async function () {
const options = await setup('<template> <a href.woot12="value"></a> </template>', App, ctx, true, resources);
assert.strictEqual(options.appHost.firstElementChild.getAttribute('href'), 'wOOt');
await options.tearDown();
});

it('Simple spread Alias doesn\'t break original value converter', async function () {
const options = await setup('<template> <a href.woot13="value"></a> </template>', App, ctx, true, resources);
assert.strictEqual(options.appHost.firstElementChild.getAttribute('href'), 'wOOt');
await options.tearDown();
});


it('Simple Alias doesn\'t break def alias works on value converter', async function () {
const options = await setup('<template> <a href.woot23="value"></a> </template>', App, ctx, true, resources);
assert.strictEqual(options.appHost.firstElementChild.getAttribute('href'), 'wOOt');
await options.tearDown();
});

it('Simple Alias (1st position) works on value converter', async function () {
const options = await setup('<template> <a href.woot21="value"></a> </template>', App, ctx, true, resources);
assert.strictEqual(options.appHost.firstElementChild.getAttribute('href'), 'wOOt');
await options.tearDown();
});

it('Simple Alias (2nd position) works on value converter', async function () {
const options = await setup('<template> <a href.woot22="value"></a> </template>', App, ctx, true, resources);
assert.strictEqual(options.appHost.firstElementChild.getAttribute('href'), 'wOOt');
await options.tearDown();
});

it('Simple Alias doesn\'t break original value converter', async function () {
const options = await setup('<template> <a href.woot2="value"></a> </template>', App, ctx, true, resources);
assert.strictEqual(options.appHost.firstElementChild.getAttribute('href'), 'wOOt');
await options.tearDown();
});

});

});

// import { Aurelia, CustomElement as CE, IViewModel, LifecycleFlags as LF } from '@aurelia/runtime';
// import { IEventManager } from '@aurelia/runtime-html';
// import { HTMLTestContext, TestContext, TestConfiguration, setupAndStart, setupWithDocumentAndStart, tearDown } from '@aurelia/testing';
Expand Down Expand Up @@ -30,7 +128,7 @@

// // styleBinding - bind
// it('03.', function () {
// const { au, lifecycle, host, component } = setupAndStart(ctx, `<template><div style.bind="foo"></div></template>`, null);
// const { au, lifecycle, host, component } = setupAndStart(ctx, `<template><a style.bind="foo"></a></template>`, null);
// component.foo = 'color: green;';
// lifecycle.processFlushQueue(LF.none);
// assert.strictEqual((host.firstElementChild as HTMLElement).style.cssText, 'color: green;', `(host.firstElementChild as HTMLElement).style.cssText`);
Expand All @@ -39,7 +137,7 @@

// // styleBinding - interpolation
// it('04.', function () {
// const { au, lifecycle, host, component } = setupAndStart(ctx, `<template><div style="\${foo}"></div></template>`, null);
// const { au, lifecycle, host, component } = setupAndStart(ctx, `<template><a style="\${foo}"></a></template>`, null);
// component.foo = 'color: green;';
// lifecycle.processFlushQueue(LF.none);
// assert.strictEqual((host.firstElementChild as HTMLElement).style.cssText, 'color: green;', `(host.firstElementChild as HTMLElement).style.cssText`);
Expand All @@ -48,7 +146,7 @@

// // classBinding - bind
// it('05.', function () {
// const { au, lifecycle, host, component } = setupAndStart(ctx, `<template><div class.bind="foo"></div></template>`, null);
// const { au, lifecycle, host, component } = setupAndStart(ctx, `<template><a class.bind="foo"></a></template>`, null);
// component.foo = 'foo bar';
// lifecycle.processFlushQueue(LF.none);
// assert.strictEqual((host.firstElementChild as HTMLElement).classList.toString(), 'au foo bar', `(host.firstElementChild as HTMLElement).classList.toString()`);
Expand All @@ -57,7 +155,7 @@

// // classBinding - interpolation
// it('06.', function () {
// const { au, lifecycle, host, component } = setupAndStart(ctx, `<template><div class="\${foo}"></div></template>`, null);
// const { au, lifecycle, host, component } = setupAndStart(ctx, `<template><a class="\${foo}"></a></template>`, null);
// component.foo = 'foo bar';
// lifecycle.processFlushQueue(LF.none);
// assert.strictEqual((host.firstElementChild as HTMLElement).classList.toString(), 'au foo bar', `(host.firstElementChild as HTMLElement).classList.toString()`);
Expand Down Expand Up @@ -259,7 +357,7 @@
// }
// );

// const host = ctx.createElement('div');
// const host = ctx.createElement('a');
// const component = new App();

// component.a = 'x';
Expand Down
18 changes: 9 additions & 9 deletions packages/__tests__/jit-html/custom-attributes.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,53 +46,53 @@ describe('custom-attributes', function () {
}


const customElementCtors: any[] = [Foo4, Foo5];
const resources: any[] = [Foo4, Foo5];

it('Simple spread Alias doesn\'t break def alias works on custom attribute', async function () {
const options = await setup('<template> <div foo53.bind="value"></div> </template>', class { value = 'wOOt' }, ctx, true, customElementCtors);
const options = await setup('<template> <div foo53.bind="value"></div> </template>', class { value = 'wOOt' }, ctx, true, resources);
assert.strictEqual(options.appHost.firstElementChild.getAttribute('test'), 'wOOt');
await options.tearDown();
});

it('Simple spread Alias (1st position) works on custom attribute', async function () {
const options = await setup('<template> <div foo51.bind="value"></div> </template>', class { value = 'wOOt' }, ctx, true, customElementCtors);
const options = await setup('<template> <div foo51.bind="value"></div> </template>', class { value = 'wOOt' }, ctx, true, resources);
assert.strictEqual(options.appHost.firstElementChild.getAttribute('test'), 'wOOt');
await options.tearDown();
});

it('Simple spread Alias (2nd position) works on custom attribute', async function () {
const options = await setup('<template> <div foo52.bind="value"></div> </template>', class { value = 'wOOt' }, ctx, true, customElementCtors);
const options = await setup('<template> <div foo52.bind="value"></div> </template>', class { value = 'wOOt' }, ctx, true, resources);
assert.strictEqual(options.appHost.firstElementChild.getAttribute('test'), 'wOOt');
await options.tearDown();
});

it('Simple spread Alias doesn\'t break original custom attribute', async function () {
const options = await setup('<template> <div foo5.bind="value"></div> </template>', class { value = 'wOOt' }, ctx, true, customElementCtors);
const options = await setup('<template> <div foo5.bind="value"></div> </template>', class { value = 'wOOt' }, ctx, true, resources);
assert.strictEqual(options.appHost.firstElementChild.getAttribute('test'), 'wOOt');
await options.tearDown();
});


it('Simple Alias doesn\'t break def alias works on custom attribute', async function () {
const options = await setup('<template> <div foo43.bind="value"></div> </template>', class { value = 'wOOt' }, ctx, true, customElementCtors);
const options = await setup('<template> <div foo43.bind="value"></div> </template>', class { value = 'wOOt' }, ctx, true, resources);
assert.strictEqual(options.appHost.firstElementChild.getAttribute('test'), 'wOOt');
await options.tearDown();
});

it('Simple Alias (1st position) works on custom attribute', async function () {
const options = await setup('<template> <div foo41.bind="value"></div> </template>', class { value = 'wOOt' }, ctx, true, customElementCtors);
const options = await setup('<template> <div foo41.bind="value"></div> </template>', class { value = 'wOOt' }, ctx, true, resources);
assert.strictEqual(options.appHost.firstElementChild.getAttribute('test'), 'wOOt');
await options.tearDown();
});

it('Simple Alias (2nd position) works on custom attribute', async function () {
const options = await setup('<template> <div foo42.bind="value"></div> </template>', class { value = 'wOOt' }, ctx, true, customElementCtors);
const options = await setup('<template> <div foo42.bind="value"></div> </template>', class { value = 'wOOt' }, ctx, true, resources);
assert.strictEqual(options.appHost.firstElementChild.getAttribute('test'), 'wOOt');
await options.tearDown();
});

it('Simple Alias doesn\'t break original custom attribute', async function () {
const options = await setup('<template> <div foo4.bind="value"></div> </template>', class { value = 'wOOt' }, ctx, true, customElementCtors);
const options = await setup('<template> <div foo4.bind="value"></div> </template>', class { value = 'wOOt' }, ctx, true, resources);
assert.strictEqual(options.appHost.firstElementChild.getAttribute('test'), 'wOOt');
await options.tearDown();
});
Expand Down
Loading

0 comments on commit efffff8

Please sign in to comment.