Fix tests broken by the changes to the "comment type dropdown"

The new vue-based comment type selector has a slightly different DOM
structure that needs to be accounted for in the capybara tests

app/assets/javascripts/deprecated_notes.js

@@ -129,7 +129,7 @@ export default class Notes {
     this.$wrapperEl.on('click', '.js-note-edit', this.showEditForm.bind(this));
     this.$wrapperEl.on('click', '.note-edit-cancel', this.cancelEdit);
     // Reopen and close actions for Issue/MR combined with note form submit
-    this.$wrapperEl.on('click', '.js-comment-submit-button', this.postComment);
+    this.$wrapperEl.on('click', '.js-comment-submit-button > button:first-child', this.postComment);
     this.$wrapperEl.on('click', '.js-comment-save-button', this.updateComment);
     this.$wrapperEl.on('keyup input', '.js-note-text', this.updateTargetButtons);
     // resolve a discussion

spec/features/snippets/notes_on_personal_snippets_spec.rb

@@ -70,8 +70,8 @@ RSpec.describe 'Comments on personal snippets', :js do
   context 'when submitting a note' do
     it 'shows a valid form' do
       is_expected.to have_css('.js-main-target-form', visible: true, count: 1)
-      expect(find('.js-main-target-form .js-comment-button').value)
-        .to eq('Comment')
+      expect(find('.js-main-target-form .js-comment-button button', match: :first))
+        .to have_content('Comment')
 
       page.within('.js-main-target-form') do
         expect(page).not_to have_link('Cancel')

spec/support/shared_examples/features/discussion_comments_shared_example.rb

@@ -3,9 +3,9 @@
 RSpec.shared_examples 'thread comments for commit and snippet' do |resource_name|
   let(:form_selector) { '.js-main-target-form' }
   let(:dropdown_selector) { "#{form_selector} .comment-type-dropdown" }
-  let(:toggle_selector) { "#{dropdown_selector} .dropdown-toggle" }
+  let(:toggle_selector) { "#{dropdown_selector} .gl-dropdown-toggle" }
   let(:menu_selector) { "#{dropdown_selector} .dropdown-menu" }
-  let(:submit_selector) { "#{form_selector} .js-comment-submit-button" }
+  let(:submit_selector) { "#{form_selector} .js-comment-submit-button > button:first-child" }
   let(:close_selector) { "#{form_selector} .btn-comment-and-close" }
   let(:comments_selector) { '.timeline > .note.timeline-entry:not(.being-posted)' }
   let(:comment) { 'My comment' }
@@ -43,13 +43,11 @@ RSpec.shared_examples 'thread comments for commit and snippet' do |resource_name
 
       expect(items.first).to have_content 'Comment'
       expect(items.first).to have_content "Add a general comment to this #{resource_name}."
-      expect(items.first).to have_selector '[data-testid="check-icon"]'
-      expect(items.first['class']).to match 'droplab-item-selected'
+      expect(items.first).to have_selector '[data-testid="dropdown-item-checkbox"]'
 
       expect(items.last).to have_content 'Start thread'
       expect(items.last).to have_content "Discuss a specific suggestion or question#{' that needs to be resolved' if resource_name == 'merge request'}."
-      expect(items.last).not_to have_selector '[data-testid="check-icon"]'
-      expect(items.last['class']).not_to match 'droplab-item-selected'
+      expect(items.last).not_to have_selector '[data-testid="dropdown-item-checkbox"]'
     end
 
     it 'closes the menu when clicking the toggle or body' do
@@ -75,14 +73,14 @@ RSpec.shared_examples 'thread comments for commit and snippet' do |resource_name
         expect(find(dropdown_selector)).to have_content 'Comment'
 
         find(toggle_selector).click
-        execute_script("document.querySelector('#{menu_selector} .divider').click()")
+        execute_script("document.querySelector('#{menu_selector} .dropdown-divider').click()")
       else
         execute_script("document.querySelector('#{menu_selector}').click()")
 
         expect(page).to have_selector menu_selector
         expect(find(dropdown_selector)).to have_content 'Comment'
 
-        execute_script("document.querySelector('#{menu_selector} .divider').click()")
+        execute_script("document.querySelector('#{menu_selector} .dropdown-divider').click()")
 
         expect(page).to have_selector menu_selector
       end
@@ -97,7 +95,7 @@ RSpec.shared_examples 'thread comments for commit and snippet' do |resource_name
       end
 
       it 'updates the submit button text and closes the dropdown' do
-        expect(find(submit_selector).value).to eq 'Start thread'
+        expect(find(submit_selector).text).to eq 'Start thread'
 
         expect(page).not_to have_selector menu_selector
       end
@@ -137,12 +135,10 @@ RSpec.shared_examples 'thread comments for commit and snippet' do |resource_name
           items = all("#{menu_selector} li")
 
           expect(items.first).to have_content 'Comment'
-          expect(items.first).not_to have_selector '[data-testid="check-icon"]'
-          expect(items.first['class']).not_to match 'droplab-item-selected'
+          expect(items.first).not_to have_selector '[data-testid="dropdown-item-checkbox"]'
 
           expect(items.last).to have_content 'Start thread'
-          expect(items.last).to have_selector '[data-testid="check-icon"]'
-          expect(items.last['class']).to match 'droplab-item-selected'
+          expect(items.last).to have_selector '[data-testid="dropdown-item-checkbox"]'
         end
 
         describe 'when selecting "Comment"' do
@@ -153,7 +149,7 @@ RSpec.shared_examples 'thread comments for commit and snippet' do |resource_name
           it 'updates the submit button text and closes the dropdown' do
             button = find(submit_selector)
 
-            expect(button.value).to eq 'Comment'
+            expect(button.text).to eq 'Comment'
 
             expect(page).not_to have_selector menu_selector
           end
@@ -166,12 +162,10 @@ RSpec.shared_examples 'thread comments for commit and snippet' do |resource_name
 
             aggregate_failures do
               expect(items.first).to have_content 'Comment'
-              expect(items.first).to have_selector '[data-testid="check-icon"]'
-              expect(items.first['class']).to match 'droplab-item-selected'
+              expect(items.first).to have_selector '[data-testid="dropdown-item-checkbox"]'
 
               expect(items.last).to have_content 'Start thread'
-              expect(items.last).not_to have_selector '[data-testid="check-icon"]'
-              expect(items.last['class']).not_to match 'droplab-item-selected'
+              expect(items.last).not_to have_selector '[data-testid="dropdown-item-checkbox"]'
             end
           end
         end