separate logic into mixin, complete test coverage with mocks and spies

src/components/Select.vue

@@ -168,7 +168,11 @@
 
 
 <script type="text/babel">
+  import pointerScroll from '../mixins/pointerScroll'
+
   export default {
+    mixins: [pointerScroll],
+
     props: {
       /**
        * Contains the currently selected value. Very similar to a
@@ -325,6 +329,7 @@
       },
       filteredOptions() {
         this.typeAheadPointer = 0
+        this.maybeAdjustScroll()
       },
     },
 
@@ -442,7 +447,7 @@
       typeAheadUp() {
         if (this.typeAheadPointer > 0) {
           this.typeAheadPointer--
-          this.maybeAdjustScrollPosition()
+          this.maybeAdjustScroll()
         }
       },
 
@@ -454,7 +459,7 @@
       typeAheadDown() {
         if (this.typeAheadPointer < this.filteredOptions.length - 1) {
           this.typeAheadPointer++
-          this.maybeAdjustScrollPosition()
+          this.maybeAdjustScroll()
         }
       },
 
@@ -475,55 +480,6 @@
         }
       },
 
-      maybeAdjustScrollPosition() {
-        let bounds = this.viewport()
-        let pixelsToPointerTop = this.pixelsToPointerTop()
-        let pixelsToPointerBottom = this.pixelsToPointerBottom()
-        let pointerHeight = this.pointerHeight()
-
-        if (pixelsToPointerTop <= bounds.top) {
-          return this.scrollTo(pixelsToPointerTop)
-        } else if (pixelsToPointerBottom >= bounds.bottom) {
-//          return this.scrollTo(( this.pixelsToPointerCenter() - this.$els.dropdownMenu.offsetHeight ) + ( pointerHeight / 2))
-          return this.scrollTo(( this.pixelsToPointerCenter() - this.$els.dropdownMenu.offsetHeight ) + pointerHeight)
-        }
-      },
-
-      pixelsToPointerTop() {
-        let pixelsToPointerTop = 0
-        for (let i = 0; i < this.typeAheadPointer; i++) {
-          pixelsToPointerTop += this.$els.dropdownMenu.children[i].offsetHeight
-        }
-        return pixelsToPointerTop
-      },
-
-      pixelsToPointerBottom() {
-        return this.pixelsToPointerTop() + this.pointerHeight()
-      },
-
-      pixelsToPointerCenter() {
-        return this.pixelsToPointerTop() + ( this.pointerHeight() / 2 )
-      },
-
-      pointerHeight() {
-        return this.$els.dropdownMenu.children[this.typeAheadPointer].offsetHeight
-      },
-
-      /**
-       * The viewport is the currently viewable
-       * portion of the dropdown menu
-       */
-      viewport() {
-        return {
-          top: this.$els.dropdownMenu.scrollTop,
-          bottom: this.$els.dropdownMenu.offsetHeight + this.$els.dropdownMenu.scrollTop
-        }
-      },
-
-      scrollTo(position) {
-        return this.$els.dropdownMenu.scrollTop = position
-      },
-
       /**
        * If there is any text in the search input, remove it.
        * Otherwise, blur the search input to close the dropdown.

src/mixins/pointerScroll.js

@@ -0,0 +1,71 @@
+export default {
+  methods: {
+    /**
+     * Adjust the scroll position of the dropdown list
+     * if the current pointer is outside of the
+     * overflow bounds.
+     * @returns {*}
+     */
+    maybeAdjustScroll() {
+      let pixelsToPointerTop = this.pixelsToPointerTop()
+      let pixelsToPointerBottom = this.pixelsToPointerBottom()
+
+      if ( pixelsToPointerTop <= this.viewport().top) {
+        return this.scrollTo( pixelsToPointerTop )
+      } else if (pixelsToPointerBottom >= this.viewport().bottom) {
+        return this.scrollTo( this.viewport().top + this.pointerHeight() )
+      }
+    },
+
+    /**
+     * The distance in pixels from the top of the dropdown
+     * list to the top of the current pointer element.
+     * @returns {number}
+     */
+    pixelsToPointerTop() {
+      let pixelsToPointerTop = 0
+      for (let i = 0; i < this.typeAheadPointer; i++) {
+        pixelsToPointerTop += this.$els.dropdownMenu.children[i].offsetHeight
+      }
+      return pixelsToPointerTop
+    },
+
+    /**
+     * The distance in pixels from the top of the dropdown
+     * list to the bottom of the current pointer element.
+     * @returns {*}
+     */
+    pixelsToPointerBottom() {
+      return this.pixelsToPointerTop() + this.pointerHeight()
+    },
+
+    /**
+     * The offsetHeight of the current pointer element.
+     * @returns {number}
+     */
+    pointerHeight() {
+      let element = this.$els.dropdownMenu.children[this.typeAheadPointer]
+      return element ? element.offsetHeight : 0
+    },
+
+    /**
+     * The currently viewable portion of the dropdownMenu.
+     * @returns {{top: (string|*|number), bottom: *}}
+     */
+    viewport() {
+      return {
+        top: this.$els.dropdownMenu.scrollTop,
+        bottom: this.$els.dropdownMenu.offsetHeight + this.$els.dropdownMenu.scrollTop
+      }
+    },
+
+    /**
+     * Scroll the dropdownMenu to a given position.
+     * @param position
+     * @returns {*}
+     */
+    scrollTo(position) {
+      return this.$els.dropdownMenu.scrollTop = position
+    },
+  }
+}