add newsletter UserCard_Newsletter.vue and UserCard_Newsletter.spec.js

frontend/src/locales/de.json

@@ -19,7 +19,6 @@
     "en": "English"
   },
   "select_language": "Bitte wähle eine Sprache für die App und Newsletter",
-  "newsletter": "Newsletter",
   "decay": {
     "decay": "Vergänglichkeit",
     "decay_since_last_transaction":"Vergänglichkeit seit der letzten Transaktion",
@@ -42,7 +41,11 @@
     "fromCommunity":"Aus der Gemeinschaft",
     "toCommunity":"An die Gemeinschaft",
     "noDecay": "Keine Vergänglichkeit"
-  }, 
+  },
+  "setting": {
+    "newsletter": "Newsletter",
+    "changeNewsletter": "Newsletter Status ändern"
+  },
   "form": {
     "cancel": "Abbrechen",
     "reset": "Zurücksetzen",
@@ -66,7 +69,6 @@
     "change-password": "Passwort ändern",
     "change-name": "Name ändern",
     "changeLanguage": "Sprache ändern",
-    "changeNewsletter": "Newsletter Status ändern",
     "amount":"Betrag",
     "memo":"Nachricht",
     "message":"Nachricht",

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

@@ -0,0 +1,49 @@
+import { mount } from '@vue/test-utils'
+import UserCardNewsletter from './UserCard_Newsletter'
+
+const localVue = global.localVue
+
+const mockAPIcall = jest.fn()
+
+const toastErrorMock = jest.fn()
+const toastSuccessMock = jest.fn()
+const storeCommitMock = jest.fn()
+
+describe('UserCard_Newsletter', () => {
+  let wrapper
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+    $store: {
+      state: {
+        language: 'de',
+      },
+      commit: storeCommitMock,
+    },
+    $toasted: {
+      success: toastSuccessMock,
+      error: toastErrorMock,
+    },
+    $apollo: {
+      query: mockAPIcall,
+    },
+  }
+
+  const Wrapper = () => {
+    return mount(UserCardNewsletter, { localVue, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component', () => {
+      expect(wrapper.find('div#formusernewsletter').exists()).toBeTruthy()
+    })
+
+    it('has an edit icon', () => {
+      expect(wrapper.find('svg.bi-pencil').exists()).toBeTruthy()
+    })
+  })
+})

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

@@ -8,7 +8,7 @@
       <b-row class="mb-4 text-right">
         <b-col class="text-right">
           <a @click="showNewsletter ? (showNewsletter = !showNewsletter) : cancelEdit()">
-            <span class="pointer mr-3">{{ $t('form.changeNewsletter') }}</span>
+            <span class="pointer mr-3">{{ $t('setting.changeNewsletter') }}</span>
             <b-icon v-if="showNewsletter" class="pointer ml-3" icon="pencil"></b-icon>
             <b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
           </a>
@@ -19,7 +19,7 @@
     <div v-if="showNewsletter">
       <b-row class="mb-3">
         <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
-          <small>{{ $t('newsletter') }}</small>
+          <small>{{ $t('setting.newsletter') }}</small>
         </b-col>
         <b-col class="h2 col-md-9 col-sm-10">Aktueller Newsletter Status</b-col>
       </b-row>
@@ -30,11 +30,9 @@
         <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
           <b-row class="mb-2">
             <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
-              <small>{{ $t('newsletter') }}</small>
-            </b-col>
-            <b-col class="col-md-9 col-sm-10">
-              Form Newsletter status ändern
+              <small>{{ $t('setting.newsletter') }}</small>
             </b-col>
+            <b-col class="col-md-9 col-sm-10">Form Newsletter status ändern</b-col>
           </b-row>
 
           <b-row class="text-right">
@@ -71,7 +69,7 @@ export default {
         .query({
           query: updateUserInfos,
           variables: {
-            newsletter: this.$store.state.newsletter, /* exestiert noch nicht im store*/
+            newsletter: this.$store.state.newsletter /* exestiert noch nicht im store */,
           },
         })
         .then(() => {

frontend/src/views/Pages/UserProfileOverview.vue

@@ -23,7 +23,7 @@ export default {
     FormUserData,
     FormUserPasswort,
     FormUserLanguage,
-    FormUserNewsletter
+    FormUserNewsletter,
   },
   props: {
     balance: { type: Number, default: 0 },