improve scrollbars test

KingSora · Dec 18, 2023 · 7d3fe08 · 7d3fe08
1 parent 569fb84
commit 7d3fe08
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 7 deletions.
diff --git a/...ages/overlayscrollbars/test/playwright/setups/scrollbarsSetup/scrollbars/index.browser.ts b/...ages/overlayscrollbars/test/playwright/setups/scrollbarsSetup/scrollbars/index.browser.ts
@@ -24,7 +24,6 @@ OverlayScrollbars.env().setDefaultInitialization({
 
 const startButton: HTMLElement | null = document.querySelector('#start');
 const directionRTLButton: HTMLElement | null = document.querySelector('#directionRTL');
-const stage: HTMLElement | null = document.querySelector('#stage');
 const stageResizer: HTMLElement | null = document.querySelector('#stageResizer');
 const targetA: HTMLElement | null = document.querySelector('#targetA');
 const targetB: HTMLElement | null = document.querySelector('#targetB');
@@ -47,6 +46,8 @@ const scrollInstance = (osInstance: OverlayScrollbars) => {
 
 resize(stageResizer!);
 
+const osInstanceBody = OverlayScrollbars(document.body, {});
+
 const osInstanceA = OverlayScrollbars(targetA!, {});
 const osInstanceB = OverlayScrollbars(
   {
@@ -154,7 +155,7 @@ const resizeStageResizer = async () => {
 const assertScrollbarDirection = async (osInstance: OverlayScrollbars, directionIsRTL: boolean) => {
   const { directionRTL: instanceDirectionRTL } = osInstance.state();
   const { scrollbarHorizontal, scrollbarVertical, host } = osInstance.elements();
-  const hostId = host.getAttribute('id');
+  const hostId = host === document.body ? 'body' : host.getAttribute('id');
   const hostBcr = host.getBoundingClientRect();
   const scrollbarHorizontalBcr = scrollbarHorizontal.scrollbar.getBoundingClientRect();
   const scrollbarVerticalBcr = scrollbarVertical.scrollbar.getBoundingClientRect();
@@ -192,7 +193,7 @@ const assertScrollbarDirection = async (osInstance: OverlayScrollbars, direction
 
 const assetScrollbarClickStopsPropagation = (osInstance: OverlayScrollbars) => {
   const { host, scrollbarHorizontal, scrollbarVertical } = osInstance.elements();
-  const hostId = host.getAttribute('id');
+  const hostId = host === document.body ? 'body' : host.getAttribute('id');
   const isScrollbarElement = (
     element: EventTarget | null,
     scrollbarElements: CloneableScrollbarElements
@@ -220,17 +221,20 @@ const runBlock = async () => {
   await assertScrollbarDirection(osInstanceB, false);
   await assertScrollbarDirection(osInstanceC, true);
 
+  // body element scrollbars acts always like ltr direction
+  await assertScrollbarDirection(osInstanceB, false);
+
   await resizeStageResizer();
 
   stageResizer!.removeAttribute('style');
 };
 
 directionRTLButton?.addEventListener('click', () => {
   if (directionRTL) {
-    stage!.style.direction = 'ltr';
+    document.body.style.direction = 'ltr';
     directionRTL = false;
   } else {
-    stage!.style.direction = 'rtl';
+    document.body.style.direction = 'rtl';
     directionRTL = true;
   }
 });
@@ -258,4 +262,5 @@ startButton?.addEventListener('click', async () => {
 assetScrollbarClickStopsPropagation(osInstanceA);
 assetScrollbarClickStopsPropagation(osInstanceB);
 assetScrollbarClickStopsPropagation(osInstanceC);
+assetScrollbarClickStopsPropagation(osInstanceBody);
 scrollInstances();
diff --git a/packages/overlayscrollbars/test/playwright/setups/scrollbarsSetup/scrollbars/index.html b/packages/overlayscrollbars/test/playwright/setups/scrollbarsSetup/scrollbars/index.html
@@ -1,3 +1,4 @@
+<div id="bodyOverflow"></div>
 <div id="controls">
   <button id="start">start</button>
   <button id="directionRTL">direction RTL</button>
@@ -10,10 +11,10 @@
     </div>
     <div class="row">
       <div id="targetB">
-        <div class="content">B</div>
+        <div class="content"></div>
       </div>
       <div id="targetC">
-        <div class="content">C</div>
+        <div class="content"></div>
       </div>
     </div>
   </div>

diff --git a/packages/overlayscrollbars/test/playwright/setups/scrollbarsSetup/scrollbars/index.scss b/packages/overlayscrollbars/test/playwright/setups/scrollbarsSetup/scrollbars/index.scss
@@ -20,6 +20,13 @@ body {
   }
 }
 
+#bodyOverflow {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  z-index: -1;
+}
+
 .resizeBtn {
   position: absolute;
   bottom: 0;

diff --git a/packages/overlayscrollbars/test/playwright/setups/scrollbarsSetup/scrollbars/index.test.ts b/packages/overlayscrollbars/test/playwright/setups/scrollbarsSetup/scrollbars/index.test.ts
@@ -5,6 +5,11 @@ playwrightRollup();
 
 test.describe('scrollbarsSetup.scrollbars', () => {
   test.beforeEach(async ({ page }) => {
+    // test scrollbar click event propagation stop
+    await page.click('body > .os-scrollbar');
+    await page.click('body > .os-scrollbar > .os-scrollbar-track');
+    await page.click('body > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle');
+
     await page.click('#targetA .os-scrollbar');
     await page.click('#targetA .os-scrollbar-track');
     await page.click('#targetA .os-scrollbar-handle');