Implement component test

webapp/components/ChangePassword.spec.js

@@ -8,15 +8,25 @@ const localVue = createLocalVue()
 localVue.use(Styleguide)
 
 describe('ChangePassword.vue', () => {
-  let store
   let mocks
   let wrapper
 
   beforeEach(() => {
     mocks = {
       validate: jest.fn(),
+      $toast: {
+        error: jest.fn(),
+        success: jest.fn()
+      },
+      $t: jest.fn(),
+      $store: {
+        commit: jest.fn()
+      },
       $apollo: {
-        mutate: jest.fn().mockResolvedValue()
+        mutate: jest
+          .fn()
+          .mockRejectedValue({ message: 'Ouch!' })
+          .mockResolvedValueOnce({ data: { changePassword: 'NEWTOKEN' } })
       }
     }
   })
@@ -80,15 +90,63 @@ describe('ChangePassword.vue', () => {
     })
 
     describe('given valid input', () => {
-      describe('click on submit button', () => {
-        it.todo('calls changePassword mutation')
+      beforeEach(() => {
+        wrapper.find('input#oldPassword').setValue('supersecret')
+        wrapper.find('input#newPassword').setValue('superdupersecret')
+        wrapper.find('input#confirmPassword').setValue('superdupersecret')
+      })
+
+      describe('submit form', () => {
+        beforeEach(() => {
+          wrapper.find('form').trigger('submit')
+        })
+
+        it('calls changePassword mutation', () => {
+          expect(mocks.$apollo.mutate).toHaveBeenCalled()
+        })
+
+        it('passes form data as variables', () => {
+          expect(mocks.$apollo.mutate.mock.calls[0][0]).toEqual(
+            expect.objectContaining({
+              variables: {
+                oldPassword: 'supersecret',
+                newPassword: 'superdupersecret',
+                confirmPassword: 'superdupersecret'
+              }
+            })
+          )
+        })
 
         describe('mutation resolves', () => {
-          it.todo('calls auth/SET_TOKEN with response')
+          beforeEach(() => {
+            mocks.$apollo.mutate = jest.fn().mockResolvedValue()
+            wrapper = Wrapper()
+          })
+
+          it('calls auth/SET_TOKEN with response', () => {
+            expect(mocks.$store.commit).toHaveBeenCalledWith(
+              'auth/SET_TOKEN',
+              'NEWTOKEN'
+            )
+          })
+
+          it('displays success message', () => {
+            expect(mocks.$t).toHaveBeenCalledWith(
+              'settings.security.change-password.success'
+            )
+            expect(mocks.$toast.success).toHaveBeenCalled()
+          })
         })
 
         describe('mutation rejects', () => {
-          it.todo('displays error message')
+          beforeEach(() => {
+            // second call will reject
+            wrapper.find('form').trigger('submit')
+          })
+
+          it('displays error message', () => {
+            expect(mocks.$toast.error).toHaveBeenCalledWith('Ouch!')
+          })
         })
       })
     })

webapp/components/ChangePassword.vue

@@ -3,7 +3,6 @@
     v-model="formData"
     :schema="formSchema"
     @submit="handleSubmit"
-    @input="validate"
   >
     <template>
       <ds-input
@@ -25,8 +24,11 @@
         label="Confirm new password"
       />
       <ds-space margin-top="base">
-        <ds-button primary>
-          Submit
+        <ds-button
+          :loading="loading"
+          primary
+        >
+          {{ $t('settings.security.change-password.button') }}
         </ds-button>
       </ds-space>
     </template>
@@ -34,6 +36,8 @@
 </template>
 
 <script>
+import gql from 'graphql-tag'
+
 export default {
   name: 'ChangePassword',
   data() {
@@ -48,17 +52,31 @@ export default {
         newPassword: { required: true },
         confirmPassword: { required: true }
       },
+      loading: false,
       disabled: true
     }
   },
   methods: {
-    validate(data) {
-      console.log('validate')
-      console.log(data)
-    },
-    handleSubmit(data) {
-      console.log('handleSubmit')
-      console.log(data)
+    async handleSubmit(data) {
+      this.loading = true
+      const mutation = gql`
+        mutation($oldPassword: String!, $newPassword: String!) {
+          changePassword(oldPassword: $oldPassword, newPassword: $newPassword)
+        }
+      `
+      const variables = this.formData
+
+      try {
+        const { data } = await this.$apollo.mutate({ mutation, variables })
+        this.$store.commit('auth/SET_TOKEN', data.changePassword)
+        this.$toast.success(
+          this.$t('settings.security.change-password.success')
+        )
+      } catch (err) {
+        this.$toast.error(err.message)
+      } finally {
+        this.loading = false
+      }
     }
   }
 }

webapp/locales/de.json

@@ -31,7 +31,11 @@
       "labelBio": "Über dich"
     },
     "security": {
-      "name": "Sicherheit"
+      "name": "Sicherheit",
+      "change-password": {
+        "button": "Passwort ändern",
+        "success": "Passwort erfolgreich geändert!"
+      }
     },
     "invites": {
       "name": "Einladungen"

webapp/locales/en.json

@@ -31,7 +31,11 @@
       "labelBio": "About You"
     },
     "security": {
-      "name": "Security"
+      "name": "Security",
+      "change-password": {
+        "button": "Change password",
+        "success": "Password successfully changed!"
+      }
     },
     "invites": {
       "name": "Invites"