Add latest changes from gitlab-org/gitlab@master

2 files changed, 64 insertions, 0 deletions

diff --git a/spec/frontend/vue_shared/components/upload_dropzone/__snapshots__/upload_dropzone_spec.js.snap b/spec/frontend/vue_shared/components/upload_dropzone/__snapshots__/upload_dropzone_spec.js.snap
index 0f1e118d44c..a613b325462 100644
--- a/spec/frontend/vue_shared/components/upload_dropzone/__snapshots__/upload_dropzone_spec.js.snap
+++ b/spec/frontend/vue_shared/components/upload_dropzone/__snapshots__/upload_dropzone_spec.js.snap
@@ -6,6 +6,7 @@ exports[`Upload dropzone component correctly overrides description and drop mess
 >
   <button
     class="card upload-dropzone-card upload-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
+    type="button"
   >
     <div
       class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
@@ -86,6 +87,7 @@ exports[`Upload dropzone component when dragging renders correct template when d
 >
   <button
     class="card upload-dropzone-card upload-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
+    type="button"
   >
     <div
       class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
@@ -170,6 +172,7 @@ exports[`Upload dropzone component when dragging renders correct template when d
 >
   <button
     class="card upload-dropzone-card upload-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
+    type="button"
   >
     <div
       class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
@@ -254,6 +257,7 @@ exports[`Upload dropzone component when dragging renders correct template when d
 >
   <button
     class="card upload-dropzone-card upload-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
+    type="button"
   >
     <div
       class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
@@ -339,6 +343,7 @@ exports[`Upload dropzone component when dragging renders correct template when d
 >
   <button
     class="card upload-dropzone-card upload-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
+    type="button"
   >
     <div
       class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
@@ -424,6 +429,7 @@ exports[`Upload dropzone component when dragging renders correct template when d
 >
   <button
     class="card upload-dropzone-card upload-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
+    type="button"
   >
     <div
       class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
@@ -509,6 +515,7 @@ exports[`Upload dropzone component when no slot provided renders default dropzon
 >
   <button
     class="card upload-dropzone-card upload-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
+    type="button"
   >
     <div
       class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
diff --git a/spec/frontend/vue_shared/components/upload_dropzone/upload_dropzone_spec.js b/spec/frontend/vue_shared/components/upload_dropzone/upload_dropzone_spec.js
index 2f5afeec1fc..21e9b401215 100644
--- a/spec/frontend/vue_shared/components/upload_dropzone/upload_dropzone_spec.js
+++ b/spec/frontend/vue_shared/components/upload_dropzone/upload_dropzone_spec.js
@@ -16,6 +16,7 @@ describe('Upload dropzone component', () => {
   const findDropzoneArea = () => wrapper.find('[data-testid="dropzone-area"]');
   const findIcon = () => wrapper.find(GlIcon);
   const findUploadText = () => wrapper.find('[data-testid="upload-text"]').text();
+  const findFileInput = () => wrapper.find('input[type="file"]');
 
   function createComponent({ slots = {}, data = {}, props = {} } = {}) {
     wrapper = shallowMount(UploadDropzone, {
@@ -197,4 +198,60 @@ describe('Upload dropzone component', () => {
 
     expect(wrapper.element).toMatchSnapshot();
   });
+
+  describe('file input form name', () => {
+    it('applies inputFieldName as file input name', () => {
+      createComponent({ props: { inputFieldName: 'test_field_name' } });
+      expect(findFileInput().attributes('name')).toBe('test_field_name');
+    });
+
+    it('uses default file input name if no inputFieldName provided', () => {
+      createComponent();
+      expect(findFileInput().attributes('name')).toBe('upload_file');
+    });
+  });
+
+  describe('updates file input files value', () => {
+    // NOTE: the component assigns dropped files from the drop event to the
+    // input.files property. There's a restriction that nothing but a FileList
+    // can be assigned to this property. While FileList can't be created
+    // manually: it has no constructor. And currently there's no good workaround
+    // for jsdom. So we have to stub the file input in vm.$refs to ensure that
+    // the files property is updated. This enforces following tests to know a
+    // bit too much about the SUT internals See this thread for more details on
+    // FileList in jsdom: https://github.com/jsdom/jsdom/issues/1272
+    function stubFileInputOnWrapper() {
+      const fakeFileInput = { files: [] };
+      wrapper.vm.$refs.fileUpload = fakeFileInput;
+    }
+
+    it('assigns dragged files to the input files property', async () => {
+      const mockFile = { name: 'test', type: 'image/jpg' };
+      const mockEvent = mockDragEvent({ files: [mockFile] });
+      createComponent({ props: { shouldUpdateInputOnFileDrop: true } });
+      stubFileInputOnWrapper();
+
+      wrapper.trigger('dragenter', mockEvent);
+      await nextTick();
+      wrapper.trigger('drop', mockEvent);
+      await nextTick();
+
+      expect(wrapper.vm.$refs.fileUpload.files).toEqual([mockFile]);
+    });
+
+    it('throws an error when multiple files are dropped on a single file input dropzone', async () => {
+      const mockFile = { name: 'test', type: 'image/jpg' };
+      const mockEvent = mockDragEvent({ files: [mockFile, mockFile] });
+      createComponent({ props: { shouldUpdateInputOnFileDrop: true, singleFileSelection: true } });
+      stubFileInputOnWrapper();
+
+      wrapper.trigger('dragenter', mockEvent);
+      await nextTick();
+      wrapper.trigger('drop', mockEvent);
+      await nextTick();
+
+      expect(wrapper.vm.$refs.fileUpload.files).toEqual([]);
+      expect(wrapper.emitted('error')).toHaveLength(1);
+    });
+  });
 });