update tests to match Vuetify new docs

src/frontend/package.json

@@ -44,7 +44,7 @@
     "vue-router": "^3.3.2",
     "vue-template-compiler": "^2.6.11",
     "vue-world-map": "^0.1.1",
-    "vuetify": "^2.2.11",
+    "vuetify": "^2.4.5",
     "vuex": "^3.1.2"
   }
 }

src/frontend/src/components/base/__tests__/Alert.spec.js

@@ -1,12 +1,16 @@
 import { mount } from '@vue/test-utils'
+import Vuetify from 'vuetify'
 import Alert from '../Alert'
 
+const vuetify = new Vuetify()
+
 describe('Alert.vue', () => {
   it('should have a custom error and match snapshot', () => {
     const w = mount(Alert, {
       propsData: {
         errors: [{ title: 'test error' }]
-      }
+      },
+      vuetify
     })
 
     expect(w.html()).toMatchSnapshot()
@@ -21,7 +25,8 @@ describe('Alert.vue', () => {
       propsData: {
         successText: 'test success',
         success: true
-      }
+      },
+      vuetify
     })
 
     expect(w.find('.v-alert__content > div').text()).toBe('test success')

src/frontend/src/components/base/__tests__/__snapshots__/Alert.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Alert.vue should have a custom error and match snapshot 1`] = `
-<span><div role="alert" class="v-alert v-sheet theme--dark error"><div class="v-alert__wrapper"><i aria-hidden="true" class="v-icon notranslate v-alert__icon material-icons theme--dark">$error</i><div class="v-alert__content"><div>
+<span><div role="alert" class="v-alert v-sheet theme--dark error"><div class="v-alert__wrapper"><i aria-hidden="true" class="v-icon notranslate v-alert__icon mdi mdi-alert theme--dark"></i><div class="v-alert__content"><div>
       test error
     </div> <!----></div></div></div> <!----> <!----></span>
 `;

src/frontend/src/pages/__tests__/index.spec.js

@@ -1,10 +1,13 @@
-import { mount } from '@vue/test-utils'
+import { mount, createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
 import VueRouter from 'vue-router'
 import Page from '../index'
+import Vuetify from 'vuetify'
+
+const localVue = createLocalVue()
 
 describe('index.vue', () => {
-  let store
+  let store, vuetify
 
   beforeEach(() => {
     const actions = {
@@ -18,13 +21,16 @@ describe('index.vue', () => {
         loading: { status: false }
       }
     })
+    vuetify = new Vuetify()
   })
 
   it('should match snapshot', () => {
     const router = new VueRouter({})
     const w = mount(Page, {
       store,
       router,
+      localVue,
+      vuetify,
       stubs: ['router-link', 'router-view'],
       created () {
         this.$vuetify.lang = {

src/frontend/src/pages/auth/__tests__/__snapshots__/disable-mfa.spec.js.snap

@@ -54,7 +54,7 @@ exports[`disable-mfa.vue should match snapshot 1`] = `
             </div>
           </div>
           <div class="spacer"></div>
-          <div class="text-right col"><button type="submit" class="mr-0 v-btn v-btn--contained theme--light v-size--default info"><span class="v-btn__content">
+          <div class="text-right col"><button type="submit" class="mr-0 v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default info"><span class="v-btn__content">
                 Login
               </span></button></div>
         </div>

src/frontend/src/pages/auth/__tests__/__snapshots__/forgot-password.spec.js.snap

@@ -37,9 +37,9 @@ exports[`forgot-password.vue should match snapshot 1`] = `
             </div>
           </div>
           <div class="spacer"></div>
-          <div class="text-right col"><button type="button" class="v-btn v-btn--flat v-btn--text theme--light v-size--default blue--text text--darken-1"><span class="v-btn__content">
+          <div class="text-right col"><button type="button" class="v-btn v-btn--text theme--light v-size--default blue--text text--darken-1"><span class="v-btn__content">
               Reset
-            </span></button> <button type="submit" class="mr-0 v-btn v-btn--contained theme--light v-size--default info"><span class="v-btn__content">
+            </span></button> <button type="submit" class="mr-0 v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default info"><span class="v-btn__content">
               Send Password
             </span></button></div>
         </div>

src/frontend/src/pages/auth/__tests__/__snapshots__/login.spec.js.snap

@@ -26,7 +26,7 @@ exports[`login.vue should match snapshot 1`] = `
                   <fieldset aria-hidden="true">
                     <legend style="width: 0px;"><span>​</span></legend>
                   </fieldset>
-                  <div class="v-text-field__slot"><label for="input-9" class="v-label theme--light" style="right: 0px; position: absolute;">Username*</label><input data-username="" id="input-9" type="text"></div>
+                  <div class="v-text-field__slot"><label for="input-9" class="v-label theme--light" style="left: 0px; position: absolute;">Username*</label><input data-username="" id="input-9" type="text"></div>
                 </div>
                 <div class="v-text-field__details">
                   <div class="v-messages theme--light">
@@ -43,7 +43,7 @@ exports[`login.vue should match snapshot 1`] = `
                   <fieldset aria-hidden="true">
                     <legend style="width: 0px;"><span>​</span></legend>
                   </fieldset>
-                  <div class="v-text-field__slot"><label for="input-12" class="v-label theme--light" style="right: 0px; position: absolute;">Password*</label><input data-password="" id="input-12" type="password"></div>
+                  <div class="v-text-field__slot"><label for="input-12" class="v-label theme--light" style="left: 0px; position: absolute;">Password*</label><input data-password="" id="input-12" type="password"></div>
                 </div>
                 <div class="v-text-field__details">
                   <div class="v-messages theme--light">
@@ -57,7 +57,7 @@ exports[`login.vue should match snapshot 1`] = `
             <div class="v-input theme--light v-input--selection-controls v-input--checkbox">
               <div class="v-input__control">
                 <div class="v-input__slot">
-                  <div class="v-input--selection-controls__input"><i aria-hidden="true" class="v-icon notranslate material-icons theme--light">$checkboxOff</i><input aria-checked="false" id="input-15" role="checkbox" type="checkbox" value="">
+                  <div class="v-input--selection-controls__input"><i aria-hidden="true" class="v-icon notranslate mdi mdi-checkbox-blank-outline theme--light"></i><input aria-checked="false" id="input-15" role="checkbox" type="checkbox" value="">
                     <div class="v-input--selection-controls__ripple"></div>
                   </div><label for="input-15" class="v-label theme--light" style="left: 0px; position: relative;">Remember me</label>
                 </div>
@@ -68,20 +68,20 @@ exports[`login.vue should match snapshot 1`] = `
             </div>
           </div>
           <div class="row">
-            <router-link-stub to="/auth/forgot-password/" tag="a" activeclass="v-btn--active" exactactiveclass="v-btn--active" ariacurrentvalue="page" event="click" class="v-btn v-btn--flat v-btn--router v-btn--text theme--light v-size--small blue--text text--darken-1"><span class="v-btn__content">
+            <router-link-stub to="/auth/forgot-password/" tag="a" activeclass="v-btn--active" exactactiveclass="v-btn--active" ariacurrentvalue="page" event="click" class="v-btn v-btn--router v-btn--text theme--light v-size--small blue--text text--darken-1"><span class="v-btn__content">
                 Forgot Password?
               </span></router-link-stub>
           </div>
           <div class="spacer"></div>
-          <div class="text-right col"><button type="button" class="v-btn v-btn--flat v-btn--text theme--light v-size--default blue--text text--darken-1"><span class="v-btn__content">
+          <div class="text-right col"><button type="button" class="v-btn v-btn--text theme--light v-size--default blue--text text--darken-1"><span class="v-btn__content">
                 Reset
-              </span></button> <button type="submit" class="mr-0 v-btn v-btn--contained theme--light v-size--default info"><span class="v-btn__content">
+              </span></button> <button type="submit" class="mr-0 v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default info"><span class="v-btn__content">
                 Login
               </span></button></div>
         </div>
       </form>
       <div class="divider my-5"><span>Or use social networks</span></div>
-      <div class="row align-center justify-center"><button type="button" class="v-btn v-btn--contained v-btn--fab v-btn--round theme--light v-size--x-small white"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-github theme--dark black--text" style="font-size: 34px;"></i></span></button> <button type="button" class="v-btn v-btn--contained v-btn--fab v-btn--round theme--light v-size--x-small white"><span class="v-btn__content"><svg width="32px" height="32px" viewBox="0 0 533.5 544.3" xmlns="http://www.w3.org/2000/svg"><path d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z" fill="#4285f4"></path><path d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z" fill="#34a853"></path><path d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z" fill="#fbbc04"></path><path d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z" fill="#ea4335"></path></svg></span></button> <button type="button" class="v-btn v-btn--contained v-btn--fab v-btn--round theme--light v-size--x-small white"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-facebook theme--dark" style="font-size: 34px; color: rgb(59, 88, 153); caret-color: #3b5899;"></i></span></button> <button type="button" class="v-btn v-btn--contained v-btn--fab v-btn--round theme--light v-size--x-small white"><span class="v-btn__content"><svg width="28px" height="28px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#1b6499"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"></path></svg></span></button></div>
+      <div class="row align-center justify-center"><button type="button" class="v-btn v-btn--is-elevated v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--x-small white"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-github theme--dark black--text" style="font-size: 34px;"></i></span></button> <button type="button" class="v-btn v-btn--is-elevated v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--x-small white"><span class="v-btn__content"><svg width="32px" height="32px" viewBox="0 0 533.5 544.3" xmlns="http://www.w3.org/2000/svg"><path d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z" fill="#4285f4"></path><path d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z" fill="#34a853"></path><path d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z" fill="#fbbc04"></path><path d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z" fill="#ea4335"></path></svg></span></button> <button type="button" class="v-btn v-btn--is-elevated v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--x-small white"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-facebook theme--dark" style="font-size: 34px; color: rgb(59, 88, 153); caret-color: #3b5899;"></i></span></button> <button type="button" class="v-btn v-btn--is-elevated v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--x-small white"><span class="v-btn__content"><svg width="28px" height="28px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#1b6499"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"></path></svg></span></button></div>
       <!---->
     </div>
   </div>

src/frontend/src/pages/auth/__tests__/__snapshots__/logout.spec.js.snap

@@ -15,7 +15,7 @@ exports[`logout.vue should match snapshot 1`] = `
         <!---->
       </div> <span> <!----> <!----></span>
       <div role="alert" class="v-alert v-sheet theme--dark info">
-        <div class="v-alert__wrapper"><i aria-hidden="true" class="v-icon notranslate v-alert__icon material-icons theme--dark">$info</i>
+        <div class="v-alert__wrapper"><i aria-hidden="true" class="v-icon notranslate v-alert__icon mdi mdi-information theme--dark"></i>
           <div class="v-alert__content">
             Please wait while logging you out of the system.
           </div>

src/frontend/src/pages/auth/__tests__/__snapshots__/register.spec.js.snap

@@ -87,9 +87,9 @@ exports[`register.vue should match snapshot 1`] = `
               </div>
             </div>
           </div>
-          <div class="text-right col"><button type="button" class="v-btn v-btn--flat v-btn--text theme--light v-size--default blue--text text--darken-1"><span class="v-btn__content">
+          <div class="text-right col"><button type="button" class="v-btn v-btn--text theme--light v-size--default blue--text text--darken-1"><span class="v-btn__content">
               Reset
-            </span></button> <button type="submit" class="mr-0 v-btn v-btn--contained theme--light v-size--default info"><span class="v-btn__content">
+            </span></button> <button type="submit" class="mr-0 v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default info"><span class="v-btn__content">
               Register
             </span></button></div>
         </div>

src/frontend/src/pages/auth/__tests__/__snapshots__/reset-password.spec.js.snap

@@ -54,9 +54,9 @@ exports[`reset-password.vue should match snapshot 1`] = `
             </div>
           </div>
           <div class="spacer"></div>
-          <div class="text-right col"><button type="button" class="v-btn v-btn--flat v-btn--text theme--light v-size--default blue--text text--darken-1"><span class="v-btn__content">
+          <div class="text-right col"><button type="button" class="v-btn v-btn--text theme--light v-size--default blue--text text--darken-1"><span class="v-btn__content">
               Reset
-            </span></button> <button type="submit" class="mr-0 v-btn v-btn--contained theme--light v-size--default info"><span class="v-btn__content">
+            </span></button> <button type="submit" class="mr-0 v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default info"><span class="v-btn__content">
               Reset Password
             </span></button></div>
         </div>

src/frontend/src/pages/auth/__tests__/__snapshots__/social-callback.spec.js.snap

@@ -14,7 +14,7 @@ exports[`social-callback.vue should match snapshot 1`] = `
         <!---->
       </div> <span> <!----> <!----></span>
       <div role="alert" class="v-alert v-sheet theme--dark info">
-        <div class="v-alert__wrapper"><i aria-hidden="true" class="v-icon notranslate v-alert__icon material-icons theme--dark">$info</i>
+        <div class="v-alert__wrapper"><i aria-hidden="true" class="v-icon notranslate v-alert__icon mdi mdi-information theme--dark"></i>
           <div class="v-alert__content">
             Please wait while logging you into the system...
           </div>

src/frontend/src/pages/auth/__tests__/__snapshots__/verify-email.spec.js.snap

@@ -15,7 +15,7 @@ exports[`verify-email.vue should match snapshot 1`] = `
         <!---->
       </div> <span> <!----> <!----></span>
       <div role="alert" class="v-alert v-sheet theme--dark info">
-        <div class="v-alert__wrapper"><i aria-hidden="true" class="v-icon notranslate v-alert__icon material-icons theme--dark">$info</i>
+        <div class="v-alert__wrapper"><i aria-hidden="true" class="v-icon notranslate v-alert__icon mdi mdi-information theme--dark"></i>
           <div class="v-alert__content">
             Please wait while verifying your email.
           </div>

src/frontend/src/pages/auth/__tests__/login.spec.js

@@ -1,11 +1,13 @@
-import { mount } from '@vue/test-utils'
+import { mount, createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
 import VueRouter from 'vue-router'
 import Login from '../login'
+import Vuetify from 'vuetify'
+
+const localVue = createLocalVue()
 
 describe('login.vue', () => {
-  let actions
-  let store
+  let actions, store, vuetify
 
   beforeEach(() => {
     actions = {
@@ -20,11 +22,14 @@ describe('login.vue', () => {
         loading: { status: false }
       }
     })
+    vuetify= new Vuetify()
   })
 
   it('should match snapshot', () => {
     const w = mount(Login, {
       store,
+      localVue,
+      vuetify,
       stubs: ['router-link', 'router-view']
     })
 
@@ -37,6 +42,8 @@ describe('login.vue', () => {
     const w = mount(Login, {
       store,
       router,
+      localVue,
+      vuetify,
       stubs: ['router-link', 'router-view']
     })
 

src/frontend/src/pages/auth/__tests__/logout.spec.js

@@ -1,10 +1,12 @@
-import { mount } from '@vue/test-utils'
+import { mount, createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
 import Page from '../logout'
+import Vuetify from 'vuetify'
+
+const localVue = createLocalVue()
 
 describe('logout.vue', () => {
-  let actions
-  let store
+  let actions,  store, vuetify
 
   beforeEach(() => {
     actions = {
@@ -21,11 +23,14 @@ describe('logout.vue', () => {
         loading: { status: false }
       }
     })
+    vuetify = new Vuetify()
   })
 
   it('should match snapshot', () => {
     const w = mount(Page, {
       store,
+      localVue,
+      vuetify,
       stubs: ['router-link', 'router-view']
     })
 

src/frontend/src/pages/auth/__tests__/social-callback.spec.js

@@ -1,11 +1,13 @@
-import { mount } from '@vue/test-utils'
+import { mount, createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
 import VueRouter from 'vue-router'
 import Page from '../social-callback'
+import Vuetify from 'vuetify'
+
+const localVue = createLocalVue()
 
 describe('social-callback.vue', () => {
-  let actions
-  let store
+  let actions, store, vuetify
 
   beforeEach(() => {
     actions = {
@@ -20,13 +22,16 @@ describe('social-callback.vue', () => {
         loading: { status: false }
       }
     })
+    vuetify = new Vuetify()
   })
 
   it('should match snapshot', () => {
     const router = new VueRouter({})
     const w = mount(Page, {
       store,
       router,
+      localVue,
+      vuetify,
       stubs: ['router-link', 'router-view']
     })
 

src/frontend/src/pages/auth/__tests__/verify-email.spec.js

@@ -1,11 +1,13 @@
-import { mount } from '@vue/test-utils'
+import { mount, createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
 import VueRouter from 'vue-router'
 import Page from '../verify-email'
+import Vuetify from 'vuetify'
+
+const localVue = createLocalVue()
 
 describe('verify-email.vue', () => {
-  let actions
-  let store
+  let actions, store, vuetify
 
   beforeEach(() => {
     actions = {
@@ -19,13 +21,16 @@ describe('verify-email.vue', () => {
         loading: { status: false }
       }
     })
+    vuetify= new Vuetify()
   })
 
   it('should match snapshot', () => {
     const router = new VueRouter({})
     const w = mount(Page, {
       store,
       router,
+      localVue,
+      vuetify,
       stubs: ['router-link', 'router-view']
     })
 

src/frontend/src/pages/dashboard/__tests__/home.spec.js

@@ -1,10 +1,13 @@
-import { mount } from '@vue/test-utils'
+import { mount, createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
 import VueRouter from 'vue-router'
 import Page from '../home'
+import Vuetify from 'vuetify'
+
+const localVue = createLocalVue()
 
 describe('home.vue', () => {
-  let store
+  let store, vuetify
 
   beforeEach(() => {
     const actions = {
@@ -18,13 +21,16 @@ describe('home.vue', () => {
         loading: { status: false }
       }
     })
+    vuetify = new Vuetify()
   })
 
   it('should match snapshot', () => {
     const router = new VueRouter({})
     const w = mount(Page, {
       store,
       router,
+      localVue,
+      vuetify,
       stubs: ['router-link', 'router-view'],
       created () {
         this.$vuetify.lang = {