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

Merge branch 'apollo-client' of github.com:gradido/gradido into apollo-client

Browse Source
This commit is contained in:
Moriz Wahl 2021-08-09 19:57:44 +02:00
commit 5e4efa5be9
7 changed files with 274 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/components/LanguageSwitch.spec.js
View File

@ -3,6 +3,16 @@ import LanguageSwitch from './LanguageSwitch'
const localVue = global.localVue
const updateUserInfosQueryMock = jest.fn().mockResolvedValue({
data: {
updateUserInfos: {
sessionId: 1234,
email: 'he@ho.he',
locale: 'de',
},
},
})
describe('LanguageSwitch', () => {
let wrapper
@ -20,6 +30,9 @@ describe('LanguageSwitch', () => {
$i18n: {
locale: 'en',
},
$apollo: {
query: updateUserInfosQueryMock,
},
}
const Wrapper = () => {
@ -91,5 +104,33 @@ describe('LanguageSwitch', () => {
})
})
})
describe('calls the API', () => {
it("with locale 'en'", () => {
wrapper.vm.saveLocale('en')
expect(updateUserInfosQueryMock).toBeCalledWith(
expect.objectContaining({
variables: {
sessionId: 1234,
email: 'he@ho.he',
locale: 'en',
},
}),
)
})
it("with locale 'de'", () => {
wrapper.vm.saveLocale('de')
expect(updateUserInfosQueryMock).toBeCalledWith(
expect.objectContaining({
variables: {
sessionId: 1234,
email: 'he@ho.he',
locale: 'de',
},
}),
)
})
})
})
})

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

@ -14,7 +14,7 @@
<script>
import { localeChanged } from 'vee-validate'
import locales from '../locales/'
import loginAPI from '../apis/loginAPI'
import { updateUserInfos } from '../graphql/queries'
export default {
name: 'LanguageSwitch',
@ -34,16 +34,22 @@ export default {
async saveLocale(locale) {
this.setLocale(locale)
if (this.$store.state.sessionId && this.$store.state.email) {
const result = await loginAPI.updateLanguage(
this.$store.state.sessionId,
this.$store.state.email,
locale,
)
if (result.success) {
// toast success message
} else {
// toast error message
}
// eslint-disable-next-line no-console
this.$apollo
.query({
query: updateUserInfos,
variables: {
sessionId: this.$store.state.sessionId,
email: this.$store.state.email,
locale: locale,
},
})
.then(() => {
// toast success message
})
.catch(() => {
// toast error message
})
}
},
getLocaleObject(code) {

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

@ -15,12 +15,56 @@ export const login = gql`
}
}
`
export const logout = gql`
query($sessionId: Float!) {
logout(sessionId: $sessionId)
}
`
export const resetPassword = gql`
query($sessionId: Float!, $email: String!, $password: String!) {
resetPassword(sessionId: $sessionId, email: $email, password: $password)
}
`
export const loginViaEmailVerificationCode = gql`
query($optin: String!) {
loginViaEmailVerificationCode(optin: $optin) {
sessionId
email
}
}
`
export const updateUserInfos = gql`
query(
$sessionId: Float!
$email: String!
$firstName: String
$lastName: String
$description: String
$username: String
$password: String
$passwordNew: String
$locale: String
) {
updateUserInfos(
sessionId: $sessionId
email: $email
firstName: $firstName
lastName: $lastName
description: $description
username: $username
password: $password
passwordNew: $passwordNew
language: $locale
) {
validValues
}
}
`
export const transactionsQuery = gql`
query($sessionId: Float!, $firstPage: Int = 1, $items: Int = 25, $order: String = "DESC") {
transactionList(sessionId: $sessionId, firstPage: $firstPage, items: $items, order: $order) {
@ -51,3 +95,9 @@ export const transactionsQuery = gql`
}
}
`
export const resgisterUserQuery = gql`
query($firstName: String!, $lastName: String!, $email: String!, $password: String!) {
create(email: $email, firstName: $firstName, lastName: $lastName, password: $password)
}
`

2
frontend/src/views/Pages/Register.spec.js
View File

@ -105,6 +105,6 @@ describe('Register', () => {
})
})
// To Do: Test lines 156-197,210-213
// To Do: Test lines 160-205,218
})
})

43
frontend/src/views/Pages/Register.vue
View File

@ -128,9 +128,9 @@
</div>
</template>
<script>
import loginAPI from '../../apis/loginAPI'
import InputEmail from '../../components/Inputs/InputEmail.vue'
import InputPasswordConfirmation from '../../components/Inputs/InputPasswordConfirmation.vue'
import { resgisterUserQuery } from '../../graphql/queries'
export default {
components: { InputPasswordConfirmation, InputEmail },
@ -173,33 +173,28 @@ export default {
})
},
async onSubmit() {
const result = await loginAPI.create(
this.form.email,
this.form.firstname,
this.form.lastname,
this.form.password.password,
)
if (result.success) {
/* this.$store.dispatch('login', {
sessionId: result.result.data.session_id,
user: {
this.$axios
.query({
query: resgisterUserQuery,
variables: {
email: this.form.email,
firstName: this.form.firstname,
lastName: this.form.lastname
}
lastName: this.form.lastname,
password: this.form.password.password,
},
})
*/
this.form.email = ''
this.form.firstname = ''
this.form.lastname = ''
this.form.password.password = ''
.then(() => {
this.form.email = ''
this.form.firstname = ''
this.form.lastname = ''
this.form.password.password = ''
this.$router.push('/thx/register')
} else {
this.showError = true
this.messageError = result.result.message
}
this.$router.push('/thx/register')
})
.catch((error) => {
this.showError = true
this.messageError = error.message
})
},
closeAlert() {
this.showError = false

213
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,129 @@ 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('Has sessionId from API call', async () => {
await wrapper.vm.$nextTick()
expect(wrapper.vm.sessionId).toBe(1)
})
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
},