Raf test bounding (#133)

DockYard · Mar 1, 2018 · af5e5a5 · af5e5a5
1 parent 4a11b4e
commit af5e5a5
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 6 deletions.
diff --git a/addon/mixins/in-viewport.js b/addon/mixins/in-viewport.js
@@ -107,7 +107,7 @@ export default Mixin.create({
       this.intersectionObserver = new IntersectionObserver(bind(this, this._onIntersection), options);
       this.intersectionObserver.observe(element);
     } else {
-      const height = scrollableArea ? scrollableArea.offsetHeight + scrollableArea.getBoundingClientRect().top: window.innerHeight;
+      const height = scrollableArea ? scrollableArea.offsetHeight + scrollableArea.getBoundingClientRect().top : window.innerHeight;
       const width = scrollableArea ? scrollableArea.offsetWidth : window.innerWidth;
       const boundingClientRect = element.getBoundingClientRect();
 

diff --git a/tests/acceptance/infinity-test.js b/tests/acceptance/infinity-test.js
@@ -15,7 +15,7 @@ module('Acceptance | infinity-scrollable', function(hooks) {
 
     assert.equal(findAll('.infinity-svg').length, 10);
     assert.equal(findAll('.infinity-scrollable.inactive').length, 1, 'component is inactive before fetching more data');
-    document.querySelector('.infinity-scrollable').scrollIntoView();
+    document.querySelector('.infinity-scrollable').scrollIntoView(false);
 
     await waitFor('.infinity-scrollable.inactive');
 
@@ -28,7 +28,7 @@ module('Acceptance | infinity-scrollable', function(hooks) {
 
     assert.equal(findAll('.infinity-svg-rAF').length, 10);
     assert.equal(findAll('.infinity-scrollable-rAF.inactive').length, 1, 'component is inactive before fetching more data');
-    document.querySelector('.infinity-scrollable-rAF').scrollIntoView();
+    document.querySelector('.infinity-scrollable-rAF').scrollIntoView(false);
 
     await waitUntil(() => {
       return findAll('.infinity-svg-rAF').length === 20;
@@ -39,12 +39,28 @@ module('Acceptance | infinity-scrollable', function(hooks) {
     assert.equal(findAll('.infinity-scrollable-rAF.inactive').length, 1, 'component is inactive after fetching more data');
   });
 
+  test('rAF (second) component fetches more data when scrolled into viewport', async function(assert) {
+    await visit('/infinity-scrollable-raf');
+
+    assert.equal(findAll('.infinity-svg-rAF-bottom').length, 10);
+    assert.equal(findAll('.infinity-scrollable-rAF-bottom.inactive').length, 1, 'component is inactive before fetching more data');
+    document.querySelector('.infinity-scrollable-rAF-bottom').scrollIntoView(false);
+
+    await waitUntil(() => {
+      return findAll('.infinity-svg-rAF-bottom').length === 20;
+    });
+    await waitFor('.infinity-scrollable-rAF-bottom.inactive');
+
+    assert.equal(findAll('.infinity-svg-rAF-bottom').length, 20);
+    assert.equal(findAll('.infinity-scrollable-rAF-bottom.inactive').length, 1, 'component is inactive after fetching more data');
+  });
+
   test('scrollEvent Component fetches more data when scrolled into viewport', async function(assert) {
     await visit('/infinity-scrollable-scrollevent');
 
     assert.equal(findAll('.infinity-svg-scrollEvent').length, 10);
     assert.equal(findAll('.infinity-scrollable-scrollEvent.inactive').length, 1, 'component is inactive before fetching more data');
-    await document.querySelector('.infinity-scrollable-scrollEvent').scrollIntoView();
+    await document.querySelector('.infinity-scrollable-scrollEvent').scrollIntoView(false);
 
     await waitUntil(() => {
       return findAll('.infinity-svg-scrollEvent').length === 20;

diff --git a/tests/acceptance/integration-test.js b/tests/acceptance/integration-test.js
@@ -32,7 +32,7 @@ module('Acceptance | Intersection Observer', function(hooks) {
     await visit('/');
 
     assert.ok(find('.my-component.bottom.inactive'), 'component is inactive');
-    document.querySelector('.my-component.bottom').scrollIntoView();
+    document.querySelector('.my-component.bottom').scrollIntoView(false);
 
     await waitFor('.my-component.bottom.active');
 
@@ -44,7 +44,7 @@ module('Acceptance | Intersection Observer', function(hooks) {
 
     await visit('/');
 
-    document.querySelector('.my-component.bottom').scrollIntoView();
+    document.querySelector('.my-component.bottom').scrollIntoView(false);
 
     await waitFor('.my-component.top.start-enabled.inactive');
 

diff --git a/tests/dummy/app/controllers/infinity-scrollable-raf.js b/tests/dummy/app/controllers/infinity-scrollable-raf.js
@@ -1,4 +1,12 @@
 import ScrollableController from './infinity-scrollable';
+import { set, get } from '@ember/object';
+
+let rect = '<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>';
+let circle = '<circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>';
+let line = '<line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>';
+
+const images = [rect, circle, line];
+let otherModels = [...Array(10).fill().map(() => `${images[(Math.random() * images.length) | 0]}`)];
 
 export default ScrollableController.extend({
   init() {
@@ -7,4 +15,14 @@ export default ScrollableController.extend({
       bottom: 200
     }
   },
+
+  otherModels,
+
+  actions: {
+    infinityLoadOther() {
+      const newModels = [...Array(10).fill().map(() => `${images[(Math.random() * images.length) | 0]}`)];
+      get(this, 'otherModels').push(...newModels);
+      set(this, 'otherModels', Array.from(get(this, 'otherModels')));
+    }
+  }
 });
diff --git a/tests/dummy/app/styles/app.css b/tests/dummy/app/styles/app.css
@@ -32,8 +32,10 @@ a.active {
 .infinity-container {
   border: 1px solid black;
   height: 500px;
+  width: 70%;
   overflow: scroll;
 }
 .infinity-component, .infinity-scrollable {
   height: 10px;
 }
+
diff --git a/tests/dummy/app/templates/infinity-scrollable-raf.hbs b/tests/dummy/app/templates/infinity-scrollable-raf.hbs
@@ -16,3 +16,24 @@
     scrollableAreaOverride=".list-rAF"
     infinityLoad=(action "infinityLoad")}}
 </div>
+
+<div style="height: 100px"></div>
+
+<div class="list-rAF-bottom infinity-container">
+  <ul>
+    {{#each otherModels as |val|}}
+      <div class="infinity-svg-rAF-bottom">
+        <svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
+          {{{val}}}
+        </svg>
+      </div>
+    {{/each}}
+  </ul>
+  {{my-component
+    class="infinity-scrollable-rAF-bottom infinity-scrollable"
+    viewportSpyOverride=true
+    viewportIntersectionObserverOverride=false
+    viewportToleranceOverride=viewportToleranceOverride
+    scrollableAreaOverride=".list-rAF-bottom"
+    infinityLoad=(action "infinityLoadOther")}}
+</div>