From 4059d82c2624617adb339f665b559d342ad21533 Mon Sep 17 00:00:00 2001 From: Zack Date: Wed, 15 Jun 2016 22:20:16 -0700 Subject: [PATCH] Support for positional params in EmberishCurlyComponent for test environment (#188) * Update positional params test to new test style, test is failing * Use ProcessedArgs to allow for positional params in test environment --- .../tests/ember-component-test.ts | 47 +++++++-------- .../glimmer-test-helpers/lib/environment.ts | 58 ++++++++++++++++--- 2 files changed, 75 insertions(+), 30 deletions(-) diff --git a/packages/glimmer-runtime/tests/ember-component-test.ts b/packages/glimmer-runtime/tests/ember-component-test.ts index 9c86f0676..e08427f67 100644 --- a/packages/glimmer-runtime/tests/ember-component-test.ts +++ b/packages/glimmer-runtime/tests/ember-component-test.ts @@ -1375,33 +1375,34 @@ QUnit.skip('dynamic arbitrary number of positional parameters', function() { // assertElementIsEmberishElement(second, 'div', { id: 'helper' }, 'Bar6'); }); -// QUnit.skip('{{component}} helper works with positional params', function() { -// let SampleComponent = Component.extend(); -// SampleComponent.reopenClass({ -// positionalParams: ['name', 'age'] -// }); +QUnit.test('{{component}} helper works with positional params', function() { + let SampleComponent = EmberishCurlyComponent.extend(); -// registry.register('template:components/sample-component', compile('{{attrs.name}}{{attrs.age}}')); -// registry.register('component:sample-component', SampleComponent); + SampleComponent.reopenClass({ + positionalParams: ['name', 'age'] + }); -// view = EmberView.extend({ -// layout: compile('{{component "sample-component" myName myAge}}'), -// container: container, -// context: { -// myName: 'Quint', -// myAge: 4 -// } -// }).create(); + env.registerEmberishCurlyComponent('sample-component', SampleComponent as any, `{{attrs.name}}{{attrs.age}}`); -// runAppend(view); -// equal(jQuery('#qunit-fixture').text(), 'Quint4'); -// run(function() { -// set(view.context, 'myName', 'Edward'); -// set(view.context, 'myAge', '5'); -// }); + appendViewFor(`{{component "sample-component" myName myAge}}`, { + myName: 'Quint', + myAge: 4 + }); -// equal(jQuery('#qunit-fixture').text(), 'Edward5'); -// }); + assertEmberishElement('div', 'Quint4'); + + set(view, 'myName', 'Edward'); + set(view, 'myAge', '5'); + rerender(); + + assertEmberishElement('div', 'Edward5'); + + set(view, 'myName', 'Quint'); + set(view, 'myAge', '4'); + rerender(); + + assertEmberishElement('div', 'Quint4'); +}); module("Emberish Components - parentView"); diff --git a/packages/glimmer-test-helpers/lib/environment.ts b/packages/glimmer-test-helpers/lib/environment.ts index 572175e15..0f027f4e6 100644 --- a/packages/glimmer-test-helpers/lib/environment.ts +++ b/packages/glimmer-test-helpers/lib/environment.ts @@ -37,6 +37,8 @@ import { // Values EvaluatedArgs, + EvaluatedNamedArgs, + EvaluatedPositionalArgs, // Syntax Classes StatementSyntax, @@ -83,7 +85,8 @@ import { OpaqueIterable, AbstractIterable, IterationItem, - isConst + isConst, + combine } from "glimmer-reference"; import { @@ -232,6 +235,7 @@ export class EmberishCurlyComponent extends GlimmerObject { public attrs: Attrs; public element: Element; public parentView: Component = null; + public args: ProcessedArgs; static create(args: { attrs: Attrs }): EmberishCurlyComponent { return super.create(args) as EmberishCurlyComponent; @@ -372,6 +376,44 @@ class EmberishGlimmerComponentManager implements ComponentManager + + constructor(args: EvaluatedArgs, positionalParamsDefinition: string[]) { + this.tag = args.tag; + this.named = args.named; + this.positional = args.positional; + this.positionalParamNames = positionalParamsDefinition; + } + + value() { + let { named, positional, positionalParamNames } = this; + + let result = this.named.value(); + + if (positionalParamNames && positionalParamNames.length) { + for (let i = 0; i < positionalParamNames.length; i++) { + let name = positionalParamNames[i]; + let reference = positional.at(i); + + result[name] = reference.value(); + } + } + + return { + attrs: result, + props: result + }; + } +} + +function processArgs(args: EvaluatedArgs, positionalParamsDefinition: string[]) : ProcessedArgs { + return new ProcessedArgs(args, positionalParamsDefinition); +} + const EMBERISH_GLIMMER_COMPONENT_MANAGER = new EmberishGlimmerComponentManager(); const BaseEmberishCurlyComponent = EmberishCurlyComponent.extend() as typeof EmberishCurlyComponent; @@ -379,8 +421,9 @@ const BaseEmberishCurlyComponent = EmberishCurlyComponent.extend() as typeof Emb class EmberishCurlyComponentManager implements ComponentManager { create(definition: EmberishCurlyComponentDefinition, args: EvaluatedArgs): EmberishCurlyComponent { let klass = definition.ComponentClass || BaseEmberishCurlyComponent; - let attrs = args.named.value(); - let merged = assign({}, attrs, { attrs }); + let processedArgs = processArgs(args, klass['positionalParams']); + let { attrs, props } = processedArgs.value(); + let merged = assign({}, attrs, { attrs }, { args: processedArgs }); let component = klass.create(merged); component.didInitAttrs({ attrs }); @@ -427,7 +470,7 @@ class EmberishCurlyComponentManager implements ComponentManager, env: Environment }) { + constructor({ nameRef, env, args }: { nameRef: PathReference, env: Environment, args: EvaluatedArgs }) { this.nameRef = nameRef; this.env = env; - this.tag = nameRef.tag; + this.tag = args.tag; } value(): ComponentDefinition { @@ -826,7 +869,7 @@ function dynamicComponentFor(vm: VM) { let args = vm.getArgs(); let nameRef = args.positional.at(0); let env = vm.env; - return new DynamicComponentReference({ nameRef, env }); + return new DynamicComponentReference({ nameRef, env, args }); }; class DynamicComponentSyntax extends StatementSyntax implements DynamicComponentOptions { @@ -887,6 +930,7 @@ class BasicComponentDefinition extends GenericComponentDefinition