mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
refactor edit compoenents form and test it
This commit is contained in:
Moriz Wahl
parent
50062f2415
commit
409280316c
@ -7,8 +7,9 @@ const apolloMutateMock = jest.fn().mockResolvedValue({
|
||||
data: {
|
||||
updatePendingCreation: {
|
||||
creation: [0, 0, 0],
|
||||
amount: 500,
|
||||
date: new Date(),
|
||||
memo: 'qwertzuiopasdfghjkl',
|
||||
memo: 'Test Schöpfung 2',
|
||||
moderator: 0,
|
||||
},
|
||||
},
|
||||
@ -82,196 +83,79 @@ describe('EditCreationFormular', () => {
|
||||
expect(wrapper.findAll('input[type="radio"]').length).toBe(3)
|
||||
})
|
||||
|
||||
describe('with single creation', () => {
|
||||
it('has the third radio button checked', () => {
|
||||
expect(wrapper.findAll('input[type="radio"]').at(0).element.checked).toBeFalsy()
|
||||
expect(wrapper.findAll('input[type="radio"]').at(1).element.checked).toBeFalsy()
|
||||
expect(wrapper.findAll('input[type="radio"]').at(2).element.checked).toBeTruthy()
|
||||
})
|
||||
|
||||
it('has rangeMax of 700', () => {
|
||||
expect(wrapper.find('input[type="number"]').attributes('max')).toBe('700')
|
||||
})
|
||||
|
||||
describe('change and save memo and value with success', () => {
|
||||
beforeEach(async () => {
|
||||
jest.clearAllMocks()
|
||||
await wrapper.setProps({ creation: [200, 400, 600] })
|
||||
await wrapper.setData({ rangeMin: 180 })
|
||||
await wrapper.setData({ text: 'Test create coins' })
|
||||
await wrapper.setData({ value: 90 })
|
||||
await wrapper.find('input[type="number"]').setValue(500)
|
||||
await wrapper.find('textarea').setValue('Test Schöpfung 2')
|
||||
await wrapper.find('.test-submit').trigger('click')
|
||||
})
|
||||
|
||||
describe('first radio button', () => {
|
||||
beforeEach(async () => {
|
||||
await wrapper.findAll('input[type="radio"]').at(0).setChecked()
|
||||
})
|
||||
|
||||
it('sets rangeMin to 0', () => {
|
||||
expect(wrapper.vm.rangeMin).toBe(0)
|
||||
})
|
||||
|
||||
it('sets rangeMax to 200', () => {
|
||||
expect(wrapper.vm.rangeMax).toBe(200)
|
||||
})
|
||||
|
||||
describe('sendForm', () => {
|
||||
beforeEach(async () => {
|
||||
await wrapper.find('.test-submit').trigger('click')
|
||||
})
|
||||
|
||||
it('sends ... to apollo', () => {
|
||||
expect(apolloMutateMock).toBeCalledWith(
|
||||
expect.objectContaining({
|
||||
variables: {
|
||||
amount: 90,
|
||||
creationDate: getCreationDate(2),
|
||||
email: 'bob@baumeister.de',
|
||||
id: 0,
|
||||
memo: 'Test create coins',
|
||||
moderator: 0,
|
||||
},
|
||||
}),
|
||||
)
|
||||
})
|
||||
|
||||
it('emits update-user-data', () => {
|
||||
expect(wrapper.emitted('update-user-data')).toBeTruthy()
|
||||
expect(wrapper.emitted('update-user-data')).toEqual([
|
||||
[
|
||||
{
|
||||
id: 0,
|
||||
email: 'bob@baumeister.de',
|
||||
},
|
||||
[0, 0, 0],
|
||||
],
|
||||
])
|
||||
})
|
||||
|
||||
it('toast success message', () => {
|
||||
expect(toastedSuccessMock).toBeCalledWith('creation_form.toasted_update')
|
||||
})
|
||||
|
||||
describe('sendForm with error', () => {
|
||||
beforeEach(async () => {
|
||||
jest.clearAllMocks()
|
||||
apolloMutateMock.mockRejectedValue({
|
||||
message: 'Ouch!',
|
||||
})
|
||||
wrapper = Wrapper()
|
||||
await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
|
||||
await wrapper.setData({ text: 'Test create coins' })
|
||||
await wrapper.setData({ value: 90 })
|
||||
await wrapper.findAll('input[type="radio"]').at(0).setChecked()
|
||||
await wrapper.setData({ rangeMin: 100 })
|
||||
await wrapper.find('.test-submit').trigger('click')
|
||||
})
|
||||
|
||||
it('toast error message', () => {
|
||||
expect(toastedErrorMock).toBeCalledWith('Ouch!')
|
||||
})
|
||||
})
|
||||
})
|
||||
it('calls the API', () => {
|
||||
expect(apolloMutateMock).toBeCalledWith(
|
||||
expect.objectContaining({
|
||||
variables: {
|
||||
id: 0,
|
||||
email: 'bob@baumeister.de',
|
||||
creationDate: getCreationDate(0),
|
||||
amount: 500,
|
||||
memo: 'Test Schöpfung 2',
|
||||
moderator: 0,
|
||||
},
|
||||
}),
|
||||
)
|
||||
})
|
||||
|
||||
describe('second radio button', () => {
|
||||
beforeEach(async () => {
|
||||
await wrapper.findAll('input[type="radio"]').at(1).setChecked()
|
||||
})
|
||||
|
||||
it('sets rangeMin to 0', () => {
|
||||
expect(wrapper.vm.rangeMin).toBe(0)
|
||||
})
|
||||
|
||||
it('sets rangeMax to 400', () => {
|
||||
expect(wrapper.vm.rangeMax).toBe(400)
|
||||
})
|
||||
|
||||
describe('sendForm', () => {
|
||||
beforeEach(async () => {
|
||||
await wrapper.find('.test-submit').trigger('click')
|
||||
})
|
||||
|
||||
it('sends ... to apollo', () => {
|
||||
expect(apolloMutateMock).toBeCalledWith(
|
||||
expect.objectContaining({
|
||||
variables: {
|
||||
amount: 90,
|
||||
creationDate: getCreationDate(1),
|
||||
email: 'bob@baumeister.de',
|
||||
id: 0,
|
||||
memo: 'Test create coins',
|
||||
moderator: 0,
|
||||
},
|
||||
}),
|
||||
)
|
||||
})
|
||||
|
||||
describe('sendForm with error', () => {
|
||||
beforeEach(async () => {
|
||||
jest.clearAllMocks()
|
||||
apolloMutateMock.mockRejectedValue({
|
||||
message: 'Ouch!',
|
||||
})
|
||||
wrapper = Wrapper()
|
||||
await wrapper.setProps({ creation: [200, 400, 600] })
|
||||
await wrapper.setData({ text: 'Test create coins' })
|
||||
await wrapper.setData({ value: 100 })
|
||||
await wrapper.findAll('input[type="radio"]').at(1).setChecked()
|
||||
await wrapper.setData({ rangeMin: 180 })
|
||||
await wrapper.find('.test-submit').trigger('click')
|
||||
})
|
||||
|
||||
it('toast error message', () => {
|
||||
expect(toastedErrorMock).toBeCalledWith('Ouch!')
|
||||
})
|
||||
})
|
||||
})
|
||||
it('emits update-user-data', () => {
|
||||
expect(wrapper.emitted('update-user-data')).toEqual([
|
||||
[
|
||||
{
|
||||
id: 0,
|
||||
email: 'bob@baumeister.de',
|
||||
},
|
||||
[0, 0, 0],
|
||||
],
|
||||
])
|
||||
})
|
||||
|
||||
describe('third radio button', () => {
|
||||
beforeEach(async () => {
|
||||
await wrapper.setData({ rangeMin: 180 })
|
||||
await wrapper.findAll('input[type="radio"]').at(2).setChecked()
|
||||
})
|
||||
it('emits update-creation-data', () => {
|
||||
expect(wrapper.emitted('update-creation-data')).toEqual([
|
||||
[
|
||||
{
|
||||
amount: 500,
|
||||
date: expect.any(Date),
|
||||
memo: 'Test Schöpfung 2',
|
||||
moderator: 0,
|
||||
row: expect.any(Object),
|
||||
},
|
||||
],
|
||||
])
|
||||
})
|
||||
|
||||
it('sets rangeMin to 180', () => {
|
||||
expect(wrapper.vm.rangeMin).toBe(180)
|
||||
})
|
||||
it('toasts a success message', () => {
|
||||
expect(toastedSuccessMock).toBeCalledWith('creation_form.toasted_update')
|
||||
})
|
||||
})
|
||||
|
||||
it('sets rangeMax to 700', () => {
|
||||
expect(wrapper.vm.rangeMax).toBe(700)
|
||||
})
|
||||
describe('change and save memo and value with error', () => {
|
||||
beforeEach(async () => {
|
||||
apolloMutateMock.mockRejectedValue({ message: 'Oh no!' })
|
||||
await wrapper.find('input[type="number"]').setValue(500)
|
||||
await wrapper.find('textarea').setValue('Test Schöpfung 2')
|
||||
await wrapper.find('.test-submit').trigger('click')
|
||||
})
|
||||
|
||||
describe('sendForm with success', () => {
|
||||
beforeEach(async () => {
|
||||
await wrapper.find('.test-submit').trigger('click')
|
||||
})
|
||||
|
||||
it('sends ... to apollo', () => {
|
||||
expect(apolloMutateMock).toBeCalledWith(
|
||||
expect.objectContaining({
|
||||
variables: {
|
||||
amount: 90,
|
||||
creationDate: getCreationDate(0),
|
||||
email: 'bob@baumeister.de',
|
||||
id: 0,
|
||||
memo: 'Test create coins',
|
||||
moderator: 0,
|
||||
},
|
||||
}),
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
describe('sendForm with error', () => {
|
||||
beforeEach(async () => {
|
||||
jest.clearAllMocks()
|
||||
apolloMutateMock.mockRejectedValue({
|
||||
message: 'Ouch!',
|
||||
})
|
||||
wrapper = Wrapper()
|
||||
await wrapper.setProps({ creation: [200, 400, 600] })
|
||||
await wrapper.setData({ text: 'Test create coins' })
|
||||
await wrapper.setData({ value: 90 })
|
||||
await wrapper.findAll('input[type="radio"]').at(2).setChecked()
|
||||
await wrapper.setData({ rangeMin: 180 })
|
||||
await wrapper.find('.test-submit').trigger('click')
|
||||
})
|
||||
|
||||
it('toast error message', () => {
|
||||
expect(toastedErrorMock).toBeCalledWith('Ouch!')
|
||||
})
|
||||
})
|
||||
it('toasts an error message', () => {
|
||||
expect(toastedErrorMock).toBeCalledWith('Oh no!')
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@ -4,65 +4,14 @@
|
||||
<b-form ref="updateCreationForm">
|
||||
<b-row class="m-4">
|
||||
<label>{{ $t('creation_form.select_month') }}</label>
|
||||
<b-col class="text-left">
|
||||
<b-form-radio
|
||||
id="beforeLastMonth"
|
||||
v-model="radioSelected"
|
||||
:value="beforeLastMonth"
|
||||
:disabled="selectedOpenCreationAmount[0] === 0"
|
||||
size="lg"
|
||||
@change="updateRadioSelected(beforeLastMonth, 0, selectedOpenCreationAmount[0])"
|
||||
>
|
||||
<label for="beforeLastMonth">
|
||||
{{ beforeLastMonth.short }}
|
||||
{{
|
||||
selectedOpenCreationAmount[0] != null
|
||||
? selectedOpenCreationAmount[0] + ' GDD'
|
||||
: ''
|
||||
}}
|
||||
</label>
|
||||
</b-form-radio>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<b-form-radio
|
||||
id="lastMonth"
|
||||
v-model="radioSelected"
|
||||
:value="lastMonth"
|
||||
:disabled="selectedOpenCreationAmount[1] === 0"
|
||||
size="lg"
|
||||
@change="updateRadioSelected(lastMonth, 1, selectedOpenCreationAmount[1])"
|
||||
>
|
||||
<label for="lastMonth">
|
||||
{{ lastMonth.short }}
|
||||
{{
|
||||
selectedOpenCreationAmount[1] != null
|
||||
? selectedOpenCreationAmount[1] + ' GDD'
|
||||
: ''
|
||||
}}
|
||||
</label>
|
||||
</b-form-radio>
|
||||
</b-col>
|
||||
<b-col class="text-right">
|
||||
<b-form-radio
|
||||
id="currentMonth"
|
||||
v-model="radioSelected"
|
||||
:value="currentMonth"
|
||||
:disabled="selectedOpenCreationAmount[2] === 0"
|
||||
size="lg"
|
||||
@change="updateRadioSelected(currentMonth, 2, selectedOpenCreationAmount[2])"
|
||||
>
|
||||
<label for="currentMonth">
|
||||
{{ currentMonth.short }}
|
||||
{{
|
||||
selectedOpenCreationAmount[2] != null
|
||||
? selectedOpenCreationAmount[2] + ' GDD'
|
||||
: ''
|
||||
}}
|
||||
</label>
|
||||
</b-form-radio>
|
||||
</b-col>
|
||||
<b-form-radio-group
|
||||
v-model="selected"
|
||||
:options="radioOptions"
|
||||
value-field="item"
|
||||
text-field="name"
|
||||
name="month-selection"
|
||||
></b-form-radio-group>
|
||||
</b-row>
|
||||
|
||||
<b-row class="m-4">
|
||||
<label>{{ $t('creation_form.select_value') }}</label>
|
||||
<div>
|
||||
@ -111,7 +60,7 @@
|
||||
variant="success"
|
||||
class="test-submit"
|
||||
@click="submitCreation"
|
||||
:disabled="radioSelected === '' || value <= 0 || text.length < 10"
|
||||
:disabled="selected === '' || value <= 0 || text.length < 10"
|
||||
>
|
||||
{{ $t('creation_form.update_creation') }}
|
||||
</b-button>
|
||||
@ -124,8 +73,11 @@
|
||||
</template>
|
||||
<script>
|
||||
import { updatePendingCreation } from '../graphql/updatePendingCreation'
|
||||
import { creationMonths } from '../mixins/creationMonths'
|
||||
|
||||
export default {
|
||||
name: 'EditCreationFormular',
|
||||
mixins: [creationMonths],
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
@ -149,40 +101,26 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
radioSelected: '',
|
||||
text: !this.creationUserData.memo ? '' : this.creationUserData.memo,
|
||||
value: !this.creationUserData.amount ? 0 : this.creationUserData.amount,
|
||||
rangeMin: 0,
|
||||
rangeMax: 1000,
|
||||
submitObj: null,
|
||||
isdisabled: true,
|
||||
createdIndex: null,
|
||||
selectedOpenCreationAmount: {},
|
||||
now: Date.now(),
|
||||
selected: '',
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateRadioSelected(name, index, openCreation) {
|
||||
this.createdIndex = index
|
||||
this.rangeMin = 0
|
||||
this.rangeMax = this.creation[index]
|
||||
},
|
||||
submitCreation() {
|
||||
this.submitObj = {
|
||||
id: this.item.id,
|
||||
email: this.item.email,
|
||||
creationDate: this.radioSelected.date,
|
||||
amount: Number(this.value),
|
||||
memo: this.text,
|
||||
moderator: Number(this.$store.state.moderator.id),
|
||||
}
|
||||
|
||||
// hinweis das eine ein einzelne Schöpfung abgesendet wird an (email)
|
||||
this.$apollo
|
||||
.mutate({
|
||||
mutation: updatePendingCreation,
|
||||
variables: this.submitObj,
|
||||
variables: {
|
||||
id: this.item.id,
|
||||
email: this.item.email,
|
||||
creationDate: this.selected.date,
|
||||
amount: Number(this.value),
|
||||
memo: this.text,
|
||||
moderator: Number(this.$store.state.moderator.id),
|
||||
},
|
||||
})
|
||||
.then((result) => {
|
||||
this.$emit('update-user-data', this.item, result.data.updatePendingCreation.creation)
|
||||
@ -199,8 +137,6 @@ export default {
|
||||
email: this.item.email,
|
||||
}),
|
||||
)
|
||||
this.submitObj = null
|
||||
this.createdIndex = null
|
||||
// das creation Formular reseten
|
||||
this.$refs.updateCreationForm.reset()
|
||||
// Den geschöpften Wert auf o setzen
|
||||
@ -208,7 +144,6 @@ export default {
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$toasted.error(error.message)
|
||||
this.submitObj = null
|
||||
// das creation Formular reseten
|
||||
this.$refs.updateCreationForm.reset()
|
||||
// Den geschöpften Wert auf o setzen
|
||||
@ -216,54 +151,12 @@ export default {
|
||||
})
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
currentMonth() {
|
||||
return {
|
||||
short: this.$d(this.now, 'month'),
|
||||
long: this.$d(this.now, 'short'),
|
||||
date: this.$d(this.now, 'short', 'en'),
|
||||
}
|
||||
},
|
||||
lastMonth() {
|
||||
const now = new Date(this.now)
|
||||
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1, 0)
|
||||
return {
|
||||
short: this.$d(lastMonth, 'month'),
|
||||
long: this.$d(lastMonth, 'short'),
|
||||
date: this.$d(lastMonth, 'short', 'en'),
|
||||
}
|
||||
},
|
||||
beforeLastMonth() {
|
||||
const now = new Date(this.now)
|
||||
const beforeLastMonth = new Date(now.getFullYear(), now.getMonth() - 2, 1, 0)
|
||||
return {
|
||||
short: this.$d(beforeLastMonth, 'month'),
|
||||
long: this.$d(beforeLastMonth, 'short'),
|
||||
date: this.$d(beforeLastMonth, 'short', 'en'),
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.creationUserData.date) {
|
||||
switch (this.$d(new Date(this.creationUserData.date), 'month')) {
|
||||
case this.currentMonth.short:
|
||||
this.createdIndex = 2
|
||||
this.radioSelected = this.currentMonth
|
||||
break
|
||||
case this.lastMonth.short:
|
||||
this.createdIndex = 1
|
||||
this.radioSelected = this.lastMonth
|
||||
break
|
||||
case this.beforeLastMonth.short:
|
||||
this.createdIndex = 0
|
||||
this.radioSelected = this.beforeLastMonth
|
||||
break
|
||||
default:
|
||||
throw new Error('Something went wrong')
|
||||
}
|
||||
this.selectedOpenCreationAmount[this.createdIndex] =
|
||||
this.creation[this.createdIndex] + this.creationUserData.amount
|
||||
this.rangeMax = this.selectedOpenCreationAmount[this.createdIndex]
|
||||
const month = this.$d(new Date(this.creationUserData.date), 'month')
|
||||
const index = this.radioOptions.findIndex((obj) => obj.item.short === month)
|
||||
this.selected = this.radioOptions[index].item
|
||||
this.rangeMax = this.creation[index] + this.creationUserData.amount
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user