refactor newsletter component and tests

frontend/src/graphql/mutations.js

@@ -0,0 +1,13 @@
+import gql from 'graphql-tag'
+
+export const subscribeNewsletter = gql`
+  mutation($email: String!, $language: String!) {
+    subscribeNewsletter(email: $email, language: $language)
+  }
+`
+
+export const unsubscribeNewsletter = gql`
+  mutation($email: String!, $language: String!) {
+    unsubscribeNewsletter(email: $email, language: $language)
+  }
+`

frontend/src/store/store.js

@@ -39,7 +39,7 @@ export const actions = {
     commit('firstName', data.firstName)
     commit('lastName', data.lastName)
     commit('description', data.description)
-    commit('newsletterState', data.klickTipp.newsletterState)
+    // commit('newsletterState', data.klickTipp.newsletterState)
   },
   logout: ({ commit, state }) => {
     commit('token', null)

frontend/src/views/Pages/UserProfile/UserCard_Newsletter.spec.js

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils'
 import UserCardNewsletter from './UserCard_Newsletter'
+import { unsubscribeNewsletter } from '../../../graphql/mutations'
 
 const localVue = global.localVue
 
@@ -8,6 +9,7 @@ const mockAPIcall = jest.fn()
 const toastErrorMock = jest.fn()
 const toastSuccessMock = jest.fn()
 const storeCommitMock = jest.fn()
+const newsletterStateMock = jest.fn().mockReturnValue(true)
 
 describe('UserCard_Newsletter', () => {
   let wrapper
@@ -17,6 +19,8 @@ describe('UserCard_Newsletter', () => {
     $store: {
       state: {
         language: 'de',
+        email: 'peter@lustig.de',
+        newsletterState: newsletterStateMock,
       },
       commit: storeCommitMock,
     },
@@ -25,7 +29,7 @@ describe('UserCard_Newsletter', () => {
       error: toastErrorMock,
     },
     $apollo: {
-      query: mockAPIcall,
+      mutate: mockAPIcall,
     },
   }
 
@@ -45,5 +49,51 @@ describe('UserCard_Newsletter', () => {
     it('has an edit BFormCheckbox switch', () => {
       expect(wrapper.find('.Test-BFormCheckbox').exists()).toBeTruthy()
     })
+
+    describe('unsubscribe with sucess', () => {
+      beforeEach(() => {
+        mockAPIcall.mockResolvedValue({
+          data: {
+            unsubscribeNewsletter: true,
+          },
+        })
+        wrapper.find('input').trigger('change')
+      })
+
+      it('calls the unsubscribe mutation', () => {
+        expect(mockAPIcall).toBeCalledWith({
+          mutation: unsubscribeNewsletter,
+          variables: {
+            email: 'peter@lustig.de',
+            language: 'de',
+          },
+        })
+      })
+
+      it('updates the store', () => {
+        expect(storeCommitMock).toBeCalledWith('newsletterState', false)
+      })
+
+      it('toasts a success message', () => {
+        expect(toastSuccessMock).toBeCalledWith('setting.newsletterFalse')
+      })
+    })
+
+    describe('unsubscribe with server error', () => {
+      beforeEach(() => {
+        mockAPIcall.mockRejectedValue({
+          message: 'Ouch',
+        })
+        wrapper.find('input').trigger('change')
+      })
+
+      it('resets the newsletterState', () => {
+        expect(wrapper.vm.newsletterState).toBeTruthy()
+      })
+
+      it('toasts an error message', () => {
+        expect(toastErrorMock).toBeCalledWith('Ouch')
+      })
+    })
   })
 })

frontend/src/views/Pages/UserProfile/UserCard_Newsletter.vue

@@ -14,11 +14,12 @@
         <b-col class="col-12">
           <b-form-checkbox
             class="Test-BFormCheckbox"
-            v-model="NewsletterStatus"
+            v-model="newsletterState"
             name="check-button"
             switch
+            @change="onSubmit"
           >
-            {{ NewsletterStatus ? $t('setting.newsletterTrue') : $t('setting.newsletterFalse') }}
+            {{ newsletterState ? $t('setting.newsletterTrue') : $t('setting.newsletterFalse') }}
           </b-form-checkbox>
         </b-col>
       </b-row>
@@ -26,36 +27,35 @@
   </b-card>
 </template>
 <script>
-import { updateUserInfos } from '../../../graphql/queries'
+import { subscribeNewsletter, unsubscribeNewsletter } from '../../../graphql/mutations'
 
 export default {
   name: 'FormUserNewsletter',
   data() {
     return {
-      showNewsletter: true,
+      newsletterState: this.$store.state.newsletterState,
-      NewsletterStatus: true,
     }
   },
-  created() {
-    this.NewsletterStatus = this.$store.state.newsletter /* exestiert noch nicht im store */
-  },
   methods: {
     async onSubmit() {
       this.$apollo
-        .query({
+        .mutate({
-          query: updateUserInfos,
+          mutation: this.newsletterState ? subscribeNewsletter : unsubscribeNewsletter,
           variables: {
-            newsletter: this.$store.state.language /* exestiert noch nicht im store */,
+            email: this.$store.state.email,
+            language: this.$store.state.language,
           },
         })
         .then(() => {
+          this.$store.commit('newsletterState', this.newsletterState)
           this.$toasted.success(
-            this.NewsletterStatus
+            this.newsletterState
               ? this.$t('setting.newsletterTrue')
               : this.$t('setting.newsletterFalse'),
           )
         })
         .catch((error) => {
+          this.newsletterState = this.$store.state.newsletterState
           this.$toasted.error(error.message)
         })
     },