Skip to content
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

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion packages/ember-glimmer/lib/environment.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,13 @@ import {
inlineUnless
} from './helpers/if-unless';

import { default as hash } from './helpers/hash';

const builtInHelpers = {
concat,
if: inlineIf,
unless: inlineUnless
unless: inlineUnless,
hash
};

export default class extends Environment {
Expand Down
38 changes: 38 additions & 0 deletions packages/ember-glimmer/lib/helpers/hash.js
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
)}}
```
Copy link
Member

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'ed

Copy link
Contributor Author

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.


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);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is a line here. Probably a github issue.

165 changes: 165 additions & 0 deletions packages/ember-glimmer/tests/integration/helpers/hash-test.js
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');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should test resetting to Marisa after this

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should test resetting to Marisa Arbeo after this

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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');
}

});
5 changes: 0 additions & 5 deletions packages/ember-htmlbars/lib/helpers/hash.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,17 @@
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
Expand Down
73 changes: 0 additions & 73 deletions packages/ember-htmlbars/tests/helpers/hash_test.js

This file was deleted.