Start to implement wrapper modal

components/Modal.spec.js

@@ -0,0 +1,64 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import Modal from './Modal.vue'
+import Vue from 'vue'
+import Vuex from 'vuex'
+import { getters, mutations } from '../store/modal'
+import Styleguide from '@human-connection/styleguide'
+
+const localVue = createLocalVue()
+
+localVue.use(Vuex)
+localVue.use(Styleguide)
+
+describe('Modal.vue', () => {
+  let Wrapper
+  let store
+  let state
+  let mocks
+
+  beforeEach(() => {
+    mocks = {
+      $t: () => {}
+    }
+    state = {
+      open: null,
+      data: {}
+    }
+  })
+
+  describe('mount', () => {
+    let wrapper
+    const Wrapper = () => {
+      store = new Vuex.Store({
+        state,
+        getters: {
+          'modal/open': getters.open,
+          'modal/data': getters.data
+        },
+        mutations: {
+          'modal/SET_OPEN': mutations.SET_OPEN
+        }
+      })
+      return mount(Modal, { store, mocks, localVue })
+    }
+
+    it('renders nothing', () => {
+      wrapper = Wrapper()
+      expect(wrapper.isEmpty()).toBe(true)
+    })
+
+    describe('store opens a report', () => {
+      beforeEach(() => {
+        state = {
+          open: 'report',
+          data: {}
+        }
+        wrapper = Wrapper()
+      })
+
+      it('renders report modal', () => {
+        expect(wrapper.contains('#modal-report')).toBe(true)
+      })
+    })
+  })
+})

components/Modal.vue

@@ -0,0 +1,24 @@
+<template>
+  <report-modal v-if="showReportModal" />
+</template>
+
+<script>
+import ReportModal from '~/components/ReportModal'
+
+export default {
+  name: 'Modal',
+  components: {
+    ReportModal
+  },
+  computed: {
+    showReportModal() {
+      return this.$store.getters['modal/open'] === 'report'
+    }
+  },
+  methods: {
+    close() {
+      this.$store.commit('modal/SET_OPEN', {})
+    }
+  }
+}
+</script>