refactor: add new email, display server response

This commit is contained in:
roschaefer 2019-11-05 15:23:31 +01:00
parent 2a53eb2e6c
commit 20b47b873e
2 changed files with 19 additions and 17 deletions

View File

@ -31,7 +31,9 @@ describe('EmailSettingsIndexPage', () => {
error: jest.fn(), error: jest.fn(),
}, },
$apollo: { $apollo: {
mutate: jest.fn().mockResolvedValue(), mutate: jest.fn().mockResolvedValue({
data: { AddEmailAddress: { email: 'yet-another-email@example.org' } },
}),
}, },
$router: { $router: {
push: jest.fn(), push: jest.fn(),
@ -71,12 +73,15 @@ describe('EmailSettingsIndexPage', () => {
describe('enter another email', () => { describe('enter another email', () => {
beforeEach(() => { beforeEach(() => {
wrapper = Wrapper() wrapper = Wrapper()
wrapper.find('#email').setValue('yet-another-email@example.org') wrapper.find('#email').setValue('yet-ANOTHER-email@example.org')
wrapper.find('form').trigger('submit') wrapper.find('form').trigger('submit')
}) })
it('calls $apollo.mutate', () => { it('delivers email to backend', () => {
expect(mocks.$apollo.mutate).toHaveBeenCalled() const expected = expect.objectContaining({
variables: { email: 'yet-ANOTHER-email@example.org' },
})
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
}) })
it('no form errors', () => { it('no form errors', () => {
@ -87,7 +92,7 @@ describe('EmailSettingsIndexPage', () => {
describe('after timeout', () => { describe('after timeout', () => {
beforeEach(jest.runAllTimers) beforeEach(jest.runAllTimers)
it('redirects to `my-email-address/enter-nonce`', () => { it('redirects with response from backend', () => {
expect(mocks.$router.push).toHaveBeenCalledWith({ expect(mocks.$router.push).toHaveBeenCalledWith({
path: 'my-email-address/enter-nonce', path: 'my-email-address/enter-nonce',
query: { email: 'yet-another-email@example.org' }, query: { email: 'yet-another-email@example.org' },

View File

@ -1,5 +1,5 @@
<template> <template>
<ds-card centered v-if="success"> <ds-card centered v-if="data">
<transition name="ds-transition-fade"> <transition name="ds-transition-fade">
<sweetalert-icon icon="info" /> <sweetalert-icon icon="info" />
</transition> </transition>
@ -41,15 +41,12 @@ export default {
data() { data() {
return { return {
backendErrors: null, backendErrors: null,
success: false, data: null,
} }
}, },
computed: { computed: {
email() {
return normalizeEmail(this.formData.email)
},
submitMessage() { submitMessage() {
const { email } = this const { email } = this.data.AddEmailAddress
return this.$t('settings.email.submitted', { email }) return this.$t('settings.email.submitted', { email })
}, },
...mapGetters({ ...mapGetters({
@ -65,7 +62,7 @@ export default {
}, },
}, },
formSchema() { formSchema() {
const { email } = this.currentUser const currentEmail = normalizeEmail(this.currentUser.email)
const sameEmailValidationError = this.$t('settings.email.validation.same-email') const sameEmailValidationError = this.$t('settings.email.validation.same-email')
return { return {
email: [ email: [
@ -73,7 +70,7 @@ export default {
{ {
validator(rule, value, callback, source, options) { validator(rule, value, callback, source, options) {
const errors = [] const errors = []
if (email === normalizeEmail(value)) { if (currentEmail === normalizeEmail(value)) {
errors.push(sameEmailValidationError) errors.push(sameEmailValidationError)
} }
return errors return errors
@ -85,19 +82,19 @@ export default {
}, },
methods: { methods: {
async submit() { async submit() {
const { email } = this const { email } = this.formData
try { try {
await this.$apollo.mutate({ const response = await this.$apollo.mutate({
mutation: AddEmailAddressMutation, mutation: AddEmailAddressMutation,
variables: { email }, variables: { email },
}) })
this.data = response.data
this.$toast.success(this.$t('settings.email.success')) this.$toast.success(this.$t('settings.email.success'))
this.success = true
setTimeout(() => { setTimeout(() => {
this.$router.push({ this.$router.push({
path: 'my-email-address/enter-nonce', path: 'my-email-address/enter-nonce',
query: { email }, query: { email: this.data.AddEmailAddress.email },
}) })
}, 3000) }, 3000)
} catch (err) { } catch (err) {