Emit submitted from PasswordReset component

webapp/components/PasswordReset/PasswordReset.spec.js

@@ -6,7 +6,7 @@ const localVue = createLocalVue()
 
 localVue.use(Styleguide)
 
-describe('ProfileSlug', () => {
+describe('PasswordReset', () => {
   let wrapper
   let Wrapper
   let mocks
@@ -26,6 +26,8 @@ describe('ProfileSlug', () => {
   })
 
   describe('mount', () => {
+    beforeEach(jest.useFakeTimers)
+
     Wrapper = () => {
       return mount(PasswordReset, {
         mocks,
@@ -35,7 +37,7 @@ describe('ProfileSlug', () => {
 
     it('renders a password reset form', () => {
       wrapper = Wrapper()
-      expect(wrapper.find('.password-reset-card').exists()).toBe(true)
+      expect(wrapper.find('.password-reset').exists()).toBe(true)
     })
 
     describe('submit', () => {
@@ -62,14 +64,13 @@ describe('ProfileSlug', () => {
         const expected = ['password-reset.form.submitted', { email: 'mail@example.org' }]
         expect(mocks.$t).toHaveBeenCalledWith(...expected)
       })
-    })
 
-    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')
+      describe('after animation', () => {
+        beforeEach(jest.runAllTimers)
+
+        it('emits `submitted`', () => {
+          expect(wrapper.emitted('submitted')).toBeTruthy()
+        })
       })
     })
   })

webapp/components/PasswordReset/PasswordReset.vue

@@ -1,5 +1,5 @@
 <template>
-  <ds-card class="password-reset-card">
+  <ds-card class="password-reset">
     <ds-space margin="large">
       <ds-form
         v-if="!submitted"
@@ -94,6 +94,10 @@ export default {
       try {
         await this.$apollo.mutate({ mutation, variables })
         this.submitted = true
+
+        setTimeout(() => {
+          this.$emit('submitted')
+        }, 1000)
       } catch (err) {
         this.$toast.error(err.message)
       }

webapp/components/PasswordReset/VerifyCode.spec.js

@@ -0,0 +1,50 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import VerifyCode from './VerifyCode'
+import Styleguide from '@human-connection/styleguide'
+
+const localVue = createLocalVue()
+
+localVue.use(Styleguide)
+
+describe('VerifyCode ', () => {
+  let wrapper
+  let Wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {
+      $toast: {
+        success: jest.fn(),
+        error: jest.fn(),
+      },
+      $t: jest.fn(),
+      $apollo: {
+        loading: false,
+        mutate: jest.fn().mockResolvedValue({ data: { resetPassword: false } }),
+      },
+    }
+  })
+
+  describe('mount', () => {
+    Wrapper = () => {
+      return mount(VerifyCode, {
+        mocks,
+        localVue,
+      })
+    }
+
+    it('renders a verify code form', () => {
+      wrapper = Wrapper()
+      expect(wrapper.find('.verify-code').exists()).toBe(true)
+    })
+
+    describe('after verification code given', () => {
+      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/components/PasswordReset/VerifyCode.vue

@@ -0,0 +1,9 @@
+<template>
+  <ds-card class="verify-code">
+    <ds-space margin="large">
+      <h1>
+        {{ $t('verify-code.form.description') }}
+      </h1>
+    </ds-space>
+  </ds-card>
+</template>

webapp/locales/de.json

@@ -22,6 +22,11 @@
       "submitted": "E-Mail verschickt an <b>{email}</b>"
     }
   },
+  "verify-code": {
+    "form": {
+      "description": "Öffne Deine E-Mail Postfach und gib den Code ein, den wir geschickt haben."
+    }
+  },
   "editor": {
     "placeholder": "Schreib etwas Inspirierendes..."
   },

webapp/locales/en.json

@@ -22,6 +22,11 @@
       "submitted": "Email sent to <b>{email}</b>"
     }
   },
+  "verify-code": {
+    "form": {
+      "description": "Open your inbox and enter the code that we've sent to you."
+    }
+  },
   "editor": {
     "placeholder": "Leave your inspirational thoughts..."
   },