Component test to call a mutation passes

webapp/locales/de.json

@@ -18,7 +18,8 @@
     "title": "Passwort zurücksetzen",
     "form": {
       "description": "Eine Mail zum Zurücksetzen des Passworts wird an die angegebene E-Mail Adresse geschickt.",
-      "submit": "Email anfordern"
+      "submit": "Email anfordern",
+      "submitted": "Eine E-Mail zum Zurücksetzen wurde angefordert"
     }
   },
   "editor": {
@@ -201,7 +202,10 @@
     "name": "Name",
     "loadMore": "mehr laden",
     "loading": "wird geladen",
-    "reportContent": "Melden"
+    "reportContent": "Melden",
+    "validations": {
+      "email": "muss eine gültige E-Mail Adresse sein"
+    }
   },
   "actions": {
     "loading": "lade",

webapp/locales/en.json

@@ -18,7 +18,8 @@
     "title": "Reset your password",
     "form": {
       "description": "A password reset email will be sent to the given email address.",
-      "submit": "Request email"
+      "submit": "Request email",
+      "submitted": "Reset email was requested"
     }
   },
   "editor": {
@@ -201,7 +202,10 @@
     "name": "Name",
     "loadMore": "load more",
     "loading": "loading",
-    "reportContent": "Report"
+    "reportContent": "Report",
+    "validations": {
+      "email": "must be a valid email address"
+    }
   },
   "actions": {
     "loading": "loading",

webapp/pages/password-reset.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils'
+import { mount, createLocalVue } from '@vue/test-utils'
 import PasswordResetPage from './password-reset.vue'
 import Styleguide from '@human-connection/styleguide'
 
@@ -25,9 +25,9 @@ describe('ProfileSlug', () => {
     }
   })
 
-  describe('shallowMount', () => {
+  describe('mount', () => {
     Wrapper = () => {
-      return shallowMount(PasswordResetPage, {
+      return mount(PasswordResetPage, {
         mocks,
         localVue,
       })
@@ -37,5 +37,30 @@ describe('ProfileSlug', () => {
       wrapper = Wrapper()
       expect(wrapper.find('.password-reset-card').exists()).toBe(true)
     })
+
+    describe('submit', () => {
+      beforeEach(async () => {
+        wrapper = Wrapper()
+        wrapper.find('input#email').setValue('mail@example.org')
+        await wrapper.find('form').trigger('submit')
+      })
+
+      it('calls requestPasswordReset graphql mutation', () => {
+        expect(mocks.$apollo.mutate).toHaveBeenCalled()
+      })
+
+      it.todo('delivers email to backend')
+      it.todo('disables form to avoid re-submission')
+      it.todo('displays a message that a password email was requested')
+    })
+
+    describe('given password reset token as URL param', () => {
+      it.todo('displays a form to update your password')
+      describe('submitting new password', () => {
+        it.todo('calls resetPassword graphql mutation')
+        it.todo('delivers new password to backend')
+        it.todo('displays success message')
+      })
+    })
   })
 })

webapp/pages/password-reset.vue

@@ -5,10 +5,17 @@
         <ds-space style="text-align: center;" margin-top="small" margin-bottom="xxx-small" centered>
           <ds-card class="password-reset-card">
             <ds-space margin="large">
-              <form>
+              <ds-form
+                @input="handleInput"
+                @input-valid="handleInputValid"
+                v-model="formData"
+                :schema="formSchema"
+                @submit="handleSubmit">
                 <ds-input
                   :placeholder="$t('login.email')"
                   type="email"
+                  id="email"
+                  model="email"
                   name="email"
                   icon="envelope"
                 />
@@ -17,10 +24,12 @@
                     {{ $t('password-reset.form.description') }}
                   </ds-text>
                 </ds-space>
-                <ds-button primary fullwidth name="submit" type="submit" icon="sign-in">
+                <ds-button
+                  :disabled="disabled"
+                  :loading="$apollo.loading" primary fullwidth name="submit" type="submit" icon="envelope">
                   {{ $t('password-reset.form.submit') }}
                 </ds-button>
-              </form>
+              </ds-form>
             </ds-space>
           </ds-card>
         </ds-space>
@@ -30,7 +39,51 @@
 </template>
 
 <script>
+import gql from 'graphql-tag'
+
 export default {
   layout: 'default',
+  data() {
+    return {
+      formData: {
+        email: ''
+      },
+      formSchema: {
+        email: {
+          type: 'email',
+          required: true,
+          message: this.$t('common.validations.email'),
+        }
+      },
+      disabled: true,
+    }
+  },
+  methods: {
+    handleInput(data) {
+      this.disabled = true
+    },
+    handleInputValid(data) {
+      this.disabled = false
+    },
+    async handleSubmit() {
+      console.log('handleSubmit')
+      const mutation = gql`
+        mutation($email: String!) {
+          requestPasswordReset(email: $email)
+        }
+      `
+      const variables = this.formData
+
+      try {
+        const { data } = await this.$apollo.mutate({ mutation, variables })
+        this.$toast.success(this.$t('password-reset.form.submitted'))
+        this.formData = {
+          email: '',
+        }
+      } catch (err) {
+        this.$toast.error(err.message)
+      }
+    }
+  },
 }
 </script>