From 296f830f787cea2b98858da4babe7cf065605815 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 10 Sep 2021 14:34:52 +0200
Subject: [PATCH] add form and fix test

---
 .../src/components/LanguageSwitchSelect.vue   |   4 -
 frontend/src/views/Pages/Register.spec.js     |   4 +-
 frontend/src/views/Pages/Register.vue         |  12 +-
 .../UserProfile/UserCard_FormUserData.vue     | 136 ++++++++----------
 .../UserProfile/UserCard_FormUserPasswort.vue |  87 ++++++-----
 .../UserProfile/UserCard_FormUsername.vue     |  40 +++---
 .../UserProfile/UserCard_Language.spec.js     |  49 +++++++
 .../Pages/UserProfile/UserCard_Language.vue   |  56 +++++---
 .../views/Pages/UserProfileOverview.spec.js   |   8 +-
 .../src/views/Pages/UserProfileOverview.vue   |   9 +-
 10 files changed, 216 insertions(+), 189 deletions(-)
 create mode 100644 frontend/src/views/Pages/UserProfile/UserCard_Language.spec.js

diff --git a/frontend/src/components/LanguageSwitchSelect.vue b/frontend/src/components/LanguageSwitchSelect.vue
index e1caa601e..2b41169cf 100644
--- a/frontend/src/components/LanguageSwitchSelect.vue
+++ b/frontend/src/components/LanguageSwitchSelect.vue
@@ -22,10 +22,6 @@ export default {
   },
   props: {
     language: { type: String },
-    register: {
-      type: Boolean,
-      required: true,
-    },
   },
   created() {
     if (!this.register) this.selected = this.$store.state.language
diff --git a/frontend/src/views/Pages/Register.spec.js b/frontend/src/views/Pages/Register.spec.js
index f1a13c638..b7b5cda31 100644
--- a/frontend/src/views/Pages/Register.spec.js
+++ b/frontend/src/views/Pages/Register.spec.js
@@ -37,8 +37,8 @@ describe('Register', () => {
       wrapper = Wrapper()
     })
 
-    it('renders the Register form', () => {
-      expect(wrapper.find('div.register-form').exists()).toBeTruthy()
+    it.only('renders the Register form', () => {
+      expect(wrapper.find('div#registerform').exists()).toBeTruthy()
     })
 
     describe('Register header', () => {
diff --git a/frontend/src/views/Pages/Register.vue b/frontend/src/views/Pages/Register.vue
index 6b7dd9281..8c70f94e6 100755
--- a/frontend/src/views/Pages/Register.vue
+++ b/frontend/src/views/Pages/Register.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="register-form">
+  <div id="registerform">
     <!-- Header -->
     <div class="header p-4">
       <b-container class="container">
@@ -86,13 +86,7 @@
 
                   <b-row>
                     <b-col cols="12">
-                      {{ $t('language') }} {{ language }}
-                      <!--   <b-form-select
-                        v-model="language"
-                        class="selectedLanguage mb-3"
-                      ></b-form-select>
-                      -->
-
+                      {{ $t('language') }}
                       <language-switch-select @update-language="updateLanguage" />
                     </b-col>
                   </b-row>
@@ -244,7 +238,7 @@ export default {
       return this.form.email !== ''
     },
     languageFilled() {
-      return this.language !== ''
+      return this.language !== null && this.language !== ''
     },
   },
 }
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
index 3726b5298..5fb0c607f 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
@@ -1,81 +1,71 @@
 <template>
-  <div class="userdata_form" fluid="sm">
-    <div
-      id="userdata_form"
-      class="bg-transparent pt-3 pb-3"
-      style="background-color: #ebebeba3 !important"
-    >
-      <b-container>
-        <b-row class="text-right">
-          <b-col class="mb-3">
-            <a @click="showUserData ? (showUserData = !showUserData) : cancelEdit()">
-              <span class="pointer mr-3">{{ $t('form.change-name') }}</span>
+  <b-card id="userdata_form" class="bg-transparent" style="background-color: #ebebeba3 !important">
+    <div>
+      <b-row class="mb-4 text-right">
+        <b-col class="text-right">
+          <a @click="showUserData ? (showUserData = !showUserData) : cancelEdit()">
+            <span class="pointer mr-3">{{ $t('form.change-name') }}</span>
+            <b-icon v-if="showUserData" class="pointer ml-3" icon="pencil"></b-icon>
+            <b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
+          </a>
+        </b-col>
+      </b-row>
+    </div>
 
-              <b-icon v-if="showUserData" class="pointer" icon="pencil">
-                {{ $t('form.change') }}
-              </b-icon>
-
-              <b-icon v-else class="pointer" icon="x-circle" variant="danger"></b-icon>
-            </a>
+    <b-container>
+      <b-form @keyup.prevent="loadSubmitButton">
+        <b-row class="mb-3">
+          <b-col class="col-12 col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
+            <small>{{ $t('form.firstname') }}</small>
+          </b-col>
+          <b-col v-if="showUserData" class="h2 col-sm-10 col-md-9">
+            {{ form.firstName }}
+          </b-col>
+          <b-col v-else class="col-md-9 col-sm-10">
+            <b-input type="text" v-model="form.firstName"></b-input>
+          </b-col>
+        </b-row>
+        <b-row class="mb-3">
+          <b-col class="col-12 col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
+            <small>{{ $t('form.lastname') }}</small>
+          </b-col>
+          <b-col v-if="showUserData" class="h2 col-sm-10 col-md-9">
+            {{ form.lastName }}
+          </b-col>
+          <b-col v-else class="col-md-9 col-sm-10">
+            <b-input type="text" v-model="form.lastName"></b-input>
+          </b-col>
+        </b-row>
+        <b-row class="mb-3" v-show="false">
+          <b-col class="col-12 col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
+            <small>{{ $t('form.description') }}</small>
+          </b-col>
+          <b-col v-if="showUserData" class="col-sm-10 col-md-9">
+            {{ form.description }}
+          </b-col>
+          <b-col v-else class="col-sm-10 col-md-9">
+            <b-textarea rows="3" max-rows="6" v-model="form.description"></b-textarea>
           </b-col>
         </b-row>
-      </b-container>
 
-      <b-container>
-        <b-form @keyup.prevent="loadSubmitButton">
-          <b-row class="mb-3">
-            <b-col class="col-12 col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
-              <small>{{ $t('form.firstname') }}</small>
-            </b-col>
-            <b-col v-if="showUserData" class="col-sm-10 col-md-9">
-              {{ form.firstName }}
-            </b-col>
-            <b-col v-else class="col-md-9 col-sm-10">
-              <b-input type="text" v-model="form.firstName"></b-input>
-            </b-col>
-          </b-row>
-          <b-row class="mb-3">
-            <b-col class="col-12 col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
-              <small>{{ $t('form.lastname') }}</small>
-            </b-col>
-            <b-col v-if="showUserData" class="col-sm-10 col-md-9">
-              {{ form.lastName }}
-            </b-col>
-            <b-col v-else class="col-md-9 col-sm-10">
-              <b-input type="text" v-model="form.lastName"></b-input>
-            </b-col>
-          </b-row>
-          <b-row class="mb-3" v-show="false">
-            <b-col class="col-12 col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
-              <small>{{ $t('form.description') }}</small>
-            </b-col>
-            <b-col v-if="showUserData" class="col-sm-10 col-md-9">
-              {{ form.description }}
-            </b-col>
-            <b-col v-else class="col-sm-10 col-md-9">
-              <b-textarea rows="3" max-rows="6" v-model="form.description"></b-textarea>
-            </b-col>
-          </b-row>
-
-          <b-row class="text-right" v-if="!showUserData">
-            <b-col>
-              <div class="text-right" ref="submitButton">
-                <b-button
-                  :variant="loading ? 'default' : 'success'"
-                  @click="onSubmit"
-                  type="submit"
-                  class="mt-4"
-                  :disabled="loading"
-                >
-                  {{ $t('form.save') }}
-                </b-button>
-              </div>
-            </b-col>
-          </b-row>
-        </b-form>
-      </b-container>
-    </div>
-  </div>
+        <b-row class="text-right" v-if="!showUserData">
+          <b-col>
+            <div class="text-right" ref="submitButton">
+              <b-button
+                :variant="loading ? 'default' : 'success'"
+                @click="onSubmit"
+                type="submit"
+                class="mt-4"
+                :disabled="loading"
+              >
+                {{ $t('form.save') }}
+              </b-button>
+            </div>
+          </b-col>
+        </b-row>
+      </b-form>
+    </b-container>
+  </b-card>
 </template>
 <script>
 import { updateUserInfos } from '../../../graphql/queries'
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue
index 4678defaf..f317d3c07 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue
@@ -1,48 +1,43 @@
 <template>
-  <div
-    id="change_pwd"
-    class="bg-transparent pt-3 pb-3"
-    style="background-color: #ebebeba3 !important"
-  >
-    <b-container>
-      <div>
-        <b-row class="mb-4 text-right">
-          <b-col class="text-right">
-            <a @click="!editPassword ? (editPassword = !editPassword) : cancelEdit()">
-              <span class="pointer mr-3">{{ $t('form.change-password') }}</span>
-              <b-icon v-if="!editPassword" class="pointer ml-3" icon="pencil" />
-              <b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
-            </a>
-          </b-col>
-        </b-row>
-      </div>
-      <div v-if="editPassword">
-        <validation-observer ref="observer" v-slot="{ handleSubmit }">
-          <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
-            <b-row class="mb-2">
-              <b-col>
-                <input-password
-                  :label="$t('form.password_old')"
-                  :placeholder="$t('form.password_old')"
-                  v-model="form.password"
-                ></input-password>
-              </b-col>
-            </b-row>
-            <input-password-confirmation v-model="form.newPassword" :register="register" />
-            <b-row class="text-right">
-              <b-col>
-                <div class="text-right">
-                  <b-button type="submit" variant="primary" class="mt-4">
-                    {{ $t('form.save') }}
-                  </b-button>
-                </div>
-              </b-col>
-            </b-row>
-          </b-form>
-        </validation-observer>
-      </div>
-    </b-container>
-  </div>
+  <b-card id="change_pwd" class="bg-transparent" style="background-color: #ebebeba3 !important">
+    <div>
+      <b-row class="mb-4 text-right">
+        <b-col class="text-right">
+          <a @click="showPassword ? (showPassword = !showPassword) : cancelEdit()">
+            <span class="pointer mr-3">{{ $t('form.change-password') }}</span>
+            <b-icon v-if="showPassword" class="pointer ml-3" icon="pencil"></b-icon>
+            <b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
+          </a>
+        </b-col>
+      </b-row>
+    </div>
+
+    <div v-if="!showPassword">
+      <validation-observer ref="observer" v-slot="{ handleSubmit }">
+        <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
+          <b-row class="mb-2">
+            <b-col>
+              <input-password
+                :label="$t('form.password_old')"
+                :placeholder="$t('form.password_old')"
+                v-model="form.password"
+              ></input-password>
+            </b-col>
+          </b-row>
+          <input-password-confirmation v-model="form.newPassword" :register="register" />
+          <b-row class="text-right">
+            <b-col>
+              <div class="text-right">
+                <b-button type="submit" variant="primary" class="mt-4">
+                  {{ $t('form.save') }}
+                </b-button>
+              </div>
+            </b-col>
+          </b-row>
+        </b-form>
+      </validation-observer>
+    </div>
+  </b-card>
 </template>
 <script>
 import InputPassword from '../../../components/Inputs/InputPassword'
@@ -57,7 +52,7 @@ export default {
   },
   data() {
     return {
-      editPassword: false,
+      showPassword: true,
       email: null,
       form: {
         password: '',
@@ -71,7 +66,7 @@ export default {
   },
   methods: {
     cancelEdit() {
-      this.editPassword = false
+      this.showPassword = true
       this.form.password = ''
       this.form.passwordNew = ''
       this.form.passwordNewRepeat = ''
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue
index f6587b968..385c8086f 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue
@@ -1,35 +1,27 @@
 <template>
   <b-card id="formusername" class="bg-transparent" style="background-color: #ebebeba3 !important">
-    <b-container v-if="username === ''">
-      <b-row class="text-right">
-        <b-col class="mb-3">
-          <b-icon
-            v-if="showUsername"
-            @click="showUsername = !showUsername"
-            class="pointer"
-            icon="pencil"
-          >
-            {{ $t('form.change') }}
-          </b-icon>
-          <b-icon
-            v-else
-            @click="cancelEdit"
-            class="pointer"
-            icon="x-circle"
-            variant="danger"
-          ></b-icon>
+    <div>
+      <b-row class="mb-4 text-right">
+        <b-col class="text-right">
+          <a @click="showUsername ? (showUsername = !showUsername) : cancelEdit()">
+            <span class="pointer mr-3">{{ $t('form.change') }}</span>
+            <b-icon v-if="showUsername" class="pointer ml-3" icon="pencil"></b-icon>
+            <b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
+          </a>
         </b-col>
       </b-row>
-    </b-container>
-    <b-container v-if="showUsername">
+    </div>
+
+    <div v-if="showUsername">
       <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('form.username') }}</small>
         </b-col>
-        <b-col class="col-md-9 col-sm-10 display-username">@{{ username }}</b-col>
+        <b-col class="display-1 col-md-9 col-sm-10 display-username">@{{ username }}</b-col>
       </b-row>
-    </b-container>
-    <b-container v-else>
+    </div>
+
+    <div v-else>
       <validation-observer ref="formValidator" v-slot="{ handleSubmit, valid }">
         <b-form role="form" @submit.stop.prevent="handleSubmit(onSubmit)">
           <b-row class="mb-3">
@@ -63,7 +55,7 @@
           </b-row>
         </b-form>
       </validation-observer>
-    </b-container>
+    </div>
   </b-card>
 </template>
 <script>
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_Language.spec.js b/frontend/src/views/Pages/UserProfile/UserCard_Language.spec.js
new file mode 100644
index 000000000..6e2c5e277
--- /dev/null
+++ b/frontend/src/views/Pages/UserProfile/UserCard_Language.spec.js
@@ -0,0 +1,49 @@
+import { mount } from '@vue/test-utils'
+import UserCardLanguage from './UserCard_Language'
+
+const localVue = global.localVue
+
+const mockAPIcall = jest.fn()
+
+const toastErrorMock = jest.fn()
+const toastSuccessMock = jest.fn()
+const storeCommitMock = jest.fn()
+
+describe('UserCard_Language', () => {
+  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(UserCardLanguage, { localVue, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component', () => {
+      expect(wrapper.find('div#formuserlanguage').exists()).toBeTruthy()
+    })
+
+    it('has an edit icon', () => {
+      expect(wrapper.find('svg.bi-pencil').exists()).toBeTruthy()
+    })
+  })
+})
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_Language.vue b/frontend/src/views/Pages/UserProfile/UserCard_Language.vue
index 150f0d2f2..684f0c91e 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_Language.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_Language.vue
@@ -1,25 +1,38 @@
 <template>
-  <div
-    id="change_language"
-    class="bg-transparent pt-3 pb-3"
+  <b-card
+    id="formuserlanguage"
+    class="bg-transparent"
     style="background-color: #ebebeba3 !important"
   >
-    <b-container>
+    <div>
+      <b-row class="mb-4 text-right">
+        <b-col class="text-right">
+          <a @click="showLanguage ? (showLanguage = !showLanguage) : cancelEdit()">
+            <span class="pointer mr-3">{{ $t('form.changeLanguage') }}</span>
+            <b-icon v-if="showLanguage" class="pointer ml-3" icon="pencil"></b-icon>
+            <b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
+          </a>
+        </b-col>
+      </b-row>
+    </div>
+
+    <div v-if="showLanguage">
+      <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('language') }}</small>
+        </b-col>
+        <b-col class="h2 col-md-9 col-sm-10">{{ $store.state.language }}</b-col>
+      </b-row>
+    </div>
+
+    <div v-else>
       <div>
-        <b-row class="mb-4 text-right">
-          <b-col class="text-right">
-            <a @click="!editLanguage ? (editLanguage = !editLanguage) : cancelEdit()">
-              <span class="pointer mr-3">{{ $t('form.changeLanguage') }}</span>
-              <b-icon v-if="!editPassword" class="pointer ml-3" icon="pencil" />
-              <b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
-            </a>
-          </b-col>
-        </b-row>
-      </div>
-      <div v-if="editLanguage">
         <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
           <b-row class="mb-2">
-            <b-col>
+            <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
+              <small>{{ $t('language') }}</small>
+            </b-col>
+            <b-col class="col-md-9 col-sm-10">
               <language-switch-select @update-language="updateLanguage" :language="language" />
             </b-col>
           </b-row>
@@ -35,10 +48,8 @@
           </b-row>
         </b-form>
       </div>
-      <div>Language in store: {{ $store.state.language }}</div>
-      <div>Language in data: {{ this.language }}</div>
-    </b-container>
-  </div>
+    </div>
+  </b-card>
 </template>
 <script>
 import LanguageSwitchSelect from '../../../components/LanguageSwitchSelect.vue'
@@ -49,9 +60,8 @@ export default {
   components: { LanguageSwitchSelect },
   data() {
     return {
-      editLanguage: false,
+      showLanguage: true,
       language: '',
-      register: false,
     }
   },
   methods: {
@@ -59,7 +69,7 @@ export default {
       this.language = e
     },
     cancelEdit() {
-      this.editLanguage = false
+      this.showLanguage = true
     },
     async onSubmit() {
       this.$apollo
diff --git a/frontend/src/views/Pages/UserProfileOverview.spec.js b/frontend/src/views/Pages/UserProfileOverview.spec.js
index 0fab63d4b..f32e6c9f6 100644
--- a/frontend/src/views/Pages/UserProfileOverview.spec.js
+++ b/frontend/src/views/Pages/UserProfileOverview.spec.js
@@ -23,7 +23,7 @@ describe('UserProfileOverview', () => {
       expect(wrapper.findComponent({ name: 'UserCard' }).exists()).toBeTruthy()
     })
 
-    it('has a user data form', () => {
+    it('has a user first and last name form', () => {
       expect(wrapper.findComponent({ name: 'FormUserData' }).exists()).toBeTruthy()
     })
 
@@ -31,8 +31,12 @@ describe('UserProfileOverview', () => {
     //  expect(wrapper.findComponent({ name: 'FormUsername' }).exists()).toBeTruthy()
     // })
 
-    it('has a user password form', () => {
+    it('has a user change password form', () => {
       expect(wrapper.findComponent({ name: 'FormUserPasswort' }).exists()).toBeTruthy()
     })
+
+    it('has a user change language form', () => {
+      expect(wrapper.findComponent({ name: 'FormUserLanguage' }).exists()).toBeTruthy()
+    })
   })
 })
diff --git a/frontend/src/views/Pages/UserProfileOverview.vue b/frontend/src/views/Pages/UserProfileOverview.vue
index d1a53307b..412029407 100644
--- a/frontend/src/views/Pages/UserProfileOverview.vue
+++ b/frontend/src/views/Pages/UserProfileOverview.vue
@@ -1,18 +1,16 @@
 <template>
   <div fluid="sm">
     <user-card :balance="balance" :transactionCount="transactionCount"></user-card>
-    <p><form-user-data /></p>
-    <!--<form-username />-->
+    <form-user-data />
     <hr />
-    <p><form-user-passwort /></p>
+    <form-user-passwort />
     <hr />
-    <p><form-user-language /></p>
+    <form-user-language />
   </div>
 </template>
 <script>
 import UserCard from './UserProfile/UserCard.vue'
 import FormUserData from './UserProfile/UserCard_FormUserData.vue'
-// import FormUsername from './UserProfile/UserCard_FormUsername.vue'
 import FormUserPasswort from './UserProfile/UserCard_FormUserPasswort.vue'
 import FormUserLanguage from './UserProfile/UserCard_Language.vue'
 
@@ -20,7 +18,6 @@ export default {
   components: {
     UserCard,
     FormUserData,
-    // FormUsername,
     FormUserPasswort,
     FormUserLanguage,
   },