diff --git a/__tests__/unit/components/Modal/ModalCloseConfirmation.spec.js b/__tests__/unit/components/Modal/ModalCloseConfirmation.spec.js new file mode 100644 index 0000000000..82f55a66bf --- /dev/null +++ b/__tests__/unit/components/Modal/ModalCloseConfirmation.spec.js @@ -0,0 +1,50 @@ +import { shallowMount } from '@vue/test-utils' +import useI18nGlobally from '../../__utils__/i18n' +import { ModalCloseConfirmation } from '@/components/Modal' + +const i18n = useI18nGlobally() + +let wrapper +beforeEach(() => { + wrapper = shallowMount(ModalCloseConfirmation, { + i18n + }) +}) + +describe('ModalCloseConfirmation', () => { + describe('render popup', () => { + it('should render the close confirmation modal', () => { + expect(wrapper.isVueInstance()).toBeTrue() + }) + }) + + describe('close modal capabilities', () => { + describe('cancel event', () => { + it('should emit a cancel event when clicks the cancel buttom', () => { + const mask = wrapper.find('.ModalCloseConfirmation__cancel-button') + mask.trigger('click') + expect(wrapper.emitted('cancel')).toBeTruthy() + }) + + it('should emit a cancel event when clicks the mask', () => { + const mask = wrapper.find('.ModalCloseConfirmation__mask') + mask.trigger('click') + expect(wrapper.emitted('cancel')).toBeTruthy() + }) + + it('should not emit a cancel event when pressing inside the modal', () => { + const modal = wrapper.find('.ModalCloseConfirmation__container') + modal.trigger('click') + expect(wrapper.emitted('cancel')).toBeFalsy() + }) + }) + + describe('confirm event', () => { + it('should emit a confirm event when clicks the confirm buttom', () => { + const mask = wrapper.find('.ModalCloseConfirmation__confirm-button') + mask.trigger('click') + expect(wrapper.emitted('confirm')).toBeTruthy() + }) + }) + }) +}) diff --git a/__tests__/unit/components/Modal/ModalWindow.spec.js b/__tests__/unit/components/Modal/ModalWindow.spec.js index 969c78a305..56c3235924 100644 --- a/__tests__/unit/components/Modal/ModalWindow.spec.js +++ b/__tests__/unit/components/Modal/ModalWindow.spec.js @@ -1,5 +1,8 @@ import { mount } from '@vue/test-utils' import ModalWindow from '@/components/Modal' +import useI18nGlobally from '../../__utils__/i18n' + +const i18n = useI18nGlobally() const stubs = { Portal: '
' @@ -63,6 +66,104 @@ describe('ModalWindow', () => { }) }) + describe('close confirmation modal', () => { + const options = { + stubs, + i18n, + propsData: { + confirmClose: true + } + } + + describe('render', () => { + describe('without changes', () => { + it('should not render when click on mask', () => { + const wrapper = mount(ModalWindow, options) + const mask = wrapper.find('.ModalWindow') + mask.trigger('click') + expect(wrapper.contains('.ModalCloseConfirmation')).toBeFalsy() + }) + it('should not render when click on close button', () => { + const wrapper = mount(ModalWindow, options) + const mask = wrapper.find('.ModalWindow__close-button') + mask.trigger('click') + expect(wrapper.contains('.ModalCloseConfirmation')).toBeFalsy() + }) + }) + describe('with changes', () => { + it('should render when click on mask', () => { + const wrapper = mount(ModalWindow, options) + wrapper.setData({ showConfirmationModal: true }) + const mask = wrapper.find('.ModalWindow') + mask.trigger('click') + expect(wrapper.contains('.ModalCloseConfirmation')).toBeTruthy() + }) + + it('should render when click on close button', () => { + const wrapper = mount(ModalWindow, options) + wrapper.setData({ showConfirmationModal: true }) + const mask = wrapper.find('.ModalWindow__close-button') + mask.trigger('click') + expect(wrapper.contains('.ModalCloseConfirmation')).toBeTruthy() + }) + }) + }) + + describe('events', () => { + describe('close', () => { + it('should emit on confirm', () => { + const wrapper = mount(ModalWindow, options) + wrapper.setData({ showConfirmationModal: true }) + const confirmButton = wrapper.find('.ModalCloseConfirmation__confirm-button') + confirmButton.trigger('click') + expect(wrapper.emitted('close')).toBeTruthy() + }) + + it('should not emit on cancel', () => { + const wrapper = mount(ModalWindow, options) + wrapper.setData({ showConfirmationModal: true }) + const cancelButton = wrapper.find('.ModalCloseConfirmation__cancel-button') + cancelButton.trigger('click') + expect(wrapper.emitted('close')).toBeFalsy() + }) + }) + + describe('confirm', () => { + it('should close the confirmation modal', () => { + const wrapper = mount(ModalWindow, options) + wrapper.setData({ showConfirmationModal: true }) + const confirmButton = wrapper.find('.ModalCloseConfirmation__confirm-button') + confirmButton.trigger('click') + expect(wrapper.contains('.ModalCloseConfirmation')).toBeFalsy() + }) + it('should close the modal window', () => { + const wrapper = mount(ModalWindow, options) + wrapper.setData({ showConfirmationModal: true }) + const confirmButton = wrapper.find('.ModalCloseConfirmation__confirm-button') + confirmButton.trigger('click') + expect(wrapper.contains('.ModalCloseConfirmation')).toBeFalsy() + }) + }) + + describe('cancel', () => { + it('should close the confirmation modal', () => { + const wrapper = mount(ModalWindow, options) + wrapper.setData({ showConfirmationModal: true }) + const cancelButton = wrapper.find('.ModalCloseConfirmation__cancel-button') + cancelButton.trigger('click') + expect(wrapper.contains('.ModalCloseConfirmation')).toBeFalsy() + }) + it('should not close the modal window', () => { + const wrapper = mount(ModalWindow, options) + wrapper.setData({ showConfirmationModal: true }) + const cancelButton = wrapper.find('.ModalCloseConfirmation__cancel-button') + cancelButton.trigger('click') + expect(wrapper.contains('.ModalWindow')).toBeTruthy() + }) + }) + }) + }) + describe('close popup', () => { it('should emit a close event when clicks the close button', () => { const wrapper = mount(ModalWindow, { stubs }) diff --git a/src/renderer/components/Input/InputAddress.vue b/src/renderer/components/Input/InputAddress.vue index 7518952c60..7f3bfe4357 100644 --- a/src/renderer/components/Input/InputAddress.vue +++ b/src/renderer/components/Input/InputAddress.vue @@ -368,6 +368,9 @@ export default { updateInputValue (value) { this.inputValue = value + + this.$eventBus.emit('change') + // Inform Vuelidate that the value changed this.$v.model.$touch() }, diff --git a/src/renderer/components/Modal/ModalCloseConfirmation.vue b/src/renderer/components/Modal/ModalCloseConfirmation.vue new file mode 100644 index 0000000000..d9ec806991 --- /dev/null +++ b/src/renderer/components/Modal/ModalCloseConfirmation.vue @@ -0,0 +1,146 @@ + + + + + diff --git a/src/renderer/components/Modal/ModalWindow.vue b/src/renderer/components/Modal/ModalWindow.vue index d1ef85f1b1..1525235e07 100644 --- a/src/renderer/components/Modal/ModalWindow.vue +++ b/src/renderer/components/Modal/ModalWindow.vue @@ -17,6 +17,7 @@ [containerClassesMinimized]: !isMaximized, }]" class="ModalWindow__container flex flex-col mx-auto rounded-lg relative transition text-theme-text-content" + @change="onChange" @mousedown.stop="void 0" >