better lifecycle hooks, failing test for multiple top level elements …

…within a tagless component being sustained

addon/components/flexi-sustain.js

@@ -18,7 +18,7 @@ const component = Component.extend({
   copy: false,
   expires: null,
 
-  didInsertElement() {
+  willInsertElement() {
     let element = this.element || this._renderNode;
     let properties = this.getProperties('label', 'component', 'model', 'copy', 'expires');
 

addon/lib/sustain.js

@@ -214,9 +214,9 @@ export default Obj.extend({
 
     this._component.set('model', model);
 
-    let _super = this._component.didInsertElement;
+    let _super = this._component.willInsertElement;
 
-    this._component.didInsertElement = () => {
+    this._component.willInsertElement = () => {
       this.isReady();
       if (_super) {
         _super.call(this._component);

tests/acceptance/sustain-test.js

@@ -9,18 +9,29 @@ test('visiting /tests/sustain', function(assert) {
   andThen(() => {
     assert.equal(currentURL(), '/tests/sustain', 'We transitioned to the initial route');
 
-    assert.equal(find('h2.sustain-test').text(), 'I ought to be sustained', 'We rendered the sustain');
+    assert.equal(find('h2.sustain-test').eq(0).text(), 'I ought to be sustained', 'We rendered the sustain');
     let id1 = find('layout.sustain-test').get(0).id;
+    let id2 = find('layout.sustain-test').get(1).id;
+    let children = find('.tagless-stuff');
+
+    assert.ok(id2, 'we found two IDs');
+    assert.equal(children.length, 2, 'we have two tagless children');
 
     click('#next-sustain-test-page');
 
     andThen(() => {
       assert.equal(currentURL(), '/tests/sustain-b', 'We transitioned to the next route');
 
-      assert.equal(find('h2.sustain-test').text(), 'I ought to be sustained', 'We rendered the sustain on the next page');
-      let id2 = find('layout.sustain-test').get(0).id;
+      assert.equal(find('h2.sustain-test').eq(0).text(), 'I ought to be sustained', 'We rendered the sustain on the next page');
+      let id3 = find('layout.sustain-test').get(0).id;
+      let id4 = find('layout.sustain-test').get(1).id;
+      let children = find('.tagless-stuff');
+
+      assert.ok(id4, 'we found two IDs');
+      assert.equal(children.length, 2, 'we still have two tagless children');
 
-      assert.equal(id1, id2, 'We rendered the identical sustain');
+      assert.equal(id1, id3, 'We rendered the identical sustain');
+      assert.equal(id2, id4, 'We rendered the identical tagless sustain');
     });
 
   });

tests/dummy/app/routes/tests/sustain-b/template.hbs

@@ -1 +1,2 @@
-{{sustain 'tests/sustain/components/test-title'}}
+{{sustain 'tests/sustain/components/test-title'}}
+{{sustain 'tests/sustain/components/tagless-title'}}

tests/dummy/app/routes/tests/sustain-hooks/has-hooks/component.js

@@ -31,7 +31,7 @@ export default Component.extend({
     this.set('willMoveEvent', true);
   }),
 
-  didInsertElement() {
+  willInsertElement() {
     this._super();
     this.set('insertTriggered', true);
   }

tests/dummy/app/routes/tests/sustain/components/tagless-title/component.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+import layout from './template';
+
+export default Ember.Component.extend({
+  layout,
+  tagName: ''
+});

tests/dummy/app/routes/tests/sustain/components/tagless-title/template.hbs

@@ -0,0 +1,7 @@
+{{#flexi-layout tagName="layout" class="sustain-test tagless-stuff flexi-layout"}}
+  <h2 class="sustain-test">I ought to be sustained</h2>
+  <p>If I was, the component above's ID will be identical.</p>
+{{/flexi-layout}}
+<div class="tagless-stuff">
+  <h3>More Tagless Stuff</h3>
+</div>

tests/dummy/app/routes/tests/sustain/template.hbs

@@ -1,2 +1,3 @@
 {{#link-to 'tests.sustain-b' id="next-sustain-test-page"}}Go to B{{/link-to}}
-{{sustain 'tests/sustain/components/test-title'}}
+{{sustain 'tests/sustain/components/test-title'}}
+{{sustain 'tests/sustain/components/tagless-title'}}