From 6e26f4f9e490ba8398a8964161d59891f78b305f Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 25 Jan 2022 14:23:49 -0600 Subject: [PATCH] feat: IntersectionObserver (#54) --- src/lib/sandbox/read-main-platform.ts | 9 +- tests/index.html | 1 + .../platform/intersection-observer/index.html | 102 ++++++++++++++++++ .../intersection-observer.spec.ts | 15 +++ 4 files changed, 125 insertions(+), 2 deletions(-) create mode 100644 tests/platform/intersection-observer/index.html create mode 100644 tests/platform/intersection-observer/intersection-observer.spec.ts diff --git a/src/lib/sandbox/read-main-platform.ts b/src/lib/sandbox/read-main-platform.ts index 2797fda3..f209225b 100644 --- a/src/lib/sandbox/read-main-platform.ts +++ b/src/lib/sandbox/read-main-platform.ts @@ -17,8 +17,9 @@ export const readMainPlatform = () => { const comment = docImpl.createComment(''); const frag = docImpl.createDocumentFragment(); const svg = docImpl.createElementNS('http://www.w3.org/2000/svg', 'svg'); - const mutationObserver = new MutationObserver(noop); - const resizeObserver = new ResizeObserver(noop); + const intersectionObserver = getGlobalConstructor(mainWindow, 'IntersectionObserver'); + const mutationObserver = getGlobalConstructor(mainWindow, 'MutationObserver'); + const resizeObserver = getGlobalConstructor(mainWindow, 'ResizeObserver'); const perf = mainWindow.performance; const screen = mainWindow.screen; @@ -41,6 +42,7 @@ export const readMainPlatform = () => { [screen.orientation], // global constructors + [intersectionObserver, InterfaceType.EnvGlobalConstructor], [mutationObserver, InterfaceType.EnvGlobalConstructor], [resizeObserver, InterfaceType.EnvGlobalConstructor], @@ -210,3 +212,6 @@ const readStorage = (storageName: 'localStorage' | 'sessionStorage') => { } return items; }; + +const getGlobalConstructor = (mainWindow: any, cstrName: string) => + typeof mainWindow[cstrName] !== 'undefined' ? new mainWindow[cstrName](noop) : 0; diff --git a/tests/index.html b/tests/index.html index 336697d9..e5097216 100644 --- a/tests/index.html +++ b/tests/index.html @@ -87,6 +87,7 @@

Platform Tests

  • History
  • IFrame
  • Image
    • +
  • IntersectionObserver
  • MutationObserver
  • Navigator
  • Node
    • diff --git a/tests/platform/intersection-observer/index.html b/tests/platform/intersection-observer/index.html new file mode 100644 index 00000000..0561be44 --- /dev/null +++ b/tests/platform/intersection-observer/index.html @@ -0,0 +1,102 @@ + + + + + + + IntersectionObserver + + + + + + + + +

    IntersectionObserver

    + + + +
    + 🎉 + + 🎉 +
    + + + +

    All Tests

    + + diff --git a/tests/platform/intersection-observer/intersection-observer.spec.ts b/tests/platform/intersection-observer/intersection-observer.spec.ts new file mode 100644 index 00000000..48a5ea5e --- /dev/null +++ b/tests/platform/intersection-observer/intersection-observer.spec.ts @@ -0,0 +1,15 @@ +import { test, expect } from '@playwright/test'; + +test('intersection-observer', async ({ page }) => { + await page.goto('/platform/intersection-observer/'); + + const testIntersectionObserver = page.locator('#testIntersectionObserver'); + await expect(testIntersectionObserver).toHaveText(''); + + const linkScrollDown = page.locator('#scrolldown'); + await linkScrollDown.click(); + + await page.waitForSelector('.testIntersectionObserver'); + + await expect(testIntersectionObserver).toHaveText('intersecting #testIntersectionObserver'); +});