From 23bf7a7fe9b5c3b37f093a2167a0b9f9632c0941 Mon Sep 17 00:00:00 2001 From: Hannes Heine Date: Mon, 9 Aug 2021 16:19:57 +0200 Subject: [PATCH] Implementation of the Apollo queries for ResetPassword. --- frontend/src/components/LanguageSwitch.vue | 2 +- frontend/src/graphql/queries.js | 1 + .../src/views/Pages/ResetPassword.spec.js | 208 +++++++++--------- frontend/src/views/Pages/ResetPassword.vue | 54 +++-- 4 files changed, 143 insertions(+), 122 deletions(-) diff --git a/frontend/src/components/LanguageSwitch.vue b/frontend/src/components/LanguageSwitch.vue index cedcf2555..2ec1ad90d 100644 --- a/frontend/src/components/LanguageSwitch.vue +++ b/frontend/src/components/LanguageSwitch.vue @@ -44,7 +44,7 @@ export default { locale: locale, }, }) - .then((result) => { + .then(() => { // toast success message }) .catch(() => { diff --git a/frontend/src/graphql/queries.js b/frontend/src/graphql/queries.js index 5ecb1ad09..a941ed61e 100644 --- a/frontend/src/graphql/queries.js +++ b/frontend/src/graphql/queries.js @@ -62,6 +62,7 @@ export const updateUserInfos = gql` ) { validValues } + } ` export const transactionsQuery = gql` diff --git a/frontend/src/views/Pages/ResetPassword.spec.js b/frontend/src/views/Pages/ResetPassword.spec.js index e7689e3e7..4595314fa 100644 --- a/frontend/src/views/Pages/ResetPassword.spec.js +++ b/frontend/src/views/Pages/ResetPassword.spec.js @@ -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') + }) }) }) }) diff --git a/frontend/src/views/Pages/ResetPassword.vue b/frontend/src/views/Pages/ResetPassword.vue index be565333a..e93f728b1 100644 --- a/frontend/src/views/Pages/ResetPassword.vue +++ b/frontend/src/views/Pages/ResetPassword.vue @@ -47,8 +47,8 @@