PR edits and update skipped test so it runs

Author: tomnez

addon/components/polaris-popover.js

@@ -37,9 +37,11 @@ export default Component.extend({
    *
    * @property preferredPosition
    * @type {string}
-   * @default null
+   * @default 'below'
    */
-  preferredPosition: null,
+  preferredPosition: computed(function() {
+    return 'below';
+  }),
 
   /**
    * Show or hide the Popover
@@ -96,11 +98,7 @@ export default Component.extend({
   verticalPosition: computed('preferredPosition', function() {
     let preferredPosition = this.get('preferredPosition');
 
-    if (preferredPosition === 'above') {
-      return preferredPosition;
-    }
-
-    if (preferredPosition === 'below') {
+    if (preferredPosition === 'above' || preferredPosition === 'below') {
       return preferredPosition;
     }
 
@@ -119,30 +117,31 @@ export default Component.extend({
   }).readOnly(),
 
   /**
-   * Checks the dropdown trigger's location on
+   * Checks the dropdown activator's location on
    * screen to determine which vertical direction
    * has more space to open the dropdown.
    */
-  mostVerticalSpace() {
+  getMostVerticalSpace() {
     let component;
 
     // Hack to get the component's container
     // element since this component uses `tagName: ''`
+    // https://github.com/emberjs/rfcs/issues/168#issue-178381310
     if (ViewUtils && ViewUtils.getViewBounds) {
       component =  ViewUtils.getViewBounds(this).parentElement;
     } else {
       component = this._renderNode.contextualElement;
     }
 
-    let triggers = component.querySelectorAll('.ember-basic-dropdown-trigger');
+    let activators = component.querySelectorAll('.ember-basic-dropdown-trigger');
 
-    if (triggers.length > 1) {
-      warn('Multiple popover triggers found. Defaulting to `preferredPosition` of `below`');
+    if (activators.length > 1) {
+      warn('Multiple popover activators found. Defaulting to `preferredPosition` of `below`');
       return 'below';
     }
 
-    let [trigger] = triggers;
-    let { top, bottom } = trigger.getBoundingClientRect();
+    let [activator] = activators;
+    let { top, bottom } = activator.getBoundingClientRect();
     let windowHeight = window.innerHeight;
     let bottomSpace = windowHeight - bottom;
 
@@ -158,7 +157,7 @@ export default Component.extend({
       let preferredPosition = this.get('preferredPosition');
 
       if (preferredPosition === 'mostSpace') {
-        this.set('verticalPosition', this.mostVerticalSpace());
+        this.set('verticalPosition', this.getMostVerticalSpace());
       }
     }
   }

tests/dummy/app/controllers/test/index.js

@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default Controller.extend();

tests/integration/components/polaris-date-picker-test.js

@@ -339,7 +339,7 @@ test('it does not fire actions when disabled days are clicked', function(assert)
     year: YEAR,
     selected: null,
     disableDatesAfter: DISABLE_AFTER,
-    onChange: (selected) => {
+    onChange: () => {
       this.set('onChangeActionFired', true);
     }
   });

tests/integration/components/polaris-popover-test.js

@@ -104,11 +104,17 @@ test('it renders the correct HTML with sectioned attribute', function(assert) {
   assert.equal(popoverSections[0].textContent.trim(), 'This is some sectioned popover content', 'popover section contains the correct content');
 });
 
-skip('it renders the correct HTML with `prefferedPosition` attribute', function(assert) {
-  this.set('prefferedPosition', 'above');
+test('it renders the correct HTML with preferredPosition attribute', function(assert) {
+  assert.expect(2);
+
+  this.set('preferredPosition', 'above');
 
   this.render(hbs`
-    {{#polaris-popover prefferedPosition=prefferedPosition as |popover|}}
+    {{#polaris-popover
+      preferredPosition=preferredPosition
+      sectioned=true
+      as |popover|
+    }}
       {{#popover.activator}}
         {{polaris-button text="Toggle popover"}}
       {{/popover.activator}}
@@ -121,11 +127,16 @@ skip('it renders the correct HTML with `prefferedPosition` attribute', function(
 
   click(activatorSelector);
 
-  const contentAbove = find(popoverContentAboveSelector);
+  const contentAbove = document.querySelector(popoverContentAboveSelector);
   assert.ok(contentAbove, 'renders popover content above the trigger');
 
-  this.set('prefferedPosition', 'below');
+  // close the popover before resetting position
+  click(activatorSelector);
+
+  this.set('preferredPosition', 'below');
+
+  click(activatorSelector);
 
-  const contentBelow = find(popoverContentBelowSelector);
+  const contentBelow = document.querySelector(popoverContentBelowSelector);
   assert.ok(contentBelow, 'renders popover content below the trigger');
 });