mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2026-01-20 20:01:22 +00:00
suggested solutions
This commit is contained in:
Moriz Wahl
parent
7618e18294
commit
5699620c85
@ -25,49 +25,50 @@ describe('DonationInfo.vue', () => {
|
||||
|
||||
const Wrapper = () => mount(DonationInfo, { mocks, localVue, propsData })
|
||||
|
||||
it('displays the progress bar', () => {
|
||||
wrapper = Wrapper()
|
||||
expect(wrapper.find('.progress-bar').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('displays the action button', () => {
|
||||
wrapper = Wrapper()
|
||||
expect(wrapper.find('.base-button').text()).toBe('donations.donate-now')
|
||||
})
|
||||
|
||||
it('includes a link to the ocelot.social donations website', () => {
|
||||
wrapper = Wrapper()
|
||||
expect(wrapper.find('a').attributes('href')).toBe(
|
||||
'https://ocelot-social.herokuapp.com/donations',
|
||||
)
|
||||
})
|
||||
|
||||
describe('mount with data', () => {
|
||||
describe('given german locale', () => {
|
||||
it.skip('creates a label from the given amounts and a translation string', () => {
|
||||
// couldn't find out why it's not working
|
||||
mocks.$i18n.locale = () => 'de'
|
||||
wrapper = Wrapper()
|
||||
expect(mocks.$t).toBeCalledWith(
|
||||
'donations.amount-of-total',
|
||||
expect.objectContaining({
|
||||
amount: '10.000',
|
||||
total: '50.000',
|
||||
}),
|
||||
)
|
||||
})
|
||||
describe('mount', () => {
|
||||
beforeEach(() => {
|
||||
wrapper = Wrapper()
|
||||
})
|
||||
|
||||
describe('given english locale', () => {
|
||||
it('creates a label from the given amounts and a translation string', () => {
|
||||
wrapper = Wrapper()
|
||||
expect(mocks.$t).toBeCalledWith(
|
||||
'donations.amount-of-total',
|
||||
expect.objectContaining({
|
||||
amount: '10,000',
|
||||
total: '50,000',
|
||||
}),
|
||||
)
|
||||
it('displays the progress bar', () => {
|
||||
expect(wrapper.find('.progress-bar').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('displays the action button', () => {
|
||||
expect(wrapper.find('.base-button').text()).toBe('donations.donate-now')
|
||||
})
|
||||
|
||||
it('includes a link to the ocelot.social donations website', () => {
|
||||
expect(wrapper.find('a').attributes('href')).toBe(
|
||||
'https://ocelot-social.herokuapp.com/donations',
|
||||
)
|
||||
})
|
||||
|
||||
describe('mount with data', () => {
|
||||
describe('given german locale', () => {
|
||||
beforeEach(() => {
|
||||
mocks.$i18n.locale = () => 'de'
|
||||
})
|
||||
|
||||
// it looks to me that toLocaleString for some reason is not working as expected
|
||||
it.skip('creates a label from the given amounts and a translation string', () => {
|
||||
expect(mocks.$t).nthCalledWith(1, 'donations.amount-of-total', {
|
||||
amount: '10.000',
|
||||
total: '50.000',
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('given english locale', () => {
|
||||
it('creates a label from the given amounts and a translation string', () => {
|
||||
expect(mocks.$t).toBeCalledWith(
|
||||
'donations.amount-of-total',
|
||||
expect.objectContaining({
|
||||
amount: '10,000',
|
||||
total: '50,000',
|
||||
}),
|
||||
)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@ -28,6 +28,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
label() {
|
||||
// console.log(typeof this.progress, this.$i18n.locale(), this.progress.toLocaleString('de-DE'))
|
||||
return this.$t('donations.amount-of-total', {
|
||||
amount: this.progress.toLocaleString(this.$i18n.locale()),
|
||||
total: this.goal.toLocaleString(this.$i18n.locale()),
|
||||
|
||||
@ -8,24 +8,38 @@ describe('donations.vue', () => {
|
||||
let wrapper
|
||||
let mocks
|
||||
|
||||
const donationsQueryMock = jest.fn()
|
||||
const donationsUpdateMock = jest.fn()
|
||||
const donationsMutaionMock = jest.fn()
|
||||
donationsMutaionMock.mockResolvedValue({
|
||||
then: jest.fn(),
|
||||
catch: jest.fn(),
|
||||
})
|
||||
|
||||
beforeEach(() => {
|
||||
mocks = {
|
||||
$t: jest.fn((string) => string),
|
||||
$apollo: {
|
||||
// queries: {
|
||||
// Donations: {
|
||||
// refetch: jest.fn(),
|
||||
// // fetchMore: jest.fn().mockResolvedValue([
|
||||
// // {
|
||||
// // id: 'p23',
|
||||
// // name: 'It is a post',
|
||||
// // author: {
|
||||
// // id: 'u1',
|
||||
// // },
|
||||
// // },
|
||||
// // ]),
|
||||
// },
|
||||
// },
|
||||
Donations: {
|
||||
query: donationsQueryMock,
|
||||
update: donationsUpdateMock,
|
||||
},
|
||||
mutate: donationsMutaionMock,
|
||||
queries: {
|
||||
Donations: {
|
||||
query: donationsQueryMock,
|
||||
refetch: jest.fn(),
|
||||
fetchMore: jest.fn().mockResolvedValue([
|
||||
{
|
||||
id: 'p23',
|
||||
name: 'It is a post',
|
||||
author: {
|
||||
id: 'u1',
|
||||
},
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
// query: jest.fn().mockResolvedValue({
|
||||
// data: {
|
||||
// Donations: 1,
|
||||
@ -100,17 +114,18 @@ describe('donations.vue', () => {
|
||||
})
|
||||
|
||||
it.skip('on donations-goal and enter value XXX', async () => {
|
||||
wrapper.find('#showDonations').trigger('click') // set to true
|
||||
// wrapper.find('[data-test="donations-goal"]').setValue('20000')
|
||||
wrapper.find('#donations-goal').setValue('20000')
|
||||
await wrapper.vm.$nextTick()
|
||||
console.log(wrapper.find('#donations-goal').element.value)
|
||||
expect(wrapper.vm.formData.goal).toBe('20000')
|
||||
})
|
||||
})
|
||||
|
||||
describe('apollo', () => {
|
||||
it.skip('query is called', () => {
|
||||
// expect(mocks.$apollo.queries.Donations.refetch).toHaveBeenCalledTimes(1)
|
||||
expect(donationsQueryMock).toHaveBeenCalledTimes(1)
|
||||
expect(mocks.$apollo.queries.Donations.refetch).toHaveBeenCalledTimes(1)
|
||||
// expect(mocks.$apollo.Donations.query().exists()).toBeTruthy()
|
||||
console.log('mocks.$apollo: ', mocks.$apollo)
|
||||
})
|
||||
@ -124,27 +139,36 @@ describe('donations.vue', () => {
|
||||
})
|
||||
|
||||
describe('submit', () => {
|
||||
it.skip('calls mutation with default values once', async () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks()
|
||||
})
|
||||
|
||||
it('calls mutation with default values once', () => {
|
||||
// TODO: Makes the warning: "UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'error' of undefined"
|
||||
wrapper.find('.donations-info-button').trigger('submit')
|
||||
await mocks.$apollo.mutate
|
||||
// await flushPromises()
|
||||
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining({variables: { showDonations: false, goal: 15000, progress: 0 }}))
|
||||
expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
|
||||
//await flushPromises()
|
||||
expect(donationsMutaionMock).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
variables: { showDonations: false, goal: 15000, progress: 0 },
|
||||
}),
|
||||
)
|
||||
})
|
||||
|
||||
it.skip('calls mutation with input values once', async () => {
|
||||
it('calls mutation with input values once', async () => {
|
||||
wrapper.find('#showDonations').trigger('click') // set to true
|
||||
await wrapper.vm.$nextTick()
|
||||
// wrapper.find('[data-test="donations-goal"]').setValue('20000')
|
||||
//wrapper.find('[data-test="donations-goal"]').setValue('20000')
|
||||
wrapper.find('#donations-goal').setValue('20000')
|
||||
await wrapper.vm.$nextTick()
|
||||
// expect(wrapper.vm.formData.goal).toBe('20000')
|
||||
wrapper.find('.donations-info-button').trigger('submit')
|
||||
await mocks.$apollo.mutate
|
||||
await wrapper.vm.$nextTick()
|
||||
//await mocks.$apollo.mutate
|
||||
await flushPromises()
|
||||
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining({variables: { showDonations: true, goal: 15000, progress: 0 }}))
|
||||
expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
|
||||
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
variables: { showDonations: true, goal: 20000, progress: 0 },
|
||||
}),
|
||||
)
|
||||
})
|
||||
|
||||
it.skip('calls mutation with corrected values once', async () => {
|
||||
@ -158,7 +182,9 @@ describe('donations.vue', () => {
|
||||
})
|
||||
|
||||
it.skip('default values are displayed', async () => {
|
||||
mocks.$apollo.mutate = jest.fn().mockResolvedValue({ data: { UpdateDonations: { showDonations: true, goal: 10, progress: 20 } } })
|
||||
mocks.$apollo.mutate = jest.fn().mockResolvedValue({
|
||||
data: { UpdateDonations: { showDonations: true, goal: 10, progress: 20 } },
|
||||
})
|
||||
wrapper.find('.donations-info-button').trigger('submit')
|
||||
await mocks.$apollo.mutate
|
||||
await Vue.nextTick()
|
||||
|
||||
@ -40,68 +40,69 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DonationsQuery, UpdateDonations } from '~/graphql/Donations'
|
||||
import { DonationsQuery, UpdateDonations } from '~/graphql/Donations'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
goal: null,
|
||||
progress: null,
|
||||
},
|
||||
// TODO: Our styleguide does not support checkmarks.
|
||||
// Integrate showDonations into `this.formData` once we
|
||||
// have checkmarks available.
|
||||
showDonations: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
const { showDonations } = this
|
||||
let { goal, progress } = this.formData
|
||||
goal = typeof goal === 'string' && goal.length > 0 ? goal : '15000'
|
||||
progress = typeof progress === 'string' && progress.length > 0 ? progress : '0'
|
||||
this.$apollo
|
||||
.mutate({
|
||||
mutation: UpdateDonations(),
|
||||
variables: {
|
||||
showDonations,
|
||||
goal: parseInt(goal),
|
||||
progress: parseInt(progress) < parseInt(goal) ? parseInt(progress) : parseInt(goal),
|
||||
},
|
||||
update: (_store, { data }) => {
|
||||
if (!data || !data.UpdateDonations) return
|
||||
const { showDonations, goal, progress } = data.UpdateDonations
|
||||
this.showDonations = showDonations
|
||||
this.formData = {
|
||||
goal: goal.toString(10),
|
||||
progress: progress < goal ? progress.toString(10) : goal.toString(10),
|
||||
}
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
this.$toast.success(this.$t('admin.donations.successfulUpdate'))
|
||||
})
|
||||
.catch((error) => this.$toast.error(error.message))
|
||||
},
|
||||
},
|
||||
apollo: {
|
||||
Donations: {
|
||||
query() {
|
||||
return DonationsQuery()
|
||||
},
|
||||
update({ Donations }) {
|
||||
if (!Donations) return
|
||||
const { showDonations, goal, progress } = Donations
|
||||
this.showDonations = showDonations
|
||||
this.formData = {
|
||||
goal: goal.toString(10),
|
||||
progress: progress < goal ? progress.toString(10) : goal.toString(10),
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
goal: null,
|
||||
progress: null,
|
||||
},
|
||||
// TODO: Our styleguide does not support checkmarks.
|
||||
// Integrate showDonations into `this.formData` once we
|
||||
// have checkmarks available.
|
||||
showDonations: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
const { showDonations } = this
|
||||
let { goal, progress } = this.formData
|
||||
console.log(goal, progress)
|
||||
goal = typeof goal === 'string' && goal.length > 0 ? goal : '15000'
|
||||
progress = typeof progress === 'string' && progress.length > 0 ? progress : '0'
|
||||
this.$apollo
|
||||
.mutate({
|
||||
mutation: UpdateDonations(),
|
||||
variables: {
|
||||
showDonations,
|
||||
goal: parseInt(goal),
|
||||
progress: parseInt(progress) < parseInt(goal) ? parseInt(progress) : parseInt(goal),
|
||||
},
|
||||
update: (_store, { data }) => {
|
||||
if (!data || !data.UpdateDonations) return
|
||||
const { showDonations, goal, progress } = data.UpdateDonations
|
||||
this.showDonations = showDonations
|
||||
this.formData = {
|
||||
goal: goal.toString(10),
|
||||
progress: progress < goal ? progress.toString(10) : goal.toString(10),
|
||||
}
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
this.$toast.success(this.$t('admin.donations.successfulUpdate'))
|
||||
})
|
||||
.catch((error) => this.$toast.error(error.message))
|
||||
},
|
||||
},
|
||||
apollo: {
|
||||
Donations: {
|
||||
query() {
|
||||
return DonationsQuery()
|
||||
},
|
||||
update({ Donations }) {
|
||||
if (!Donations) return
|
||||
const { showDonations, goal, progress } = Donations
|
||||
this.showDonations = showDonations
|
||||
this.formData = {
|
||||
goal: goal.toString(10),
|
||||
progress: progress < goal ? progress.toString(10) : goal.toString(10),
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user