Support for positional params in EmberishCurlyComponent for test envi…

…ronment (#188) * Update positional params test to new test style, test is failing * Use ProcessedArgs to allow for positional params in test environment
glimmerjs · Jun 16, 2016 · 4059d82 · 4059d82
1 parent a03e9f9
commit 4059d82
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 30 deletions.
diff --git 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
@@ -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,15 +376,54 @@ class EmberishGlimmerComponentManager implements ComponentManager<EmberishGlimme
   }
 }
 
+class ProcessedArgs {
+  tag: RevisionTag;
+  named: EvaluatedNamedArgs;
+  positional: EvaluatedPositionalArgs;
+  positionalParamNames: Array<string>
+
+  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;
 
 class EmberishCurlyComponentManager implements ComponentManager<EmberishCurlyComponent> {
   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<EmberishCurlyCom
 
   update(component: EmberishCurlyComponent, args: EvaluatedArgs) {
     let oldAttrs = component.attrs;
-    let newAttrs = args.named.value();
+    let newAttrs = component.args.value().attrs;
     let merged = assign({}, newAttrs, { attrs: newAttrs });
 
     component.setProperties(merged);
@@ -799,10 +842,10 @@ class DynamicComponentReference implements PathReference<ComponentDefinition<Opa
   private env: Environment;
   public tag: RevisionTag;
 
-  constructor({ nameRef, env }: { nameRef: PathReference<Opaque>, env: Environment }) {
+  constructor({ nameRef, env, args }: { nameRef: PathReference<Opaque>, env: Environment, args: EvaluatedArgs }) {
     this.nameRef = nameRef;
     this.env = env;
-    this.tag = nameRef.tag;
+    this.tag = args.tag;
   }
 
   value(): ComponentDefinition<Opaque> {
@@ -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<BasicComponent
 }
 
 interface EmberishCurlyComponentFactory {
+  positionalParams?: string[];
   create(options: { attrs: Attrs }): EmberishCurlyComponent;
 }