Moves status icon into a vue file and adds tests

Moves merging component into a vue file, adds i18n and better test cases

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js

@@ -2,7 +2,7 @@ import { getTimeago } from '~/lib/utils/datetime_utility';
 import { visitUrl } from '../../lib/utils/url_utility';
 import Flash from '../../flash';
 import MemoryUsage from './mr_widget_memory_usage';
-import StatusIcon from './mr_widget_status_icon';
+import StatusIcon from './mr_widget_status_icon.vue';
 import MRWidgetService from '../services/mr_widget_service';
 
 export default {

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.js

-import ciIcon from '../../vue_shared/components/ci_icon.vue';
-import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-
-export default {
-  props: {
-    status: { type: String, required: true },
-    showDisabledButton: { type: Boolean, required: false },
-  },
-  components: {
-    ciIcon,
-    loadingIcon,
-  },
-  computed: {
-    statusObj() {
-      return {
-        group: this.status,
-        icon: `status_${this.status}`,
-      };
-    },
-  },
-  template: `
-    <div class="space-children flex-container-block append-right-10">
-      <div v-if="status === 'loading'" class="mr-widget-icon">
-        <loading-icon />
-      </div>
-      <ci-icon v-else :status="statusObj" />
-      <button
-        v-if="showDisabledButton"
-        type="button"
-        class="js-disabled-merge-button btn btn-success btn-sm"
-        disabled="true">
-        Merge
-      </button>
-    </div>
-  `,
-};

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue

+<script>
+  import ciIcon from '../../vue_shared/components/ci_icon.vue';
+  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+
+  export default {
+    components: {
+      ciIcon,
+      loadingIcon,
+    },
+    props: {
+      status: {
+        type: String,
+        required: true,
+      },
+      showDisabledButton: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+    computed: {
+      isLoading() {
+        return this.status === 'loading';
+      },
+      statusObj() {
+        return {
+          group: this.status,
+          icon: `status_${this.status}`,
+        };
+      },
+    },
+  };
+</script>
+<template>
+  <div class="space-children flex-container-block append-right-10">
+    <div
+      v-if="isLoading"
+      class="mr-widget-icon"
+    >
+      <loading-icon />
+    </div>
+
+    <ci-icon
+      v-else
+      :status="statusObj"
+    />
+
+    <button
+      v-if="showDisabledButton"
+      type="button"
+      class="js-disabled-merge-button btn btn-success btn-sm"
+      disabled="true"
+    >
+      {{ s__("mrWidget|Merge") }}
+    </button>
+  </div>
+</template>

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue

 <script>
-  import statusIcon from '../mr_widget_status_icon';
+  import statusIcon from '../mr_widget_status_icon.vue';
 
   export default {
     name: 'MRWidgetArchived',

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue

 <script>
   import loadingIcon from '~/vue_shared/components/loading_icon.vue';
   import eventHub from '../../event_hub';
-  import statusIcon from '../mr_widget_status_icon';
+  import statusIcon from '../mr_widget_status_icon.vue';
 
   export default {
     name: 'MRWidgetAutoMergeFailed',

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.js

-import statusIcon from '../mr_widget_status_icon';
+import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'MRWidgetChecking',

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js

 import mrWidgetAuthorTime from '../../components/mr_widget_author_time';
-import statusIcon from '../mr_widget_status_icon';
+import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'MRWidgetClosed',

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js

-import statusIcon from '../mr_widget_status_icon';
+import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'MRWidgetConflicts',

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.js

-import statusIcon from '../mr_widget_status_icon';
+import statusIcon from '../mr_widget_status_icon.vue';
 import eventHub from '../../event_hub';
 
 export default {

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js

 import Flash from '../../../flash';
-import statusIcon from '../mr_widget_status_icon';
+import statusIcon from '../mr_widget_status_icon.vue';
 import MRWidgetAuthor from '../../components/mr_widget_author';
 import eventHub from '../../event_hub';
 

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js

@@ -2,7 +2,7 @@ import Flash from '../../../flash';
 import mrWidgetAuthorTime from '../../components/mr_widget_author_time';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
-import statusIcon from '../mr_widget_status_icon';
+import statusIcon from '../mr_widget_status_icon.vue';
 import eventHub from '../../event_hub';
 
 export default {

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.js

-import statusIcon from '../mr_widget_status_icon';
-
-export default {
-  name: 'MRWidgetMerging',
-  props: {
-    mr: { type: Object, required: true },
-  },
-  components: {
-    statusIcon,
-  },
-  template: `
-    <div class="mr-widget-body mr-state-locked media">
-      <status-icon status="loading" />
-      <div class="media-body">
-        <h4>
-          This merge request is in the process of being merged
-        </h4>
-        <section class="mr-info-list">
-          <p>
-            The changes will be merged into
-            <span class="label-branch">
-              <a :href="mr.targetBranchPath">{{mr.targetBranch}}</a>
-            </span>
-          </p>
-        </section>
-      </div>
-    </div>
-  `,
-};

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue

+<script>
+  import statusIcon from '../mr_widget_status_icon.vue';
+
+  export default {
+    name: 'MRWidgetMerging',
+    components: {
+      statusIcon,
+    },
+    props: {
+      mr: {
+        type: Object,
+        required: true,
+        default: () => ({}),
+      },
+    },
+  };
+</script>
+<template>
+  <div class="mr-widget-body mr-state-locked media">
+    <status-icon status="loading" />
+    <div class="media-body">
+      <h4>
+        {{ s__("mrWidget|This merge request is in the process of being merged") }}
+      </h4>
+      <section class="mr-info-list">
+        <p>
+          {{ s__("mrWidget|The changes will be merged into") }}
+          <span class="label-branch">
+            <a :href="mr.targetBranchPath">{{ mr.targetBranch }}</a>
+          </span>
+        </p>
+      </section>
+    </div>
+  </div>
+</template>

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js

-import statusIcon from '../mr_widget_status_icon';
+import statusIcon from '../mr_widget_status_icon.vue';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import mrWidgetMergeHelp from '../../components/mr_widget_merge_help';
 

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.js

-import statusIcon from '../mr_widget_status_icon';
+import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'MRWidgetNotAllowed',

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.js

-import statusIcon from '../mr_widget_status_icon';
+import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'MRWidgetPipelineBlocked',

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_failed.js

-import statusIcon from '../mr_widget_status_icon';
+import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'MRWidgetPipelineBlocked',

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js

@@ -3,7 +3,7 @@ import warningSvg from 'icons/_icon_status_warning.svg';
 import simplePoll from '~/lib/utils/simple_poll';
 import MergeRequest from '../../../merge_request';
 import Flash from '../../../flash';
-import statusIcon from '../mr_widget_status_icon';
+import statusIcon from '../mr_widget_status_icon.vue';
 import eventHub from '../../event_hub';
 
 export default {

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue

 <script>
   import simplePoll from '../../../lib/utils/simple_poll';
   import eventHub from '../../event_hub';
-  import statusIcon from '../mr_widget_status_icon';
+  import statusIcon from '../mr_widget_status_icon.vue';
   import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
   import Flash from '../../../flash';
 

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js

-import statusIcon from '../mr_widget_status_icon';
+import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'MRWidgetSHAMismatch',

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions.js

-import statusIcon from '../mr_widget_status_icon';
+import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'MRWidgetUnresolvedDiscussions',

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js

-import statusIcon from '../mr_widget_status_icon';
+import statusIcon from '../mr_widget_status_icon.vue';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import eventHub from '../../event_hub';
 

app/assets/javascripts/vue_merge_request_widget/dependencies.js

@@ -19,7 +19,7 @@ export { default as WidgetRelatedLinks } from './components/mr_widget_related_li
 export { default as MergedState } from './components/states/mr_widget_merged';
 export { default as FailedToMerge } from './components/states/mr_widget_failed_to_merge';
 export { default as ClosedState } from './components/states/mr_widget_closed';
-export { default as MergingState } from './components/states/mr_widget_merging';
+export { default as MergingState } from './components/states/mr_widget_merging.vue';
 export { default as WipState } from './components/states/mr_widget_wip';
 export { default as ArchivedState } from './components/states/mr_widget_archived.vue';
 export { default as ConflictsState } from './components/states/mr_widget_conflicts';

spec/javascripts/vue_mr_widget/components/mr_widget_status_icon_spec.js

+import Vue from 'vue';
+import mrStatusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('MR widget status icon component', () => {
+  let vm;
+  let Component;
+
+  beforeEach(() => {
+    Component = Vue.extend(mrStatusIcon);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('while loading', () => {
+    it('renders loading icon', () => {
+      vm = mountComponent(Component, { status: 'loading' });
+      expect(vm.$el.querySelector('.mr-widget-icon i').classList).toContain('fa-spinner');
+    });
+  });
+
+  describe('with status icon', () => {
+    it('renders ci status icon', () => {
+      vm = mountComponent(Component, { status: 'failed' });
+      expect(vm.$el.querySelector('.js-ci-status-icon-failed')).not.toBeNull();
+    });
+  });
+
+  describe('with disabled button', () => {
+    it('renders a disabled button', () => {
+      vm = mountComponent(Component, { status: 'failed', showDisabledButton: true });
+      expect(vm.$el.querySelector('.js-disabled-merge-button').textContent.trim()).toEqual('Merge');
+    });
+  });
+
+  describe('without disabled button', () => {
+    it('does not render a disabled button', () => {
+      vm = mountComponent(Component, { status: 'failed' });
+      expect(vm.$el.querySelector('.js-disabled-merge-button')).toBeNull();
+    });
+  });
+});

spec/javascripts/vue_mr_widget/components/states/mr_widget_locked_spec.js

-import Vue from 'vue';
-import mergingComponent from '~/vue_merge_request_widget/components/states/mr_widget_merging';
-
-describe('MRWidgetMerging', () => {
-  describe('props', () => {
-    it('should have props', () => {
-      const { mr } = mergingComponent.props;
-
-      expect(mr.type instanceof Object).toBeTruthy();
-      expect(mr.required).toBeTruthy();
-    });
-  });
-
-  describe('template', () => {
-    it('should have correct elements', () => {
-      const Component = Vue.extend(mergingComponent);
-      const mr = {
-        targetBranchPath: '/branch-path',
-        targetBranch: 'branch',
-      };
-      const el = new Component({
-        el: document.createElement('div'),
-        propsData: { mr },
-      }).$el;
-
-      expect(el.classList.contains('mr-widget-body')).toBeTruthy();
-      expect(el.innerText).toContain('This merge request is in the process of being merged');
-      expect(el.innerText).toContain('changes will be merged into');
-      expect(el.querySelector('.label-branch a').getAttribute('href')).toEqual(mr.targetBranchPath);
-      expect(el.querySelector('.label-branch a').textContent).toContain(mr.targetBranch);
-    });
-  });
-});

spec/javascripts/vue_mr_widget/components/states/mr_widget_merging_spec.js

+import Vue from 'vue';
+import mergingComponent from '~/vue_merge_request_widget/components/states/mr_widget_merging.vue';
+import mountComponent from '../../../helpers/vue_mount_component_helper';
+
+describe('MRWidgetMerging', () => {
+  let vm;
+  beforeEach(() => {
+    const Component = Vue.extend(mergingComponent);
+
+    vm = mountComponent(Component, { mr: {
+      targetBranchPath: '/branch-path',
+      targetBranch: 'branch',
+    } });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders information about merge request being merged', () => {
+    expect(
+      vm.$el.querySelector('.media-body').textContent.trim(),
+    ).toEqual('This merge request is in the process of being merged');
+  });
+
+  it('renders branch information', () => {
+    expect(
+      vm.$el.querySelector('.mr-info-list').textContent.trim().replace(/\s\s+/g, ' ').replace(/[\r\n]+/g, ' '),
+    ).toEqual('The changes will be merged into branch');
+    expect(
+      vm.$el.querySelector('a').getAttribute('href'),
+    ).toEqual('/branch-path');
+  });
+});