add vue router

admin/jest.config.js

@@ -1,4 +1,3 @@
-require('jsdom-global')
 module.exports = {
   verbose: true,
   collectCoverageFrom: ['src/**/*.{js,vue}', '!**/node_modules/**', '!**/?(*.)+(spec|test).js?(x)'],
@@ -22,4 +21,5 @@ module.exports = {
   testMatch: ['**/?(*.)+(spec|test).js?(x)'],
   // snapshotSerializers: ['jest-serializer-vue'],
   transformIgnorePatterns: ['<rootDir>/node_modules/(?!vee-validate/dist/rules)'],
+  testEnvironment: 'jest-environment-jsdom-sixteen',
 }

admin/package.json

@@ -32,12 +32,13 @@
     "core-js": "^3.6.5",
     "dotenv-webpack": "^7.0.3",
     "graphql": "^15.6.1",
-    "jest": "^27.3.1",
+    "jest": "26.6.3",
     "jsdom-global": "^3.0.2",
     "stats-webpack-plugin": "^0.7.0",
     "vue": "^2.6.11",
     "vue-apollo": "^3.0.8",
-    "vue-jest": "^3.0.7"
+    "vue-jest": "^3.0.7",
+    "vue-router": "^3.5.3"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.15.8",
@@ -55,6 +56,7 @@
     "eslint-plugin-prettier": "3.3.1",
     "eslint-plugin-promise": "^5.1.1",
     "eslint-plugin-vue": "^7.20.0",
+    "jest-environment-jsdom-sixteen": "^2.0.0",
     "vue-template-compiler": "^2.6.11"
   },
   "browserslist": [

admin/src/components/NotFoundPage.spec.js

@@ -0,0 +1,22 @@
+import { mount } from '@vue/test-utils'
+import NotFoundPage from './NotFoundPage'
+
+const localVue = global.localVue
+
+describe('NotFoundPage', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(NotFoundPage, { localVue })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has a svg', () => {
+      expect(wrapper.find('svg').exists()).toBeTruthy()
+    })
+  })
+})

admin/src/main.js

@@ -1,6 +1,9 @@
 import Vue from 'vue'
 import App from './App.vue'
 
+import router from './router/router'
+// import addNavigationGuards from './router/guards'
+
 import { ApolloClient, ApolloLink, InMemoryCache, HttpLink } from 'apollo-boost'
 import VueApollo from 'vue-apollo'
 
@@ -42,9 +45,10 @@ const apolloProvider = new VueApollo({
 
 Vue.use(BootstrapVue)
 
-Vue.config.productionTip = false
+// addNavigationGuards(router, )
 
 new Vue({
+  router,
   apolloProvider,
   render: (h) => h(App),
 }).$mount('#app')

admin/src/main.test.js

@@ -2,6 +2,10 @@ import { ApolloClient, ApolloLink, InMemoryCache, HttpLink } from 'apollo-boost'
 import './main'
 import CONFIG from './config'
 
+import Vue from 'vue'
+
+jest.mock('vue')
+
 jest.mock('apollo-boost', () => {
   return {
     __esModule: true,
@@ -30,4 +34,8 @@ describe('main', () => {
   it('calls the InMemoryCache', () => {
     expect(InMemoryCache).toBeCalled()
   })
+
+  it('calls Vue', () => {
+    expect(Vue).toBeCalled()
+  })
 })

admin/src/router/guards.js

@@ -0,0 +1,12 @@
+const addNavigationGuards = (router, store) => {
+  router.beforeEach((to, from, next) => {
+    // handle authentication
+    if (to.meta.requiresAuth && !store.state.token) {
+      next({ path: '/not-found' })
+    } else {
+      next()
+    }
+  })
+}
+
+export default addNavigationGuards

admin/src/router/router.js

@@ -0,0 +1,20 @@
+import VueRouter from 'vue-router'
+import routes from './routes'
+
+const router = new VueRouter({
+  base: '/admin',
+  routes,
+  linkActiveClass: 'active',
+  mode: 'history',
+  scrollBehavior: (to, from, savedPosition) => {
+    if (savedPosition) {
+      return savedPosition
+    }
+    if (to.hash) {
+      return { selector: to.hash }
+    }
+    return { x: 0, y: 0 }
+  },
+})
+
+export default router

admin/src/router/routes.js

@@ -0,0 +1,16 @@
+import NotFound from '@/components/NotFoundPage.vue'
+
+const routes = [
+  {
+    path: '/',
+    meta: {
+      requiresAuth: true,
+    },
+  },
+  {
+    path: 'not-found',
+    component: NotFound,
+  },
+]
+
+export default routes

admin/test/testSetup.js

@@ -1,10 +1,11 @@
 import { createLocalVue } from '@vue/test-utils'
 import Vue from 'vue'
-
-require('jsdom-global')()
+import { BootstrapVue } from 'bootstrap-vue'
 
 global.localVue = createLocalVue()
 
+global.localVue.use(BootstrapVue)
+
 // throw errors for vue warnings to force the programmers to take care about warnings
 Vue.config.warnHandler = (w) => {
   throw new Error(w)