From af5e5a544caf79ab8cf3c265440e999687fa45a6 Mon Sep 17 00:00:00 2001 From: Scott Newcomer Date: Thu, 1 Mar 2018 06:26:02 -0800 Subject: [PATCH] Raf test bounding (#133) --- addon/mixins/in-viewport.js | 2 +- tests/acceptance/infinity-test.js | 22 ++++++++++++++++--- tests/acceptance/integration-test.js | 4 ++-- .../controllers/infinity-scrollable-raf.js | 18 +++++++++++++++ tests/dummy/app/styles/app.css | 2 ++ .../app/templates/infinity-scrollable-raf.hbs | 21 ++++++++++++++++++ 6 files changed, 63 insertions(+), 6 deletions(-) diff --git a/addon/mixins/in-viewport.js b/addon/mixins/in-viewport.js index 89f8da0e..712f844a 100644 --- 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 index 82c0c870..ada523c1 100644 --- 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 index 4e01509d..92f3c1e8 100644 --- 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 index d56f559f..e5821ea8 100644 --- 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 = ''; +let circle = ''; +let line = ''; + +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 index 7215e155..7159be05 100644 --- 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 index 49b066c4..3a398fa5 100644 --- 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")}} + +
+ +
+
    + {{#each otherModels as |val|}} +
    + + {{{val}}} + +
    + {{/each}} +
+ {{my-component + class="infinity-scrollable-rAF-bottom infinity-scrollable" + viewportSpyOverride=true + viewportIntersectionObserverOverride=false + viewportToleranceOverride=viewportToleranceOverride + scrollableAreaOverride=".list-rAF-bottom" + infinityLoad=(action "infinityLoadOther")}} +