diff options
3 files changed, 32 insertions, 2 deletions
diff --git a/app/assets/javascripts/issue_show/components/edit_actions.vue b/app/assets/javascripts/issue_show/components/edit_actions.vue index 4cefb236d32..e57b867f93b 100644 --- a/app/assets/javascripts/issue_show/components/edit_actions.vue +++ b/app/assets/javascripts/issue_show/components/edit_actions.vue @@ -7,6 +7,10 @@ type: Boolean, required: true, }, + formState: { + type: Object, + required: true, + }, }, data() { return { @@ -14,6 +18,11 @@ updateLoading: false, }; }, + computed: { + isSubmitEnabled() { + return this.formState.title.trim() !== ''; + }, + }, methods: { updateIssuable() { this.updateLoading = true; @@ -38,9 +47,9 @@ <div class="prepend-top-default append-bottom-default clearfix"> <button class="btn btn-save pull-left" - :class="{ disabled: updateLoading }" + :class="{ disabled: updateLoading || !isSubmitEnabled }" type="submit" - :disabled="updateLoading" + :disabled="updateLoading || !isSubmitEnabled" @click="updateIssuable"> Save changes <i diff --git a/app/assets/javascripts/issue_show/components/form.vue b/app/assets/javascripts/issue_show/components/form.vue index 7dd8ffb5af2..3c389d040db 100644 --- a/app/assets/javascripts/issue_show/components/form.vue +++ b/app/assets/javascripts/issue_show/components/form.vue @@ -25,6 +25,7 @@ <title-field :form-state="formState" /> <edit-actions + :form-state="formState" :can-destroy="canDestroy" /> </form> </template> diff --git a/spec/javascripts/issue_show/components/edit_actions_spec.js b/spec/javascripts/issue_show/components/edit_actions_spec.js index 8fbaf6cfb2b..f6625b748b6 100644 --- a/spec/javascripts/issue_show/components/edit_actions_spec.js +++ b/spec/javascripts/issue_show/components/edit_actions_spec.js @@ -1,18 +1,26 @@ import Vue from 'vue'; import editActions from '~/issue_show/components/edit_actions.vue'; import eventHub from '~/issue_show/event_hub'; +import Store from '~/issue_show/stores'; describe('Edit Actions components', () => { let vm; beforeEach((done) => { const Component = Vue.extend(editActions); + const store = new Store({ + titleHtml: '', + descriptionHtml: '', + issuableRef: '', + }); + store.formState.title = 'test'; spyOn(eventHub, '$emit'); vm = new Component({ propsData: { canDestroy: true, + formState: store.formState, }, }).$mount(); @@ -41,6 +49,18 @@ describe('Edit Actions components', () => { }); }); + it('disables submit button when title is blank', (done) => { + vm.formState.title = ''; + + Vue.nextTick(() => { + expect( + vm.$el.querySelector('.btn-save').getAttribute('disabled'), + ).toBe('disabled'); + + done(); + }); + }); + describe('updateIssuable', () => { it('sends update.issauble event when clicking save button', () => { vm.$el.querySelector('.btn-save').click(); |