From 433c5fd8836b2bf3719ab7f97a5dd68dccf5d51c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= Date: Wed, 3 Nov 2021 13:55:11 +0100 Subject: [PATCH] Implement MySomethingList for social media, use edit-item slot - Pass formData and formSchema by properties. --- .../MySomethingList/MySomethingList.spec.js | 30 ++-- .../MySomethingList/MySomethingList.vue | 35 ++-- webapp/pages/settings/my-social-media.spec.js | 167 +++++++++--------- webapp/pages/settings/my-social-media.vue | 23 ++- 4 files changed, 145 insertions(+), 110 deletions(-) diff --git a/webapp/components/_new/features/MySomethingList/MySomethingList.spec.js b/webapp/components/_new/features/MySomethingList/MySomethingList.spec.js index 7be290b3e..ea19bce8c 100644 --- a/webapp/components/_new/features/MySomethingList/MySomethingList.spec.js +++ b/webapp/components/_new/features/MySomethingList/MySomethingList.spec.js @@ -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') diff --git a/webapp/components/_new/features/MySomethingList/MySomethingList.vue b/webapp/components/_new/features/MySomethingList/MySomethingList.vue index ef374066a..55c9f0808 100644 --- a/webapp/components/_new/features/MySomethingList/MySomethingList.vue +++ b/webapp/components/_new/features/MySomethingList/MySomethingList.vue @@ -16,12 +16,13 @@ - + /> --> +
@@ -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: {}, } diff --git a/webapp/pages/settings/my-social-media.spec.js b/webapp/pages/settings/my-social-media.spec.js index 13b507049..a9d7a15d0 100644 --- a/webapp/pages/settings/my-social-media.spec.js +++ b/webapp/pages/settings/my-social-media.spec.js @@ -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 () => { diff --git a/webapp/pages/settings/my-social-media.vue b/webapp/pages/settings/my-social-media.vue index 57220ce17..9c2bacfd8 100644 --- a/webapp/pages/settings/my-social-media.vue +++ b/webapp/pages/settings/my-social-media.vue @@ -1,8 +1,16 @@ @@ -15,5 +23,18 @@ export default { MySomethingList, SocialMediaListItem, }, + data() { + return { + useFormData: { + socialMediaUrl: '', + }, + useFormSchema: { + socialMediaUrl: { + type: 'url', + message: this.$t('common.validations.url'), + }, + }, + } + }, }