diff options
Diffstat (limited to 'spec/frontend/design_management/components')
8 files changed, 88 insertions, 859 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); - }); -}); |