feat(alias): Cleanup and tests added

aurelia · Sep 10, 2019 · 5cabba3 · 5cabba3
1 parent d92bfd2
commit 5cabba3
Show file tree

Hide file tree

Showing 11 changed files with 516 additions and 48 deletions.
diff --git a/packages/__tests__/jit-html/binding-behaviors.spec.ts b/packages/__tests__/jit-html/binding-behaviors.spec.ts
@@ -0,0 +1,133 @@
+import {
+    bindable,
+    alias,
+    customAttribute,
+    INode,
+    bindingBehavior,
+    IBindingBehavior,
+    LifecycleFlags,
+    IScope,
+    IBinding,
+    PropertyBinding
+} from '@aurelia/runtime';
+import { HTMLTestContext, TestContext, assert, setup } from '@aurelia/testing';
+
+// TemplateCompiler - value converter integration
+describe('value-converters', function () {
+    let ctx: HTMLTestContext;
+
+    beforeEach(function () {
+        ctx = TestContext.createHTMLTestContext();
+    });
+
+    // custom elements
+    describe('01. Aliases', async function () {
+
+        @bindingBehavior({ name: 'woot1', aliases: ['woot13'] })
+        @alias(...['woot11', 'woot12'])
+        class WootConverter implements IBindingBehavior<() => void> {
+            bind(flags: LifecycleFlags, scope: IScope, binding: PropertyBinding, func: (param: string) => void): void {
+                func(binding.target[binding.targetProperty]);
+            }
+            unbind(flags: LifecycleFlags, scope: IScope, binding: IBinding, func: () => void): void {
+            }
+        }
+
+        @bindingBehavior({ name: 'woot2', aliases: ['woot23'] })
+        @alias('woot21', 'woot22')
+        class WootConverter2 implements IBindingBehavior<() => void> {
+            bind(flags: LifecycleFlags, scope: IScope, binding: PropertyBinding, func: (param: string) => void, func2: (param: string) => void): void {
+                func2(binding.target[binding.targetProperty]);
+            }
+            unbind(flags: LifecycleFlags, scope: IScope, binding: IBinding): void {
+            }
+        }
+
+        @customAttribute({ name: 'foo5', aliases: ['foo53'] })
+        @alias(...['foo51', 'foo52'])
+        class Foo5 {
+            @bindable({ primary: true })
+            public value: any;
+            constructor(@INode private readonly element: Element) {
+            }
+
+            bound() {
+                this.element.setAttribute('test', this.value);
+            }
+        }
+
+
+        @customAttribute({ name: 'foo4', aliases: ['foo43'] })
+        @alias('foo41', 'foo42')
+        class Foo4 {
+            @bindable({ primary: true })
+            public value: any;
+            constructor(@INode private readonly element: Element) {
+            }
+
+            bound() {
+                this.element.setAttribute('test', this.value);
+            }
+        }
+
+
+        const customElementCtors: any[] = [WootConverter, WootConverter2, Foo4, Foo5];
+        const App = class {
+            value = 'wOOt';
+            method = () => {
+                this.value = 'wOOt1';
+            }
+        };
+
+        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);
+            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);
+            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);
+            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);
+            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);
+            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);
+            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);
+            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);
+            assert.strictEqual(options.appHost.firstElementChild.getAttribute('test'), 'wOOt1');
+            await options.tearDown();
+        });
+
+    });
+
+});
diff --git a/packages/__tests__/jit-html/custom-attributes.spec.ts b/packages/__tests__/jit-html/custom-attributes.spec.ts
@@ -0,0 +1,102 @@
+import {
+    bindable,
+    alias,
+    customAttribute,
+    INode
+} from '@aurelia/runtime';
+import { HTMLTestContext, TestContext, assert, setup } from '@aurelia/testing';
+
+;
+
+// TemplateCompiler - custom element integration
+describe('custom-attributes', function () {
+    let ctx: HTMLTestContext;
+
+    beforeEach(function () {
+        ctx = TestContext.createHTMLTestContext();
+    });
+
+    // custom elements
+    describe('01. Aliases', async function () {
+
+        @customAttribute({ name: 'foo5', aliases: ['foo53'] })
+        @alias(...['foo51', 'foo52'])
+        class Foo5 {
+            @bindable({ primary: true })
+            public value: any;
+            constructor(@INode private readonly element: Element) {
+            }
+
+            bound() {
+                this.element.setAttribute('test', this.value);
+            }
+        }
+
+        @customAttribute({ name: 'foo4', aliases: ['foo43'] })
+        @alias('foo41', 'foo42')
+        class Foo4 {
+            @bindable({ primary: true })
+            public value: any;
+            constructor(@INode private readonly element: Element) {
+            }
+
+            bound() {
+                this.element.setAttribute('test', this.value);
+            }
+        }
+
+
+        const customElementCtors: 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);
+            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);
+            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);
+            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);
+            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);
+            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);
+            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);
+            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);
+            assert.strictEqual(options.appHost.firstElementChild.getAttribute('test'), 'wOOt');
+            await options.tearDown();
+        });
+
+    });
+
+});
diff --git a/packages/__tests__/jit-html/custom-elements.spec.ts b/packages/__tests__/jit-html/custom-elements.spec.ts
@@ -2,7 +2,8 @@ import {
     bindable,
     customElement,
     CustomElement,
-    LifecycleFlags
+    LifecycleFlags,
+    alias
 } from '@aurelia/runtime';
 import { HTMLTestContext, TestContext, TestConfiguration, assert, setup } from '@aurelia/testing';
 import { Registration } from '@aurelia/kernel';
