Merge pull request #122 from DockYard/fix-viewport-tolerance

Fix viewportTolerance with defaults

addon/mixins/in-viewport.js

@@ -98,7 +98,7 @@ export default Mixin.create({
     }
 
     if (get(this, 'viewportUseIntersectionObserver')) {
-      const { top, left, bottom, right } = this.viewportTolerance;
+      const { top = 0, left = 0, bottom = 0, right = 0 } = this.viewportTolerance;
       const options = {
         root: scrollableArea,
         rootMargin: `${top}px ${right}px ${bottom}px ${left}px`,

tests/dummy/app/components/my-component.js

@@ -14,12 +14,14 @@ export default Component.extend(InViewportMixin, {
       viewportSpyOverride,
       viewportEnabledOverride,
       viewportIntersectionObserverOverride,
+      viewportToleranceOverride,
       viewportRAFOverride,
       scrollableAreaOverride
     } = getProperties(this,
       'viewportSpyOverride',
       'viewportEnabledOverride',
       'viewportIntersectionObserverOverride',
+      'viewportToleranceOverride',
       'viewportRAFOverride',
       'scrollableAreaOverride'
     );
@@ -33,6 +35,9 @@ export default Component.extend(InViewportMixin, {
     if (viewportIntersectionObserverOverride !== undefined) {
       options.viewportUseIntersectionObserver = viewportIntersectionObserverOverride;
     }
+    if (viewportToleranceOverride !== undefined) {
+      options.viewportTolerance = viewportToleranceOverride;
+    }
     if (viewportRAFOverride !== undefined) {
       options.viewportUseRAF = viewportRAFOverride;
     }

tests/dummy/app/controllers/infinity-scrollable.js

@@ -8,6 +8,10 @@ let line = '<line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width
 const images = [rect, circle, line];
 
 export default Controller.extend({
+  viewportToleranceOverride: {
+    top: 1
+  },
+
   actions: {
     infinityLoad() {
       const newModels = [...Array(10).fill().map(() => `${images[(Math.random() * images.length) | 0]}`)];

tests/dummy/app/templates/infinity-scrollable.hbs

@@ -11,5 +11,6 @@
   {{my-component
     class="infinity-scrollable"
     scrollableAreaOverride=".list"
+    viewportToleranceOverride=viewportToleranceOverride
     infinityLoad=(action "infinityLoad")}}
 </div>

tests/integration/components/my-component-test.js

@@ -0,0 +1,37 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('my-component', 'Integration | Component | my component', {
+  integration: true
+});
+
+test('it renders with viewportTolerance partially set', function(assert) {
+  // viewportTolerance && viewportEnabled is usually setup in the initializer. Needs defaults
+  this.viewportToleranceOverride = {
+    top: 1
+  };
+  this.render(hbs`
+    {{#my-component viewportEnabled=true viewportToleranceOverride=viewportToleranceOverride}}
+      template block text
+    {{/my-component}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});
+
+test('it renders with intersectionThreshold set', function(assert) {
+  this.viewportTolerance = {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  };
+  this.intersectionThreshold = 1.0;
+  this.render(hbs`
+    {{#my-component viewportEnabled=true viewportTolerance=viewportTolerance intersectionThreshold=intersectionThreshold}}
+      template block text
+    {{/my-component}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});