Merge branch 'tp-qtt182-9' into 'master'

Change qa-* class references to js-* for suggestions

Closes gitlab-org/quality/team-tasks#182

See merge request gitlab-org/gitlab-ce!31213

app/assets/javascripts/vue_shared/components/markdown/header.vue

@@ -123,7 +123,7 @@ export default {
               :cursor-offset="4"
               :tag-content="lineContent"
               icon="doc-code"
-              class="qa-suggestion-btn"
+              class="qa-suggestion-btn js-suggestion-btn"
               @click="handleSuggestDismissed"
             />
             <gl-popover

app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue

@@ -39,7 +39,7 @@ export default {
 <template>
   <div class="md-suggestion">
     <suggestion-diff-header
-      class="qa-suggestion-diff-header"
+      class="qa-suggestion-diff-header js-suggestion-diff-header"
       :can-apply="suggestion.appliable && suggestion.current_user.can_apply && !disabled"
       :is-applied="suggestion.applied"
       :help-page-path="helpPagePath"

app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue

@@ -41,7 +41,7 @@ export default {
 
 <template>
   <div class="md-suggestion-header border-bottom-0 mt-2">
-    <div class="qa-suggestion-diff-header font-weight-bold">
+    <div class="qa-suggestion-diff-header js-suggestion-diff-header font-weight-bold">
       {{ __('Suggested change') }}
       <a v-if="helpPagePath" :href="helpPagePath" :aria-label="__('Help')" class="js-help-btn">
         <icon name="question-o" css-classes="link-highlight" />
@@ -55,7 +55,7 @@ export default {
     <gl-button
       v-else-if="canApply"
       v-gl-tooltip.viewport="__('This also resolves the discussion')"
-      class="btn-inverted qa-apply-btn"
+      class="btn-inverted qa-apply-btn js-apply-btn"
       :disabled="isApplying"
       variant="success"
       @click="applySuggestion"

spec/features/markdown/copy_as_gfm_spec.rb

@@ -418,8 +418,8 @@ describe 'Copy as GFM', :js do
 
         html = <<~HTML
           <div class="md-suggestion">
-            <div class="md-suggestion-header border-bottom-0 mt-2 qa-suggestion-diff-header">
-              <div class="qa-suggestion-diff-header font-weight-bold">
+            <div class="md-suggestion-header border-bottom-0 mt-2 qa-suggestion-diff-header js-suggestion-diff-header">
+              <div class="qa-suggestion-diff-header js-suggestion-diff-header font-weight-bold">
                 Suggested change
                 <a href="/gitlab/help/user/discussions/index.md#suggest-changes" aria-label="Help" class="js-help-btn">
                   <svg aria-hidden="true" class="s16 ic-question-o link-highlight">
@@ -428,7 +428,7 @@ describe 'Copy as GFM', :js do
                 </a>
               </div>
               <!---->
-              <button type="button" class="btn qa-apply-btn">Apply suggestion</button>
+              <button type="button" class="btn qa-apply-btn js-apply-btn">Apply suggestion</button>
             </div>
             <table class="mb-3 md-suggestion-diff js-syntax-highlight code white">
               <tbody>

spec/frontend/vue_shared/components/markdown/header_spec.js

@@ -101,7 +101,7 @@ describe('Markdown field header component', () => {
     vm.canSuggest = false;
 
     Vue.nextTick(() => {
-      expect(vm.$el.querySelector('.qa-suggestion-btn')).toBe(null);
+      expect(vm.$el.querySelector('.js-suggestion-btn')).toBe(null);
     });
   });
 });

spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js

@@ -28,8 +28,8 @@ describe('Suggestion Diff component', () => {
     wrapper.destroy();
   });
 
-  const findApplyButton = () => wrapper.find('.qa-apply-btn');
-  const findHeader = () => wrapper.find('.qa-suggestion-diff-header');
+  const findApplyButton = () => wrapper.find('.js-apply-btn');
+  const findHeader = () => wrapper.find('.js-suggestion-diff-header');
   const findHelpButton = () => wrapper.find('.js-help-btn');
   const findLoading = () => wrapper.find(GlLoadingIcon);
 

spec/javascripts/vue_shared/components/markdown/suggestion_diff_spec.js

@@ -60,7 +60,7 @@ describe('Suggestion Diff component', () => {
 
   describe('init', () => {
     it('renders a suggestion header', () => {
-      expect(vm.$el.querySelector('.qa-suggestion-diff-header')).not.toBeNull();
+      expect(vm.$el.querySelector('.js-suggestion-diff-header')).not.toBeNull();
     });
 
     it('renders a diff table with syntax highlighting', () => {