@@ -31,7 +32,7 @@ describe('custom-elements', function () {
         //works with custom element with [as-element]
         it('01.', async function () {
             ctx.container.register(TestConfiguration);
-            const { tearDown, appHost} = setup(`<template><div as-element="name-tag" name="bigopon"></div></template>`, class { }, ctx);
+            const { tearDown, appHost } = setup(`<template><div as-element="name-tag" name="bigopon"></div></template>`, class { }, ctx);
 
             assert.strictEqual(appHost.textContent, 'bigopon', `host.textContent`);
             await tearDown();
@@ -272,6 +273,7 @@ describe('custom-elements', function () {
     });
 
     describe('06. Aliasing', async function () {
+
         @customElement({ name: 'foo1', template: `<template><foo2 value.bind="value" value2.bind="value1"></foo2>\${value}</template>`, aliases: ['foo11', 'foo12'] })
         class Foo1 {
             @bindable()
@@ -307,18 +309,79 @@ describe('custom-elements', function () {
             }
         }
 
-        const customElementCtors: any[] = [Foo1, Foo2, Foo3];
+        @customElement({ name: 'foo4', template: `<template><foo2 value.bind="value" value2.bind="value1"></foo2>\${value}</template>`, aliases: ['foo43'] })
+        @alias('foo41', 'foo42')
+        class Foo4 {
+            @bindable()
+            public value: any;
+            public value1: any;
+            public binding() { this.valueChanged(); }
+            public valueChanged(): void {
+                this.value1 = `${this.value}1`;
+            }
+        }
+
+        @customElement({ name: 'foo5', template: `<template><foo2 value.bind="value" value2.bind="value1"></foo2>\${value}</template>`, aliases: ['foo53'] })
+        @alias(...['foo51', 'foo52'])
+        class Foo5 {
+            @bindable()
+            public value: any;
+            public value1: any;
+            public binding() { this.valueChanged(); }
+            public valueChanged(): void {
+                this.value1 = `${this.value}1`;
+            }
+        }
+
+        const customElementCtors: any[] = [Foo1, Foo2, Foo3, Foo4, Foo5];
         it('Simple Alias doesn\'t break original', async function () {
             const options = await setup('<template><foo1 value.bind="value"></foo1>${value}</template>', class { value = 'wOOt' }, ctx, true, customElementCtors);
             assert.strictEqual(options.appHost.textContent, 'wOOt'.repeat(3));
             await options.tearDown();
         });
 
+        it('Simple Alias with decorator doesn\'t break original', async function () {
+            const options = await setup('<template><foo4 value.bind="value"></foo4>${value}</template>', class { value = 'wOOt' }, ctx, true, customElementCtors);
+            assert.strictEqual(options.appHost.textContent, 'wOOt'.repeat(3));
+            await options.tearDown();
+        });
+
+        it('Simple Alias with decorator doesn\'t break origianl aliases', async function () {
+            const options = await setup('<template><foo43 value.bind="value"></foo43>${value}</template>', class { value = 'wOOt' }, ctx, true, customElementCtors);
+            assert.strictEqual(options.appHost.textContent, 'wOOt'.repeat(3));
+            await options.tearDown();
+        });
+
         it('Simple Alias Works', async function () {
             const options = await setup('<template><foo11 value.bind="value"></foo11>${value}</template>', class { value = 'wOOt' }, ctx, true, customElementCtors);
             assert.strictEqual(options.appHost.textContent, 'wOOt'.repeat(3));
             await options.tearDown();
         });
+
+        it('Simple Alias with decorator 1st position works as expected', async function () {
+            const options = await setup('<template><foo41 value.bind="value"></foo41>${value}</template>', class { value = 'wOOt' }, ctx, true, customElementCtors);
+            assert.strictEqual(options.appHost.textContent, 'wOOt'.repeat(3));
+            await options.tearDown();
+        });
+
+        it('Simple Alias with decorator 2nd position works as expected', async function () {
+            const options = await setup('<template><foo42 value.bind="value"></foo42>${value}</template>', class { value = 'wOOt' }, ctx, true, customElementCtors);
+            assert.strictEqual(options.appHost.textContent, 'wOOt'.repeat(3));
+            await options.tearDown();
+        });
+
+        it('Simple Alias with spread decorator 1st position works as expected', async function () {
+            const options = await setup('<template><foo51 value.bind="value"></foo51>${value}</template>', class { value = 'wOOt' }, ctx, true, customElementCtors);
+            assert.strictEqual(options.appHost.textContent, 'wOOt'.repeat(3));
+            await options.tearDown();
+        });
+
+        it('Simple Alias with spread decorator 2nd position works as expected', async function () {
+            const options = await setup('<template><foo52 value.bind="value"></foo52>${value}</template>', class { value = 'wOOt' }, ctx, true, customElementCtors);
+            assert.strictEqual(options.appHost.textContent, 'wOOt'.repeat(3));
+            await options.tearDown();
+        });
+
         it('Simple Alias element referencing another alias', async function () {
             const options = await setup('<template><foo31 value.bind="value"></foo31>${value}</template>', class { value = 'wOOt' }, ctx, true, customElementCtors);
             assert.strictEqual(options.appHost.textContent, 'wOOt'.repeat(4));