Commit ec702da0 authored by Brandon Labuschagne's avatar Brandon Labuschagne

Add UploadButton component

This component will be used in the project
details overview.

It's an upload button which links to an
UploadBlobModal.
parent c19699f1
<script>
import { GlButton, GlModalDirective } from '@gitlab/ui';
import UploadBlobModal from '~/repository/components/upload_blob_modal.vue';
const UPLOAD_BLOB_MODAL_ID = 'details-modal-upload-blob';
export default {
components: {
GlButton,
UploadBlobModal,
},
directives: {
GlModal: GlModalDirective,
},
inject: {
targetBranch: {
default: '',
},
origionalBranch: {
default: '',
},
canPushCode: {
default: false,
},
path: {
default: '',
},
projectPath: {
default: '',
},
},
uploadBlobModalId: UPLOAD_BLOB_MODAL_ID,
};
</script>
<template>
<span>
<gl-button v-gl-modal="$options.uploadBlobModalId" icon="upload">{{
__('Upload File')
}}</gl-button>
<upload-blob-modal
:modal-id="$options.uploadBlobModalId"
:commit-message="__('Upload New File')"
:target-branch="targetBranch"
:origional-branch="origionalBranch"
:can-push-code="canPushCode"
:path="path"
/>
</span>
</template>
...@@ -32227,6 +32227,9 @@ msgstr "" ...@@ -32227,6 +32227,9 @@ msgstr ""
msgid "Upload CSV file" msgid "Upload CSV file"
msgstr "" msgstr ""
msgid "Upload File"
msgstr ""
msgid "Upload License" msgid "Upload License"
msgstr "" msgstr ""
......
import { GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import UploadButton from '~/projects/details/upload_button.vue';
import UploadBlobModal from '~/repository/components/upload_blob_modal.vue';
const MODAL_ID = 'details-modal-upload-blob';
describe('UploadButton', () => {
let wrapper;
let glModalDirective;
const createComponent = () => {
glModalDirective = jest.fn();
return shallowMount(UploadButton, {
directives: {
glModal: {
bind(_, { value }) {
glModalDirective(value);
},
},
},
});
};
beforeEach(() => {
wrapper = createComponent();
});
afterEach(() => {
wrapper.destroy();
});
it('displays an upload button', () => {
expect(wrapper.find(GlButton).exists()).toBe(true);
});
it('contains a modal', () => {
const modal = wrapper.find(UploadBlobModal);
expect(modal.exists()).toBe(true);
expect(modal.props('modalId')).toBe(MODAL_ID);
});
describe('when clickinig the upload file button', () => {
beforeEach(() => {
wrapper.find(GlButton).vm.$emit('click');
});
it('opens the modal', () => {
expect(glModalDirective).toHaveBeenCalledWith(MODAL_ID);
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment