mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
Implement MySomethingList for social media, use edit-item slot
- Pass formData and formSchema by properties.
This commit is contained in:
Wolfgang Huß
parent
d3cc49d37b
commit
433c5fd883
@ -49,12 +49,12 @@ describe('MySomethingList.vue', () => {
|
||||
submitButton = wrapper.find('button')
|
||||
})
|
||||
|
||||
it('requires the link to be a valid url', async () => {
|
||||
input.setValue('some value')
|
||||
form.trigger('submit')
|
||||
await Vue.nextTick()
|
||||
expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
|
||||
})
|
||||
// Wolle it('requires the link to be a valid url', async () => {
|
||||
// input.setValue('some value')
|
||||
// form.trigger('submit')
|
||||
// await Vue.nextTick()
|
||||
// expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
|
||||
// })
|
||||
|
||||
it('displays an error message when not saved successfully', async () => {
|
||||
mocks.$apollo.mutate.mockRejectedValue({ message: 'Ouch!' })
|
||||
@ -143,15 +143,15 @@ describe('MySomethingList.vue', () => {
|
||||
expect(addInput.exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('sends the new url to the backend', async () => {
|
||||
const expected = expect.objectContaining({
|
||||
variables: { id: 's1', url: newSocialMediaUrl },
|
||||
})
|
||||
input.setValue(newSocialMediaUrl)
|
||||
form.trigger('submit')
|
||||
await Vue.nextTick()
|
||||
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
|
||||
})
|
||||
// Wolle remove? or test here abstract? it('sends the new url to the backend', async () => {
|
||||
// const expected = expect.objectContaining({
|
||||
// variables: { id: 's1', url: newSocialMediaUrl },
|
||||
// })
|
||||
// input.setValue(newSocialMediaUrl)
|
||||
// form.trigger('submit')
|
||||
// await Vue.nextTick()
|
||||
// expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
|
||||
// })
|
||||
|
||||
it('allows the user to cancel editing', async () => {
|
||||
const cancelButton = wrapper.find('button#cancel')
|
||||
|
||||
@ -16,12 +16,13 @@
|
||||
</ds-heading>
|
||||
</ds-space>
|
||||
<ds-space v-if="socialMediaLinks" margin-top="base" margin="base">
|
||||
<ds-input
|
||||
<!-- Wolle <ds-input
|
||||
id="editSocialMedia"
|
||||
model="socialMediaUrl"
|
||||
type="text"
|
||||
:placeholder="$t('settings.social-media.placeholder')"
|
||||
/>
|
||||
/> -->
|
||||
<slot name="edit-item" />
|
||||
</ds-space>
|
||||
</div>
|
||||
<div v-else>
|
||||
@ -87,17 +88,29 @@ import { mapGetters, mapMutations } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'MySomethingList',
|
||||
props: {
|
||||
useFormData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
useFormSchema: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
socialMediaUrl: '',
|
||||
},
|
||||
formSchema: {
|
||||
socialMediaUrl: {
|
||||
type: 'url',
|
||||
message: this.$t('common.validations.url'),
|
||||
},
|
||||
},
|
||||
// Wolle formData: {
|
||||
// socialMediaUrl: '',
|
||||
// },
|
||||
// formSchema: {
|
||||
// socialMediaUrl: {
|
||||
// type: 'url',
|
||||
// message: this.$t('common.validations.url'),
|
||||
// },
|
||||
// },
|
||||
formData: this.useFormData,
|
||||
formSchema: this.useFormSchema,
|
||||
disabled: true,
|
||||
editingLink: {},
|
||||
}
|
||||
|
||||
@ -11,19 +11,19 @@ describe('my-social-media.vue', () => {
|
||||
let mocks
|
||||
let getters
|
||||
const socialMediaUrl = 'https://freeradical.zone/@mattwr18'
|
||||
// const newSocialMediaUrl = 'https://twitter.com/mattwr18'
|
||||
const newSocialMediaUrl = 'https://twitter.com/mattwr18'
|
||||
const faviconUrl = 'https://freeradical.zone/favicon.ico'
|
||||
|
||||
beforeEach(() => {
|
||||
mocks = {
|
||||
$t: jest.fn(),
|
||||
// $apollo: {
|
||||
// mutate: jest.fn(),
|
||||
// },
|
||||
// $toast: {
|
||||
// error: jest.fn(),
|
||||
// success: jest.fn(),
|
||||
// },
|
||||
$apollo: {
|
||||
mutate: jest.fn(),
|
||||
},
|
||||
$toast: {
|
||||
error: jest.fn(),
|
||||
success: jest.fn(),
|
||||
},
|
||||
}
|
||||
getters = {
|
||||
'auth/user': () => {
|
||||
@ -34,6 +34,7 @@ describe('my-social-media.vue', () => {
|
||||
|
||||
describe('mount', () => {
|
||||
// let form, input, submitButton
|
||||
let form, input
|
||||
const Wrapper = () => {
|
||||
const store = new Vuex.Store({
|
||||
getters,
|
||||
@ -41,60 +42,60 @@ describe('my-social-media.vue', () => {
|
||||
return mount(MySocialMedia, { store, mocks, localVue })
|
||||
}
|
||||
|
||||
// describe('adding social media link', () => {
|
||||
// beforeEach(() => {
|
||||
// wrapper = Wrapper()
|
||||
// form = wrapper.find('form')
|
||||
// input = wrapper.find('input#addSocialMedia')
|
||||
// submitButton = wrapper.find('button')
|
||||
// })
|
||||
describe('adding social media link', () => {
|
||||
beforeEach(() => {
|
||||
wrapper = Wrapper()
|
||||
form = wrapper.find('form')
|
||||
input = wrapper.find('input#addSocialMedia')
|
||||
// submitButton = wrapper.find('button')
|
||||
})
|
||||
|
||||
// it('requires the link to be a valid url', async () => {
|
||||
// input.setValue('some value')
|
||||
// form.trigger('submit')
|
||||
// await Vue.nextTick()
|
||||
// expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
|
||||
// })
|
||||
it('requires the link to be a valid url', async () => {
|
||||
input.setValue('some value')
|
||||
form.trigger('submit')
|
||||
await Vue.nextTick()
|
||||
expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
// it('displays an error message when not saved successfully', async () => {
|
||||
// mocks.$apollo.mutate.mockRejectedValue({ message: 'Ouch!' })
|
||||
// input.setValue(newSocialMediaUrl)
|
||||
// form.trigger('submit')
|
||||
// await Vue.nextTick()
|
||||
// await flushPromises()
|
||||
// expect(mocks.$toast.error).toHaveBeenCalledTimes(1)
|
||||
// })
|
||||
// it('displays an error message when not saved successfully', async () => {
|
||||
// mocks.$apollo.mutate.mockRejectedValue({ message: 'Ouch!' })
|
||||
// input.setValue(newSocialMediaUrl)
|
||||
// form.trigger('submit')
|
||||
// await Vue.nextTick()
|
||||
// await flushPromises()
|
||||
// expect(mocks.$toast.error).toHaveBeenCalledTimes(1)
|
||||
// })
|
||||
|
||||
// describe('success', () => {
|
||||
// beforeEach(async () => {
|
||||
// mocks.$apollo.mutate.mockResolvedValue({
|
||||
// data: { CreateSocialMedia: { id: 's2', url: newSocialMediaUrl } },
|
||||
// })
|
||||
// input.setValue(newSocialMediaUrl)
|
||||
// form.trigger('submit')
|
||||
// await Vue.nextTick()
|
||||
// })
|
||||
// describe('success', () => {
|
||||
// beforeEach(async () => {
|
||||
// mocks.$apollo.mutate.mockResolvedValue({
|
||||
// data: { CreateSocialMedia: { id: 's2', url: newSocialMediaUrl } },
|
||||
// })
|
||||
// input.setValue(newSocialMediaUrl)
|
||||
// form.trigger('submit')
|
||||
// await Vue.nextTick()
|
||||
// })
|
||||
|
||||
// it('sends the new url to the backend', () => {
|
||||
// const expected = expect.objectContaining({
|
||||
// variables: { url: newSocialMediaUrl },
|
||||
// })
|
||||
// it('sends the new url to the backend', () => {
|
||||
// const expected = expect.objectContaining({
|
||||
// variables: { url: newSocialMediaUrl },
|
||||
// })
|
||||
|
||||
// expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
|
||||
// })
|
||||
// expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
|
||||
// })
|
||||
|
||||
// it('displays a success message', async () => {
|
||||
// await flushPromises()
|
||||
// expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
|
||||
// })
|
||||
// it('displays a success message', async () => {
|
||||
// await flushPromises()
|
||||
// expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
|
||||
// })
|
||||
|
||||
// it('clears the form', async () => {
|
||||
// await flushPromises()
|
||||
// expect(input.value).toBe(undefined)
|
||||
// expect(submitButton.vm.$attrs.disabled).toBe(true)
|
||||
// })
|
||||
// })
|
||||
// })
|
||||
// it('clears the form', async () => {
|
||||
// await flushPromises()
|
||||
// expect(input.value).toBe(undefined)
|
||||
// expect(submitButton.vm.$attrs.disabled).toBe(true)
|
||||
// })
|
||||
// })
|
||||
})
|
||||
|
||||
describe('given existing social media links', () => {
|
||||
beforeEach(() => {
|
||||
@ -105,7 +106,7 @@ describe('my-social-media.vue', () => {
|
||||
}
|
||||
|
||||
wrapper = Wrapper()
|
||||
// form = wrapper.find('form')
|
||||
form = wrapper.find('form')
|
||||
})
|
||||
|
||||
describe('for each link it', () => {
|
||||
@ -133,37 +134,37 @@ describe('my-social-media.vue', () => {
|
||||
// expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
|
||||
// })
|
||||
|
||||
// describe('editing social media link', () => {
|
||||
// beforeEach(async () => {
|
||||
// const editButton = wrapper.find('.base-button[data-test="edit-button"]')
|
||||
// editButton.trigger('click')
|
||||
// await Vue.nextTick()
|
||||
// input = wrapper.find('input#editSocialMedia')
|
||||
// })
|
||||
describe('editing social media link', () => {
|
||||
beforeEach(async () => {
|
||||
const editButton = wrapper.find('.base-button[data-test="edit-button"]')
|
||||
editButton.trigger('click')
|
||||
await Vue.nextTick()
|
||||
input = wrapper.find('input#editSocialMedia')
|
||||
})
|
||||
|
||||
// it('disables adding new links while editing', () => {
|
||||
// const addInput = wrapper.find('input#addSocialMedia')
|
||||
// it('disables adding new links while editing', () => {
|
||||
// const addInput = wrapper.find('input#addSocialMedia')
|
||||
|
||||
// expect(addInput.exists()).toBe(false)
|
||||
// })
|
||||
// expect(addInput.exists()).toBe(false)
|
||||
// })
|
||||
|
||||
// it('sends the new url to the backend', async () => {
|
||||
// const expected = expect.objectContaining({
|
||||
// variables: { id: 's1', url: newSocialMediaUrl },
|
||||
// })
|
||||
// input.setValue(newSocialMediaUrl)
|
||||
// form.trigger('submit')
|
||||
// await Vue.nextTick()
|
||||
// expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
|
||||
// })
|
||||
it.only('sends the new url to the backend', async () => {
|
||||
const expected = expect.objectContaining({
|
||||
variables: { id: 's1', url: newSocialMediaUrl },
|
||||
})
|
||||
input.setValue(newSocialMediaUrl)
|
||||
form.trigger('submit')
|
||||
await Vue.nextTick()
|
||||
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
|
||||
})
|
||||
|
||||
// it('allows the user to cancel editing', async () => {
|
||||
// const cancelButton = wrapper.find('button#cancel')
|
||||
// cancelButton.trigger('click')
|
||||
// await Vue.nextTick()
|
||||
// expect(wrapper.find('input#editSocialMedia').exists()).toBe(false)
|
||||
// })
|
||||
// })
|
||||
// it('allows the user to cancel editing', async () => {
|
||||
// const cancelButton = wrapper.find('button#cancel')
|
||||
// cancelButton.trigger('click')
|
||||
// await Vue.nextTick()
|
||||
// expect(wrapper.find('input#editSocialMedia').exists()).toBe(false)
|
||||
// })
|
||||
})
|
||||
|
||||
// describe('deleting social media link', () => {
|
||||
// beforeEach(async () => {
|
||||
|
||||
@ -1,8 +1,16 @@
|
||||
<template>
|
||||
<my-something-list>
|
||||
<my-something-list :useFormData="useFormData" :useFormSchema="useFormSchema">
|
||||
<template #list-item="{ link }">
|
||||
<social-media-list-item :link="link" />
|
||||
</template>
|
||||
<template #edit-item>
|
||||
<ds-input
|
||||
id="editSocialMedia"
|
||||
model="socialMediaUrl"
|
||||
type="text"
|
||||
:placeholder="$t('settings.social-media.placeholder')"
|
||||
/>
|
||||
</template>
|
||||
</my-something-list>
|
||||
</template>
|
||||
|
||||
@ -15,5 +23,18 @@ export default {
|
||||
MySomethingList,
|
||||
SocialMediaListItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
useFormData: {
|
||||
socialMediaUrl: '',
|
||||
},
|
||||
useFormSchema: {
|
||||
socialMediaUrl: {
|
||||
type: 'url',
|
||||
message: this.$t('common.validations.url'),
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user