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 },
|
||||
},
|
||||
created() {
|
||||
if (!this.register) this.selected = this.$store.state.language
|
||||
this.selected = this.$store.state.language
|
||||
},
|
||||
computed: {
|
||||
languageObject() {
|
||||
|
||||
@ -42,7 +42,7 @@ describe('Register', () => {
|
||||
wrapper = Wrapper()
|
||||
})
|
||||
|
||||
it('renders the Register form', () => {
|
||||
it.only('renders the Register form', () => {
|
||||
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()
|
||||
})
|
||||
|
||||
// it('has a user name form', () => {
|
||||
// expect(wrapper.findComponent({ name: 'FormUsername' }).exists()).toBeTruthy()
|
||||
// })
|
||||
|
||||
it('has a user change password form', () => {
|
||||
expect(wrapper.findComponent({ name: 'FormUserPasswort' }).exists()).toBeTruthy()
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user