-
-
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] inline if #12920
[Glimmer2] inline if #12920
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,39 @@ | ||
/** | ||
@module ember | ||
@submodule ember-templates | ||
*/ | ||
|
||
import { toBool as emberToBool } from './if-unless'; | ||
import { assert } from 'ember-metal/debug'; | ||
|
||
/** | ||
The inline `if` helper conditionally renders a single property or string. | ||
This helper acts like a ternary operator. If the first property is truthy, | ||
the second argument will be displayed, if not, the third argument will be | ||
displayed | ||
```handlebars | ||
{{if useLongGreeting "Hello" "Hi"}} Alex | ||
``` | ||
You can use the `if` helper inside another helper as a subexpression. | ||
```handlebars | ||
{{some-component height=(if isBig "100" "10")}} | ||
``` | ||
@method if | ||
@for Ember.Templates.helpers | ||
@public | ||
*/ | ||
export default function inlineIf(args) { | ||
assert( | ||
'The inline form of the `if` and `unless` helpers expect two or ' + | ||
'three arguments, e.g. `{{if trialExpired \'Expired\' expiryDate}}` ', | ||
args.length === 2 || args.length === 3 | ||
); | ||
|
||
if (emberToBool(args[0])) { | ||
return args[1]; | ||
} else { | ||
//TODO: always return `args[2]` post glimmer2: https://github.com/emberjs/ember.js/pull/12920#discussion_r53213383 | ||
let falsyArgument = args[2]; | ||
return falsyArgument === undefined ? '' : falsyArgument; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
import { moduleFor } from '../../utils/test-case'; | ||
import { set } from 'ember-metal/property_set'; | ||
|
||
import { | ||
BASIC_TRUTHY_TESTS, | ||
BASIC_FALSY_TESTS, | ||
SharedHelperConditionalsTest | ||
} from '../../utils/shared-conditional-tests'; | ||
|
||
moduleFor('Helpers test: inline {{if}}', class extends SharedHelperConditionalsTest { | ||
|
||
templateFor({ cond, truthy, falsy }) { | ||
return `{{if ${cond} ${truthy} ${falsy}}}`; | ||
} | ||
|
||
['@test it can omit the falsy argument']() { | ||
this.render(`{{if cond1 'T1'}}{{if cond2 'T2'}}`, { cond1: true, cond2: false }); | ||
|
||
this.assertText('T1'); | ||
|
||
this.runTask(() => this.rerender()); | ||
|
||
this.assertText('T1'); | ||
|
||
this.runTask(() => set(this.context, 'cond1', false)); | ||
|
||
this.assertText(''); | ||
|
||
this.runTask(() => { | ||
set(this.context, 'cond1', true); | ||
set(this.context, 'cond2', true); | ||
}); | ||
|
||
this.assertText('T1T2'); | ||
|
||
this.runTask(() => { | ||
set(this.context, 'cond1', true); | ||
set(this.context, 'cond2', false); | ||
}); | ||
|
||
this.assertText('T1'); | ||
} | ||
|
||
['@test it raises when there are more than three arguments']() { | ||
expectAssertion(() => { | ||
this.render(`{{if condition 'a' 'b' 'c'}}`, { condition: true }); | ||
}, /The inline form of the `if` and `unless` helpers expect two or three arguments/); | ||
} | ||
|
||
['@test it raises when there are less than two arguments']() { | ||
expectAssertion(() => { | ||
this.render(`{{if condition}}`, { condition: true }); | ||
}, /The inline form of the `if` and `unless` helpers expect two or three arguments/); | ||
} | ||
|
||
}, BASIC_TRUTHY_TESTS, BASIC_FALSY_TESTS); | ||
|
||
moduleFor('@glimmer Helpers test: {{if}} used with another helper', class extends SharedHelperConditionalsTest { | ||
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. 😢 |
||
|
||
wrapperFor(templates) { | ||
return `{{concat ${templates.join(' ')}}}`; | ||
} | ||
|
||
templateFor({ cond, truthy, falsy }) { | ||
return `(if ${cond} ${truthy} ${falsy})`; | ||
} | ||
|
||
}); | ||
|
||
moduleFor('@glimmer Helpers test: {{if}} used in attribute position', class extends SharedHelperConditionalsTest { | ||
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. 😢 |
||
|
||
wrapperFor(templates) { | ||
return `<div data-foo="${templates.join('')}" />`; | ||
} | ||
|
||
templateFor({ cond, truthy, falsy }) { | ||
return `{{if ${cond} ${truthy} ${falsy}}}`; | ||
} | ||
|
||
textValue() { | ||
return this.$('div', this.element).attr('data-foo'); | ||
} | ||
|
||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -15,7 +15,11 @@ const packageTag = `@${packageName} `; | |
export function moduleFor(description, TestClass, ...generators) { | ||
let context; | ||
|
||
QUnit.module(`[${packageName}] ${description}`, { | ||
let modulePackagePrefixMatch = description.match(/^@(\w*)/); //eg '@glimmer' or '@htmlbars' | ||
let modulePackagePrefix = modulePackagePrefixMatch ? modulePackagePrefixMatch[1] : ''; | ||
let descriptionWithoutPackagePrefix = description.replace(/^@\w* /, ''); | ||
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. this adds support for module prefixes such as |
||
|
||
QUnit.module(`[${packageName}] ${descriptionWithoutPackagePrefix}`, { | ||
setup() { | ||
context = new TestClass(); | ||
}, | ||
|
@@ -39,6 +43,10 @@ export function moduleFor(description, TestClass, ...generators) { | |
} | ||
|
||
function generateTest(name) { | ||
if (modulePackagePrefix && packageName !== modulePackagePrefix) { | ||
return; | ||
} | ||
|
||
if (name.indexOf('@test ') === 0) { | ||
QUnit.test(name.slice(5), assert => context[name](assert)); | ||
} else if (name.indexOf('@skip ') === 0) { | ||
|
@@ -78,6 +86,7 @@ export class RenderingTest extends TestCase { | |
let owner = this.owner = buildOwner(); | ||
let env = this.env = new Environment({ dom, owner }); | ||
this.renderer = new Renderer(dom, { destinedForDOM: true, env }); | ||
this.$ = jQuery; | ||
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. ah, this is not what I meant, I mean something like how |
||
this.element = jQuery('#qunit-fixture')[0]; | ||
this.component = null; | ||
this.snapshot = null; | ||
|
@@ -169,8 +178,12 @@ export class RenderingTest extends TestCase { | |
} | ||
} | ||
|
||
textValue() { | ||
return jQuery(this.element).text(); | ||
} | ||
|
||
assertText(text) { | ||
assert.strictEqual(jQuery(this.element).text(), text, '#qunit-fixture content'); | ||
assert.strictEqual(this.textValue(), text, '#qunit-fixture content'); | ||
} | ||
|
||
assertHTML(html) { | ||
|
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.
We have an
inlineUnless
helper in Ember too 😄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.
I can quickly follow this PR up with one adding support for inline unless
if that's OK?
On 17 Feb 2016 6:47 p.m., "Godfrey Chan" [email protected] wrote:
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.
👍