Update Vuetify from 2.2.6 to 2.3.9

package.json

@@ -48,7 +48,7 @@
     "vue-router": "^3.1.3",
     "vue-spinner": "^1.0.3",
     "vue-the-mask": "^0.11.1",
-    "vuetify": "^2.2.6",
+    "vuetify": "^2.3.9",
     "vuex": "^3.1.1",
     "vuex-router-sync": "^5.0.0"
   },

src/components/cylc/ConnectionStatus.vue

@@ -17,11 +17,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <v-snackbar
-    top
-    color="red"
+    :value="isOffline"
+    :timeout=-1
     class="justify-center"
-    :timeout=0
-    :value="offline"
+    color="red"
+    top
   >
     <v-icon
       class="mr-2"
@@ -34,12 +34,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import { mapState } from 'vuex'
-
 export default {
   name: 'ConnectionStatus',
-  computed: {
-    ...mapState(['offline'])
+
+  props: {
+    /**
+     * Controls whether the connection status alert is visible or not.
+     */
+    isOffline: {
+      type: Boolean,
+      required: true
+    }
   }
 }
 </script>

src/components/cylc/Drawer.vue

@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     v-model="drawer"
     app
     floating
-    mobile-break-point="991"
+    mobile-breakpoint="991"
     width="260"
     persistent
     class="fill-height"

src/components/cylc/graph/Graph.vue

@@ -55,7 +55,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       right
       absolute
       color="red lighten-1"
-      :timeout=0
+      :timeout=-1
       :value="warning"
     >
       WARNING: POC Graph View: beware of large workflows!

src/layouts/Default.vue

@@ -17,18 +17,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div>
-    <ConnectionStatus />
+    <ConnectionStatus :is-offline="offline" />
     <toolbar />
     <drawer />
 
-    <v-content>
+    <v-main>
       <alert />
       <div id="core-view">
         <v-fade-transition mode="out-in">
           <slot/>
         </v-fade-transition>
       </div>
-    </v-content>
+    </v-main>
   </div>
 </template>
 
@@ -37,14 +37,20 @@ import Alert from '@/components/core/Alert'
 import Drawer from '@/components/cylc/Drawer'
 import Toolbar from '@/components/cylc/Toolbar'
 import ConnectionStatus from '@/components/cylc/ConnectionStatus'
+import { mapState } from 'vuex'
 
 export default {
   name: 'Default',
+
   components: {
     ConnectionStatus,
     Alert,
     Drawer,
     Toolbar
+  },
+
+  computed: {
+    ...mapState(['offline'])
   }
 }
 </script>

src/layouts/Empty.vue

@@ -16,9 +16,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <v-content>
+  <v-main>
     <slot />
-  </v-content>
+  </v-main>
 </template>
 
 <script>

tests/unit/components/cylc/connectionstatus.vue.spec.js

@@ -15,24 +15,43 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { mount } from '@vue/test-utils'
+import { createLocalVue, mount } from '@vue/test-utils'
 import { expect } from 'chai'
 import ConnectionStatus from '@/components/cylc/ConnectionStatus'
-import store from '@/store/index'
+import Vuetify from 'vuetify/lib'
+import Vue from 'vue'
+
+// global as per Vuetify docs https://vuetifyjs.com/en/getting-started/unit-testing/#bootstrapping-vuetify
+Vue.use(Vuetify)
+// but also create the local vue as per Vuetify docs-example https://vuetifyjs.com/en/getting-started/unit-testing/#spec-tests
+const localVue = createLocalVue()
 
 describe('ConnectionStatus component', () => {
-  it('hidden when not offline', () => {
-    store.state.offline = false
-    const wrapper = mount(ConnectionStatus, {
-      store
-    })
-    expect(wrapper.contains('div')).to.equal(false)
+  let vuetify
+  beforeEach(() => {
+    vuetify = new Vuetify()
   })
-  it('visible when offline', () => {
-    store.state.offline = true
-    const wrapper = mount(ConnectionStatus, {
-      store
+  // args: isOffline
+  const tests = [
+    {
+      args: [false], expected: false
+    },
+    {
+      args: [true], expected: true
+    }
+  ]
+  tests.forEach(test => {
+    it('correctly hides or displays the connection status alert', () => {
+      const wrapper = mount(ConnectionStatus, {
+        localVue,
+        vuetify,
+        propsData: {
+          isOffline: test.args[0]
+        }
+      })
+      expect(wrapper.props().isOffline).to.equal(test.args[0], `Wrong props value, expected ${test.args[0]}`)
+      const isVisible = wrapper.find('.v-snack__content').isVisible()
+      expect(isVisible).to.equal(test.expected, `Incorrect component visibility: ${isVisible}`)
     })
-    expect(wrapper.contains('div')).to.equal(true)
   })
 })

yarn.lock

@@ -14904,10 +14904,10 @@ vuetify@^2.1.14:
   resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.2.19.tgz#826f6899267a0f867aff56aff0cf000d07a421e7"
   integrity sha512-6o+wdB77FBTkZsFlF8g3W5paG6CsFWtxv6gjkovOQ1P0nggTX8AbIGYIX7xHiOqG+PvBsoIfOEt2E/x6U/d45g==
 
-vuetify@^2.2.6:
-  version "2.2.28"
-  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.2.28.tgz#9cea948758e96c349f107a0f853e4226a96cdf4d"
-  integrity sha512-zKnPYaXcNTOpnQHK6Ys+WETzrSsplhwGmC8EudcosWA19kU1c+CAqg4SuPk8nDz/KUVPc2nI9AIRN6UQYUcHtA==
+vuetify@^2.3.9:
+  version "2.3.9"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.3.9.tgz#6dcd1de647e1ce2c7cfaebb7068a0cf8929360b3"
+  integrity sha512-E5K9flTvS21tCkHgqDBMl0BY/Rld4SLUaJpQ+sQdL8/2uPcWmWLrdumn4SI8LBFojE0UP1GSaH4zKuxLL36fYg==
 
 vuex-router-sync@^5.0.0:
   version "5.0.0"