feat(calculateInPlacePosition): implement verticalPosition "auto"

[velrest]

The ember-power-select documentation mentions, that the argument verticalPosition is by default auto and therefor the positioning will be automatically calcualted based on available space. This is correct for wormhole positioning but not if the argument renderInPlace={{true}} is used as this is not implemented here in ember-basic-dropdown.

I was not sure if this is a bug or rather a new feature in the scope of ember-basic-dropdown.

Reference

Reproduction: https://github.com/velrest/render_in_place_reproduction

https://ember-power-select.com/docs/api-reference
In case page is updated this was the content:

[mkszepp]

@velrest Thanks for your PR!

According to the Ember Basic Dropdown documentation, you need to pass the @verticalPosition argument when @renderInPlace={{true}} is used:
👉 https://ember-basic-dropdown.com/docs/position

Please note that when rendering the content in place, the vertical position will not automatically detect the best position based on the space around the trigger. You have to explicitly pass verticalPosition="above" to render it over the trigger.

Adding this feature will require a major version (which is already planned), since it changes the current behavior.

Could you also add some tests to ensure that this change works correctly and does not introduce any regressions?

[velrest]

@mkszepp I will change the commit message and add some tests on monday. Thanks for the link!

[velrest]

@mkszepp I'm actually not quite sure on how to write an integration test for this as it seems there is no test for auto or calculatePosition to learn from. I would have to limit the testing container window as the util directly accesses window and document and i assume mocking those would also break the test?. Do you have an idea for a clean test setup or an example?

[mkszepp]

Oh, interesting that we have no tests right now for this... 🙉

I will take a look in next days, how we can add useful tests for calculatePosition

[velrest]

@mkszepp I tried to create a setup for this in my test commit but it didn't work. It seems like, the whole position calculation is never called it that rendering test, as the initial calculation is done outside the run loop? Also tried to emit a scroll event to force recalculation but that also didn't work.

[mkszepp]

@velrest sry for my delayed answer...

you can add into basic-dropdown-test.ts this two tests to ensure that your code is working (right now at least the first test should fail in current 8.x version. With your changes both tests should pass):

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',
      );
  });

Everything else, changed in test-app i think it's not needed and can be reverted

[mkszepp]

i think we don't need to export this... when somebody wants to override our default functions they should make everything custom, not only a part

[mkszepp]

Suggested change

	export type GetViewData = (
	type GetViewData = (

[mkszepp]

Suggested change

	export type GetViewDataResult = {
	type GetViewDataResult = {

[mkszepp]

debugger should be removed

[mkszepp]

debugger should be removed here

[velrest]

@mkszepp I update the PR with your tests and Review suggestions. The test passes without my code changes and the code in the function caluculcateInPlacePosition is never called from any test. Maybe it's the same issue why my test didn't work.