diff options
Diffstat (limited to 'spec/frontend/design_management')
16 files changed, 220 insertions, 1210 deletions
diff --git a/spec/frontend/design_management/components/__snapshots__/design_scaler_spec.js.snap b/spec/frontend/design_management/components/__snapshots__/design_scaler_spec.js.snap deleted file mode 100644 index 0679b485f77..00000000000 --- a/spec/frontend/design_management/components/__snapshots__/design_scaler_spec.js.snap +++ /dev/null @@ -1,115 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Design management design scaler component minus and reset buttons are disabled when scale === 1 1`] = ` -<div - class="design-scaler btn-group" - role="group" -> - <button - class="btn" - disabled="disabled" - > - <span - class="gl-display-flex gl-justify-content-center gl-align-items-center gl-icon s16" - > - - – - - </span> - </button> - - <button - class="btn" - disabled="disabled" - > - <gl-icon-stub - name="redo" - size="16" - /> - </button> - - <button - class="btn" - > - <gl-icon-stub - name="plus" - size="16" - /> - </button> -</div> -`; - -exports[`Design management design scaler component minus and reset buttons are enabled when scale > 1 1`] = ` -<div - class="design-scaler btn-group" - role="group" -> - <button - class="btn" - > - <span - class="gl-display-flex gl-justify-content-center gl-align-items-center gl-icon s16" - > - - – - - </span> - </button> - - <button - class="btn" - > - <gl-icon-stub - name="redo" - size="16" - /> - </button> - - <button - class="btn" - > - <gl-icon-stub - name="plus" - size="16" - /> - </button> -</div> -`; - -exports[`Design management design scaler component plus button is disabled when scale === 2 1`] = ` -<div - class="design-scaler btn-group" - role="group" -> - <button - class="btn" - > - <span - class="gl-display-flex gl-justify-content-center gl-align-items-center gl-icon s16" - > - - – - - </span> - </button> - - <button - class="btn" - > - <gl-icon-stub - name="redo" - size="16" - /> - </button> - - <button - class="btn" - disabled="disabled" - > - <gl-icon-stub - name="plus" - size="16" - /> - </button> -</div> -`; diff --git a/spec/frontend/design_management/components/design_overlay_spec.js b/spec/frontend/design_management/components/design_overlay_spec.js index 4ef067e3f5e..f4fd4c70dfc 100644 --- a/spec/frontend/design_management/components/design_overlay_spec.js +++ b/spec/frontend/design_management/components/design_overlay_spec.js @@ -243,11 +243,11 @@ describe('Design overlay component', () => { }); }); - describe('without [adminNote] permission', () => { + describe('without [repositionNote] permission', () => { const mockNoteNotAuthorised = { ...notes[0], userPermissions: { - adminNote: false, + repositionNote: false, }, }; @@ -412,18 +412,18 @@ describe('Design overlay component', () => { describe('canMoveNote', () => { it.each` - adminNotePermission | canMoveNoteResult - ${true} | ${true} - ${false} | ${false} - ${undefined} | ${false} + repositionNotePermission | canMoveNoteResult + ${true} | ${true} + ${false} | ${false} + ${undefined} | ${false} `( - 'returns [$canMoveNoteResult] when [adminNote permission] is [$adminNotePermission]', - ({ adminNotePermission, canMoveNoteResult }) => { + 'returns [$canMoveNoteResult] when [repositionNote permission] is [$repositionNotePermission]', + ({ repositionNotePermission, canMoveNoteResult }) => { createComponent(); const note = { userPermissions: { - adminNote: adminNotePermission, + repositionNote: repositionNotePermission, }, }; expect(wrapper.vm.canMoveNote(note)).toBe(canMoveNoteResult); diff --git a/spec/frontend/design_management/components/design_scaler_spec.js b/spec/frontend/design_management/components/design_scaler_spec.js index b06d2f924df..290ec3a18e3 100644 --- a/spec/frontend/design_management/components/design_scaler_spec.js +++ b/spec/frontend/design_management/components/design_scaler_spec.js @@ -1,67 +1,93 @@ import { shallowMount } from '@vue/test-utils'; +import { GlButton } from '@gitlab/ui'; import DesignScaler from '~/design_management/components/design_scaler.vue'; describe('Design management design scaler component', () => { let wrapper; - function createComponent(propsData, data = {}) { - wrapper = shallowMount(DesignScaler, { - propsData, - }); - wrapper.setData(data); - } + const getButtons = () => wrapper.findAll(GlButton); + const getDecreaseScaleButton = () => getButtons().at(0); + const getResetScaleButton = () => getButtons().at(1); + const getIncreaseScaleButton = () => getButtons().at(2); - afterEach(() => { - wrapper.destroy(); - }); + const setScale = scale => wrapper.vm.setScale(scale); - const getButton = type => { - const buttonTypeOrder = ['minus', 'reset', 'plus']; - const buttons = wrapper.findAll('button'); - return buttons.at(buttonTypeOrder.indexOf(type)); + const createComponent = () => { + wrapper = shallowMount(DesignScaler); }; - it('emits @scale event when "plus" button clicked', () => { + beforeEach(() => { createComponent(); + }); - getButton('plus').trigger('click'); - expect(wrapper.emitted('scale')).toEqual([[1.2]]); + afterEach(() => { + wrapper.destroy(); + wrapper = null; }); - it('emits @scale event when "reset" button clicked (scale > 1)', () => { - createComponent({}, { scale: 1.6 }); - return wrapper.vm.$nextTick().then(() => { - getButton('reset').trigger('click'); - expect(wrapper.emitted('scale')).toEqual([[1]]); + describe('when `scale` value is greater than 1', () => { + beforeEach(async () => { + setScale(1.6); + await wrapper.vm.$nextTick(); }); - }); - it('emits @scale event when "minus" button clicked (scale > 1)', () => { - createComponent({}, { scale: 1.6 }); + it('emits @scale event when "reset" button clicked', () => { + getResetScaleButton().vm.$emit('click'); + expect(wrapper.emitted('scale')[1]).toEqual([1]); + }); - return wrapper.vm.$nextTick().then(() => { - getButton('minus').trigger('click'); - expect(wrapper.emitted('scale')).toEqual([[1.4]]); + it('emits @scale event when "decrement" button clicked', async () => { + getDecreaseScaleButton().vm.$emit('click'); + expect(wrapper.emitted('scale')[1]).toEqual([1.4]); }); - }); - it('minus and reset buttons are disabled when scale === 1', () => { - createComponent(); + it('enables the "reset" button', () => { + const resetButton = getResetScaleButton(); + + expect(resetButton.exists()).toBe(true); + expect(resetButton.props('disabled')).toBe(false); + }); + + it('enables the "decrement" button', () => { + const decrementButton = getDecreaseScaleButton(); - expect(wrapper.element).toMatchSnapshot(); + expect(decrementButton.exists()).toBe(true); + expect(decrementButton.props('disabled')).toBe(false); + }); + }); + + it('emits @scale event when "plus" button clicked', () => { + getIncreaseScaleButton().vm.$emit('click'); + expect(wrapper.emitted('scale')).toEqual([[1.2]]); }); - it('minus and reset buttons are enabled when scale > 1', () => { - createComponent({}, { scale: 1.2 }); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.element).toMatchSnapshot(); + describe('when `scale` value is 1', () => { + it('disables the "reset" button', () => { + const resetButton = getResetScaleButton(); + + expect(resetButton.exists()).toBe(true); + expect(resetButton.props('disabled')).toBe(true); + }); + + it('disables the "decrement" button', () => { + const decrementButton = getDecreaseScaleButton(); + + expect(decrementButton.exists()).toBe(true); + expect(decrementButton.props('disabled')).toBe(true); }); }); - it('plus button is disabled when scale === 2', () => { - createComponent({}, { scale: 2 }); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.element).toMatchSnapshot(); + describe('when `scale` value is 2 (maximum)', () => { + beforeEach(async () => { + setScale(2); + await wrapper.vm.$nextTick(); + }); + + it('disables the "increment" button', () => { + const incrementButton = getIncreaseScaleButton(); + + expect(incrementButton.exists()).toBe(true); + expect(incrementButton.props('disabled')).toBe(true); }); }); }); diff --git a/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap index 723ac0491a7..e2ad4c68bea 100644 --- a/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap +++ b/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap @@ -46,6 +46,7 @@ exports[`Design management toolbar component renders design and updated data 1`] href="/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d" icon="download" size="medium" + title="Download design" variant="default" /> @@ -57,6 +58,7 @@ exports[`Design management toolbar component renders design and updated data 1`] buttonvariant="warning" class="gl-ml-3" hasselecteddesigns="true" + title="Archive design" /> </header> `; diff --git a/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap b/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap index eaa7460ae15..2f857247303 100644 --- a/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap +++ b/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap @@ -14,41 +14,7 @@ exports[`Design management upload button component renders inverted upload desig > Upload designs - - <!----> - </gl-button-stub> - - <input - accept="image/*" - class="hide" - multiple="multiple" - name="design_file" - type="file" - /> -</div> -`; - -exports[`Design management upload button component renders loading icon 1`] = ` -<div> - <gl-button-stub - buttontextclasses="" - category="primary" - disabled="true" - icon="" - size="small" - title="Adding a design with the same filename replaces the file in a new version." - variant="default" - > - - Upload designs - - <gl-loading-icon-stub - class="ml-1" - color="orange" - inline="true" - label="Loading" - size="sm" - /> + </gl-button-stub> <input @@ -73,8 +39,7 @@ exports[`Design management upload button component renders upload design button > Upload designs - - <!----> + </gl-button-stub> <input diff --git a/spec/frontend/design_management/components/upload/__snapshots__/design_dropzone_spec.js.snap b/spec/frontend/design_management/components/upload/__snapshots__/design_dropzone_spec.js.snap deleted file mode 100644 index 1ca5360fa59..00000000000 --- a/spec/frontend/design_management/components/upload/__snapshots__/design_dropzone_spec.js.snap +++ /dev/null @@ -1,501 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Design management dropzone component when dragging renders correct template when drag event contains files 1`] = ` -<div - class="gl-w-full gl-relative" -> - <button - class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3" - > - <div - class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" - data-testid="dropzone-area" - > - <gl-icon-stub - class="gl-mb-2" - name="upload" - size="24" - /> - - <p - class="gl-mb-0" - > - <gl-sprintf-stub - message="Drop or %{linkStart}upload%{linkEnd} designs to attach" - /> - </p> - </div> - </button> - - <input - accept="image/*" - class="hide" - multiple="multiple" - name="design_file" - type="file" - /> - - <transition-stub - name="design-dropzone-fade" - > - <div - class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white" - style="" - > - <div - class="mw-50 gl-text-center" - style="display: none;" - > - <h3 - class="" - > - Oh no! - </h3> - - <span> - You are trying to upload something other than an image. Please upload a .png, .jpg, .jpeg, .gif, .bmp, .tiff or .ico. - </span> - </div> - - <div - class="mw-50 gl-text-center" - style="" - > - <h3 - class="" - > - Incoming! - </h3> - - <span> - Drop your designs to start your upload. - </span> - </div> - </div> - </transition-stub> -</div> -`; - -exports[`Design management dropzone component when dragging renders correct template when drag event contains files and text 1`] = ` -<div - class="gl-w-full gl-relative" -> - <button - class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3" - > - <div - class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" - data-testid="dropzone-area" - > - <gl-icon-stub - class="gl-mb-2" - name="upload" - size="24" - /> - - <p - class="gl-mb-0" - > - <gl-sprintf-stub - message="Drop or %{linkStart}upload%{linkEnd} designs to attach" - /> - </p> - </div> - </button> - - <input - accept="image/*" - class="hide" - multiple="multiple" - name="design_file" - type="file" - /> - - <transition-stub - name="design-dropzone-fade" - > - <div - class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white" - style="" - > - <div - class="mw-50 gl-text-center" - style="display: none;" - > - <h3 - class="" - > - Oh no! - </h3> - - <span> - You are trying to upload something other than an image. Please upload a .png, .jpg, .jpeg, .gif, .bmp, .tiff or .ico. - </span> - </div> - - <div - class="mw-50 gl-text-center" - style="" - > - <h3 - class="" - > - Incoming! - </h3> - - <span> - Drop your designs to start your upload. - </span> - </div> - </div> - </transition-stub> -</div> -`; - -exports[`Design management dropzone component when dragging renders correct template when drag event contains text 1`] = ` -<div - class="gl-w-full gl-relative" -> - <button - class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3" - > - <div - class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" - data-testid="dropzone-area" - > - <gl-icon-stub - class="gl-mb-2" - name="upload" - size="24" - /> - - <p - class="gl-mb-0" - > - <gl-sprintf-stub - message="Drop or %{linkStart}upload%{linkEnd} designs to attach" - /> - </p> - </div> - </button> - - <input - accept="image/*" - class="hide" - multiple="multiple" - name="design_file" - type="file" - /> - - <transition-stub - name="design-dropzone-fade" - > - <div - class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white" - style="" - > - <div - class="mw-50 gl-text-center" - > - <h3 - class="" - > - Oh no! - </h3> - - <span> - You are trying to upload something other than an image. Please upload a .png, .jpg, .jpeg, .gif, .bmp, .tiff or .ico. - </span> - </div> - - <div - class="mw-50 gl-text-center" - style="display: none;" - > - <h3 - class="" - > - Incoming! - </h3> - - <span> - Drop your designs to start your upload. - </span> - </div> - </div> - </transition-stub> -</div> -`; - -exports[`Design management dropzone component when dragging renders correct template when drag event is empty 1`] = ` -<div - class="gl-w-full gl-relative" -> - <button - class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3" - > - <div - class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" - data-testid="dropzone-area" - > - <gl-icon-stub - class="gl-mb-2" - name="upload" - size="24" - /> - - <p - class="gl-mb-0" - > - <gl-sprintf-stub - message="Drop or %{linkStart}upload%{linkEnd} designs to attach" - /> - </p> - </div> - </button> - - <input - accept="image/*" - class="hide" - multiple="multiple" - name="design_file" - type="file" - /> - - <transition-stub - name="design-dropzone-fade" - > - <div - class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white" - style="" - > - <div - class="mw-50 gl-text-center" - > - <h3 - class="" - > - Oh no! - </h3> - - <span> - You are trying to upload something other than an image. Please upload a .png, .jpg, .jpeg, .gif, .bmp, .tiff or .ico. - </span> - </div> - - <div - class="mw-50 gl-text-center" - style="display: none;" - > - <h3 - class="" - > - Incoming! - </h3> - - <span> - Drop your designs to start your upload. - </span> - </div> - </div> - </transition-stub> -</div> -`; - -exports[`Design management dropzone component when dragging renders correct template when dragging stops 1`] = ` -<div - class="gl-w-full gl-relative" -> - <button - class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3" - > - <div - class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" - data-testid="dropzone-area" - > - <gl-icon-stub - class="gl-mb-2" - name="upload" - size="24" - /> - - <p - class="gl-mb-0" - > - <gl-sprintf-stub - message="Drop or %{linkStart}upload%{linkEnd} designs to attach" - /> - </p> - </div> - </button> - - <input - accept="image/*" - class="hide" - multiple="multiple" - name="design_file" - type="file" - /> - - <transition-stub - name="design-dropzone-fade" - > - <div - class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white" - style="display: none;" - > - <div - class="mw-50 gl-text-center" - > - <h3 - class="" - > - Oh no! - </h3> - - <span> - You are trying to upload something other than an image. Please upload a .png, .jpg, .jpeg, .gif, .bmp, .tiff or .ico. - </span> - </div> - - <div - class="mw-50 gl-text-center" - style="display: none;" - > - <h3 - class="" - > - Incoming! - </h3> - - <span> - Drop your designs to start your upload. - </span> - </div> - </div> - </transition-stub> -</div> -`; - -exports[`Design management dropzone component when no slot provided renders default dropzone card 1`] = ` -<div - class="gl-w-full gl-relative" -> - <button - class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3" - > - <div - class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" - data-testid="dropzone-area" - > - <gl-icon-stub - class="gl-mb-2" - name="upload" - size="24" - /> - - <p - class="gl-mb-0" - > - <gl-sprintf-stub - message="Drop or %{linkStart}upload%{linkEnd} designs to attach" - /> - </p> - </div> - </button> - - <input - accept="image/*" - class="hide" - multiple="multiple" - name="design_file" - type="file" - /> - - <transition-stub - name="design-dropzone-fade" - > - <div - class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white" - style="display: none;" - > - <div - class="mw-50 gl-text-center" - > - <h3 - class="" - > - Oh no! - </h3> - - <span> - You are trying to upload something other than an image. Please upload a .png, .jpg, .jpeg, .gif, .bmp, .tiff or .ico. - </span> - </div> - - <div - class="mw-50 gl-text-center" - style="display: none;" - > - <h3 - class="" - > - Incoming! - </h3> - - <span> - Drop your designs to start your upload. - </span> - </div> - </div> - </transition-stub> -</div> -`; - -exports[`Design management dropzone component when slot provided renders dropzone with slot content 1`] = ` -<div - class="gl-w-full gl-relative" -> - <div> - dropzone slot - </div> - - <transition-stub - name="design-dropzone-fade" - > - <div - class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white" - style="display: none;" - > - <div - class="mw-50 gl-text-center" - > - <h3 - class="" - > - Oh no! - </h3> - - <span> - You are trying to upload something other than an image. Please upload a .png, .jpg, .jpeg, .gif, .bmp, .tiff or .ico. - </span> - </div> - - <div - class="mw-50 gl-text-center" - style="display: none;" - > - <h3 - class="" - > - Incoming! - </h3> - - <span> - Drop your designs to start your upload. - </span> - </div> - </div> - </transition-stub> -</div> -`; diff --git a/spec/frontend/design_management/components/upload/button_spec.js b/spec/frontend/design_management/components/upload/button_spec.js index c0a9693dc37..ea738496ad6 100644 --- a/spec/frontend/design_management/components/upload/button_spec.js +++ b/spec/frontend/design_management/components/upload/button_spec.js @@ -1,10 +1,11 @@ import { shallowMount } from '@vue/test-utils'; +import { GlButton } from '@gitlab/ui'; import UploadButton from '~/design_management/components/upload/button.vue'; describe('Design management upload button component', () => { let wrapper; - function createComponent(isSaving = false, isInverted = false) { + function createComponent({ isSaving = false, isInverted = false } = {}) { wrapper = shallowMount(UploadButton, { propsData: { isSaving, @@ -24,15 +25,19 @@ describe('Design management upload button component', () => { }); it('renders inverted upload design button', () => { - createComponent(false, true); + createComponent({ isInverted: true }); expect(wrapper.element).toMatchSnapshot(); }); - it('renders loading icon', () => { - createComponent(true); + describe('when `isSaving` prop is `true`', () => { + it('Button `loading` prop is `true`', () => { + createComponent({ isSaving: true }); - expect(wrapper.element).toMatchSnapshot(); + const button = wrapper.find(GlButton); + expect(button.exists()).toBe(true); + expect(button.props('loading')).toBe(true); + }); }); describe('onFileUploadChange', () => { diff --git a/spec/frontend/design_management/components/upload/design_dropzone_spec.js b/spec/frontend/design_management/components/upload/design_dropzone_spec.js deleted file mode 100644 index bf97399368f..00000000000 --- a/spec/frontend/design_management/components/upload/design_dropzone_spec.js +++ /dev/null @@ -1,153 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; -import { GlIcon } from '@gitlab/ui'; -import DesignDropzone from '~/design_management/components/upload/design_dropzone.vue'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; - -jest.mock('~/flash'); - -describe('Design management dropzone component', () => { - let wrapper; - - const mockDragEvent = ({ types = ['Files'], files = [] }) => { - return { dataTransfer: { types, files } }; - }; - - const findDropzoneCard = () => wrapper.find('.design-dropzone-card'); - const findDropzoneArea = () => wrapper.find('[data-testid="dropzone-area"]'); - const findIcon = () => wrapper.find(GlIcon); - - function createComponent({ slots = {}, data = {}, props = {} } = {}) { - wrapper = shallowMount(DesignDropzone, { - slots, - propsData: { - hasDesigns: true, - ...props, - }, - data() { - return data; - }, - }); - } - - afterEach(() => { - wrapper.destroy(); - }); - - describe('when slot provided', () => { - it('renders dropzone with slot content', () => { - createComponent({ - slots: { - default: ['<div>dropzone slot</div>'], - }, - }); - - expect(wrapper.element).toMatchSnapshot(); - }); - }); - - describe('when no slot provided', () => { - it('renders default dropzone card', () => { - createComponent(); - - expect(wrapper.element).toMatchSnapshot(); - }); - - it('triggers click event on file input element when clicked', () => { - createComponent(); - const clickSpy = jest.spyOn(wrapper.find('input').element, 'click'); - - findDropzoneCard().trigger('click'); - expect(clickSpy).toHaveBeenCalled(); - }); - }); - - describe('when dragging', () => { - it.each` - description | eventPayload - ${'is empty'} | ${{}} - ${'contains text'} | ${mockDragEvent({ types: ['text'] })} - ${'contains files and text'} | ${mockDragEvent({ types: ['Files', 'text'] })} - ${'contains files'} | ${mockDragEvent({ types: ['Files'] })} - `('renders correct template when drag event $description', ({ eventPayload }) => { - createComponent(); - - wrapper.trigger('dragenter', eventPayload); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.element).toMatchSnapshot(); - }); - }); - - it('renders correct template when dragging stops', () => { - createComponent(); - - wrapper.trigger('dragenter'); - return wrapper.vm - .$nextTick() - .then(() => { - wrapper.trigger('dragleave'); - return wrapper.vm.$nextTick(); - }) - .then(() => { - expect(wrapper.element).toMatchSnapshot(); - }); - }); - }); - - describe('when dropping', () => { - it('emits upload event', () => { - createComponent(); - const mockFile = { name: 'test', type: 'image/jpg' }; - const mockEvent = mockDragEvent({ files: [mockFile] }); - - wrapper.trigger('dragenter', mockEvent); - return wrapper.vm - .$nextTick() - .then(() => { - wrapper.trigger('drop', mockEvent); - return wrapper.vm.$nextTick(); - }) - .then(() => { - expect(wrapper.emitted().change[0]).toEqual([[mockFile]]); - }); - }); - }); - - describe('ondrop', () => { - const mockData = { dragCounter: 1, isDragDataValid: true }; - - describe('when drag data is valid', () => { - it('emits upload event for valid files', () => { - createComponent({ data: mockData }); - - const mockFile = { type: 'image/jpg' }; - const mockEvent = mockDragEvent({ files: [mockFile] }); - - wrapper.vm.ondrop(mockEvent); - expect(wrapper.emitted().change[0]).toEqual([[mockFile]]); - }); - - it('calls createFlash when files are invalid', () => { - createComponent({ data: mockData }); - - const mockEvent = mockDragEvent({ files: [{ type: 'audio/midi' }] }); - - wrapper.vm.ondrop(mockEvent); - expect(createFlash).toHaveBeenCalledTimes(1); - }); - }); - }); - - it('applies correct classes when there are no designs or no design saving loader', () => { - createComponent({ props: { hasDesigns: false } }); - expect(findDropzoneArea().classes()).not.toContain('gl-flex-direction-column'); - expect(findIcon().classes()).toEqual(['gl-mr-3', 'gl-text-gray-500']); - expect(findIcon().props('size')).toBe(16); - }); - - it('applies correct classes when there are designs or design saving loader', () => { - createComponent({ props: { hasDesigns: true } }); - expect(findDropzoneArea().classes()).toContain('gl-flex-direction-column'); - expect(findIcon().classes()).toEqual(['gl-mb-2']); - expect(findIcon().props('size')).toBe(24); - }); -}); diff --git a/spec/frontend/design_management/mock_data/apollo_mock.js b/spec/frontend/design_management/mock_data/apollo_mock.js index 5e41210221b..e53ad2e6afe 100644 --- a/spec/frontend/design_management/mock_data/apollo_mock.js +++ b/spec/frontend/design_management/mock_data/apollo_mock.js @@ -1,13 +1,18 @@ export const designListQueryResponse = { data: { project: { + __typename: 'Project', id: '1', issue: { + __typename: 'Issue', designCollection: { + __typename: 'DesignCollection', copyState: 'READY', designs: { + __typename: 'DesignConnection', nodes: [ { + __typename: 'Design', id: '1', event: 'NONE', filename: 'fox_1.jpg', @@ -15,10 +20,12 @@ export const designListQueryResponse = { image: 'image-1', imageV432x230: 'image-1', currentUserTodos: { + __typename: 'ToDo', nodes: [], }, }, { + __typename: 'Design', id: '2', event: 'NONE', filename: 'fox_2.jpg', @@ -26,10 +33,12 @@ export const designListQueryResponse = { image: 'image-2', imageV432x230: 'image-2', currentUserTodos: { + __typename: 'ToDo', nodes: [], }, }, { + __typename: 'Design', id: '3', event: 'NONE', filename: 'fox_3.jpg', @@ -37,12 +46,14 @@ export const designListQueryResponse = { image: 'image-3', imageV432x230: 'image-3', currentUserTodos: { + __typename: 'ToDo', nodes: [], }, }, ], }, versions: { + __typename: 'DesignVersion', nodes: [], }, }, @@ -82,9 +93,11 @@ export const designUploadMutationUpdatedResponse = { export const permissionsQueryResponse = { data: { project: { + __typename: 'Project', id: '1', issue: { - userPermissions: { createDesign: true }, + __typename: 'Issue', + userPermissions: { __typename: 'UserPermissions', createDesign: true }, }, }, }, @@ -92,6 +105,7 @@ export const permissionsQueryResponse = { export const reorderedDesigns = [ { + __typename: 'Design', id: '2', event: 'NONE', filename: 'fox_2.jpg', @@ -99,10 +113,12 @@ export const reorderedDesigns = [ image: 'image-2', imageV432x230: 'image-2', currentUserTodos: { + __typename: 'ToDo', nodes: [], }, }, { + __typename: 'Design', id: '1', event: 'NONE', filename: 'fox_1.jpg', @@ -110,10 +126,12 @@ export const reorderedDesigns = [ image: 'image-1', imageV432x230: 'image-1', currentUserTodos: { + __typename: 'ToDo', nodes: [], }, }, { + __typename: 'Design', id: '3', event: 'NONE', filename: 'fox_3.jpg', @@ -121,6 +139,7 @@ export const reorderedDesigns = [ image: 'image-3', imageV432x230: 'image-3', currentUserTodos: { + __typename: 'ToDo', nodes: [], }, }, @@ -130,7 +149,9 @@ export const moveDesignMutationResponse = { data: { designManagementMove: { designCollection: { + __typename: 'DesignCollection', designs: { + __typename: 'DesignConnection', nodes: [...reorderedDesigns], }, }, diff --git a/spec/frontend/design_management/mock_data/discussion.js b/spec/frontend/design_management/mock_data/discussion.js index fbf9a2fdcc1..0e59ef29f8f 100644 --- a/spec/frontend/design_management/mock_data/discussion.js +++ b/spec/frontend/design_management/mock_data/discussion.js @@ -18,7 +18,7 @@ export default { }, createdAt: '2020-05-08T07:10:45Z', userPermissions: { - adminNote: true, + repositionNote: true, }, resolved: false, }, diff --git a/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap index 2d29b79e31c..abd455ae750 100644 --- a/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap +++ b/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap @@ -1,240 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Design management index page designs does not render toolbar when there is no permission 1`] = ` -<div - class="gl-mt-5" - data-testid="designs-root" -> - <!----> - - <div - class="gl-mt-6" - > - <ol - class="list-unstyled row" - > - <li - class="gl-flex-direction-column col-md-6 col-lg-3 gl-mb-3" - data-testid="design-dropzone-wrapper" - > - <design-dropzone-stub - class="design-list-item design-list-item-new" - data-qa-selector="design_dropzone_content" - hasdesigns="true" - /> - </li> - <li - class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile" - > - <design-dropzone-stub - hasdesigns="true" - > - <design-stub - class="gl-bg-white" - event="NONE" - filename="design-1-name" - id="design-1" - image="design-1-image" - notescount="0" - /> - </design-dropzone-stub> - - <!----> - </li> - <li - class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile" - > - <design-dropzone-stub - hasdesigns="true" - > - <design-stub - class="gl-bg-white" - event="NONE" - filename="design-2-name" - id="design-2" - image="design-2-image" - notescount="1" - /> - </design-dropzone-stub> - - <!----> - </li> - <li - class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile" - > - <design-dropzone-stub - hasdesigns="true" - > - <design-stub - class="gl-bg-white" - event="NONE" - filename="design-3-name" - id="design-3" - image="design-3-image" - notescount="0" - /> - </design-dropzone-stub> - - <!----> - </li> - </ol> - </div> - - <router-view-stub - name="default" - /> -</div> -`; - -exports[`Design management index page designs renders designs list and header with upload button 1`] = ` -<div - class="gl-mt-5" - data-testid="designs-root" -> - <header - class="row-content-block gl-border-t-0 gl-p-3 gl-display-flex" - > - <div - class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-w-full" - > - <div> - <span - class="gl-font-weight-bold gl-mr-3" - > - Designs - </span> - - <design-version-dropdown-stub /> - </div> - - <div - class="qa-selector-toolbar gl-display-flex gl-align-items-center" - > - <gl-button-stub - buttontextclasses="" - category="primary" - class="gl-mr-4 js-select-all" - icon="" - size="small" - variant="link" - > - Select all - - </gl-button-stub> - - <div> - <delete-button-stub - buttoncategory="secondary" - buttonclass="gl-mr-3" - buttonsize="small" - buttonvariant="warning" - data-qa-selector="archive_button" - > - - Archive selected - - </delete-button-stub> - </div> - - <upload-button-stub /> - </div> - </div> - </header> - - <div - class="gl-mt-6" - > - <ol - class="list-unstyled row" - > - <li - class="gl-flex-direction-column col-md-6 col-lg-3 gl-mb-3" - data-testid="design-dropzone-wrapper" - > - <design-dropzone-stub - class="design-list-item design-list-item-new" - data-qa-selector="design_dropzone_content" - hasdesigns="true" - /> - </li> - <li - class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile" - > - <design-dropzone-stub - hasdesigns="true" - > - <design-stub - class="gl-bg-white" - event="NONE" - filename="design-1-name" - id="design-1" - image="design-1-image" - notescount="0" - /> - </design-dropzone-stub> - - <input - class="design-checkbox" - data-qa-design="design-1-name" - data-qa-selector="design_checkbox" - type="checkbox" - /> - </li> - <li - class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile" - > - <design-dropzone-stub - hasdesigns="true" - > - <design-stub - class="gl-bg-white" - event="NONE" - filename="design-2-name" - id="design-2" - image="design-2-image" - notescount="1" - /> - </design-dropzone-stub> - - <input - class="design-checkbox" - data-qa-design="design-2-name" - data-qa-selector="design_checkbox" - type="checkbox" - /> - </li> - <li - class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile" - > - <design-dropzone-stub - hasdesigns="true" - > - <design-stub - class="gl-bg-white" - event="NONE" - filename="design-3-name" - id="design-3" - image="design-3-image" - notescount="0" - /> - </design-dropzone-stub> - - <input - class="design-checkbox" - data-qa-design="design-3-name" - data-qa-selector="design_checkbox" - type="checkbox" - /> - </li> - </ol> - </div> - - <router-view-stub - name="default" - /> -</div> -`; - exports[`Design management index page designs renders error 1`] = ` <div class="gl-mt-5" @@ -277,7 +42,7 @@ exports[`Design management index page designs renders loading icon 1`] = ` class="gl-mt-6" > <gl-loading-icon-stub - color="orange" + color="dark" label="Loading" size="md" /> @@ -288,34 +53,3 @@ exports[`Design management index page designs renders loading icon 1`] = ` /> </div> `; - -exports[`Design management index page when has no designs renders design dropzone 1`] = ` -<div - class="gl-mt-5" - data-testid="designs-root" -> - <!----> - - <div - class="gl-mt-6" - > - <ol - class="list-unstyled row" - > - <li - class="col-12" - data-testid="design-dropzone-wrapper" - > - <design-dropzone-stub - class="" - data-qa-selector="design_dropzone_content" - /> - </li> - </ol> - </div> - - <router-view-stub - name="default" - /> -</div> -`; diff --git a/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap index 3d6c2561ff6..03ae77d4977 100644 --- a/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap +++ b/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap @@ -136,7 +136,7 @@ exports[`Design management design index page sets loading state 1`] = ` > <gl-loading-icon-stub class="gl-align-self-center" - color="orange" + color="dark" label="Loading" size="xl" /> diff --git a/spec/frontend/design_management/pages/design/index_spec.js b/spec/frontend/design_management/pages/design/index_spec.js index d9f7146d258..88892bb1878 100644 --- a/spec/frontend/design_management/pages/design/index_spec.js +++ b/spec/frontend/design_management/pages/design/index_spec.js @@ -2,7 +2,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; import VueRouter from 'vue-router'; import { GlAlert } from '@gitlab/ui'; import { ApolloMutation } from 'vue-apollo'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; +import createFlash from '~/flash'; import DesignIndex from '~/design_management/pages/design/index.vue'; import DesignSidebar from '~/design_management/components/design_sidebar.vue'; import DesignPresentation from '~/design_management/components/design_presentation.vue'; @@ -24,7 +24,13 @@ import mockAllVersions from '../../mock_data/all_versions'; jest.mock('~/flash'); const focusInput = jest.fn(); - +const mutate = jest.fn().mockResolvedValue(); +const mockPageLayoutElement = { + classList: { + add: jest.fn(), + remove: jest.fn(), + }, +}; const DesignReplyForm = { template: '<div><textarea ref="textarea"></textarea></div>', methods: { @@ -37,6 +43,32 @@ const mockDesignNoDiscussions = { nodes: [], }, }; +const newComment = 'new comment'; +const annotationCoordinates = { + x: 10, + y: 10, + width: 100, + height: 100, +}; +const createDiscussionMutationVariables = { + mutation: createImageDiffNoteMutation, + update: expect.anything(), + variables: { + input: { + body: newComment, + noteableId: design.id, + position: { + headSha: 'headSha', + baseSha: 'baseSha', + startSha: 'startSha', + paths: { + newPath: 'full-design-path', + }, + ...annotationCoordinates, + }, + }, + }, +}; const localVue = createLocalVue(); localVue.use(VueRouter); @@ -45,35 +77,6 @@ describe('Design management design index page', () => { let wrapper; let router; - const newComment = 'new comment'; - const annotationCoordinates = { - x: 10, - y: 10, - width: 100, - height: 100, - }; - const createDiscussionMutationVariables = { - mutation: createImageDiffNoteMutation, - update: expect.anything(), - variables: { - input: { - body: newComment, - noteableId: design.id, - position: { - headSha: 'headSha', - baseSha: 'baseSha', - startSha: 'startSha', - paths: { - newPath: 'full-design-path', - }, - ...annotationCoordinates, - }, - }, - }, - }; - - const mutate = jest.fn().mockResolvedValue(); - const findDiscussionForm = () => wrapper.find(DesignReplyForm); const findSidebar = () => wrapper.find(DesignSidebar); const findDesignPresentation = () => wrapper.find(DesignPresentation); @@ -122,19 +125,44 @@ describe('Design management design index page', () => { wrapper.destroy(); }); - describe('when navigating', () => { - it('applies fullscreen layout', () => { - const mockEl = { - classList: { - add: jest.fn(), - remove: jest.fn(), - }, - }; - jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockEl); + describe('when navigating to component', () => { + it('applies fullscreen layout class', () => { + jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockPageLayoutElement); createComponent({ loading: true }); - expect(mockEl.classList.add).toHaveBeenCalledTimes(1); - expect(mockEl.classList.add).toHaveBeenCalledWith(...DESIGN_DETAIL_LAYOUT_CLASSLIST); + expect(mockPageLayoutElement.classList.add).toHaveBeenCalledTimes(1); + expect(mockPageLayoutElement.classList.add).toHaveBeenCalledWith( + ...DESIGN_DETAIL_LAYOUT_CLASSLIST, + ); + }); + }); + + describe('when navigating within the component', () => { + it('`scale` prop of DesignPresentation component is 1', async () => { + jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockPageLayoutElement); + createComponent({ loading: false }, { data: { design, scale: 2 } }); + + await wrapper.vm.$nextTick(); + expect(findDesignPresentation().props('scale')).toBe(2); + + DesignIndex.beforeRouteUpdate.call(wrapper.vm, {}, {}, jest.fn()); + await wrapper.vm.$nextTick(); + + expect(findDesignPresentation().props('scale')).toBe(1); + }); + }); + + describe('when navigating away from component', () => { + it('removes fullscreen layout class', async () => { + jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockPageLayoutElement); + createComponent({ loading: true }); + + wrapper.vm.$options.beforeRouteLeave[0].call(wrapper.vm, {}, {}, jest.fn()); + + expect(mockPageLayoutElement.classList.remove).toHaveBeenCalledTimes(1); + expect(mockPageLayoutElement.classList.remove).toHaveBeenCalledWith( + ...DESIGN_DETAIL_LAYOUT_CLASSLIST, + ); }); }); @@ -267,7 +295,7 @@ describe('Design management design index page', () => { wrapper.vm.onDesignQueryResult({ data: mockResponseNoDesigns, loading: false }); return wrapper.vm.$nextTick().then(() => { expect(createFlash).toHaveBeenCalledTimes(1); - expect(createFlash).toHaveBeenCalledWith(DESIGN_NOT_FOUND_ERROR); + expect(createFlash).toHaveBeenCalledWith({ message: DESIGN_NOT_FOUND_ERROR }); expect(router.push).toHaveBeenCalledTimes(1); expect(router.push).toHaveBeenCalledWith({ name: DESIGNS_ROUTE_NAME }); }); @@ -288,7 +316,7 @@ describe('Design management design index page', () => { wrapper.vm.onDesignQueryResult({ data: mockResponseWithDesigns, loading: false }); return wrapper.vm.$nextTick().then(() => { expect(createFlash).toHaveBeenCalledTimes(1); - expect(createFlash).toHaveBeenCalledWith(DESIGN_VERSION_NOT_EXIST_ERROR); + expect(createFlash).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 27a91b11448..05238efd761 100644 --- a/spec/frontend/design_management/pages/index_spec.js +++ b/spec/frontend/design_management/pages/index_spec.js @@ -5,10 +5,12 @@ import VueRouter from 'vue-router'; import { GlEmptyState } from '@gitlab/ui'; import createMockApollo from 'jest/helpers/mock_apollo_helper'; import { mockTracking, unmockTracking } from 'helpers/tracking_helper'; +import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql'; +import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql'; import Index from '~/design_management/pages/index.vue'; import uploadDesignQuery from '~/design_management/graphql/mutations/upload_design.mutation.graphql'; import DesignDestroyer from '~/design_management/components/design_destroyer.vue'; -import DesignDropzone from '~/design_management/components/upload/design_dropzone.vue'; +import DesignDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue'; import DeleteButton from '~/design_management/components/delete_button.vue'; import Design from '~/design_management/components/list/item.vue'; import { DESIGNS_ROUTE_NAME } from '~/design_management/router/constants'; @@ -16,10 +18,9 @@ import { EXISTING_DESIGN_DROP_MANY_FILES_MESSAGE, EXISTING_DESIGN_DROP_INVALID_FILENAME_MESSAGE, } from '~/design_management/utils/error_messages'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; +import createFlash from '~/flash'; import createRouter from '~/design_management/router'; import * as utils from '~/design_management/utils/design_management_utils'; -import { DESIGN_DETAIL_LAYOUT_CLASSLIST } from '~/design_management/constants'; import { designListQueryResponse, designUploadMutationCreatedResponse, @@ -29,8 +30,6 @@ import { reorderedDesigns, moveDesignMutationResponseWithErrors, } from '../mock_data/apollo_mock'; -import getDesignListQuery from '~/design_management/graphql/queries/get_design_list.query.graphql'; -import permissionsQuery from '~/design_management/graphql/queries/design_permissions.query.graphql'; import moveDesignMutation from '~/design_management/graphql/mutations/move_design.mutation.graphql'; import { DESIGN_TRACKING_PAGE_NAME } from '~/design_management/utils/tracking'; @@ -106,6 +105,8 @@ describe('Design management index page', () => { const findDesignsWrapper = () => wrapper.find('[data-testid="designs-root"]'); const findDesigns = () => wrapper.findAll(Design); const draggableAttributes = () => wrapper.find(VueDraggable).vm.$attrs; + const findDesignUploadButton = () => wrapper.find('[data-testid="design-upload-button"]'); + const findDesignToolbarWrapper = () => wrapper.find('[data-testid="design-toolbar-wrapper"]'); async function moveDesigns(localWrapper) { await jest.runOnlyPendingTimers(); @@ -215,13 +216,17 @@ describe('Design management index page', () => { it('renders designs list and header with upload button', () => { createComponent({ allVersions: [mockVersion] }); - expect(wrapper.element).toMatchSnapshot(); + expect(findDesignsWrapper().exists()).toBe(true); + expect(findDesigns().length).toBe(3); + expect(findDesignToolbarWrapper().exists()).toBe(true); + expect(findDesignUploadButton().exists()).toBe(true); }); it('does not render toolbar when there is no permission', () => { createComponent({ designs: mockDesigns, allVersions: [mockVersion], createDesign: false }); - expect(wrapper.element).toMatchSnapshot(); + expect(findDesignToolbarWrapper().exists()).toBe(false); + expect(findDesignUploadButton().exists()).toBe(false); }); it('has correct classes applied to design dropzone', () => { @@ -248,7 +253,7 @@ describe('Design management index page', () => { it('renders design dropzone', () => wrapper.vm.$nextTick().then(() => { - expect(wrapper.element).toMatchSnapshot(); + expect(findDropzone().exists()).toBe(true); })); it('has correct classes applied to design dropzone', () => { @@ -444,10 +449,10 @@ describe('Design management index page', () => { return uploadDesign.then(() => { expect(createFlash).toHaveBeenCalledTimes(1); - expect(createFlash).toHaveBeenCalledWith( - 'Upload skipped. test.jpg did not change.', - 'warning', - ); + expect(createFlash).toHaveBeenCalledWith({ + message: 'Upload skipped. test.jpg did not change.', + types: 'warning', + }); }); }); @@ -483,7 +488,7 @@ describe('Design management index page', () => { designDropzone.vm.$emit('change', eventPayload); expect(createFlash).toHaveBeenCalledTimes(1); - expect(createFlash).toHaveBeenCalledWith(message); + expect(createFlash).toHaveBeenCalledWith({ message }); }); }); @@ -682,13 +687,6 @@ describe('Design management index page', () => { }); describe('when navigating', () => { - it('ensures fullscreen layout is not applied', () => { - createComponent({ loading: true }); - - expect(mockPageEl.classList.remove).toHaveBeenCalledTimes(1); - expect(mockPageEl.classList.remove).toHaveBeenCalledWith(...DESIGN_DETAIL_LAYOUT_CLASSLIST); - }); - it('should trigger a scrollIntoView method if designs route is detected', () => { router.replace({ path: '/designs', @@ -755,7 +753,7 @@ describe('Design management index page', () => { await wrapper.vm.$nextTick(); - expect(createFlash).toHaveBeenCalledWith('Houston, we have a problem'); + expect(createFlash).toHaveBeenCalledWith({ message: 'Houston, we have a problem' }); }); it('displays flash if mutation had a non-recoverable error', async () => { @@ -769,9 +767,9 @@ describe('Design management index page', () => { await jest.runOnlyPendingTimers(); // kick off the mocked GQL stuff (promises) await wrapper.vm.$nextTick(); // kick off the DOM update for flash - expect(createFlash).toHaveBeenCalledWith( - 'Something went wrong when reordering designs. Please try again', - ); + expect(createFlash).toHaveBeenCalledWith({ + message: 'Something went wrong when reordering designs. Please try again', + }); }); }); }); diff --git a/spec/frontend/design_management/utils/cache_update_spec.js b/spec/frontend/design_management/utils/cache_update_spec.js index 6c859e8c3e8..2fb08c3ef05 100644 --- a/spec/frontend/design_management/utils/cache_update_spec.js +++ b/spec/frontend/design_management/utils/cache_update_spec.js @@ -3,7 +3,7 @@ import { updateStoreAfterDesignsDelete, updateStoreAfterAddImageDiffNote, updateStoreAfterUploadDesign, - updateStoreAfterUpdateImageDiffNote, + updateStoreAfterRepositionImageDiffNote, } from '~/design_management/utils/cache_update'; import { designDeletionError, @@ -11,7 +11,7 @@ import { UPDATE_IMAGE_DIFF_NOTE_ERROR, } from '~/design_management/utils/error_messages'; import design from '../mock_data/design'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; +import createFlash from '~/flash'; jest.mock('~/flash.js'); @@ -26,16 +26,16 @@ describe('Design Management cache update', () => { describe('error handling', () => { it.each` - fnName | subject | errorMessage | extraArgs - ${'updateStoreAfterDesignsDelete'} | ${updateStoreAfterDesignsDelete} | ${designDeletionError({ singular: true })} | ${[[design]]} - ${'updateStoreAfterAddImageDiffNote'} | ${updateStoreAfterAddImageDiffNote} | ${ADD_IMAGE_DIFF_NOTE_ERROR} | ${[]} - ${'updateStoreAfterUploadDesign'} | ${updateStoreAfterUploadDesign} | ${mockErrors[0]} | ${[]} - ${'updateStoreAfterUpdateImageDiffNote'} | ${updateStoreAfterUpdateImageDiffNote} | ${UPDATE_IMAGE_DIFF_NOTE_ERROR} | ${[]} + fnName | subject | errorMessage | extraArgs + ${'updateStoreAfterDesignsDelete'} | ${updateStoreAfterDesignsDelete} | ${designDeletionError({ singular: true })} | ${[[design]]} + ${'updateStoreAfterAddImageDiffNote'} | ${updateStoreAfterAddImageDiffNote} | ${ADD_IMAGE_DIFF_NOTE_ERROR} | ${[]} + ${'updateStoreAfterUploadDesign'} | ${updateStoreAfterUploadDesign} | ${mockErrors[0]} | ${[]} + ${'updateStoreAfterUpdateImageDiffNote'} | ${updateStoreAfterRepositionImageDiffNote} | ${UPDATE_IMAGE_DIFF_NOTE_ERROR} | ${[]} `('$fnName handles errors in response', ({ subject, extraArgs, errorMessage }) => { expect(createFlash).not.toHaveBeenCalled(); expect(() => subject(mockStore, { errors: mockErrors }, {}, ...extraArgs)).toThrow(); expect(createFlash).toHaveBeenCalledTimes(1); - expect(createFlash).toHaveBeenCalledWith(errorMessage); + expect(createFlash).toHaveBeenCalledWith({ message: errorMessage }); }); }); }); diff --git a/spec/frontend/design_management/utils/design_management_utils_spec.js b/spec/frontend/design_management/utils/design_management_utils_spec.js index 232cfa2f4ca..368448ead10 100644 --- a/spec/frontend/design_management/utils/design_management_utils_spec.js +++ b/spec/frontend/design_management/utils/design_management_utils_spec.js @@ -3,7 +3,7 @@ import { extractDiscussions, findVersionId, designUploadOptimisticResponse, - updateImageDiffNoteOptimisticResponse, + repositionImageDiffNoteOptimisticResponse, isValidDesignFile, extractDesign, extractDesignNoteId, @@ -112,7 +112,7 @@ describe('optimistic responses', () => { expect(designUploadOptimisticResponse([{ name: 'test' }])).toEqual(expectedResponse); }); - it('correctly generated for updateImageDiffNoteOptimisticResponse', () => { + it('correctly generated for repositionImageDiffNoteOptimisticResponse', () => { const mockNote = { id: 'test-note-id', }; @@ -126,8 +126,8 @@ describe('optimistic responses', () => { const expectedResponse = { __typename: 'Mutation', - updateImageDiffNote: { - __typename: 'UpdateImageDiffNotePayload', + repositionImageDiffNote: { + __typename: 'RepositionImageDiffNotePayload', note: { ...mockNote, position: mockPosition, @@ -135,7 +135,7 @@ describe('optimistic responses', () => { errors: [], }, }; - expect(updateImageDiffNoteOptimisticResponse(mockNote, { position: mockPosition })).toEqual( + expect(repositionImageDiffNoteOptimisticResponse(mockNote, { position: mockPosition })).toEqual( expectedResponse, ); }); |