Added specs for testing when warning is visible

[ci skip]

app/assets/javascripts/issue_show/components/form.vue

@@ -1,5 +1,4 @@
 <script>
-  import eventHub from '../event_hub';
   import lockedWarning from './locked_warning.vue';
   import titleField from './fields/title.vue';
   import descriptionField from './fields/description.vue';
@@ -32,20 +31,12 @@
       editActions,
       confidentialCheckbox,
     },
-    methods: {
-      closeForm() {
-        eventHub.$emit('close.form');
-        this.formState.lockedWarningVisible = false;
-      },
-    },
   };
 </script>
 
 <template>
   <form>
-    <locked-warning
+    <locked-warning v-if="formState.lockedWarningVisible" />
-      v-if="formState.lockedWarningVisible"
-      @closeForm="closeForm" />
     <title-field
       :form-state="formState" />
     <confidential-checkbox

app/assets/javascripts/issue_show/components/locked_warning.vue

@@ -1,8 +1,8 @@
 <script>
   export default {
-    methods: {
+    computed: {
-      closeForm() {
+      currentPath() {
-        this.$emit('closeForm');
+        return location.pathname;
       },
     },
   };
@@ -10,11 +10,11 @@
 
 <template>
   <div class="alert alert-danger">
-    Someone edited the issue the same time you did. Please check out
+    Someone edited the issue at the same time you did. Please check out
     <a
-      href="#"
+      :href="currentPath"
-      role="button"
+      target="_blank"
-      @click.prevent="closeForm">the issue</a>
+      role="button">the issue</a>
     and make sure your changes will not unintentionally remove theirs.
   </div>
 </template>

spec/javascripts/issue_show/components/app_spec.js

@@ -234,4 +234,36 @@ describe('Issuable output', () => {
       });
     });
   });
+
+  describe('open form', () => {
+    it('shows locked warning if form is open & data is different', (done) => {
+      Vue.http.interceptors.push(issueShowInterceptor(issueShowData.initialRequest));
+
+      Vue.nextTick()
+        .then(() => new Promise((resolve) => {
+          setTimeout(resolve);
+        }))
+        .then(() => {
+          vm.openForm();
+
+          Vue.http.interceptors.push(issueShowInterceptor(issueShowData.secondRequest));
+
+          return new Promise((resolve) => {
+            setTimeout(resolve);
+          });
+        })
+        .then(() => {
+          expect(
+            vm.formState.lockedWarningVisible,
+          ).toBeTruthy();
+
+          expect(
+            vm.$el.querySelector('.alert'),
+          ).not.toBeNull();
+
+          done();
+        })
+        .catch(done.fail);
+    });
+  });
 });

spec/javascripts/issue_show/components/form_spec.js

@@ -0,0 +1,37 @@
+import Vue from 'vue';
+import formComponent from '~/issue_show/components/form.vue';
+
+describe('Inline edit form component', () => {
+  let vm;
+
+  beforeEach((done) => {
+    const Component = Vue.extend(formComponent);
+
+    vm = new Component({
+      propsData: {
+        canDestroy: true,
+        formState: {
+          title: 'b',
+          description: 'a',
+          lockedWarningVisible: false,
+        },
+        markdownPreviewUrl: '/',
+        markdownDocs: '/',
+      },
+    }).$mount();
+
+    Vue.nextTick(done);
+  });
+
+  it('shows locked warning if formState is different', (done) => {
+    vm.formState.lockedWarningVisible = true;
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelector('.alert'),
+      ).not.toBeNull();
+
+      done();
+    });
+  });
+});