fix rootElement when running in /tests

Author: mansona

addon/components/dialog.ts

@@ -1,29 +1,15 @@
 import Component from '@glimmer/component';
+import { getOwner } from '@ember/application';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import { inject as service } from '@ember/service';
 import { typeOf } from '@ember/utils';
 
-import { getOwnConfig } from '@embroider/macros';
 import { Keys } from 'ember-headlessui/utils/keyboard';
 import { modifier } from 'ember-modifier';
 
 import type DialogStackProvider from 'ember-headlessui/services/dialog-stack-provider';
 
-/**
- * Expose the element that the `Dialog` should be "slotted" into
- *
- * This is exported _only_ for testing purposes; do not consider this API to be public
- *
- * @private
- */
-export function getPortalRoot() {
-  const { rootElement } = getOwnConfig();
-
-  // If we looked up a `rootElement` config at build-time, use that; otherwise use the body
-  return rootElement ? document.querySelector(rootElement) : document.body;
-}
-
 interface Args {
   isOpen: boolean;
   onClose: () => void;
@@ -36,7 +22,7 @@ export default class DialogComponent extends Component<Args> {
   DEFAULT_TAG_NAME = 'div';
 
   guid = `${guidFor(this)}-headlessui-dialog`;
-  $portalRoot = getPortalRoot();
+  $portalRoot: HTMLElement;
   outsideClickedElement: HTMLElement | null = null;
 
   handleEscapeKey = modifier(
@@ -85,6 +71,14 @@ export default class DialogComponent extends Component<Args> {
   constructor(owner: unknown, args: Args) {
     super(owner, args);
 
+    const {
+      APP: { rootElement },
+    } = getOwner(this).resolveRegistration('config:environment');
+
+    this.$portalRoot = rootElement
+      ? document.querySelector(rootElement)
+      : document.body;
+
     let { isOpen, onClose } = this.args;
 
     if (isOpen === undefined && onClose === undefined) {

index.js

@@ -2,16 +2,4 @@
 
 module.exports = {
   name: require('./package').name,
-
-  options: {
-    '@embroider/macros': {
-      setOwnConfig: {},
-    },
-  },
-
-  config(_emberEnv, config) {
-    // Pass `rootElement` config into a location where it can be looked up at run-time
-    this.options['@embroider/macros'].setOwnConfig.rootElement =
-      config.APP.rootElement;
-  },
 };

package.json

@@ -36,7 +36,6 @@
   },
   "dependencies": {
     "@ember/render-modifiers": "^2.0.0",
-    "@embroider/macros": "^1.2.0",
     "ember-auto-import": "^2.2.0",
     "ember-cli-babel": "^7.26.3",
     "ember-cli-htmlbars": "^6.0.1",

tests/integration/components/dialog-test.js

@@ -9,7 +9,6 @@ import { module, test, todo } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 
 import userEvent from '@testing-library/user-event';
-import { getPortalRoot } from 'ember-headlessui/components/dialog';
 import { Keys } from 'ember-headlessui/utils/keyboard';
 
 import {
@@ -235,7 +234,7 @@ module('Integration | Component | <Dialog>', function (hooks) {
       );
 
       test('it should add a scroll lock to the html tag', async function (assert) {
-        const portalRoot = getPortalRoot();
+        const portalRoot = document.querySelector('#ember-testing');
         this.set('isOpen', false);
 
         await render(hbs`