Add design_input.vue component

Intended to be used for any design upload.

Only currently used in button.vue,
but will eventually be used for dropzone

CHanges behaviour slightly, to get upload
files from the @change event, rather than
the element.files itself

ee/app/assets/javascripts/design_management/components/upload/button.vue

 <script>
 import { GlButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
+import DesignInput from './design_input.vue';
 
 export default {
   components: {
     GlButton,
     GlLoadingIcon,
+    DesignInput,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -17,10 +19,10 @@ export default {
   },
   methods: {
     openFileUpload() {
-      this.$refs.fileUpload.click();
+      this.$refs.fileUpload.$el.click();
     },
-    onFileUploadChange() {
-      this.$emit('upload', this.$refs.fileUpload.files);
+    onFileUploadChange(e) {
+      this.$emit('upload', e.target.files);
     },
   },
 };
@@ -42,14 +44,7 @@ export default {
       {{ s__('DesignManagement|Add designs') }}
       <gl-loading-icon v-if="isSaving" inline class="ml-1" />
     </gl-button>
-    <input
-      ref="fileUpload"
-      type="file"
-      name="design_file"
-      accept="image/*"
-      class="hide"
-      multiple
-      @change="onFileUploadChange"
-    />
+
+    <design-input ref="fileUpload" @change="onFileUploadChange" />
   </div>
 </template>

ee/app/assets/javascripts/design_management/components/upload/design_input.vue

+<script>
+import VALID_DESIGN_FILE_MIMETYPE from '../../constants';
+
+export default {
+  VALID_DESIGN_FILE_MIMETYPE,
+};
+</script>
+
+<template>
+  <input
+    type="file"
+    name="design_file"
+    :accept="$options.VALID_DESIGN_FILE_MIMETYPE"
+    class="hide"
+    multiple
+    @change="$emit('change', $event)"
+  />
+</template>

ee/app/assets/javascripts/design_management/constants.js

+// WARNING: replace this with something
+// more sensical as per https://gitlab.com/gitlab-org/gitlab/issues/118611
+const VALID_DESIGN_FILE_MIMETYPE = 'image/*';
+
+export { VALID_DESIGN_FILE_MIMETYPE as default };

ee/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap

@@ -15,13 +15,7 @@ exports[`Design management upload button component renders inverted upload desig
     <!---->
   </gl-button-stub>
    
-  <input
-    accept="image/*"
-    class="hide"
-    multiple="multiple"
-    name="design_file"
-    type="file"
-  />
+  <design-input-stub />
 </div>
 `;
 
@@ -45,13 +39,7 @@ exports[`Design management upload button component renders loading icon 1`] = `
     />
   </gl-button-stub>
    
-  <input
-    accept="image/*"
-    class="hide"
-    multiple="multiple"
-    name="design_file"
-    type="file"
-  />
+  <design-input-stub />
 </div>
 `;
 
@@ -68,12 +56,6 @@ exports[`Design management upload button component renders upload design button
     <!---->
   </gl-button-stub>
    
-  <input
-    accept="image/*"
-    class="hide"
-    multiple="multiple"
-    name="design_file"
-    type="file"
-  />
+  <design-input-stub />
 </div>
 `;

ee/spec/frontend/design_management/components/upload/__snapshots__/design_input_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Design management upload button component renders design input 1`] = `
+<input
+  accept="image/*"
+  class="hide"
+  multiple="multiple"
+  name="design_file"
+  type="file"
+/>
+`;

ee/spec/frontend/design_management/components/upload/button_spec.js

 import { shallowMount } from '@vue/test-utils';
 import UploadButton from 'ee/design_management/components/upload/button.vue';
+import DesignInput from 'ee/design_management/components/upload/design_input.vue';
 
 describe('Design management upload button component', () => {
   let wrapper;
@@ -39,11 +40,7 @@ describe('Design management upload button component', () => {
     it('emits upload event', () => {
       createComponent();
 
-      jest
-        .spyOn(wrapper.find({ ref: 'fileUpload' }).element, 'files', 'get')
-        .mockReturnValue('test');
-
-      wrapper.vm.onFileUploadChange('test');
+      wrapper.vm.onFileUploadChange({ target: { files: 'test' } });
 
       expect(wrapper.emitted().upload[0]).toEqual(['test']);
     });
@@ -53,7 +50,7 @@ describe('Design management upload button component', () => {
     it('triggers click on input', () => {
       createComponent();
 
-      const clickSpy = jest.spyOn(wrapper.find({ ref: 'fileUpload' }).element, 'click');
+      const clickSpy = jest.spyOn(wrapper.find(DesignInput).element, 'click');
 
       wrapper.vm.openFileUpload();
 

ee/spec/frontend/design_management/components/upload/design_input_spec.js

+import { mount } from '@vue/test-utils';
+import DesignInput from 'ee/design_management/components/upload/design_input.vue';
+
+describe('Design management upload button component', () => {
+  let wrapper;
+
+  function createComponent() {
+    wrapper = mount(DesignInput);
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders design input', () => {
+    createComponent();
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});