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

Author: velrest

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

@@ -36,7 +36,7 @@ export type CalculatePosition = (
   options: CalculatePositionOptions,
 ) => CalculatePositionResult;
 
-export type GetViewDataResult = {
+type GetViewDataResult = {
   scroll: { left: number; top: number };
   triggerLeft: number;
   triggerTop: number;
@@ -48,12 +48,12 @@ export type GetViewDataResult = {
   viewportBottom: number;
 };
 
-export type GetViewData = (
+type GetViewData = (
   trigger: Element,
   content: HTMLElement,
 ) => GetViewDataResult;
 
-export const getViewData: GetViewData = (trigger, content) => {
+const getViewData: GetViewData = (trigger, content) => {
   const scroll = {
     left: window.scrollX,
     top: window.scrollY,
@@ -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;
+
   return {
     scroll,
     // The properties top and left of the trigger client rectangle need to be absolute to

test-app/tests/integration/components/basic-dropdown-test.ts

@@ -1657,4 +1657,67 @@ module('Integration | Component | basic-dropdown', function (hooks) {
       .dom(shadowRoot?.querySelector('#dropdown-is-opened'))
       .doesNotExist('The dropdown is closed again');
   });
+
+  test<ExtendedTestContext>('It adds the proper class above to trigger and content when it receives `renderInPlace={{true}}` and @verticalPosition="auto"', async function (assert) {
+    assert.expect(2);
+
+    await render(hbs`
+      <div style="position: absolute; bottom: 0">
+        <BasicDropdown @renderInPlace={{true}} @verticalPosition="auto" as |dropdown|>
+          <dropdown.Trigger>Press me</dropdown.Trigger>
+          <dropdown.Content><h3>Content of the dropdown</h3></dropdown.Content>
+        </BasicDropdown>
+      </div>
+    `);
+
+    await click(
+      getRootNode(this.element).querySelector(
+        '.ember-basic-dropdown-trigger',
+      ) as HTMLElement,
+    );
+
+    assert
+      .dom('.ember-basic-dropdown-trigger', getRootNode(this.element))
+      .hasClass(
+        'ember-basic-dropdown-trigger--above',
+        'The proper class has been added',
+      );
+    assert
+      .dom('.ember-basic-dropdown-content', getRootNode(this.element))
+      .hasClass(
+        'ember-basic-dropdown-content--above',
+        'The proper class has been added',
+      );
+  });
+
+  test<ExtendedTestContext>('It adds the proper class below to trigger and content when it receives `renderInPlace={{true}}` and @verticalPosition="auto"', async function (assert) {
+    assert.expect(2);
+
+    await render(hbs`
+      <div style="position: absolute; top: 0">
+        <BasicDropdown @renderInPlace={{true}} @verticalPosition="auto" as |dropdown|>
+          <dropdown.Trigger>Press me</dropdown.Trigger>
+          <dropdown.Content><h3>Content of the dropdown</h3></dropdown.Content>
+        </BasicDropdown>
+      </div>
+    `);
+
+    await click(
+      getRootNode(this.element).querySelector(
+        '.ember-basic-dropdown-trigger',
+      ) as HTMLElement,
+    );
+    assert
+      .dom('.ember-basic-dropdown-trigger', getRootNode(this.element))
+      .hasClass(
+        'ember-basic-dropdown-trigger--below',
+        'The proper class has been added',
+      );
+    assert
+      .dom('.ember-basic-dropdown-content', getRootNode(this.element))
+      .hasClass(
+        'ember-basic-dropdown-content--below',
+        'The proper class has been added',
+      );
+  });
 });