From e7a6531b9d163d384a1d0471024141b3f5827bbf Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Thu, 18 Jan 2018 16:29:27 +0000
Subject: [PATCH] Move archived component to vue file

---
 .../components/states/mr_widget_archived.js   | 26 -------------
 .../components/states/mr_widget_archived.vue  | 31 ++++++++++++++++
 .../vue_merge_request_widget/dependencies.js  |  2 +-
 .../vue_merge_request_widget/index.js         |  3 ++
 .../states/mr_widget_archived_spec.js         | 37 +++++++++++++------
 5 files changed, 60 insertions(+), 39 deletions(-)
 delete mode 100644 app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.js
 create mode 100644 app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.js
deleted file mode 100644
index b4e4a6aa161..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import statusIcon from '../mr_widget_status_icon';
-
-export default {
-  name: 'MRWidgetArchived',
-  components: {
-    statusIcon,
-  },
-  template: `
-    <div class="mr-widget-body media">
-      <div class="space-children">
-        <status-icon status="failed" />
-        <button
-          type="button"
-          class="btn btn-success btn-sm"
-          disabled="true">
-          Merge
-        </button>
-      </div>
-      <div class="media-body">
-        <span class="bold">
-          This project is archived, write access has been disabled
-        </span>
-      </div>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
new file mode 100644
index 00000000000..552b3e6726d
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
@@ -0,0 +1,31 @@
+<script>
+  import statusIcon from '../mr_widget_status_icon';
+
+  export default {
+    name: 'MRWidgetArchived',
+    components: {
+      statusIcon,
+    },
+  };
+</script>
+<template>
+  <div class="mr-widget-body media">
+    <div class="space-children">
+      <status-icon
+        status="failed"
+      />
+      <button
+        type="button"
+        class="btn btn-success btn-sm"
+        disabled="true"
+      >
+        {{ s__("mrWidget|Merge") }}
+      </button>
+    </div>
+    <div class="media-body">
+      <span class="bold">
+        {{ s__("mrWidget|This project is archived, write access has been disabled") }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/dependencies.js b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
index 940f3d9b2d0..12610501868 100644
--- a/app/assets/javascripts/vue_merge_request_widget/dependencies.js
+++ b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
@@ -21,7 +21,7 @@ export { default as FailedToMerge } from './components/states/mr_widget_failed_t
 export { default as ClosedState } from './components/states/mr_widget_closed';
 export { default as MergingState } from './components/states/mr_widget_merging';
 export { default as WipState } from './components/states/mr_widget_wip';
-export { default as ArchivedState } from './components/states/mr_widget_archived';
+export { default as ArchivedState } from './components/states/mr_widget_archived.vue';
 export { default as ConflictsState } from './components/states/mr_widget_conflicts';
 export { default as NothingToMergeState } from './components/states/mr_widget_nothing_to_merge';
 export { default as MissingBranchState } from './components/states/mr_widget_missing_branch';
diff --git a/app/assets/javascripts/vue_merge_request_widget/index.js b/app/assets/javascripts/vue_merge_request_widget/index.js
index 43ef468c303..6b9918b65b0 100644
--- a/app/assets/javascripts/vue_merge_request_widget/index.js
+++ b/app/assets/javascripts/vue_merge_request_widget/index.js
@@ -2,6 +2,9 @@ import {
   Vue,
   mrWidgetOptions,
 } from './dependencies';
+import Translate from '../vue_shared/translate';
+
+Vue.use(Translate);
 
 document.addEventListener('DOMContentLoaded', () => {
   gl.mrWidgetData.gitlabLogo = gon.gitlab_logo;
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_archived_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_archived_spec.js
index 4869fb17d96..f98ebdb38e6 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_archived_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_archived_spec.js
@@ -1,18 +1,31 @@
 import Vue from 'vue';
-import archivedComponent from '~/vue_merge_request_widget/components/states/mr_widget_archived';
+import archivedComponent from '~/vue_merge_request_widget/components/states/mr_widget_archived.vue';
+import mountComponent from '../../../helpers/vue_mount_component_helper';
 
 describe('MRWidgetArchived', () => {
-  describe('template', () => {
-    it('should have correct elements', () => {
-      const Component = Vue.extend(archivedComponent);
-      const el = new Component({
-        el: document.createElement('div'),
-      }).$el;
+  let vm;
 
-      expect(el.classList.contains('mr-widget-body')).toBeTruthy();
-      expect(el.querySelector('button').classList.contains('btn-success')).toBeTruthy();
-      expect(el.querySelector('button').disabled).toBeTruthy();
-      expect(el.innerText).toContain('This project is archived, write access has been disabled');
-    });
+  beforeEach(() => {
+    const Component = Vue.extend(archivedComponent);
+    vm = mountComponent(Component);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders a ci status failed icon', () => {
+    expect(vm.$el.querySelector('.ci-status-icon')).not.toBeNull();
+  });
+
+  it('renders a disabled button', () => {
+    expect(vm.$el.querySelector('button').getAttribute('disabled')).toEqual('disabled');
+    expect(vm.$el.querySelector('button').textContent.trim()).toEqual('Merge');
+  });
+
+  it('renders information', () => {
+    expect(
+      vm.$el.querySelector('.bold').textContent.trim(),
+    ).toEqual('This project is archived, write access has been disabled');
   });
 });