Remove Vuex from the component for simplicity, and update the mocha t…

…est API

src/components/cylc/ConnectionStatus.vue

@@ -17,11 +17,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <v-snackbar
-    top
-    color="red"
+    :value="isOffline"
     class="justify-center"
-    :timeout=-1
-    :value="offline"
+    color="red"
+    top
   >
     <v-icon
       class="mr-2"
@@ -34,12 +33,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/layouts/Default.vue

@@ -17,7 +17,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div>
-    <ConnectionStatus />
+    <ConnectionStatus :is-offline="offline" />
     <toolbar />
     <drawer />
 
@@ -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>

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)
   })
 })