Fix overflow not adjusting position - PR#10 from glenn2223

-    Overflow is once again adjusting the position
-    Changes to tests
    -    Updated the original tests and helpers, to accommodate new test
    -    Added a simple test for collisions
    -    Added a hidden check that returns 0 for sizes (to help catch future overflow issues)

Author: glenn2223

CHANGELOG.md

@@ -26,6 +26,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unpublished
+
+### Fixed
+
+-   Position is once again changed if there's overflow (settings permitted)
+
+### Changed
+
+-   Added new overflow test and tweaked other tests
+
 ## [1.0.2] - 2024-07-30
 
 <small>[Compare to previous release][comp:1.0.2]</small>

eslint.config.mjs

@@ -88,7 +88,7 @@ export default [
             'no-floating-decimal': 'warn',
             'no-global-assign': 'warn',
             'no-implicit-coercion': 'warn',
-            'no-implicit-globals': 'warn',
+            'no-implicit-globals': 'off',
             'no-implied-eval': 'warn',
             'no-invalid-this': 'off',
             'no-iterator': 'warn',

src/index.ts

@@ -79,10 +79,10 @@ function position(options: IOptions): PositionData {
                           },
                       }
                     : options.anchor.getBoundingClientRect(),
-            originalDisplay = options.target.style.display,
-            _targetRect = options.target.getBoundingClientRect();
+            originalDisplay = options.target.style.display;
 
         options.target.style.display = 'block';
+        const _targetRect = options.target.getBoundingClientRect();
         options.target.style.display = originalDisplay;
 
         // Adjust to scrollable regions

tests/Helpers.ts

@@ -63,13 +63,15 @@ export class Helper {
         div.style.height = `${this.targetSize.height}px`;
         div.style.width = `${this.targetSize.width}px`;
         div.style.position = 'absolute';
+        div.style.display = 'none';
         document.body.insertAdjacentElement('beforeend', div);
     }
 
     getLeft(
         tP: CombinedAlignment,
         my?: CombinedAlignment,
         at?: CombinedAlignment,
+        onCollision?: (input: number) => number,
     ) {
         let left = 0;
 
@@ -116,18 +118,16 @@ export class Helper {
             }
         }
 
-        if (this.collision === CollisionHandler.ignore) {
-            return left;
-        }
-
-        // Work on collision
-        return left;
+        return this.collision !== CollisionHandler.ignore && onCollision
+            ? onCollision(left)
+            : left;
     }
 
     getTop(
         tP: CombinedAlignment,
         my?: CombinedAlignment,
         at?: CombinedAlignment,
+        onCollision?: (input: number) => number,
     ) {
         let top = 0;
 
@@ -180,12 +180,9 @@ export class Helper {
             }
         }
 
