Merge pull request #12920 from GavinJoyce/gj/glimmer-inline-if

[Glimmer2] inline if

packages/ember-glimmer/lib/environment.js

@@ -51,9 +51,11 @@ class PropertyReference {
 }
 
 import { default as concat } from './helpers/concat';
+import { default as inlineIf } from './helpers/inline-if';
 
 const helpers = {
-  concat
+  concat,
+  if: inlineIf
 };
 
 class EmberConditionalReference extends ConditionalReference {

packages/ember-glimmer/lib/helpers/inline-if.js

@@ -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;
+  }
+}

packages/ember-glimmer/tests/integration/helpers/inline-if-test.js

@@ -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 {
+
+  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 {
+
+  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');
+  }
+
+});

packages/ember-glimmer/tests/integration/syntax/if-unless-test.js

@@ -3,10 +3,10 @@ import { set } from 'ember-metal/property_set';
 import {
   BASIC_TRUTHY_TESTS,
   BASIC_FALSY_TESTS,
-  SharedConditionalsTest
+  SharedSyntaxConditionalsTest
 } from '../../utils/shared-conditional-tests';
 
-moduleFor('Syntax test: {{#if}}', class extends SharedConditionalsTest {
+moduleFor('Syntax test: {{#if}}', class extends SharedSyntaxConditionalsTest {
 
   templateFor({ cond, truthy, falsy }) {
     return `{{#if ${cond}}}${truthy}{{else}}${falsy}{{/if}}`;
@@ -42,7 +42,7 @@ moduleFor('Syntax test: {{#if}}', class extends SharedConditionalsTest {
 
 }, BASIC_TRUTHY_TESTS, BASIC_FALSY_TESTS);
 
-moduleFor('Syntax test: {{#unless}}', class extends SharedConditionalsTest {
+moduleFor('Syntax test: {{#unless}}', class extends SharedSyntaxConditionalsTest {
 
   templateFor({ cond, truthy, falsy }) {
     return `{{#unless ${cond}}}${falsy}{{else}}${truthy}{{/unless}}`;

packages/ember-glimmer/tests/integration/syntax/with-test.js

@@ -3,18 +3,18 @@ import { set } from 'ember-metal/property_set';
 import {
   BASIC_TRUTHY_TESTS,
   BASIC_FALSY_TESTS,
-  SharedConditionalsTest
+  SharedSyntaxConditionalsTest
 } from '../../utils/shared-conditional-tests';
 import { RenderingTest } from '../../utils/test-case';
 
-moduleFor('Syntax test: {{#with}}', class extends SharedConditionalsTest {
+moduleFor('Syntax test: {{#with}}', class extends SharedSyntaxConditionalsTest {
   templateFor({ cond, truthy, falsy }) {
     return `{{#with ${cond}}}${truthy}{{else}}${falsy}{{/with}}`;
   }
 
 }, BASIC_TRUTHY_TESTS, BASIC_FALSY_TESTS);
 
-moduleFor('Syntax test: {{#with as}}', class extends SharedConditionalsTest{
+moduleFor('Syntax test: {{#with as}}', class extends SharedSyntaxConditionalsTest {
   templateFor({ cond, truthy, falsy }) {
     return `{{#with ${cond} as |test|}}${truthy}{{else}}${falsy}{{/with}}`;
   }

packages/ember-glimmer/tests/utils/abstract-test-case.js

@@ -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* /, '');
+
+  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;
     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) {