mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-06-07 02:32:27 +03:00
Code Issues Packages Projects Releases Wiki Activity

improve trinsic observer code and tests

Browse Source
This commit is contained in:
Rene
2021-04-14 14:44:46 +02:00
parent a3573f87a1
commit ea052b3001
10 changed files with 84 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/src/observers/trinsicObserver.ts
+2 -2
View File
@@ -1,7 +1,7 @@
import {
WH,
CacheValues,
createDOM,
createDiv,
offsetSize,
runEach,
prependChildren,
@@ -26,7 +26,7 @@ export const createTrinsicObserver = (
target: HTMLElement,
onTrinsicChangedCallback: (heightIntrinsic: CacheValues<boolean>) => any
): TrinsicObserver => {
const trinsicObserver = createDOM(`<div class="${classNameTrinsicObserver}"></div>`)[0] as HTMLElement;
const trinsicObserver = createDiv(classNameTrinsicObserver);
const offListeners: (() => void)[] = [];
const { _update: updateHeightIntrinsicCache, _current: getCurrentHeightIntrinsicCache } = createCache<
boolean,
packages/overlayscrollbars/tests/browser/observers/sizeObserver/handleEnvironment.ts
+15
View File
@@ -0,0 +1,15 @@
{
const url = new URL(window.location.toString());
const params = url.searchParams;
const useResizeObserverPolyfill = Boolean(params.get('roPolyfill'));
if (useResizeObserverPolyfill) {
// @ts-ignore
window.ResizeObserver = undefined;
} else {
document.getElementById('roPolyfill')?.addEventListener('click', () => {
params.set('roPolyfill', 'true');
window.location.assign(url.toString());
});
}
}
packages/overlayscrollbars/tests/browser/observers/sizeObserver/handleResizeObserver.ts
-13
View File
@@ -1,13 +0,0 @@
const url = new URL(window.location.toString());
const params = url.searchParams;
const useResizeObserverPolyfill = Boolean(params.get('resizeobserverpolyfill'));
if (useResizeObserverPolyfill) {
// @ts-ignore
window.ResizeObserver = undefined;
} else {
document.getElementById('resizeobserver-polyfill')?.addEventListener('click', () => {
params.set('resizeobserverpolyfill', 'true');
window.location.assign(url.toString());
});
}
packages/overlayscrollbars/tests/browser/observers/sizeObserver/index.browser.ts
+3 -2
View File
@@ -1,6 +1,6 @@
import 'styles/overlayscrollbars.scss';
import './index.scss';
import './handleResizeObserver';
import './handleEnvironment';
import should from 'should';
import { generateClassChangeSelectCallback, iterateSelect } from '@/testing-browser/Select';
import { setTestResult, waitForOrFailTest } from '@/testing-browser/TestResult';
@@ -33,6 +33,7 @@ const displaySelect: HTMLSelectElement | null = document.querySelector('#display
const directionSelect: HTMLSelectElement | null = document.querySelector('#direction');
const startBtn: HTMLButtonElement | null = document.querySelector('#start');
const resizesSlot: HTMLButtonElement | null = document.querySelector('#resizes');
const preInitChildren = targetElm?.children.length;
const sizeObserver = createSizeObserver(
targetElm as HTMLElement,
@@ -175,7 +176,7 @@ const start = async () => {
});
sizeObserver._destroy();
should.ok(targetElm?.children.length === 0);
should.equal(targetElm?.children.length, preInitChildren);
setTestResult(true);
};
packages/overlayscrollbars/tests/browser/observers/sizeObserver/index.html
+1 -1
View File
@@ -1,5 +1,5 @@
<div id="controls">
<button id="resizeobserver-polyfill">ResizeObserver polyfill</button><br />
<button id="roPolyfill">ResizeObserver polyfill</button><br />
<label for="height">height</label>
<select name="height" id="height">
<option value="heightAuto">auto</option>
packages/overlayscrollbars/tests/browser/observers/sizeObserver/index.test.ts
+1 -1
View File
@@ -13,7 +13,7 @@ describe('SizeObserver', () => {
});
test('with ResizeOserver polyfill', async () => {
await page.click('#resizeobserver-polyfill');
await page.click('#roPolyfill');
await page.waitForTimeout(500);
await page.click('#start');
await expect(page).toHaveSelector('#testResult.passed');
packages/overlayscrollbars/tests/browser/observers/trinsicObserver/handleEnvironment.ts
+26
View File
@@ -0,0 +1,26 @@
{
const url = new URL(window.location.toString());
const params = url.searchParams;
const useIntersectionObserverPolyfill = Boolean(params.get('ioPolyfill'));
const useResizeObserverPolyfill = Boolean(params.get('roPolyfill'));
if (useIntersectionObserverPolyfill) {
// @ts-ignore
window.IntersectionObserver = undefined;
} else {
document.getElementById('ioPolyfill')?.addEventListener('click', () => {
params.set('ioPolyfill', 'true');
window.location.assign(url.toString());
});
}
if (useResizeObserverPolyfill) {
// @ts-ignore
window.ResizeObserver = undefined;
} else {
document.getElementById('roPolyfill')?.addEventListener('click', () => {
params.set('roPolyfill', 'true');
window.location.assign(url.toString());
});
}
}
packages/overlayscrollbars/tests/browser/observers/trinsicObserver/index.browser.ts
+17 -12
View File
@@ -1,5 +1,6 @@
import 'styles/overlayscrollbars.scss';
import './index.scss';
import './handleEnvironment';
import should from 'should';
import { generateClassChangeSelectCallback, iterateSelect, selectOption } from '@/testing-browser/Select';
import { timeout } from '@/testing-browser/timeout';
@@ -18,6 +19,19 @@ const targetHeightSelect: HTMLSelectElement | null = document.querySelector('#ta
const displaySelect: HTMLSelectElement | null = document.querySelector('#display');
const startBtn: HTMLButtonElement | null = document.querySelector('#start');
const changesSlot: HTMLButtonElement | null = document.querySelector('#changes');
const preInitChildren = targetElm?.children.length;
const trinsicObserver = createTrinsicObserver(targetElm as HTMLElement, (heightIntrinsicCache) => {
if (heightIntrinsicCache._changed) {
heightIterations += 1;
heightIntrinsic = heightIntrinsicCache._value;
}
requestAnimationFrame(() => {
if (changesSlot) {
changesSlot.textContent = heightIterations.toString();
}
});
});
const envElmSelectCallback = generateClassChangeSelectCallback(envElm as HTMLElement);
const targetElmSelectCallback = generateClassChangeSelectCallback(targetElm as HTMLElement);
@@ -53,6 +67,7 @@ const iterate = async (select: HTMLSelectElement | null, afterEach?: () => any)
if (trinsicHeightChanged) {
should.equal(heightIterations, currHeightIterations + 1);
}
should.equal(trinsicObserver._getCurrentCacheValues()._heightIntrinsic._value, newHeightIntrinsic);
});
},
afterEach,
@@ -113,21 +128,11 @@ const start = async () => {
});
await changeWhileHidden();
trinsicObserver._destroy();
should.equal(targetElm?.children.length, preInitChildren);
setTestResult(true);
};
startBtn?.addEventListener('click', start);
createTrinsicObserver(targetElm as HTMLElement, (heightIntrinsicCache) => {
if (heightIntrinsicCache._changed) {
heightIterations += 1;
heightIntrinsic = heightIntrinsicCache._value;
}
requestAnimationFrame(() => {
if (changesSlot) {
changesSlot.textContent = heightIterations.toString();
}
});
});
export { start };
packages/overlayscrollbars/tests/browser/observers/trinsicObserver/index.html
+2
View File
@@ -1,4 +1,6 @@
<div id="controls">
<button id="ioPolyfill">ResizeObserver polyfill</button>
<button id="roPolyfill">IntersectionObserver polyfill</button><br />
<label for="display">display</label>
<select name="display" id="display">
<option value="displayBlock">block</option>
packages/overlayscrollbars/tests/browser/observers/trinsicObserver/index.test.ts
+17 -1
View File
@@ -7,7 +7,23 @@ describe('TrinsicObserver', () => {
await page.goto(url);
});
test('test', async () => {
test('with IntersectionObserver', async () => {
await page.click('#start');
await expect(page).toHaveSelector('#testResult.passed');
});
test('with ResizeObserver', async () => {
await page.click('#ioPolyfill');
await page.waitForTimeout(500);
await page.click('#start');
await expect(page).toHaveSelector('#testResult.passed');
});
test('with ResizeObserver polyfill', async () => {
await page.click('#ioPolyfill');
await page.waitForTimeout(500);
await page.click('#roPolyfill');
await page.waitForTimeout(500);
await page.click('#start');
await expect(page).toHaveSelector('#testResult.passed');
});