feat: bodyElement can be passed as an argument

addon/components/ember-tether.js

@@ -20,6 +20,10 @@ export default class EmberTetherComponent extends Component {
   }
 
   get bodyElement() {
+    if (this.args.bodyElement) {
+      return document.getElementById(this.args.bodyElement);
+    }
+
     let config = this.emberTetherConfig;
     if (config && config.bodyElementId) {
       return document.getElementById(config.bodyElementId);

tests/acceptance/tether-test.js

@@ -60,13 +60,25 @@ module('Acceptance | tether test', function (hooks) {
     );
   };
 
+  assert.parentHasId = function (thingSelector, parentId) {
+    let thing = document.querySelector(thingSelector);
+    let parent = thing.parentElement;
+    assert.equal(
+      parent.id,
+      parentId,
+      `${thingSelector}'s parent has id ${parentId}`,
+    );
+  };
+
   test('tethering a thing to a target', async function (assert) {
     await visit('/');
 
     assert.topAligned('.tethered-thing', '#tether-target-1');
     assert.rightOf('.tethered-thing', '#tether-target-1');
     assert.topAligned('.another-tethered-thing', '#tether-target-3');
     assert.leftOf('.another-tethered-thing', '#tether-target-3');
+
+    assert.parentHasId('.tethered-thing', 'ember-testing');
   });
 
   test('tethering to an Ember Component', async function (assert) {
@@ -150,4 +162,16 @@ module('Acceptance | tether test', function (hooks) {
       );
     });
   });
+
+  test('bodyElement', async function (assert) {
+    await visit('/');
+
+    assert.topAligned(
+      '.a-tethered-thing-with-body-element',
+      '#tether-target-8',
+    );
+    assert.rightOf('.a-tethered-thing-with-body-element', '#tether-target-8');
+
+    assert.parentHasId('.a-tethered-thing-with-body-element', 'body-element');
+  });
 });

tests/dummy/app/templates/application.hbs

@@ -52,6 +52,9 @@
   <div id="tether-target-5" class="tether-target">5</div>
   <div id="tether-target-6" class="tether-target">6</div>
   <div id="tether-target-7" class="tether-target">7</div>
+  <div id="tether-target-8" class="tether-target">8</div>
+
+  <div id="body-element"></div>
 
   <EmberTether
     @target={{this.exampleTargetSelector}}
@@ -120,4 +123,14 @@
     A tethered thing with aria attributes
   </EmberTether>
 
+  <EmberTether
+    @bodyElement="body-element"
+    @target="#tether-target-8"
+    @targetAttachment="top right"
+    @attachment="top left"
+    class="a-tethered-thing-with-body-element"
+  >
+    Another tethered thing with bodyElement
+  </EmberTether>
+
 </div>