IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2025-12-13 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implementation of the Apollo queries for ResetPassword.

Browse Source
This commit is contained in:
Hannes Heine 2021-08-09 16:19:57 +02:00
parent 06549f66cd
commit 23bf7a7fe9
4 changed files with 143 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/LanguageSwitch.vue
View File

@ -44,7 +44,7 @@ export default {
locale: locale,
},
})
.then((result) => {
.then(() => {
// toast success message
})
.catch(() => {

1
frontend/src/graphql/queries.js
View File

@ -62,6 +62,7 @@ export const updateUserInfos = gql`
) {
validValues
}
}
`
export const transactionsQuery = gql`

208
frontend/src/views/Pages/ResetPassword.spec.js
View File

@ -1,45 +1,16 @@
import { mount, RouterLinkStub } from '@vue/test-utils'
import loginAPI from '../../apis/loginAPI'
import ResetPassword from './ResetPassword'
import flushPromises from 'flush-promises'
// validation is tested in src/views/Pages/UserProfile/UserCard_FormUserPasswort.spec.js
jest.mock('../../apis/loginAPI')
const localVue = global.localVue
const successResponseObject = {
success: true,
result: {
data: {
session_id: 1,
user: {
email: 'user@example.org',
},
},
},
}
const apolloQueryMock = jest.fn().mockRejectedValue({ message: 'error' })
const emailVerificationMock = jest.fn()
const changePasswordMock = jest.fn()
const toasterMock = jest.fn()
const routerPushMock = jest.fn()
emailVerificationMock
.mockReturnValueOnce({ success: false, result: { message: 'error' } })
.mockReturnValueOnce({ success: false, result: { message: 'error' } })
.mockReturnValueOnce({ success: false, result: { message: 'error' } })
.mockReturnValueOnce({ success: false, result: { message: 'error' } })
.mockReturnValue(successResponseObject)
changePasswordMock
.mockReturnValueOnce({ success: false, result: { message: 'error' } })
.mockReturnValue({ success: true })
loginAPI.loginViaEmailVerificationCode = emailVerificationMock
loginAPI.changePassword = changePasswordMock
describe('ResetPassword', () => {
let wrapper
@ -64,6 +35,9 @@ describe('ResetPassword', () => {
return { hide: jest.fn() }
}),
},
$apollo: {
query: apolloQueryMock,
},
}
const stubs = {
@ -79,88 +53,124 @@ describe('ResetPassword', () => {
wrapper = Wrapper()
})
it('calls the email verification when created', () => {
expect(emailVerificationMock).toHaveBeenCalledWith('123')
it('calls the email verification when created', async () => {
expect(apolloQueryMock).toBeCalledWith(
expect.objectContaining({ variables: { optin: '123' } }),
)
})
it('does not render the Reset Password form when not authenticated', () => {
expect(wrapper.find('form').exists()).toBeFalsy()
})
describe('No valid optin', () => {
it('does not render the Reset Password form when not authenticated', () => {
expect(wrapper.find('form').exists()).toBeFalsy()
})
it('toasts an error when no valid optin is given', () => {
expect(toasterMock).toHaveBeenCalledWith('error')
})
it('toasts an error when no valid optin is given', () => {
expect(toasterMock).toHaveBeenCalledWith('error')
})
it('has a message suggesting to contact the support', () => {
expect(wrapper.find('div.header').text()).toContain('reset-password.title')
expect(wrapper.find('div.header').text()).toContain('reset-password.not-authenticated')
})
it('renders the Reset Password form when authenticated', async () => {
await wrapper.setData({ authenticated: true })
expect(wrapper.find('div.resetpwd-form').exists()).toBeTruthy()
})
describe('Register header', () => {
it('has a welcome message', () => {
it('has a message suggesting to contact the support', () => {
expect(wrapper.find('div.header').text()).toContain('reset-password.title')
expect(wrapper.find('div.header').text()).toContain('reset-password.text')
expect(wrapper.find('div.header').text()).toContain('reset-password.not-authenticated')
})
})
describe('links', () => {
it('has a link "Back"', () => {
expect(wrapper.findAllComponents(RouterLinkStub).at(0).text()).toEqual('back')
})
it('links to /login when clicking "Back"', () => {
expect(wrapper.findAllComponents(RouterLinkStub).at(0).props().to).toBe('/Login')
})
})
describe('reset password form', () => {
it('has a register form', () => {
expect(wrapper.find('form').exists()).toBeTruthy()
})
it('has 2 password input fields', () => {
expect(wrapper.findAll('input[type="password"]').length).toBe(2)
})
it('toggles the first input field to text when eye icon is clicked', async () => {
wrapper.findAll('button').at(0).trigger('click')
await wrapper.vm.$nextTick()
expect(wrapper.findAll('input').at(0).attributes('type')).toBe('text')
})
it('toggles the second input field to text when eye icon is clicked', async () => {
wrapper.findAll('button').at(1).trigger('click')
await wrapper.vm.$nextTick()
expect(wrapper.findAll('input').at(1).attributes('type')).toBe('text')
})
})
describe('submit form', () => {
beforeEach(async () => {
await wrapper.findAll('input').at(0).setValue('Aa123456')
await wrapper.findAll('input').at(1).setValue('Aa123456')
await flushPromises()
await wrapper.find('form').trigger('submit')
})
describe('server response with error', () => {
it('toasts an error message', () => {
expect(toasterMock).toHaveBeenCalledWith('error')
describe('is authenticated', () => {
beforeEach(() => {
apolloQueryMock.mockResolvedValue({
data: {
loginViaEmailVerificationCode: {
sessionId: 1,
email: 'user@example.org',
},
},
})
})
describe('server response with success', () => {
it('calls the API', () => {
expect(changePasswordMock).toHaveBeenCalledWith(1, 'user@example.org', 'Aa123456')
it('renders the Reset Password form when authenticated', () => {
expect(wrapper.find('div.resetpwd-form').exists()).toBeTruthy()
})
describe('Register header', () => {
it('has a welcome message', async () => {
expect(wrapper.find('div.header').text()).toContain('reset-password.title')
expect(wrapper.find('div.header').text()).toContain('reset-password.text')
})
})
describe('links', () => {
it('has a link "Back"', async () => {
expect(wrapper.findAllComponents(RouterLinkStub).at(0).text()).toEqual('back')
})
it('redirects to "/thx/reset"', () => {
expect(routerPushMock).toHaveBeenCalledWith('/thx/reset')
it('links to /login when clicking "Back"', async () => {
expect(wrapper.findAllComponents(RouterLinkStub).at(0).props().to).toBe('/Login')
})
})
describe('reset password form', () => {
it('has a register form', async () => {
expect(wrapper.find('form').exists()).toBeTruthy()
})
it('has 2 password input fields', async () => {
expect(wrapper.findAll('input[type="password"]').length).toBe(2)
})
it('toggles the first input field to text when eye icon is clicked', async () => {
wrapper.findAll('button').at(0).trigger('click')
await wrapper.vm.$nextTick()
expect(wrapper.findAll('input').at(0).attributes('type')).toBe('text')
})
it('toggles the second input field to text when eye icon is clicked', async () => {
wrapper.findAll('button').at(1).trigger('click')
await wrapper.vm.$nextTick()
expect(wrapper.findAll('input').at(1).attributes('type')).toBe('text')
})
})
describe('submit form', () => {
beforeEach(async () => {
await wrapper.setData({ authenticated: true, sessionId: 1 })
await wrapper.vm.$nextTick()
await wrapper.findAll('input').at(0).setValue('Aa123456')
await wrapper.findAll('input').at(1).setValue('Aa123456')
await flushPromises()
await wrapper.find('form').trigger('submit')
})
describe('server response with error', () => {
beforeEach(() => {
apolloQueryMock.mockRejectedValue({ message: 'error' })
})
it('toasts an error message', () => {
expect(toasterMock).toHaveBeenCalledWith('error')
})
})
describe('server response with success', () => {
beforeEach(() => {
apolloQueryMock.mockResolvedValue({
data: {
resetPassword: 'success',
},
})
})
it('calls the API', () => {
expect(apolloQueryMock).toBeCalledWith(
expect.objectContaining({
variables: {
sessionId: 1,
email: 'user@example.org',
password: 'Aa123456',
},
}),
)
})
it('redirects to "/thx/reset"', () => {
expect(routerPushMock).toHaveBeenCalledWith('/thx/reset')
})
})
})
})

54
frontend/src/views/Pages/ResetPassword.vue
View File

@ -47,8 +47,8 @@
</div>
</template>
<script>
import loginAPI from '../../apis/loginAPI'
import InputPasswordConfirmation from '../../components/Inputs/InputPasswordConfirmation'
import { resetPassword, loginViaEmailVerificationCode } from '../../graphql/queries'
export default {
name: 'ResetPassword',
@ -70,33 +70,43 @@ export default {
},
methods: {
async onSubmit() {
const result = await loginAPI.changePassword(this.sessionId, this.email, this.form.password)
if (result.success) {
this.form.password = ''
/*
this.$store.dispatch('login', {
sessionId: result.result.data.session_id,
email: result.result.data.user.email,
})
*/
this.$router.push('/thx/reset')
} else {
this.$toasted.error(result.result.message)
}
this.$apollo
.query({
query: resetPassword,
variables: {
sessionId: this.sessionId,
email: this.email,
password: this.form.password,
},
})
.then(() => {
this.form.password = ''
this.$router.push('/thx/reset')
})
.catch((error) => {
this.$toasted.error(error.message)
})
},
async authenticate() {
const loader = this.$loading.show({
container: this.$refs.header,
})
const optin = this.$route.params.optin
const result = await loginAPI.loginViaEmailVerificationCode(optin)
if (result.success) {
this.authenticated = true
this.sessionId = result.result.data.session_id
this.email = result.result.data.user.email
} else {
this.$toasted.error(result.result.message)
}
this.$apollo
.query({
query: loginViaEmailVerificationCode,
variables: {
optin: optin,
},
})
.then((result) => {
this.authenticated = true
this.sessionId = result.data.loginViaEmailVerificationCode.sessionId
this.email = result.data.loginViaEmailVerificationCode.email
})
.catch((error) => {
this.$toasted.error(error.message)
})
loader.hide()
this.pending = false
},