Merge pull request #27 from runspired/feat/sustain-labels

feat(label): implements labels and tests, resolves #16

addon/components/flexi-sustain.js

@@ -3,33 +3,27 @@ import layout from '../templates/components/flexi-sustain';
 
 const {
   Component,
-  inject,
-  guidFor
+  inject
   } = Ember;
 
 const component = Component.extend({
   layout,
   tagName: '',
-  model: null,
-  sustain: null,
+
   sustains: inject.service('-sustains'),
 
+  label: null,
+  model: null,
+  component: null,
   copy: false,
   expires: null,
 
   didInsertElement() {
     let element = this.element || this._renderNode;
-    element.firstNode.IS_SUSTAIN_BEGIN = guidFor(this);
-    element.lastNode.IS_SUSTAIN_END = guidFor(this);
-
-    this.get('sustains')
-      .didInsert({
-        name: this.get('sustain'),
-        element,
-        model: this.get('model'),
-        copy: this.get('copy'),
-        expires: this.get('expires')
-      });
+    let properties = this.getProperties('label', 'component', 'model', 'copy', 'expires');
+
+    properties.element = element;
+    this.get('sustains').didInsert(properties);
   },
 
   willDestroyElement() {
@@ -39,18 +33,20 @@ const component = Component.extend({
 
   init() {
     this._super();
-    this.get('sustains').install(
-      this.get('sustain'),
-      this.get('model'),
-      this.get('copy'),
-      this.get('expires')
-    );
+
+    if (!this.label) {
+      this.label = this.component;
+    }
+
+    let properties = this.getProperties('label', 'component', 'model', 'copy', 'expires');
+
+    this.get('sustains').install(properties);
   }
 
 });
 
 component.reopenClass({
-  positionalParams: ['sustain', 'model']
+  positionalParams: ['component', 'model']
 });
 
 export default component;

addon/lib/sustain.js

@@ -13,7 +13,8 @@ export default Obj.extend({
   sustainService: null,
 
   // params exposed via the `{{sustain}}` helper
-  name: '',
+  component: '', // component name passed into the flexi-sustain marker
+  label: null,
   model: null,
   copy: false,
   expires: 1000 * 5, // 5s
@@ -26,7 +27,7 @@ export default Obj.extend({
 
   // reference to the sustain-container component where the content
   // was initially rendered
-  component: null,
+  _component: null,
 
   // caches the teardown handler
   removeTimeout: null,
@@ -135,21 +136,21 @@ export default Obj.extend({
   },
 
   _selfDestruct() {
-    if (this.parent && this.parent === this.component.element) {
+    if (this.parent && this.parent === this._component.element) {
       return;
     }
     this.destroy();
   },
 
   willDestroy() {
     this._super(...arguments);
-    this.sustainService.removeSustain(this.get('name'));
+    this.sustainService.removeSustain(this.get('label'));
     this.sustainService = null;
 
     // teardown DOM
     this.range = null;
-    this.component.destroy();
-    this.component = null;
+    this._component.destroy();
+    this._component = null;
     this.parent = null;
 
     // teardown clones
@@ -176,25 +177,27 @@ export default Obj.extend({
   },
 
   setupComponent() {
-    let name = this.get('name');
+    let name = this.get('component');
     let model = this.get('model');
 
-    this.component = this.owner.lookup(`component:${name}`);
+    this._component = this.owner.lookup(`component:${name}`);
 
     // if the component hasn't explicitly set it's layout, look it up
-    if (!this.component.layout) {
-      let layout = this.owner.lookup(`template:${name}`);
-      this.component.layout = layout;
+    if (!this._component.layout) {
+      this._component.layout = this.owner.lookup(`template:${name}`);
     }
-    this.component.set('model', model);
-    let _super = this.component.get('didInsertElement');
-    this.component.set('didInsertElement', () => {
+
+    this._component.set('model', model);
+
+    let _super = this._component.get('didInsertElement');
+
+    this._component.set('didInsertElement', () => {
       this.isReady();
       if (_super) {
         _super();
       }
     });
-    this._fragment = this.component.renderToElement();
+    this._fragment = this._component.renderToElement();
   },
 
   init() {

addon/services/-sustains.js

@@ -10,23 +10,19 @@ export default Service.extend({
 
   _cache: null,
 
-  install(name, model, copy = false, expires = null) {
-    let sustain = this._cache[name];
+  install(opts) {
+    let sustain = this._cache[opts.label];
 
     if (!sustain) {
-      this._cache[name] = SustainModel.create({
-        owner: getOwner(this),
-        sustainService: this,
-        model,
-        name,
-        copy,
-        expires
-      });
+      opts.owner = getOwner(this);
+      opts.sustainService = this;
+
+      this._cache[opts.label] = SustainModel.create(opts);
     }
   },
 
   didInsert(opts) {
-    let sustain = this._cache[opts.name];
+    let sustain = this._cache[opts.label];
 
     sustain.insert({
       parent: opts.element,
@@ -37,8 +33,8 @@ export default Service.extend({
   },
 
   // called when a sustain marker is being removed
-  uninstall(element, name) {
-    const sustain = this._cache[name];
+  uninstall(element, label) {
+    const sustain = this._cache[label];
 
     // only uninstall if we're still in this same parent
     if (sustain && sustain.parent === element) {

tests/acceptance/sustain-labels-test.js

@@ -0,0 +1,41 @@
+import { test } from 'qunit';
+import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';
+
+moduleForAcceptance('Acceptance | sustain labels');
+
+test('Testing that multiple instances of a component can be sustained when labels are used.', function(assert) {
+  visit('/tests/sustain-labels');
+
+  andThen(function() {
+    assert.equal(currentURL(), '/tests/sustain-labels');
+
+    let text = find('h1').eq(0).text();
+    let text1 = find('h1').eq(1).text();
+    let text2 = find('h1').eq(2).text();
+
+    assert.equal(text, 'Rendered!', 'We rendered without a label');
+    assert.equal(text1, 'Rendered!', 'We rendered again with a label');
+    assert.equal(text2, 'Rendered!', 'We rendered again with a new label');
+  });
+
+});
+
+
+test('Testing that a labeled component is recycled.', function(assert) {
+  visit('/tests/sustain-labels-2');
+
+  andThen(function() {
+    assert.equal(currentURL(), '/tests/sustain-labels-2');
+
+    let text1 = find('.label-test-condition').eq(0).find('h1').text();
+    let text2 = find('.label-test-condition').eq(1).find('h1').text();
+    let text3 = find('.label-test-condition').eq(2).find('h1').text();
+    let text4 = find('.label-test-condition').eq(3).find('h1').text();
+
+    assert.equal(text1, '', 'We rendered nothing to the first marker (no label)');
+    assert.equal(text2, '', 'We rendered nothing to the second marker (which had a label)');
+    assert.equal(text3, 'Rendered!', 'We rendered to the third marker (no label)');
+    assert.equal(text4, 'Rendered!', 'We rendered to the fourth marker (which had a label)');
+  });
+
+});

tests/dummy/app/router.js

@@ -14,6 +14,8 @@ Router.map(function() {
     this.route('sustain-b');
     this.route('mobile-first');
     this.route('sustain-no-layout');
+    this.route('sustain-labels');
+    this.route('sustain-labels-2');
   });
 
   this.route('docs', function() {

tests/dummy/app/routes/tests/sustain-labels-2/route.js

@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+});

tests/dummy/app/routes/tests/sustain-labels-2/template.hbs

@@ -0,0 +1,15 @@
+{{!-- initial location --}}
+<div class="label-test-condition">
+  {{sustain "tests/components/missing-layout"}}
+</div>
+<div class="label-test-condition">
+  {{sustain "tests/components/missing-layout" label="label-test-1"}}
+</div>
+
+{{!-- final location --}}
+<div class="label-test-condition">
+  {{sustain "tests/components/missing-layout"}}
+</div>
+<div class="label-test-condition">
+  {{sustain "tests/components/missing-layout" label="label-test-1"}}
+</div>

tests/dummy/app/routes/tests/sustain-labels/route.js

@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+});

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

@@ -0,0 +1,3 @@
+{{sustain "tests/components/missing-layout"}}
+{{sustain "tests/components/missing-layout" label="label-test-1"}}
+{{sustain "tests/components/missing-layout" label="label-test-2"}}