From 8f336a0d13315d2761714a19fd88e232700b1e63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= Date: Tue, 2 Aug 2022 08:30:14 +0200 Subject: [PATCH 01/33] Add todo comment to Cypress test --- .../UserProfile.SocialMedia/I_delete_a_social_media_link.js | 1 + 1 file changed, 1 insertion(+) diff --git a/cypress/integration/UserProfile.SocialMedia/I_delete_a_social_media_link.js b/cypress/integration/UserProfile.SocialMedia/I_delete_a_social_media_link.js index 10daffca1..73fd0a16e 100644 --- a/cypress/integration/UserProfile.SocialMedia/I_delete_a_social_media_link.js +++ b/cypress/integration/UserProfile.SocialMedia/I_delete_a_social_media_link.js @@ -3,4 +3,5 @@ import { When } from "cypress-cucumber-preprocessor/steps"; When('I delete a social media link', () => { cy.get(".base-button[title='Delete']") .click() + // TODO: add delition confirmation modal click, see issue }) \ No newline at end of file From 33026ba3e0201703bf0eedc9d3f0297828acc985 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= Date: Tue, 2 Aug 2022 08:30:54 +0200 Subject: [PATCH 02/33] Add explaining comments to confirmation modal --- webapp/components/Modal.vue | 2 ++ webapp/components/Modal/ConfirmModal.vue | 6 +++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/webapp/components/Modal.vue b/webapp/components/Modal.vue index a76adac3f..9195ad179 100644 --- a/webapp/components/Modal.vue +++ b/webapp/components/Modal.vue @@ -22,6 +22,7 @@ :name="name" @close="close" /> + Date: Tue, 2 Aug 2022 08:52:13 +0200 Subject: [PATCH 03/33] Refactor MySomethingList and social media list and adding deletion modal dialog --- .../MySomethingList/MySomethingList.spec.js | 58 ++++++++- .../MySomethingList/MySomethingList.vue | 122 +++++++++--------- webapp/locales/de.json | 11 +- webapp/locales/en.json | 9 +- webapp/pages/settings/my-social-media.spec.js | 10 +- webapp/pages/settings/my-social-media.vue | 94 +++++++------- 6 files changed, 189 insertions(+), 115 deletions(-) diff --git a/webapp/components/_new/features/MySomethingList/MySomethingList.spec.js b/webapp/components/_new/features/MySomethingList/MySomethingList.spec.js index 513207110..7a588f255 100644 --- a/webapp/components/_new/features/MySomethingList/MySomethingList.spec.js +++ b/webapp/components/_new/features/MySomethingList/MySomethingList.spec.js @@ -1,6 +1,7 @@ +import Vue from 'vue' +import Vuex from 'vuex' import { mount } from '@vue/test-utils' import MySomethingList from './MySomethingList.vue' -import Vue from 'vue' const localVue = global.localVue @@ -9,12 +10,23 @@ describe('MySomethingList.vue', () => { let propsData let data let mocks + let mutations beforeEach(() => { propsData = { useFormData: { dummy: '' }, useItems: [{ id: 'id', dummy: 'dummy' }], namePropertyKey: 'dummy', + texts: { + addButton: 'add-button', + addNew: 'add-new-something', + deleteModal: { + titleIdent: 'delete-modal.title', + messageIdent: 'delete-modal.message', + confirm: { icon: 'trash', buttonTextIdent: 'delete-modal.confirm-button' }, + }, + edit: 'edit-something', + }, callbacks: { edit: jest.fn(), submit: jest.fn(), delete: jest.fn() }, } data = () => { @@ -30,6 +42,9 @@ describe('MySomethingList.vue', () => { success: jest.fn(), }, } + mutations = { + 'modal/SET_OPEN': jest.fn().mockResolvedValueOnce(), + } }) describe('mount', () => { @@ -39,12 +54,16 @@ describe('MySomethingList.vue', () => { 'list-item': '
', 'edit-item': '
', } + const store = new Vuex.Store({ + mutations, + }) return mount(MySomethingList, { propsData, data, mocks, localVue, slots, + store, }) } @@ -114,13 +133,42 @@ describe('MySomethingList.vue', () => { ) }) - it('calls delete', async () => { + it('calls delete by committing "modal/SET_OPEN"', async () => { const deleteButton = wrapper.find('.base-button[data-test="delete-button"]') deleteButton.trigger('click') await Vue.nextTick() - const expectedItem = expect.objectContaining({ id: 'id', dummy: 'dummy' }) - expect(propsData.callbacks.delete).toHaveBeenCalledTimes(1) - expect(propsData.callbacks.delete).toHaveBeenCalledWith(expect.any(Object), expectedItem) + const expectedModalData = expect.objectContaining({ + name: 'confirm', + data: { + type: '', + resource: { id: '' }, + modalData: { + titleIdent: 'delete-modal.title', + messageIdent: 'delete-modal.message', + messageParams: { + name: 'dummy', + }, + buttons: { + confirm: { + danger: true, + icon: 'trash', + textIdent: 'delete-modal.confirm-button', + callback: expect.any(Function), + }, + cancel: { + icon: 'close', + textIdent: 'actions.cancel', + callback: expect.any(Function), + }, + }, + }, + }, + }) + expect(mutations['modal/SET_OPEN']).toHaveBeenCalledTimes(1) + expect(mutations['modal/SET_OPEN']).toHaveBeenCalledWith( + expect.any(Object), + expectedModalData, + ) }) }) }) diff --git a/webapp/components/_new/features/MySomethingList/MySomethingList.vue b/webapp/components/_new/features/MySomethingList/MySomethingList.vue index fbfcca932..3ae41d934 100644 --- a/webapp/components/_new/features/MySomethingList/MySomethingList.vue +++ b/webapp/components/_new/features/MySomethingList/MySomethingList.vue @@ -1,19 +1,10 @@