From d8953ac76ce15682ed6734c0150a5f465c4b9100 Mon Sep 17 00:00:00 2001
From: Rene <king-sora@hotmail.de>
Date: Fri, 8 Jul 2022 13:13:01 +0200
Subject: [PATCH] improve test

---
 .../update/handleEnvironment.ts               |  2 +-
 .../structureSetup/update/index.browser.ts    | 25 +++--
 .../setups/structureSetup/update/index.html   |  1 +
 .../structureSetup/update/index.test.ts       | 92 +++++++++++--------
 4 files changed, 74 insertions(+), 46 deletions(-)

diff --git a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/handleEnvironment.ts b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/handleEnvironment.ts
index 55731cc..17764ef 100644
--- a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/handleEnvironment.ts
+++ b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/handleEnvironment.ts
@@ -5,7 +5,7 @@ import { addClass } from 'support';
   const url = new URL(window.location.toString());
   const params = url.searchParams;
 
-  ['nss', 'fbg', 'ccp', 'po', 'fo'].forEach((param) => {
+  ['nss', 'fbg', 'ccp', 'po', 'fo', 'tvp'].forEach((param) => {
     const paramValue = Boolean(params.get(param));
 
     if (paramValue) {
diff --git a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.browser.ts b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.browser.ts
index c56e5c3..62c94e3 100644
--- a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.browser.ts
+++ b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.browser.ts
@@ -16,6 +16,7 @@ import {
   contents,
   appendChildren,
   createDOM,
+  hasClass,
 } from 'support';
 import { resize } from '@/testing-browser/Resize';
 import { setTestResult, waitForOrFailTest } from '@/testing-browser/TestResult';
@@ -107,12 +108,20 @@ if (!useContentElement) {
   appendChildren(comparisonContentElm, elms);
 }
 
+const initObj = hasClass(document.body, 'tvp')
+  ? {
+      target: target!,
+      viewport: target!,
+      content: useContentElement,
+    }
+  : { target: target!, content: useContentElement };
+
 let updateCount = 0;
 // @ts-ignore
 const osInstance =
   // @ts-ignore
   (window.os = OverlayScrollbars(
-    { target: target!, viewport: target!, content: useContentElement },
+    initObj,
     { nativeScrollbarsOverlaid: { initialize: true } },
     {
       updated() {
@@ -284,7 +293,7 @@ const checkMetrics = async (checkComparison: CheckComparisonObj) => {
 
     // ==== check scroll values:
 
-    if (ff && isFractionalPixelRatio()) {
+    if (ff && isFractionalPixelRatio() && viewportIsTarget) {
       should.ok(
         Math.abs(targetMetrics.scroll.width - comparisonMetrics.scroll.width) <= 1,
         `Scroll width equality. +-1 (${osInstance.state().overflowAmount.x})`
@@ -486,11 +495,13 @@ const checkMetrics = async (checkComparison: CheckComparisonObj) => {
         'Host Overflow should be hidden without visible overflowing content.'
       );
     }
-    should.equal(
-      paddingOverflowStyle,
-      hostOverflowStyle,
-      'Padding Overflow should equal Host overflow.'
-    );
+    if (targetPadding !== targetViewport) {
+      should.equal(
+        paddingOverflowStyle,
+        hostOverflowStyle,
+        'Padding Overflow should equal Host overflow.'
+      );
+    }
 
     await timeout(1);
 
diff --git a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.html b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.html
index 7f4078c..4a2dde0 100644
--- a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.html
+++ b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.html
@@ -4,6 +4,7 @@
   <button id="ccp">Without CSS Custom Props</button>
   <button id="po">Partially Overlaid</button>
   <button id="fo">Fully Overlaid</button>
+  <button id="tvp">Target Is Viewport</button>
   <br />
   <label for="envHeight">envHeight</label>
   <select name="envHeight" id="envHeight">
diff --git a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.test.ts b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.test.ts
index 5fa060b..786ccc0 100644
--- a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.test.ts
+++ b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.test.ts
@@ -5,53 +5,69 @@ import { test, Page } from '@playwright/test';
 playwrightRollup();
 
 test.describe('StructureSetup.update', () => {
-  [false, true].forEach(async (nativeScrollbarStyling) => {
-    const withText = nativeScrollbarStyling ? 'with' : 'without';
-    const nss = async (page: Page) => {
-      if (!nativeScrollbarStyling) {
-        await page.click('#nss');
+  [false].forEach(async (targetIsViewport) => {
+    const isOrIsNot = targetIsViewport ? 'is' : 'is not';
+    const setTargetIsVp = async (page: Page) => {
+      if (targetIsViewport) {
+        await page.click('#tvp');
         await page.waitForTimeout(500);
       }
     };
 
-    test.describe(`${withText} native scrollbar styling`, () => {
-      test.describe.configure({ mode: 'parallel' });
+    test.describe(`target ${isOrIsNot} viewport`, () => {
+      [false, true].forEach(async (nativeScrollbarStyling) => {
+        const withText = nativeScrollbarStyling ? 'with' : 'without';
+        const nss = async (page: Page) => {
+          if (!nativeScrollbarStyling) {
+            await page.click('#nss');
+            await page.waitForTimeout(500);
+          }
+        };
 
-      test('default', async ({ page }) => {
-        await nss(page);
-        await page.click('#start');
-        await expectSuccess(page);
-      });
+        test.describe(`${withText} native scrollbar styling`, () => {
+          test.describe.configure({ mode: 'parallel' });
 
-      test('without flexbox glue & css custom props', async ({ page }) => {
-        await nss(page);
-        await page.click('#fbg');
-        await page.waitForTimeout(500);
-        await page.click('#ccp');
-        await page.waitForTimeout(500);
-        await page.click('#start');
-        await expectSuccess(page);
-      });
+          test('default', async ({ page }) => {
+            await setTargetIsVp(page);
+            await nss(page);
+            await page.click('#start');
+            await expectSuccess(page);
+          });
 
-      test('with partially overlaid scrollbars', async ({ page, browserName }) => {
-        test.skip(
-          browserName === 'firefox' || browserName === 'webkit',
-          "firefox can't simulate partially overlaid scrollbars, boost speed by omitting webkit"
-        );
+          test('without flexbox glue & css custom props', async ({ page }) => {
+            await setTargetIsVp(page);
+            await nss(page);
+            await page.click('#fbg');
+            await page.waitForTimeout(500);
+            await page.click('#ccp');
+            await page.waitForTimeout(500);
+            await page.click('#start');
+            await expectSuccess(page);
+          });
 
-        await nss(page);
-        await page.click('#po');
-        await page.waitForTimeout(500);
-        await page.click('#start');
-        await expectSuccess(page);
-      });
+          test('with partially overlaid scrollbars', async ({ page, browserName }) => {
+            test.skip(
+              browserName === 'firefox' || browserName === 'webkit',
+              "firefox can't simulate partially overlaid scrollbars, boost speed by omitting webkit"
+            );
 
-      test('with fully overlaid scrollbars', async ({ page }) => {
-        await nss(page);
-        await page.click('#fo');
-        await page.waitForTimeout(500);
-        await page.click('#start');
-        await expectSuccess(page);
+            await setTargetIsVp(page);
+            await nss(page);
+            await page.click('#po');
+            await page.waitForTimeout(500);
+            await page.click('#start');
+            await expectSuccess(page);
+          });
+
+          test('with fully overlaid scrollbars', async ({ page }) => {
+            await setTargetIsVp(page);
+            await nss(page);
+            await page.click('#fo');
+            await page.waitForTimeout(500);
+            await page.click('#start');
+            await expectSuccess(page);
+          });
+        });
       });
     });
   });