Merge pull request #13159 from GavinJoyce/gj/if-unless-tests

[Glimmer2] port remaining if-unless tests

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

@@ -1,4 +1,9 @@
-import { moduleFor } from '../../utils/test-case';
+import { Component } from '../../utils/helpers';
+import { A as emberA } from 'ember-runtime/system/native_array';
+import { set } from 'ember-metal/property_set';
+import { strip } from '../../utils/abstract-test-case';
+
+import { RenderingTest, moduleFor } from '../../utils/test-case';
 import { TogglingSyntaxConditionalsTest } from '../../utils/shared-conditional-tests';
 
 moduleFor('Syntax test: {{#if}} with inverse', class extends TogglingSyntaxConditionalsTest {
@@ -24,3 +29,45 @@ moduleFor('Syntax test: {{#if}} and {{#unless}} without inverse', class extends
   }
 
 });
+
+moduleFor('Syntax test: {{#if}}', class extends RenderingTest {
+
+  ['@test using `if` with an `{{each}}` destroys components when transitioning to and from inverse (GH #12267)'](assert) {
+    let destroyedChildrenCount = 0;
+
+    this.registerComponent('foo-bar', {
+      template: '{{number}}',
+      ComponentClass: Component.extend({
+        willDestroy() {
+          this._super();
+          destroyedChildrenCount++;
+        }
+      })
+    });
+
+    this.render(strip`
+      {{#if cond}}
+        {{#each numbers as |number|}}
+          {{foo-bar number=number}}
+        {{/each}}
+      {{else}}
+        Nothing Here!
+      {{/if}}`, { cond: true, numbers: emberA([1, 2, 3]) });
+
+    this.assertText('123');
+
+    this.runTask(() => this.rerender());
+
+    this.assertText('123');
+
+    this.runTask(() => set(this.context, 'cond', false));
+
+    this.assertText('Nothing Here!');
+    assert.equal(destroyedChildrenCount, 3, 'the children were properly destroyed');
+
+    this.runTask(() => set(this.context, 'cond', true));
+
+    this.assertText('123');
+  }
+
+});

packages/ember-glimmer/tests/utils/shared-conditional-tests.js

@@ -7,6 +7,7 @@ import EmberObject from 'ember-runtime/system/object';
 import ObjectProxy from 'ember-runtime/system/object_proxy';
 import { A as emberA } from 'ember-runtime/system/native_array';
 import ArrayProxy from 'ember-runtime/system/array_proxy';
+import { Component } from './helpers';
 
 class AbstractConditionalsTest extends RenderingTest {
 
@@ -768,6 +769,49 @@ export class TogglingSyntaxConditionalsTest extends TogglingConditionalsTest {
     this.assertText('F-outer');
   }
 
+  ['@test child conditional should not render children if parent conditional becomes false'](assert) {
+    let childCreated = false;
+
+    this.registerComponent('foo-bar', {
+      template: 'foo-bar',
+      ComponentClass: Component.extend({
+        init() {
+          this._super(...arguments);
+          childCreated = true;
+        }
+      })
+    });
+
+    let innerTemplate = this.templateFor({ cond: 'cond2', truthy: '{{foo-bar}}', falsy: '' });
+    let wrappedTemplate = this.wrappedTemplateFor({ cond: 'cond1', truthy: innerTemplate, falsy: '' });
+
+    this.render(wrappedTemplate, { cond1: this.truthyValue, cond2: this.falsyValue });
+
+    assert.ok(!childCreated);
+    this.assertText('');
+
+    this.runTask(() => this.rerender());
+
+    assert.ok(!childCreated);
+    this.assertText('');
+
+    this.runTask(() => {
+      set(this.context, 'cond2', this.truthyValue);
+      set(this.context, 'cond1', this.falsyValue);
+    });
+
+    assert.ok(!childCreated);
+    this.assertText('');
+
+    this.runTask(() => {
+      set(this.context, 'cond2', this.falsyValue);
+      set(this.context, 'cond1', this.truthyValue);
+    });
+
+    assert.ok(!childCreated);
+    this.assertText('');
+  }
+
 }
 
 applyMixins(TogglingSyntaxConditionalsTest, SyntaxCondtionalTestHelpers);