-
-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Glimmer2] Migrating hash helper #13093
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import { helper } from '../helper'; | ||
/** | ||
@module ember | ||
@submodule ember-templates | ||
*/ | ||
|
||
/** | ||
Use the `{{hash}}` helper to create a hash to pass as an option to your | ||
components. This is specially useful for contextual components where you can | ||
just yield a hash: | ||
|
||
```handlebars | ||
{{yield (hash | ||
name='Sarah' | ||
title=office | ||
)}} | ||
``` | ||
|
||
Would result in an object such as: | ||
|
||
```js | ||
{ name: 'Sarah', title: this.get('office') } | ||
``` | ||
|
||
Where the `title` is bound to updates of the `office` property. | ||
|
||
@method hash | ||
@for Ember.Templates.helpers | ||
@param {Object} options | ||
@return {Object} Hash | ||
@public | ||
*/ | ||
|
||
function hash(params, hash, options) { | ||
return hash; | ||
} | ||
|
||
export default helper(hash); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There is a line here. Probably a github issue. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,165 @@ | ||
import { RenderingTest, moduleFor } from '../../utils/test-case'; | ||
import { set } from 'ember-metal/property_set'; | ||
import setProperties from 'ember-metal/set_properties'; | ||
import Component from 'ember-views/components/component'; | ||
|
||
moduleFor('Helpers test: {{hash}}', class extends RenderingTest { | ||
|
||
['@test returns a hash with the right key-value']() { | ||
this.render(`{{#with (hash name=\"Sergio\") as |person|}}{{person.name}}{{/with}}`); | ||
|
||
this.assertText('Sergio'); | ||
|
||
this.runTask(() => this.rerender()); | ||
|
||
this.assertText('Sergio'); | ||
} | ||
|
||
['@test can have more than one key-value']() { | ||
this.render(`{{#with (hash name="Sergio" lastName="Arbeo") as |person|}}{{person.name}} {{person.lastName}}{{/with}}`); | ||
|
||
this.assertText('Sergio Arbeo'); | ||
|
||
this.runTask(() => this.rerender()); | ||
|
||
this.assertText('Sergio Arbeo'); | ||
} | ||
|
||
['@test binds values when variables are used']() { | ||
this.render(`{{#with (hash name=firstName lastName="Arbeo") as |person|}}{{person.name}} {{person.lastName}}{{/with}}`, { | ||
firstName: 'Marisa' | ||
}); | ||
|
||
this.assertText('Marisa Arbeo'); | ||
|
||
this.runTask(() => this.rerender()); | ||
|
||
this.assertText('Marisa Arbeo'); | ||
|
||
this.runTask(() => set(this.context, 'firstName', 'Sergio')); | ||
|
||
this.assertText('Sergio Arbeo'); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should test resetting to There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Fixed |
||
|
||
this.runTask(() => set(this.context, 'firstName', 'Marisa')); | ||
|
||
this.assertText('Marisa Arbeo'); | ||
} | ||
|
||
['@test binds multiple values when variables are used']() { | ||
this.render(`{{#with (hash name=firstName lastName=lastName) as |person|}}{{person.name}} {{person.lastName}}{{/with}}`, { | ||
firstName: 'Marisa', | ||
lastName: 'Arbeo' | ||
}); | ||
|
||
this.assertText('Marisa Arbeo'); | ||
|
||
this.runTask(() => this.rerender()); | ||
|
||
this.assertText('Marisa Arbeo'); | ||
|
||
this.runTask(() => set(this.context, 'firstName', 'Sergio')); | ||
|
||
this.assertText('Sergio Arbeo'); | ||
|
||
this.runTask(() => set(this.context, 'lastName', 'Smith')); | ||
|
||
this.assertText('Sergio Smith'); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should test resetting to There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Fixed |
||
|
||
this.runTask(() => setProperties(this.context, { | ||
firstName: 'Marisa', | ||
lastName: 'Arbeo' | ||
})); | ||
|
||
this.assertText('Marisa Arbeo'); | ||
} | ||
|
||
['@test hash helpers can be nested']() { | ||
this.render(`{{#with (hash person=(hash name=firstName)) as |ctx|}}{{ctx.person.name}}{{/with}}`, { | ||
firstName: 'Balint' | ||
}); | ||
|
||
this.assertText('Balint'); | ||
|
||
this.runTask(() => this.rerender()); | ||
|
||
this.assertText('Balint'); | ||
|
||
this.runTask(() => set(this.context, 'firstName', 'Chad')); | ||
|
||
this.assertText('Chad'); | ||
|
||
this.runTask(() => set(this.context, 'firstName', 'Balint')); | ||
|
||
this.assertText('Balint'); | ||
} | ||
|
||
['@test should yield hash of internal properties']() { | ||
let fooBarInstance; | ||
let FooBarComponent = Component.extend({ | ||
init() { | ||
this._super(); | ||
fooBarInstance = this; | ||
this.firstName = 'Chad'; | ||
} | ||
}); | ||
|
||
this.registerComponent('foo-bar', { | ||
ComponentClass: FooBarComponent, | ||
template: `{{yield (hash firstName=firstName)}}` | ||
}); | ||
|
||
this.render(`{{#foo-bar as |values|}}{{values.firstName}}{{/foo-bar}}`); | ||
|
||
this.assertText('Chad'); | ||
|
||
this.runTask(() => this.rerender()); | ||
|
||
this.assertText('Chad'); | ||
|
||
this.runTask(() => set(fooBarInstance, 'firstName', 'Godfrey')); | ||
|
||
this.assertText('Godfrey'); | ||
|
||
this.runTask(() => set(fooBarInstance, 'firstName', 'Chad')); | ||
|
||
this.assertText('Chad'); | ||
} | ||
|
||
['@test should yield hash of internal and external properties']() { | ||
let fooBarInstance; | ||
let FooBarComponent = Component.extend({ | ||
init() { | ||
this._super(); | ||
fooBarInstance = this; | ||
this.firstName = 'Chad'; | ||
} | ||
}); | ||
|
||
this.registerComponent('foo-bar', { | ||
ComponentClass: FooBarComponent, | ||
template: `{{yield (hash firstName=firstName lastName=lastName)}}` | ||
}); | ||
|
||
this.render(`{{#foo-bar lastName=lastName as |values|}}{{values.firstName}} {{values.lastName}}{{/foo-bar}}`, { | ||
lastName: 'Hietala' | ||
}); | ||
|
||
this.assertText('Chad Hietala'); | ||
|
||
this.runTask(() => this.rerender()); | ||
|
||
this.assertText('Chad Hietala'); | ||
|
||
this.runTask(() => set(fooBarInstance, 'firstName', 'Godfrey')); | ||
|
||
this.runTask(() => set(this.context, 'lastName', 'Chan')); | ||
|
||
this.assertText('Godfrey Chan'); | ||
|
||
this.runTask(() => set(fooBarInstance, 'firstName', 'Chad')); | ||
this.runTask(() => set(this.context, 'lastName', 'Hietala')); | ||
|
||
this.assertText('Chad Hietala'); | ||
} | ||
|
||
}); |
This file was deleted.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's a bit ironic that we don't actually have a test for this case 😗
Can you quickly add a test for yielding a hash? I think it won't work for glimmer yet, so it probably needs to be
@htmlbars
'edThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I added these and they seem to Just Work™. I wrote tests for internal, external, and mixed hash yields.