Use js- classes instead of Vue refs in tests for some perf

See
https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/14272#note_41419104

5 files changed, 34 insertions, 27 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.js
index 3cbcbdd52c5..4998a47b691 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.js
@@ -26,9 +26,8 @@ export default {
       <ci-icon v-else :status="statusObj" />
       <button
         v-if="showDisabledButton"
-        ref="mergeButton"
         type="button"
-        class="btn btn-success btn-sm"
+        class="js-disabled-merge-button btn btn-success btn-sm"
         disabled="true">
         Merge
       </button>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js
index f2245a532f4..7beff1cb803 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js
@@ -11,16 +11,15 @@ export default {
   template: `
     <div class="mr-widget-body media">
       <status-icon
-        ref="statusIcon"
         status="failed"
         showDisabledButton />
       <div class="media-body space-children">
-        <template v-if="mr.ffOnlyEnabled">
-          <span class="bold">
-            Fast-forward merge is not possible.
-            To merge this request, first rebase locally
-          </span>
-        </template>
+        <span
+          v-if="mr.ffOnlyEnabled"
+          class="bold">
+          Fast-forward merge is not possible.
+          To merge this request, first rebase locally
+        </span>
         <template v-else>
           <span class="bold">
             There are merge conflicts<span v-if="!mr.canMerge">.</span>
@@ -30,15 +29,13 @@ export default {
           </span>
           <a
             v-if="mr.canMerge && mr.conflictResolutionPath"
-            ref="resolveConflictsButton"
             :href="mr.conflictResolutionPath"
-            class="btn btn-default btn-xs">
+            class="js-resolve-conflicts-button btn btn-default btn-xs">
             Resolve conflicts
           </a>
           <a
             v-if="mr.canMerge"
-            ref="mergeLocallyButton"
-            class="btn btn-default btn-xs"
+            class="js-merge-locally-button btn btn-default btn-xs"
             data-toggle="modal"
             href="#modal_merge_info">
             Merge locally
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
index e1c37add496..f83d3ca00dd 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
@@ -286,15 +286,14 @@ export default {
 
               <span
                 v-if="mr.ffOnlyEnabled"
-                ref="fastForwardMessage">
+                class="js-fast-forward-message">
                 Fast-forward merge without a merge commit
               </span>
               <button
                 v-else
-                ref="modifyCommitMessageButton"
                 @click="toggleCommitMessageEditor"
                 :disabled="isMergeButtonDisabled"
-                class="btn btn-default btn-xs"
+                class="js-modify-commit-message-button btn btn-default btn-xs"
                 type="button">
                 Modify commit message
               </button>
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_conflicts_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_conflicts_spec.js
index b2f4244671c..cc3d638dd06 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_conflicts_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_conflicts_spec.js
@@ -28,25 +28,29 @@ describe('MRWidgetConflicts', () => {
         });
       });
 
+      afterEach(() => {
+        vm.$destroy();
+      });
+
       it('should tell you about conflicts without bothering other people', () => {
         expect(vm.$el.textContent).toContain('There are merge conflicts');
         expect(vm.$el.textContent).not.toContain('ask someone with write access');
       });
 
       it('should allow you to resolve the conflicts', () => {
-        const resolveButton = vm.$refs.resolveConflictsButton;
+        const resolveButton = vm.$el.querySelector('.js-resolve-conflicts-button');
 
         expect(resolveButton.textContent).toContain('Resolve conflicts');
         expect(resolveButton.getAttribute('href')).toEqual(path);
       });
 
       it('should have merge buttons', () => {
-        const mergeButton = vm.$refs.statusIcon.$refs.mergeButton;
-        const mergeLocallyButton = vm.$refs.mergeLocallyButton;
+        const mergeButton = vm.$el.querySelector('.js-disabled-merge-button');
+        const mergeLocallyButton = vm.$el.querySelector('.js-merge-locally-button');
 
         expect(mergeButton.textContent).toContain('Merge');
         expect(mergeButton.disabled).toBeTruthy();
-        expect(mergeButton.classList.contains('btn-success')).toBeTruthy();
+        expect(mergeButton.classList.contains('btn-success')).toEqual(true);
         expect(mergeLocallyButton.textContent).toContain('Merge locally');
       });
     });
@@ -62,14 +66,18 @@ describe('MRWidgetConflicts', () => {
         });
       });
 
+      afterEach(() => {
+        vm.$destroy();
+      });
+
       it('should show proper message', () => {
         expect(vm.$el.textContent).toContain('ask someone with write access');
       });
 
       it('should not have action buttons', () => {
-        expect(vm.$refs.statusIcon.$refs.mergeButton).toBeDefined();
-        expect(vm.$refs.resolveConflictsButton).toBeUndefined();
-        expect(vm.$refs.mergeLocallyButton).toBeUndefined();
+        expect(vm.$el.querySelector('.js-disabled-merge-button')).toBeDefined();
+        expect(vm.$el.querySelector('.js-resolve-conflicts-button')).toBeNull();
+        expect(vm.$el.querySelector('.js-merge-locally-button')).toBeNull();
       });
     });
 
@@ -84,6 +92,10 @@ describe('MRWidgetConflicts', () => {
         });
       });
 
+      afterEach(() => {
+        vm.$destroy();
+      });
+
       it('should tell you to rebase locally', () => {
         expect(vm.$el.textContent).toContain('Fast-forward merge is not possible.');
         expect(vm.$el.textContent).toContain('To merge this request, first rebase locally');
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
index f36b74c9e94..2422e844e97 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
@@ -474,8 +474,8 @@ describe('MRWidgetReadyToMerge', () => {
         mr: { ffOnlyEnabled: false },
       });
 
-      expect(customVm.$refs.fastForwardMessage).toBeUndefined();
-      expect(customVm.$refs.modifyCommitMessageButton).toBeDefined();
+      expect(customVm.$el.querySelector('.js-fast-forward-message')).toBeNull();
+      expect(customVm.$el.querySelector('.js-modify-commit-message-button')).toBeDefined();
     });
 
     it('when fast-forward merge is enabled, only show fast-forward message', () => {
@@ -483,8 +483,8 @@ describe('MRWidgetReadyToMerge', () => {
         mr: { ffOnlyEnabled: true },
       });
 
-      expect(customVm.$refs.fastForwardMessage).toBeDefined();
-      expect(customVm.$refs.modifyCommitMessageButton).toBeUndefined();
+      expect(customVm.$el.querySelector('.js-fast-forward-message')).toBeDefined();
+      expect(customVm.$el.querySelector('.js-modify-commit-message-button')).toBeNull();
     });
   });
 });