MRWidget: Fix specs and address WIP comments.

3 files changed, 20 insertions, 9 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js
index 1d9c30389e5..c314776d9bb 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js
@@ -5,20 +5,17 @@ export default {
   props: {
     mr: {
       type: Object,
-      default: false,
+      required: true,
     },
   },
   data() {
-    return {
-      canCreateNewFile: true,
-      emptyStateSVG,
-    };
+    return { emptyStateSVG };
   },
   template: `
     <div class="mr-widget-body empty-state">
       <div class="row">
         <div class="artwork col-sm-5 col-sm-push-7 col-xs-12 text-center">
-          <span v-html="emptyStateSVG" />
+          <span v-html="emptyStateSVG"></span>
         </div>
         <div class="text col-sm-7 col-sm-pull-5 col-xs-12">
           <span>
@@ -33,7 +30,7 @@ export default {
             Please push new commits or use a different branch.
           </p>
           <a
-            v-if="canCreateNewFile"
+            v-if="mr.newBlobPath"
             :href="mr.newBlobPath"
             role="button"
             class="btn btn-inverted btn-save">
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index b66b43c6b43..16fa03efcb2 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -354,10 +354,12 @@
       .artwork {
         margin-bottom: $gl-padding;
       }
+
       .text {
         span {
           font-weight: bold;
         }
+
         p {
           margin-top: $gl-padding;
         }
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_nothing_to_merge_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_nothing_to_merge_spec.js
index d40c67b189d..0d632c7f4e5 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_nothing_to_merge_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_nothing_to_merge_spec.js
@@ -4,14 +4,26 @@ import nothingToMergeComponent from '~/vue_merge_request_widget/components/state
 describe('MRWidgetNothingToMerge', () => {
   describe('template', () => {
     const Component = Vue.extend(nothingToMergeComponent);
+    const newBlobPath = '/foo';
     const vm = new Component({
       el: document.createElement('div'),
+      propsData: {
+        mr: { newBlobPath },
+      },
     });
+
     it('should have correct elements', () => {
       expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
-      expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
-      expect(vm.$el.innerText).toContain('There is nothing to merge from source branch into target branch.');
+      expect(vm.$el.querySelector('a').href).toContain(newBlobPath);
+      expect(vm.$el.innerText).toContain("Currently there are no changes in this merge request's source branch");
       expect(vm.$el.innerText).toContain('Please push new commits or use a different branch.');
     });
+
+    it('should not show new blob link if there is no link available', () => {
+      vm.mr.newBlobPath = null;
+      Vue.nextTick(() => {
+        expect(vm.$el.querySelector('a')).toEqual(null);
+      });
+    });
   });
 });