test(calculate-position): add test for smart verticalPosition

Author: velrest

ember-basic-dropdown/src/components/basic-dropdown.gts

@@ -282,6 +282,7 @@ export default class BasicDropdown extends Component<BasicDropdownSignature> {
 
   @action
   reposition(): undefined | RepositionChanges {
+    debugger
     if (!this.publicAPI.isOpen) {
       return;
     }

ember-basic-dropdown/src/utils/calculate-position.ts

@@ -68,6 +68,7 @@ export const getViewData: GetViewData = (trigger, content) => {
     content.getBoundingClientRect();
   const viewportWidth = document.body.clientWidth || window.innerWidth;
   const viewportBottom = scroll.top + window.innerHeight;
+      debugger
   return {
     scroll,
     // The properties top and left of the trigger client rectangle need to be absolute to

test-app/tests/helpers/index.ts

@@ -4,6 +4,7 @@ import {
   setupTest as upstreamSetupTest,
   type SetupTestOptions,
 } from 'ember-qunit';
+import { getRootElement } from '@ember/test-helpers';
 
 // This file exists to provide wrappers around ember-qunit's
 // test setup functions. This way, you can easily extend the setup that is
@@ -40,4 +41,34 @@ function setupTest(hooks: NestedHooks, options?: SetupTestOptions) {
   // Additional setup for unit tests can be done here.
 }
 
-export { setupApplicationTest, setupRenderingTest, setupTest };
+function setContainerSize(hooks, width, height, overflow) {
+  let initialWidth: number;
+  let initialHeight: number;
+  let initialOverflow: string;
+
+  hooks.beforeEach(function() {
+    const container = getRootElement(); // safer than document.getElementById
+
+    console.log(container)
+    // Store original values
+    initialWidth = container.style.width;
+    initialHeight = container.style.height;
+    initialOverflow = container.style.overflow;
+
+    // Set new values
+    if (width) container.style.width = width;
+    if (height) container.style.height = height;
+    if (overflow) container.style.overflow = overflow;
+
+  });
+
+  hooks.afterEach(function() {
+    const container = getRootElement();
+    // Reset to original values to avoid polluting other tests
+    container.style.width = initialWidth;
+    container.style.height = initialHeight;
+    container.style.height = overflow;
+  });
+}
+
+export { setupApplicationTest, setupRenderingTest, setupTest, setContainerSize };

test-app/tests/integration/components/content-test.ts

@@ -9,6 +9,7 @@ import {
   type TestContext,
 } from '@ember/test-helpers';
 import type { Dropdown } from 'ember-basic-dropdown/types';
+import { setContainerSize } from 'test-app/tests/helpers';
 
 interface ExtendedTestContext extends TestContext {
   element: HTMLElement;
@@ -1180,4 +1181,36 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
       );
     });
   });
-});
+
+  module('calculate-position', function(hooks) {
+
+    setContainerSize(hooks, "300px", "200px", "hidden")
+    test<ExtendedTestContext>('It properly handles the onMouseLeave action', async function(assert) {
+      assert.expect(4);
+
+      this.set("content", [])
+      await render<ExtendedTestContext>(hbs`
+        <div style="margin-top: 250px">
+          <BasicDropdown @renderInPlace={{true}} as |dd|>
+            <dd.Trigger id="trigger">Test</dd.Trigger>
+            <dd.Content id="content">
+              {{#each this.content as |item|}}
+                <p>{{item}}</p>
+              {{/each}}
+            </dd.Content>
+          </BasicDropdown>
+        </div>
+      `);
+
+      this.set("content", Array.from(Array(5)).map(i=>"Content"))
+      await click('#trigger');
+      await triggerEvent(
+        getRootNode(this.element).querySelector(
+          '#content',
+        ) as HTMLElement,
+        'scroll',
+      );
+      await this.pauseTest()
+    });
+  });
+})