From aa6855434de199fa68e09125d0ea5642db759249 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Mon, 17 Jun 2019 15:10:57 +0200
Subject: [PATCH] Emit `submitted` from PasswordReset component

---
 .../PasswordReset/PasswordReset.spec.js       | 19 +++----
 .../PasswordReset/PasswordReset.vue           |  6 ++-
 .../PasswordReset/VerifyCode.spec.js          | 50 +++++++++++++++++++
 .../components/PasswordReset/VerifyCode.vue   |  9 ++++
 webapp/locales/de.json                        |  5 ++
 webapp/locales/en.json                        |  5 ++
 6 files changed, 84 insertions(+), 10 deletions(-)
 create mode 100644 webapp/components/PasswordReset/VerifyCode.spec.js
 create mode 100644 webapp/components/PasswordReset/VerifyCode.vue

diff --git a/webapp/components/PasswordReset/PasswordReset.spec.js b/webapp/components/PasswordReset/PasswordReset.spec.js
index e55b9273a..6284fed36 100644
--- a/webapp/components/PasswordReset/PasswordReset.spec.js
+++ b/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()
+        })
       })
     })
   })
diff --git a/webapp/components/PasswordReset/PasswordReset.vue b/webapp/components/PasswordReset/PasswordReset.vue
index 7a74bbe31..175207949 100644
--- a/webapp/components/PasswordReset/PasswordReset.vue
+++ b/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)
       }
diff --git a/webapp/components/PasswordReset/VerifyCode.spec.js b/webapp/components/PasswordReset/VerifyCode.spec.js
new file mode 100644
index 000000000..92d6f8d07
--- /dev/null
+++ b/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')
+      })
+    })
+  })
+})
diff --git a/webapp/components/PasswordReset/VerifyCode.vue b/webapp/components/PasswordReset/VerifyCode.vue
new file mode 100644
index 000000000..d6bea39df
--- /dev/null
+++ b/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>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 88afa07e0..5e2be98f8 100644
--- a/webapp/locales/de.json
+++ b/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..."
   },
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 53ad9fb40..d7caa3cfb 100644
--- a/webapp/locales/en.json
+++ b/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..."
   },