diff options
Diffstat (limited to 'spec/frontend/design_management')
6 files changed, 65 insertions, 40 deletions
diff --git a/spec/frontend/design_management/components/delete_button_spec.js b/spec/frontend/design_management/components/delete_button_spec.js index cee1eec792d..426a61f5a47 100644 --- a/spec/frontend/design_management/components/delete_button_spec.js +++ b/spec/frontend/design_management/components/delete_button_spec.js @@ -29,12 +29,12 @@ describe('Batch delete button component', () => { createComponent(); expect(findButton().exists()).toBe(true); - expect(findButton().attributes('disabled')).toBeFalsy(); + expect(findButton().attributes('disabled')).toBeUndefined(); }); it('renders disabled button when design is deleting', () => { createComponent({ isDeleting: true }); - expect(findButton().attributes('disabled')).toBeTruthy(); + expect(findButton().attributes('disabled')).toBe('true'); }); it('emits `delete-selected-designs` event on modal ok click', async () => { @@ -45,7 +45,7 @@ describe('Batch delete button component', () => { findModal().vm.$emit('ok'); await nextTick(); - expect(wrapper.emitted('delete-selected-designs')).toBeTruthy(); + expect(wrapper.emitted('delete-selected-designs')).toHaveLength(1); }); it('renders slot content', () => { diff --git a/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js b/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js index e36f5c79e3e..5fd61b25edc 100644 --- a/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js +++ b/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js @@ -1,16 +1,10 @@ import { mount } from '@vue/test-utils'; import { nextTick } from 'vue'; import Autosave from '~/autosave'; +import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal'; import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue'; -const showModal = jest.fn(); - -const GlModal = { - template: '<div><slot name="modal-title"></slot><slot></slot><slot name="modal-ok"></slot></div>', - methods: { - show: showModal, - }, -}; +jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal'); describe('Design reply form component', () => { let wrapper; @@ -19,7 +13,6 @@ describe('Design reply form component', () => { const findTextarea = () => wrapper.find('textarea'); const findSubmitButton = () => wrapper.findComponent({ ref: 'submitButton' }); const findCancelButton = () => wrapper.findComponent({ ref: 'cancelButton' }); - const findModal = () => wrapper.findComponent({ ref: 'cancelCommentModal' }); function createComponent(props = {}, mountOptions = {}) { wrapper = mount(DesignReplyForm, { @@ -29,7 +22,6 @@ describe('Design reply form component', () => { noteableId: 'gid://gitlab/DesignManagement::Design/6', ...props, }, - stubs: { GlModal }, ...mountOptions, }); } @@ -42,6 +34,7 @@ describe('Design reply form component', () => { afterEach(() => { wrapper.destroy(); window.gon = originalGon; + confirmAction.mockReset(); }); it('textarea has focus after component mount', () => { @@ -102,7 +95,7 @@ describe('Design reply form component', () => { }); it('submit button is disabled', () => { - expect(findSubmitButton().attributes().disabled).toBeTruthy(); + expect(findSubmitButton().attributes().disabled).toBe('disabled'); }); it('does not emit submitForm event on textarea ctrl+enter keydown', async () => { @@ -111,7 +104,7 @@ describe('Design reply form component', () => { }); await nextTick(); - expect(wrapper.emitted('submit-form')).toBeFalsy(); + expect(wrapper.emitted('submit-form')).toBeUndefined(); }); it('does not emit submitForm event on textarea meta+enter keydown', async () => { @@ -120,13 +113,13 @@ describe('Design reply form component', () => { }); await nextTick(); - expect(wrapper.emitted('submit-form')).toBeFalsy(); + expect(wrapper.emitted('submit-form')).toBeUndefined(); }); it('emits cancelForm event on pressing escape button on textarea', () => { findTextarea().trigger('keyup.esc'); - expect(wrapper.emitted('cancel-form')).toBeTruthy(); + expect(wrapper.emitted('cancel-form')).toHaveLength(1); }); it('emits cancelForm event on clicking Cancel button', () => { @@ -144,7 +137,7 @@ describe('Design reply form component', () => { }); it('submit button is enabled', () => { - expect(findSubmitButton().attributes().disabled).toBeFalsy(); + expect(findSubmitButton().attributes().disabled).toBeUndefined(); }); it('emits submitForm event on Comment button click', async () => { @@ -153,7 +146,7 @@ describe('Design reply form component', () => { findSubmitButton().vm.$emit('click'); await nextTick(); - expect(wrapper.emitted('submit-form')).toBeTruthy(); + expect(wrapper.emitted('submit-form')).toHaveLength(1); expect(autosaveResetSpy).toHaveBeenCalled(); }); @@ -165,7 +158,7 @@ describe('Design reply form component', () => { }); await nextTick(); - expect(wrapper.emitted('submit-form')).toBeTruthy(); + expect(wrapper.emitted('submit-form')).toHaveLength(1); expect(autosaveResetSpy).toHaveBeenCalled(); }); @@ -177,7 +170,7 @@ describe('Design reply form component', () => { }); await nextTick(); - expect(wrapper.emitted('submit-form')).toBeTruthy(); + expect(wrapper.emitted('submit-form')).toHaveLength(1); expect(autosaveResetSpy).toHaveBeenCalled(); }); @@ -185,13 +178,13 @@ describe('Design reply form component', () => { findTextarea().setValue('test2'); await nextTick(); - expect(wrapper.emitted('input')).toBeTruthy(); + expect(wrapper.emitted('input')).toEqual([['test'], ['test2']]); }); it('emits cancelForm event on Escape key if text was not changed', () => { findTextarea().trigger('keyup.esc'); - expect(wrapper.emitted('cancel-form')).toBeTruthy(); + expect(wrapper.emitted('cancel-form')).toHaveLength(1); }); it('opens confirmation modal on Escape key when text has changed', async () => { @@ -199,13 +192,13 @@ describe('Design reply form component', () => { await nextTick(); findTextarea().trigger('keyup.esc'); - expect(showModal).toHaveBeenCalled(); + expect(confirmAction).toHaveBeenCalled(); }); it('emits cancelForm event on Cancel button click if text was not changed', () => { findCancelButton().trigger('click'); - expect(wrapper.emitted('cancel-form')).toBeTruthy(); + expect(wrapper.emitted('cancel-form')).toHaveLength(1); }); it('opens confirmation modal on Cancel button click when text has changed', async () => { @@ -213,17 +206,41 @@ describe('Design reply form component', () => { await nextTick(); findCancelButton().trigger('click'); - expect(showModal).toHaveBeenCalled(); + expect(confirmAction).toHaveBeenCalled(); }); - it('emits cancelForm event on modal Ok button click', () => { + it('emits cancelForm event when confirmed', async () => { + confirmAction.mockResolvedValueOnce(true); const autosaveResetSpy = jest.spyOn(wrapper.vm.autosaveDiscussion, 'reset'); + wrapper.setProps({ value: 'test3' }); + await nextTick(); + findTextarea().trigger('keyup.esc'); - findModal().vm.$emit('ok'); + await nextTick(); + + expect(confirmAction).toHaveBeenCalled(); + await nextTick(); - expect(wrapper.emitted('cancel-form')).toBeTruthy(); + expect(wrapper.emitted('cancel-form')).toHaveLength(1); expect(autosaveResetSpy).toHaveBeenCalled(); }); + + it("doesn't emit cancelForm event when not confirmed", async () => { + confirmAction.mockResolvedValueOnce(false); + const autosaveResetSpy = jest.spyOn(wrapper.vm.autosaveDiscussion, 'reset'); + + wrapper.setProps({ value: 'test3' }); + await nextTick(); + + findTextarea().trigger('keyup.esc'); + await nextTick(); + + expect(confirmAction).toHaveBeenCalled(); + await nextTick(); + + expect(wrapper.emitted('cancel-form')).toBeUndefined(); + expect(autosaveResetSpy).not.toHaveBeenCalled(); + }); }); }); diff --git a/spec/frontend/design_management/components/design_overlay_spec.js b/spec/frontend/design_management/components/design_overlay_spec.js index 056959425a6..169f2dbdccb 100644 --- a/spec/frontend/design_management/components/design_overlay_spec.js +++ b/spec/frontend/design_management/components/design_overlay_spec.js @@ -170,6 +170,14 @@ describe('Design overlay component', () => { }); it('should call an update active discussion mutation when clicking a note without moving it', async () => { + createComponent({ + notes, + dimensions: { + width: 400, + height: 400, + }, + }); + const note = notes[0]; const { position } = note; const mutationVariables = { diff --git a/spec/frontend/design_management/pages/design/index_spec.js b/spec/frontend/design_management/pages/design/index_spec.js index 774e37a8b21..a11463ab663 100644 --- a/spec/frontend/design_management/pages/design/index_spec.js +++ b/spec/frontend/design_management/pages/design/index_spec.js @@ -23,7 +23,7 @@ import { DESIGN_SNOWPLOW_EVENT_TYPES, DESIGN_SERVICE_PING_EVENT_TYPES, } from '~/design_management/utils/tracking'; -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import mockAllVersions from '../../mock_data/all_versions'; import design from '../../mock_data/design'; import mockResponseWithDesigns from '../../mock_data/designs'; @@ -301,8 +301,8 @@ describe('Design management design index page', () => { wrapper.vm.onDesignQueryResult({ data: mockResponseNoDesigns, loading: false }); await nextTick(); - expect(createFlash).toHaveBeenCalledTimes(1); - expect(createFlash).toHaveBeenCalledWith({ message: DESIGN_NOT_FOUND_ERROR }); + expect(createAlert).toHaveBeenCalledTimes(1); + expect(createAlert).toHaveBeenCalledWith({ message: DESIGN_NOT_FOUND_ERROR }); expect(router.push).toHaveBeenCalledTimes(1); expect(router.push).toHaveBeenCalledWith({ name: DESIGNS_ROUTE_NAME }); }); @@ -323,8 +323,8 @@ describe('Design management design index page', () => { wrapper.vm.onDesignQueryResult({ data: mockResponseWithDesigns, loading: false }); await nextTick(); - expect(createFlash).toHaveBeenCalledTimes(1); - expect(createFlash).toHaveBeenCalledWith({ message: DESIGN_VERSION_NOT_EXIST_ERROR }); + expect(createAlert).toHaveBeenCalledTimes(1); + expect(createAlert).toHaveBeenCalledWith({ message: DESIGN_VERSION_NOT_EXIST_ERROR }); expect(router.push).toHaveBeenCalledTimes(1); expect(router.push).toHaveBeenCalledWith({ name: DESIGNS_ROUTE_NAME }); }); diff --git a/spec/frontend/design_management/pages/index_spec.js b/spec/frontend/design_management/pages/index_spec.js index 1033b509419..76ece922ded 100644 --- a/spec/frontend/design_management/pages/index_spec.js +++ b/spec/frontend/design_management/pages/index_spec.js @@ -29,7 +29,7 @@ import { DESIGN_TRACKING_PAGE_NAME, DESIGN_SNOWPLOW_EVENT_TYPES, } from '~/design_management/utils/tracking'; -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import DesignDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue'; import { designListQueryResponse, @@ -808,7 +808,7 @@ describe('Design management index page', () => { await moveDesigns(wrapper); await waitForPromises(); - expect(createFlash).toHaveBeenCalledWith({ message: 'Houston, we have a problem' }); + expect(createAlert).toHaveBeenCalledWith({ message: 'Houston, we have a problem' }); }); it('displays alert if mutation had a non-recoverable error', async () => { diff --git a/spec/frontend/design_management/utils/cache_update_spec.js b/spec/frontend/design_management/utils/cache_update_spec.js index 5e2c37e24a1..42777adfd58 100644 --- a/spec/frontend/design_management/utils/cache_update_spec.js +++ b/spec/frontend/design_management/utils/cache_update_spec.js @@ -10,7 +10,7 @@ import { ADD_IMAGE_DIFF_NOTE_ERROR, UPDATE_IMAGE_DIFF_NOTE_ERROR, } from '~/design_management/utils/error_messages'; -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import design from '../mock_data/design'; jest.mock('~/flash.js'); @@ -32,10 +32,10 @@ describe('Design Management cache update', () => { ${'updateStoreAfterUploadDesign'} | ${updateStoreAfterUploadDesign} | ${mockErrors[0]} | ${[]} ${'updateStoreAfterUpdateImageDiffNote'} | ${updateStoreAfterRepositionImageDiffNote} | ${UPDATE_IMAGE_DIFF_NOTE_ERROR} | ${[]} `('$fnName handles errors in response', ({ subject, extraArgs, errorMessage }) => { - expect(createFlash).not.toHaveBeenCalled(); + expect(createAlert).not.toHaveBeenCalled(); expect(() => subject(mockStore, { errors: mockErrors }, {}, ...extraArgs)).toThrow(); - expect(createFlash).toHaveBeenCalledTimes(1); - expect(createFlash).toHaveBeenCalledWith({ message: errorMessage }); + expect(createAlert).toHaveBeenCalledTimes(1); + expect(createAlert).toHaveBeenCalledWith({ message: errorMessage }); }); }); }); |