mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
delete files with username
This commit is contained in:
ogerly
parent
0427a31790
commit
d5a37f23b6
@ -24,7 +24,7 @@ export default {
|
|||||||
language: { type: String },
|
language: { type: String },
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
if (!this.register) this.selected = this.$store.state.language
|
this.selected = this.$store.state.language
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
languageObject() {
|
languageObject() {
|
||||||
|
|||||||
@ -42,7 +42,7 @@ describe('Register', () => {
|
|||||||
wrapper = Wrapper()
|
wrapper = Wrapper()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('renders the Register form', () => {
|
it.only('renders the Register form', () => {
|
||||||
expect(wrapper.find('div#registerform').exists()).toBeTruthy()
|
expect(wrapper.find('div#registerform').exists()).toBeTruthy()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@ -1,169 +0,0 @@
|
|||||||
import { mount } from '@vue/test-utils'
|
|
||||||
import UserCardFormUsername from './UserCard_FormUsername'
|
|
||||||
import flushPromises from 'flush-promises'
|
|
||||||
import { extend } from 'vee-validate'
|
|
||||||
|
|
||||||
const localVue = global.localVue
|
|
||||||
|
|
||||||
const mockAPIcall = jest.fn()
|
|
||||||
|
|
||||||
// override this rule to avoid API call
|
|
||||||
extend('gddUsernameUnique', {
|
|
||||||
validate(value) {
|
|
||||||
return true
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const toastErrorMock = jest.fn()
|
|
||||||
const toastSuccessMock = jest.fn()
|
|
||||||
const storeCommitMock = jest.fn()
|
|
||||||
|
|
||||||
describe('UserCard_FormUsername', () => {
|
|
||||||
let wrapper
|
|
||||||
|
|
||||||
const mocks = {
|
|
||||||
$t: jest.fn((t) => t),
|
|
||||||
$store: {
|
|
||||||
state: {
|
|
||||||
email: 'user@example.org',
|
|
||||||
username: '',
|
|
||||||
},
|
|
||||||
commit: storeCommitMock,
|
|
||||||
},
|
|
||||||
$toasted: {
|
|
||||||
success: toastSuccessMock,
|
|
||||||
error: toastErrorMock,
|
|
||||||
},
|
|
||||||
$apollo: {
|
|
||||||
query: mockAPIcall,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
const Wrapper = () => {
|
|
||||||
return mount(UserCardFormUsername, { localVue, mocks })
|
|
||||||
}
|
|
||||||
|
|
||||||
describe('mount', () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
wrapper = Wrapper()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('renders the component', () => {
|
|
||||||
expect(wrapper.find('div#formusername').exists()).toBeTruthy()
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('username in store is empty', () => {
|
|
||||||
it('renders an empty username', () => {
|
|
||||||
expect(wrapper.find('div.display-username').text()).toEqual('@')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('has an edit icon', () => {
|
|
||||||
expect(wrapper.find('svg.bi-pencil').exists()).toBeTruthy()
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('edit username', () => {
|
|
||||||
beforeEach(async () => {
|
|
||||||
await wrapper.find('svg.bi-pencil').trigger('click')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('shows an input field for the username', () => {
|
|
||||||
expect(wrapper.find('input[placeholder="Username"]').exists()).toBeTruthy()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('shows an cancel icon', () => {
|
|
||||||
expect(wrapper.find('svg.bi-x-circle').exists()).toBeTruthy()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('closes the input when cancel icon is clicked', async () => {
|
|
||||||
wrapper.find('svg.bi-x-circle').trigger('click')
|
|
||||||
await wrapper.vm.$nextTick()
|
|
||||||
expect(wrapper.find('input[placeholder="Username"]').exists()).toBeFalsy()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('does not change the username when cancel is clicked', async () => {
|
|
||||||
wrapper.find('input[placeholder="Username"]').setValue('username')
|
|
||||||
wrapper.find('svg.bi-x-circle').trigger('click')
|
|
||||||
await wrapper.vm.$nextTick()
|
|
||||||
expect(wrapper.find('div.display-username').text()).toEqual('@')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('has a submit button', () => {
|
|
||||||
expect(wrapper.find('button[type="submit"]').exists()).toBeTruthy()
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('successfull submit', () => {
|
|
||||||
beforeEach(async () => {
|
|
||||||
mockAPIcall.mockResolvedValue({
|
|
||||||
data: {
|
|
||||||
updateUserInfos: {
|
|
||||||
validValues: 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
await wrapper.find('input[placeholder="Username"]').setValue('username')
|
|
||||||
await wrapper.find('form').trigger('submit')
|
|
||||||
await flushPromises()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('calls the API', () => {
|
|
||||||
expect(mockAPIcall).toHaveBeenCalledWith(
|
|
||||||
expect.objectContaining({
|
|
||||||
variables: {
|
|
||||||
email: 'user@example.org',
|
|
||||||
username: 'username',
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('displays the new username', () => {
|
|
||||||
expect(wrapper.find('div.display-username').text()).toEqual('@username')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('commits the username to the store', () => {
|
|
||||||
expect(storeCommitMock).toBeCalledWith('username', 'username')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('toasts an success message', () => {
|
|
||||||
expect(toastSuccessMock).toBeCalledWith('site.profil.user-data.change-success')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('has no edit button anymore', () => {
|
|
||||||
expect(wrapper.find('svg.bi-pencil').exists()).toBeFalsy()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('submit retruns error', () => {
|
|
||||||
beforeEach(async () => {
|
|
||||||
jest.clearAllMocks()
|
|
||||||
mockAPIcall.mockRejectedValue({
|
|
||||||
message: 'Ouch!',
|
|
||||||
})
|
|
||||||
await wrapper.find('input[placeholder="Username"]').setValue('username')
|
|
||||||
await wrapper.find('form').trigger('submit')
|
|
||||||
await flushPromises()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('calls the API', () => {
|
|
||||||
expect(mockAPIcall).toHaveBeenCalledWith(
|
|
||||||
expect.objectContaining({
|
|
||||||
variables: {
|
|
||||||
email: 'user@example.org',
|
|
||||||
username: 'username',
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('toasts an error message', () => {
|
|
||||||
expect(toastErrorMock).toBeCalledWith('Ouch!')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('renders an empty username', () => {
|
|
||||||
expect(wrapper.find('div.display-username').text()).toEqual('@')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@ -1,109 +0,0 @@
|
|||||||
<template>
|
|
||||||
<b-card id="formusername" class="bg-transparent" style="background-color: #ebebeba3 !important">
|
|
||||||
<div>
|
|
||||||
<b-row class="mb-4 text-right">
|
|
||||||
<b-col class="text-right">
|
|
||||||
<a @click="showUsername ? (showUsername = !showUsername) : cancelEdit()">
|
|
||||||
<span class="pointer mr-3">{{ $t('form.change') }}</span>
|
|
||||||
<b-icon v-if="showUsername" class="pointer ml-3" icon="pencil"></b-icon>
|
|
||||||
<b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
|
|
||||||
</a>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="showUsername">
|
|
||||||
<b-row class="mb-3">
|
|
||||||
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
|
|
||||||
<small>{{ $t('form.username') }}</small>
|
|
||||||
</b-col>
|
|
||||||
<b-col class="display-1 col-md-9 col-sm-10 display-username">@{{ username }}</b-col>
|
|
||||||
</b-row>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else>
|
|
||||||
<validation-observer ref="formValidator" v-slot="{ handleSubmit, valid }">
|
|
||||||
<b-form role="form" @submit.stop.prevent="handleSubmit(onSubmit)">
|
|
||||||
<b-row class="mb-3">
|
|
||||||
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
|
|
||||||
<small>{{ $t('form.username') }}</small>
|
|
||||||
</b-col>
|
|
||||||
<b-col class="col-md-9 col-sm-10">
|
|
||||||
<validation-provider
|
|
||||||
name="Username"
|
|
||||||
:rules="{ gddUsernameRgex: true, gddUsernameUnique: true }"
|
|
||||||
v-slot="{ errors }"
|
|
||||||
>
|
|
||||||
<div v-if="errors" class="text-right p-3 p-sm-1">
|
|
||||||
<span v-for="error in errors" :key="error" class="errors">{{ error }}</span>
|
|
||||||
</div>
|
|
||||||
<b-form-input v-model="form.username" placeholder="Username"></b-form-input>
|
|
||||||
<div>
|
|
||||||
{{ $t('form.change_username_info') }}
|
|
||||||
</div>
|
|
||||||
</validation-provider>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
<b-row class="text-right">
|
|
||||||
<b-col>
|
|
||||||
<div class="text-right" ref="submitButton">
|
|
||||||
<b-button variant="info" type="submit" class="mt-4" :disabled="!valid">
|
|
||||||
{{ $t('form.save') }}
|
|
||||||
</b-button>
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</b-form>
|
|
||||||
</validation-observer>
|
|
||||||
</div>
|
|
||||||
</b-card>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { updateUserInfos } from '../../../graphql/queries'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'FormUsername',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
showUsername: true,
|
|
||||||
username: this.$store.state.username,
|
|
||||||
form: {
|
|
||||||
username: this.$store.state.username,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
cancelEdit() {
|
|
||||||
this.username = this.$store.state.username
|
|
||||||
this.showUsername = true
|
|
||||||
},
|
|
||||||
async onSubmit() {
|
|
||||||
this.$apollo
|
|
||||||
.query({
|
|
||||||
query: updateUserInfos,
|
|
||||||
variables: {
|
|
||||||
email: this.$store.state.email,
|
|
||||||
username: this.form.username,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
this.$store.commit('username', this.form.username)
|
|
||||||
this.username = this.form.username
|
|
||||||
this.showUsername = true
|
|
||||||
this.$toasted.success(this.$t('site.profil.user-data.change-success'))
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
this.$toasted.error(error.message)
|
|
||||||
this.showUsername = true
|
|
||||||
this.username = this.$store.state.username
|
|
||||||
this.form.username = this.$store.state.username
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
span.errors {
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -27,10 +27,6 @@ describe('UserProfileOverview', () => {
|
|||||||
expect(wrapper.findComponent({ name: 'FormUserData' }).exists()).toBeTruthy()
|
expect(wrapper.findComponent({ name: 'FormUserData' }).exists()).toBeTruthy()
|
||||||
})
|
})
|
||||||
|
|
||||||
// it('has a user name form', () => {
|
|
||||||
// expect(wrapper.findComponent({ name: 'FormUsername' }).exists()).toBeTruthy()
|
|
||||||
// })
|
|
||||||
|
|
||||||
it('has a user change password form', () => {
|
it('has a user change password form', () => {
|
||||||
expect(wrapper.findComponent({ name: 'FormUserPasswort' }).exists()).toBeTruthy()
|
expect(wrapper.findComponent({ name: 'FormUserPasswort' }).exists()).toBeTruthy()
|
||||||
})
|
})
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user