From 2a1276cdc325c77bbe6745a0ed2508e304dac897 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 8 Mar 2019 14:09:13 +0100
Subject: [PATCH] Better test ReportModal first

---
 components/DisableModal.spec.js |  51 -----------
 components/DisableModal.vue     | 144 --------------------------------
 components/ReportModal.spec.js  |  86 +++++++++++++++++++
 3 files changed, 86 insertions(+), 195 deletions(-)
 delete mode 100644 components/DisableModal.spec.js
 delete mode 100644 components/DisableModal.vue
 create mode 100644 components/ReportModal.spec.js

diff --git a/components/DisableModal.spec.js b/components/DisableModal.spec.js
deleted file mode 100644
index 0ca8630f8..000000000
--- a/components/DisableModal.spec.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
-import DisableModal from './DisableModal.vue'
-import Vue from 'vue'
-import Vuex from 'vuex'
-import Styleguide from '@human-connection/styleguide'
-import portal from 'portal-vue'
-
-const localVue = createLocalVue()
-
-localVue.use(Vuex)
-localVue.use(Styleguide)
-localVue.use(portal)
-
-describe('DisableModal.vue', () => {
-  let wrapper
-  let getters
-  let store
-  let mocks
-
-  beforeEach(() => {
-    getters = {
-      'modal/data': () => false
-    }
-
-    store = new Vuex.Store({
-      getters
-    })
-    mocks = { $t: () => {} }
-  })
-
-  describe('mount', () => {
-    beforeEach(() => {
-      wrapper = mount(DisableModal, { store, mocks, localVue })
-    })
-
-    it('renders', () => {
-      expect(wrapper.is('div')).toBe(true)
-    })
-  })
-
-  describe('shallowMount', () => {
-    beforeEach(() => {
-      wrapper = shallowMount(DisableModal, { store, mocks, localVue })
-    })
-    describe('isOpen', () => {
-      it('defaults to false', () => {
-        expect(wrapper.vm.isOpen).toBe(false)
-      })
-    })
-  })
-})
diff --git a/components/DisableModal.vue b/components/DisableModal.vue
deleted file mode 100644
index 5865d3e95..000000000
--- a/components/DisableModal.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-  <ds-modal
-    :title="title"
-    :is-open="isOpen"
-    :confirm-label="$t('report.submit')"
-    :cancel-label="$t('report.cancel')"
-    confirm-icon="warning"
-    @confirm="report"
-    @cancel="close"
-  >
-    <transition name="ds-transition-fade">
-      <ds-flex
-        v-if="success"
-        class="hc-modal-success"
-        centered
-      >
-        <sweetalert-icon icon="success" />
-      </ds-flex>
-    </transition>
-
-    <!-- eslint-disable-next-line vue/no-v-html -->
-    <p v-html="message" />
-
-    <template
-      slot="footer"
-      slot-scope="{ cancel, confirm, cancelLabel, confirmLabel }"
-    >
-      <ds-button
-        ghost
-        icon="close"
-        :disabled="disabled || loading"
-        @click.prevent="cancel('cancel')"
-      >
-        {{ cancelLabel }}
-      </ds-button>
-      <ds-button
-        danger
-        icon="exclamation-circle"
-        :loading="loading"
-        :disabled="disabled || loading"
-        @click.prevent="confirm('confirm')"
-      >
-        {{ confirmLabel }}
-      </ds-button>
-    </template>
-  </ds-modal>
-</template>
-
-<script>
-import gql from 'graphql-tag'
-import { SweetalertIcon } from 'vue-sweetalert-icons'
-
-export default {
-  name: 'DisableModal',
-  components: {
-    SweetalertIcon
-  },
-  data() {
-    return {
-      success: false,
-      loading: false,
-      disabled: false
-    }
-  },
-  computed: {
-    data() {
-      return this.$store.getters['modal/data'] || {}
-    },
-    title() {
-      if (!this.data.context) return ''
-      return this.$t(`report.${this.data.context}.title`)
-    },
-    message() {
-      if (!this.data.context) return ''
-      return this.$t(`report.${this.data.context}.message`, { name: this.name })
-    },
-    name() {
-      return this.$filters.truncate(this.data.name, 30)
-    },
-    isOpen() {
-      return this.$store.getters['modal/open'] === 'report'
-    }
-  },
-  watch: {
-    isOpen(open) {
-      if (open) {
-        this.success = false
-        this.disabled = false
-        this.loading = false
-      }
-    }
-  },
-  methods: {
-    close() {
-      this.$store.commit('modal/SET_OPEN', {})
-    },
-    report() {
-      this.loading = true
-      this.disabled = true
-      this.$apollo
-        .mutate({
-          mutation: gql`
-            mutation($id: ID!, $description: String) {
-              report(id: $id, description: $description) {
-                id
-              }
-            }
-          `,
-          variables: {
-            id: this.data.id,
-            description: '-'
-          }
-        })
-        .then(() => {
-          this.success = true
-          this.$toast.success('Thanks for reporting!')
-          setTimeout(this.close, 1500)
-        })
-        .catch(err => {
-          this.$toast.error(err.message)
-          this.disabled = false
-        })
-        .finally(() => {
-          this.loading = false
-        })
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.hc-modal-success {
-  pointer-events: none;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  background-color: #fff;
-  opacity: 1;
-  z-index: $z-index-modal;
-  border-radius: $border-radius-x-large;
-}
-</style>
diff --git a/components/ReportModal.spec.js b/components/ReportModal.spec.js
new file mode 100644
index 000000000..827c60dcf
--- /dev/null
+++ b/components/ReportModal.spec.js
@@ -0,0 +1,86 @@
+import { shallowMount, render, mount, createLocalVue } from '@vue/test-utils'
+import ReportModal from './ReportModal.vue'
+import Vue from 'vue'
+import Vuex from 'vuex'
+import Styleguide from '@human-connection/styleguide'
+import portal from 'portal-vue'
+
+const localVue = createLocalVue()
+
+localVue.use(Vuex)
+localVue.use(Styleguide)
+localVue.use(portal)
+
+describe('ReportModal.vue', () => {
+  let wrapper
+  let getters
+  let store
+  let mocks
+  let $apollo
+
+  beforeEach(() => {
+    getters = {
+      'modal/data': () => {
+        return {
+          success: false,
+          loading: false,
+          disabled: false
+        }
+      }
+    }
+    $apollo = {
+      mutate: jest.fn()
+    }
+  })
+
+  describe('mount', () => {
+    const wrapper = () => {
+      mocks = {
+        $t: () => {},
+        $apollo
+      }
+      store = new Vuex.Store({
+        getters
+      })
+      return mount(ReportModal, { store, mocks, localVue })
+    }
+
+    it('renders', () => {
+      expect(wrapper().is('div')).toBe(true)
+    })
+
+    describe('when open', () => {
+      beforeEach(() => {
+        getters['modal/open'] = () => 'report'
+      })
+
+      describe('confirm', () => {
+        it('calls a mutation', () => {
+          console.log(wrapper().html())
+          const confirmButton = wrapper().find('.ds-button-danger')
+          confirmButton.trigger('click')
+          expect($apollo.mutate).toHaveBeenCalled()
+        })
+      })
+    })
+  })
+
+  describe('shallowMount', () => {
+    const wrapper = () => {
+      mocks = {
+        $t: () => {},
+        $apollo
+      }
+      store = new Vuex.Store({
+        getters
+      })
+      return shallowMount(ReportModal, { store, mocks, localVue })
+    }
+
+    describe('isOpen', () => {
+      it('defaults to false', () => {
+        expect(wrapper().vm.isOpen).toBe(false)
+      })
+    })
+  })
+})