-        if (this.collision === CollisionHandler.ignore) {
-            return top;
-        }
-
-        // Work on collision
-        return top;
+        return this.collision !== CollisionHandler.ignore && onCollision
+            ? onCollision(top)
+            : top;
     }
 
     /**
@@ -216,16 +213,17 @@ export class Helper {
 
         targetEl!.getBoundingClientRect = jest.fn(() => {
             const top = 0,
-                left = 0;
+                left = 0,
+                hiddenSize = targetEl?.style.display === 'none' ? 0 : null;
 
             return {
                 x: left,
                 y: top,
-                width: this.targetSize.width,
-                height: this.targetSize.height,
+                width: hiddenSize ?? this.targetSize.width,
+                height: hiddenSize ?? this.targetSize.height,
                 top: top,
-                right: left + this.targetSize.width,
-                bottom: top + this.targetSize.height,
+                right: left + (hiddenSize ?? this.targetSize.width),
+                bottom: top + (hiddenSize ?? this.targetSize.height),
                 left: left,
                 toJSON: () => '{}',
             };

tests/collision.test.ts

@@ -0,0 +1,45 @@
+import { CollisionHandler, position } from '../src/index';
+import { allData, Helper, SizeData } from './Helpers';
+
+const windowSize: SizeData = {
+        height: 1000,
+        width: 1000,
+    },
+    anchorSize: SizeData = {
+        height: 100,
+        width: 100,
+    },
+    targetSize: SizeData = {
+        height: 100,
+        width: 200,
+    },
+    helper = new Helper(CollisionHandler.bestFit, anchorSize, targetSize),
+    leftCollision: (input: number) => number = () => 800;
+
+helper.setupEnvironment(windowSize);
+
+test('Collision changes the output', () => {
+    const tP = 'center right',
+        myA = 'top center',
+        atA = 'bottom center';
+
+    helper.setupTest(tP);
+
+    const pData = position({
+        ...{ debug: true },
+        ...{
+            my: myA,
+            at: atA,
+            target: document.querySelector<HTMLDivElement>('.target')!,
+            anchor: document.querySelector<HTMLElement>('.anchor')!,
+        },
+    }) as allData;
+
+    expect({
+        left: parseInt(pData.left, 10),
+        top: parseInt(pData.top, 10),
+    }).toStrictEqual({
+        left: helper.getLeft(tP, myA, atA, leftCollision),
+        top: helper.getTop(tP, myA, atA),
+    });
+});

tests/index.test.ts

@@ -1,5 +1,4 @@
 import { CollisionHandler, CombinedAlignment, position } from '../src/index';
-// @ts-ignore
 import { allData, Helper, SizeData } from './Helpers';
 
 const windowSize: SizeData = {
@@ -30,74 +29,68 @@ const windowSize: SizeData = {
 helper.setupEnvironment(windowSize);
 
 describe('HoverPosition (collisions ignored)', () => {
-    // Add base style
-
     describe.each(positionArray)('Target Position: %s', (tP) => {
-        describe.each(positionArray)('options.my: %s', (myAlignment) => {
-            test.each(positionArray)('options.at: %s', (atAlignment) => {
+        describe.each(positionArray)('options.my: %s', (myPlacement) => {
+            test.each(positionArray)('options.at: %s', (atPlacement) => {
                 helper.setupTest(tP);
 
                 const pData = position({
                     ...{ debug: true },
                     ...{
-                        my: myAlignment,
-                        at: atAlignment,
+                        my: myPlacement,
+                        at: atPlacement,
                         target: document.querySelector<HTMLDivElement>(
                             '.target',
                         )!,
                         anchor: document.querySelector<HTMLElement>('.anchor')!,
                         collision: CollisionHandler.ignore,
                     },
                 }) as allData;
-                /*
-                console.log(
-                    `${tP}|${myAlignment}|${atAlignment}`,
-                    pData,
-                );
-                */
+
                 expect({
                     left: parseInt(pData.left, 10),
                     top: parseInt(pData.top, 10),
                 }).toStrictEqual({
-                    left: helper.getLeft(tP, myAlignment, atAlignment),
-                    top: helper.getTop(tP, myAlignment, atAlignment),
+                    left: helper.getLeft(tP, myPlacement, atPlacement),
+                    top: helper.getTop(tP, myPlacement, atPlacement),
                 });
             });
         });
     });
 });
 
 test('Window scroll adjusts output', () => {
+    // Set the window scroll position
     window.scrollX = 50;
     window.scrollY = 50;
-    
-    const tP = 'top left',
-        myA = 'top center',
-        atA = 'bottom center';
-    
-    helper.setupTest(tP);
+
+    const targetWindowPosition = 'top left',
+        myPlacement = 'top center',
+        atPlacement = 'bottom center';
+
+    helper.setupTest(targetWindowPosition);
 
     const pData = position({
         ...{ debug: true },
         ...{
-            my: myA,
-            at: atA,
-            target: document.querySelector<HTMLDivElement>(
-                '.target',
-            )!,
+            my: myPlacement,
+            at: atPlacement,
+            target: document.querySelector<HTMLDivElement>('.target')!,
             anchor: document.querySelector<HTMLElement>('.anchor')!,
             collision: CollisionHandler.ignore,
         },
     }) as allData;
-    
+
     expect({
         left: parseInt(pData.left, 10),
         top: parseInt(pData.top, 10),
     }).toStrictEqual({
-        left: helper.getLeft(tP, myA, atA) + 50,
-        top: helper.getTop(tP, myA, atA) + 50,
+        left:
+            helper.getLeft(targetWindowPosition, myPlacement, atPlacement) + 50,
+        top: helper.getTop(targetWindowPosition, myPlacement, atPlacement) + 50,
     });
-    
-    window.scrollX = 50;
-    window.scrollY = 50;
+
+    // Reset the window scroll position
+    window.scrollX = 0;
+    window.scrollY = 0;
 });