refactor: register vue-scrollto in nuxt.config.js

This will allow us to use this.$scrollTo in components. I'm now also
using this in the mixin. With so many `this`s it gets horribly
difficult to properly test the mixin in isolation. So I decided to test
the mixin on the component directly.

webapp/components/Comment/Comment.spec.js

@@ -32,6 +32,7 @@ describe('Comment.vue', () => {
         truncate: a => a,
         removeHtml: a => a,
       },
+      $scrollTo: jest.fn(),
       $apollo: {
         mutate: jest.fn().mockResolvedValue({
           data: {
@@ -51,6 +52,8 @@ describe('Comment.vue', () => {
   })
 
   describe('shallowMount', () => {
+    beforeEach(jest.useFakeTimers)
+
     Wrapper = () => {
       const store = new Vuex.Store({
         getters,
@@ -117,7 +120,35 @@ describe('Comment.vue', () => {
         })
       })
 
-      beforeEach(jest.useFakeTimers)
+      describe('scrollToAnchor mixin', () => {
+        describe('$route.hash !== comment.id', () => {
+          beforeEach(() => {
+            mocks.$route = {
+              hash: '',
+            }
+          })
+
+          it('skips $scrollTo', () => {
+            wrapper = Wrapper()
+            jest.runAllTimers()
+            expect(mocks.$scrollTo).not.toHaveBeenCalled()
+          })
+        })
+
+        describe('$route.hash === comment.id', () => {
+          beforeEach(() => {
+            mocks.$route = {
+              hash: '#commentId-2',
+            }
+          })
+
+          it('calls $scrollTo', () => {
+            wrapper = Wrapper()
+            jest.runAllTimers()
+            expect(mocks.$scrollTo).toHaveBeenCalledWith('#commentId-2', 1000)
+          })
+        })
+      })
 
       describe('test callbacks', () => {
         beforeEach(() => {

webapp/components/CommentList/CommentList.spec.js

@@ -42,6 +42,7 @@ describe('CommentList.vue', () => {
           truncate: a => a,
           removeHtml: a => a,
         },
+        $scrollTo: jest.fn(),
         $apollo: {
           queries: {
             Post: {
@@ -65,12 +66,46 @@ describe('CommentList.vue', () => {
       })
     }
 
-    beforeEach(() => {
+    it('displays a comments counter', () => {
       wrapper = Wrapper()
+      expect(wrapper.find('span.ds-tag').text()).toEqual('1')
     })
 
     it('displays a comments counter', () => {
+      wrapper = Wrapper()
       expect(wrapper.find('span.ds-tag').text()).toEqual('1')
     })
+
+    describe('scrollToAnchor mixin', () => {
+      beforeEach(jest.useFakeTimers)
+
+      describe('$route.hash !== `#comments`', () => {
+        beforeEach(() => {
+          mocks.$route = {
+            hash: '',
+          }
+        })
+
+        it('skips $scrollTo', () => {
+          wrapper = Wrapper()
+          jest.runAllTimers()
+          expect(mocks.$scrollTo).not.toHaveBeenCalled()
+        })
+      })
+
+      describe('$route.hash === `#comments`', () => {
+        beforeEach(() => {
+          mocks.$route = {
+            hash: '#comments',
+          }
+        })
+
+        it('calls $scrollTo', () => {
+          wrapper = Wrapper()
+          jest.runAllTimers()
+          expect(mocks.$scrollTo).toHaveBeenCalledWith('#comments', 1000)
+        })
+      })
+    })
   })
 })

webapp/mixins/scrollToAnchor.js

@@ -1,20 +1,23 @@
-import { scrollTo } from 'vue-scrollto'
+function scrollToAnchor(anchor, { checkAnchor, $scrollTo }) {
+  if (typeof checkAnchor !== 'function')
+    throw new Error(
+      'You must define `checkAnchor` on the component if you use scrollToAnchor mixin!',
+    )
+  if (!checkAnchor(anchor)) return
+  setTimeout(() => {
+    $scrollTo(anchor, 1000)
+  }, 250)
+}
 
 export default {
   watch: {
     $route(to, from) {
       const anchor = to && to.hash
-      if (!this.checkAnchor(anchor)) return
+      scrollToAnchor(anchor, this)
-      setTimeout(() => {
-        scrollTo(anchor, 1000)
-      }, 250)
     },
   },
   mounted() {
     const anchor = this.$route && this.$route.hash
-    if (!this.checkAnchor(anchor)) return
+    scrollToAnchor(anchor, this)
-    setTimeout(() => {
-      scrollTo(anchor, 1000)
-    }, 250)
   },
 }

webapp/mixins/scrollToAnchor.spec.js

@@ -1,47 +0,0 @@
-import { scrollTo } from 'vue-scrollto'
-import scrollToAnchor from './scrollToAnchor'
-jest.mock('vue-scrollto')
-
-let component
-
-describe('scrollToAnchor', () => {
-  beforeEach(() => {
-    jest.useFakeTimers()
-    scrollTo.mockClear()
-  })
-
-  describe('scrollToAnchor', () => {
-    const action = hash => {
-      let {
-        watch: { $route },
-      } = scrollToAnchor
-      $route.bind(component)({ hash })
-      jest.runAllTimers()
-    }
-
-    describe('given anchor `commentId-4711`', () => {
-      beforeEach(() => {
-        component = {
-          anchor: 'commentId-4711',
-          checkAnchor(anchor) {
-            return this.anchor === anchor
-          },
-        }
-      })
-
-      describe('$route.hash === anchor', () => {
-        it('calls window.scroll', () => {
-          action('commentId-4711')
-          expect(scrollTo).toHaveBeenCalled()
-        })
-      })
-
-      describe('$route.hash !== anchor', () => {
-        it('skips window.scroll', () => {
-          action('commentId-4712')
-          expect(scrollTo).not.toHaveBeenCalled()
-        })
-      })
-    })
-  })
-})

webapp/nuxt.config.js

@@ -142,6 +142,7 @@ export default {
         keys: envWhitelist,
       },
     ],
+    'vue-scrollto/nuxt',
     'cookie-universal-nuxt',
     '@nuxtjs/apollo',
     '@nuxtjs/axios',