Remove test-specific behaviour for BasicDropdownWormhole (#937)

* use consistent BasicDropdownWormhole behaviour in tests * Fix test --------- Co-authored-by: Paul Kuruvilla <[email protected]>
cibernox · Aug 27, 2024 · 6d619d7 · 6d619d7
1 parent d816d19
commit 6d619d7
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 20 deletions.
diff --git a/ember-basic-dropdown/src/components/basic-dropdown-wormhole.ts b/ember-basic-dropdown/src/components/basic-dropdown-wormhole.ts
@@ -10,24 +10,11 @@ export default class BasicDropdownWormholeComponent extends Component<BasicDropd
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     const config = getOwner(this).resolveRegistration('config:environment') as {
-      environment: string;
-      APP: {
-        rootElement: string;
-      };
-      'ember-basic-dropdown': {
-        destination: string;
+      'ember-basic-dropdown'?: {
+        destination?: string;
       };
     };
 
-    if (config.environment === 'test') {
-      // document doesn't exists in fastboot apps, for this reason we need this check
-      if (typeof document === 'undefined') {
-        return '';
-      }
-      const rootElement = config['APP']?.rootElement;
-      return document.querySelector(rootElement)?.id ?? '';
-    }
-
     return ((config['ember-basic-dropdown'] &&
       config['ember-basic-dropdown'].destination) ||
       'ember-basic-dropdown-wormhole') as string;

diff --git a/test-app/tests/integration/components/basic-dropdown-wormhole-test.js b/test-app/tests/integration/components/basic-dropdown-wormhole-test.js
@@ -7,17 +7,47 @@ import config from 'test-app/config/environment';
 module('Integration | Component | basic-dropdown-wormhole', function (hooks) {
   setupRenderingTest(hooks);
 
+  hooks.beforeEach(async function () {
+    // Duplicate config to avoid mutating global config
+    this.originalConfig = JSON.parse(
+      JSON.stringify(config['ember-basic-dropdown'] || {}),
+    );
+  });
+
+  hooks.afterEach(async function () {
+    config['ember-basic-dropdown'] = this.originalConfig;
+  });
+
   test('Is present', async function (assert) {
     await render(hbs`
       <BasicDropdownWormhole />
     `);
 
-    let id = '#ember-testing';
-    if (config.APP.shadowDom) {
-      id = '#ember-basic-dropdown-wormhole';
-    }
+    assert
+      .dom('#ember-basic-dropdown-wormhole', this.element.getRootNode())
+      .exists('wormhole is present');
+  });
 
-    assert.dom(id, this.element.getRootNode()).exists('wormhole is present');
+  test('Uses custom destination from config if present', async function (assert) {
+    config['ember-basic-dropdown'] = {
+      destination: 'custom-wormhole-destination',
+    };
+
+    await render(hbs`<BasicDropdownWormhole />`);
+
+    assert
+      .dom(
+        '.ember-application  #custom-wormhole-destination',
+        this.element.getRootNode(),
+      )
+      .exists('custom destination is used');
+
+    assert
+      .dom(
+        '.ember-application #ember-basic-dropdown-wormhole',
+        this.element.getRootNode(),
+      )
+      .doesNotExist('default destination is not used');
   });
 
   test('Has class my-custom-class', async function (assert) {