Add sidebar spec for new project issue boards (EE)

- Remove the stub for `graphql_board_lists` from sidebar_spec.rb (EE).

This adds spec coverage for project issue boards when it is using
graphql-based boards code. A few selectors are added for testing
in sidebar components.

- Create a temporary spec for the classic boards

We will simply clone `sidebar_spec.rb` as `sidebar_deprecated_spec.rb`
and continue to provide the spec coverage for project issue boards (EE)
when it is using the classic boards code.

app/assets/javascripts/boards/components/sidebar/board_sidebar_labels_select.vue

@@ -77,7 +77,12 @@ export default {
 </script>
 
 <template>
-  <board-editable-item ref="sidebarItem" :title="__('Labels')" :loading="loading">
+  <board-editable-item
+    ref="sidebarItem"
+    :title="__('Labels')"
+    :loading="loading"
+    data-testid="sidebar-labels"
+  >
     <template #collapsed>
       <gl-label
         v-for="label in issueLabels"

ee/app/assets/javascripts/boards/components/sidebar/board_sidebar_weight_input.vue

@@ -70,6 +70,7 @@ export default {
     ref="sidebarItem"
     :title="__('Weight')"
     :loading="loading"
+    data-testid="sidebar-weight"
     @close="setWeight()"
   >
     <template v-if="hasWeight" #collapsed>

ee/spec/features/boards/sidebar_spec.rb

@@ -20,9 +20,11 @@ RSpec.describe 'Issue Boards', :js do
   let!(:list)        { create(:list, board: board, label: development, position: 0) }
   let(:card1) { find('.board:nth-child(2)').find('.board-card:nth-child(2)') }
   let(:card2) { find('.board:nth-child(2)').find('.board-card:nth-child(1)') }
+  let(:epic1) { create(:epic, group: group, title: 'Foo') }
+  let!(:epic2) { create(:epic, group: group, title: 'Bar') }
+  let!(:epic_issue) { create(:epic_issue, issue: issue2, epic: epic1) }
 
   before do
-    stub_feature_flags(graphql_board_lists: false)
     stub_licensed_features(multiple_issue_assignees: true)
 
     project.add_maintainer(user)
@@ -166,28 +168,24 @@ RSpec.describe 'Issue Boards', :js do
         click_card(card1)
         wait_for_requests
 
-        expect(find('.js-epic-label').text).to have_content('None')
+        expect(find('[data-testid="sidebar-epic"]').text).to have_content('None')
       end
     end
 
     context 'when the issue is associated with an epic' do
-      let(:epic1)         { create(:epic, group: group, title: 'Foo') }
-      let!(:epic2)        { create(:epic, group: group, title: 'Bar') }
-      let!(:epic_issue)   { create(:epic_issue, issue: issue1, epic: epic1) }
-
       it 'displays name of epic and links to it' do
-        click_card(card1)
+        click_card(card2)
         wait_for_requests
 
-        expect(find('.js-epic-label')).to have_link(epic1.title, href: epic_path(epic1))
+        expect(find('[data-testid="sidebar-epic"]')).to have_link(epic1.title, href: epic_path(epic1))
       end
 
       it 'updates the epic associated with the issue' do
-        click_card(card1)
+        click_card(card2)
         wait_for_requests
 
-        page.within(find('.js-epic-block')) do
-          page.find('.sidebar-dropdown-toggle').click
+        page.within(find('[data-testid="sidebar-epic"]')) do
+          click_button 'Edit'
           wait_for_requests
 
           find('.gl-new-dropdown-item', text: epic2.title).click
@@ -195,15 +193,6 @@ RSpec.describe 'Issue Boards', :js do
 
           expect(page.find('.value')).to have_content(epic2.title)
         end
-
-        # Ensure that boards_store is also updated the epic associated with the issue.
-        click_card(card1)
-        wait_for_requests
-
-        click_card(card1)
-        wait_for_requests
-
-        expect(find('.js-epic-label')).to have_content(epic2.title)
       end
     end
   end
@@ -213,16 +202,16 @@ RSpec.describe 'Issue Boards', :js do
       click_card(card1)
       wait_for_requests
 
-      expect(find('.js-weight-weight-label').text).to have_content(issue1.weight)
+      expect(find('[data-testid="sidebar-weight"]').text).to have_content(issue1.weight)
     end
 
     it 'updates weight in sidebar to 1' do
       click_card(card1)
       wait_for_requests
 
-      page.within '.weight' do
-        click_link 'Edit'
-        find('.block.weight input').send_keys 1, :enter
+      page.within '[data-testid="sidebar-weight"]' do
+        click_button 'Edit'
+        find('.weight input').send_keys 1, :enter
 
         page.within '.value' do
           expect(page).to have_content '1'
@@ -236,7 +225,7 @@ RSpec.describe 'Issue Boards', :js do
       click_card(card1)
       wait_for_requests
 
-      page.within '.weight' do
+      page.within '[data-testid="sidebar-weight"]' do
         page.within '.value' do
           expect(page).to have_content '1'
         end
@@ -247,8 +236,8 @@ RSpec.describe 'Issue Boards', :js do
       click_card(card1)
       wait_for_requests
 
-      page.within '.weight' do
-        click_link 'remove weight'
+      page.within '[data-testid="sidebar-weight"]' do
+        click_button 'remove weight'
 
         page.within '.value' do
           expect(page).to have_content 'None'
@@ -280,7 +269,7 @@ RSpec.describe 'Issue Boards', :js do
         click_card(card1)
         wait_for_requests
 
-        expect(page).not_to have_selector('.js-weight-weight-label')
+        expect(page).not_to have_selector('[data-testid="sidebar-weight"]')
       end
     end
   end
@@ -296,8 +285,8 @@ RSpec.describe 'Issue Boards', :js do
     it 'adds multiple scoped labels' do
       click_card(card1)
 
-      page.within('.labels') do
-        click_link 'Edit'
+      page.within('[data-testid="sidebar-labels"]') do
+        click_button 'Edit'
 
         wait_for_requests
 
@@ -309,7 +298,7 @@ RSpec.describe 'Issue Boards', :js do
 
         wait_for_requests
 
-        find('.dropdown-menu-close-icon').click
+        find('[data-testid="close-icon"]').click
 
         page.within('.value') do
           expect(page).to have_selector('.gl-label-scoped', count: 2)
@@ -336,8 +325,8 @@ RSpec.describe 'Issue Boards', :js do
       it 'removes existing scoped label' do
         click_card(card3)
 
-        page.within('.labels') do
-          click_link 'Edit'
+        page.within('[data-testid="sidebar-labels"]') do
+          click_button 'Edit'
 
           wait_for_requests
 
@@ -345,7 +334,7 @@ RSpec.describe 'Issue Boards', :js do
 
           wait_for_requests
 
-          find('.dropdown-menu-close-icon').click
+          find('[data-testid="close-icon"]').click
 
           page.within('.value') do
             expect(page).to have_selector('.gl-label-scoped', count: 1)
@@ -370,12 +359,12 @@ RSpec.describe 'Issue Boards', :js do
     it 'closes card sidebar when opening settings sidebar' do
       click_card(card1)
 
-      expect(page).to have_selector('.right-sidebar')
+      expect(page).to have_selector('[data-testid="issue-boards-sidebar"]')
 
       settings_button.click
 
       expect(page).to have_selector('.js-board-settings-sidebar')
-      expect(page).not_to have_selector('.right-sidebar')
+      expect(page).not_to have_selector('[data-testid="issue-boards-sidebar"]')
     end
 
     it 'closes settings sidebar when opening card sidebar' do
@@ -385,7 +374,7 @@ RSpec.describe 'Issue Boards', :js do
 
       click_card(card1)
 
-      expect(page).to have_selector('.right-sidebar')
+      expect(page).to have_selector('[data-testid="issue-boards-sidebar"]')
       expect(page).not_to have_selector('.js-board-settings-sidebar')
     end
   end