Add testability on views

app/assets/javascripts/boards/components/board_card.vue

@@ -83,6 +83,7 @@ export default {
     }"
     :index="index"
     :data-issue-id="issue.id"
+    data-qa-selector="board_card"
     class="board-card p-3 rounded"
     @mousedown="mouseDown"
     @mousemove="mouseMove"

app/assets/javascripts/boards/components/board_list.vue

@@ -227,6 +227,7 @@ export default {
   <div
     :class="{ 'd-none': !list.isExpanded, 'd-flex flex-column': list.isExpanded }"
     class="board-list-component position-relative h-100"
+    data-qa-selector="board_list_cards_area"
   >
     <div v-if="loading" class="board-list-loading text-center" :aria-label="__('Loading issues')">
       <gl-loading-icon />

app/assets/javascripts/boards/components/boards_selector.vue

@@ -226,6 +226,7 @@ export default {
   <div class="boards-switcher js-boards-selector append-right-10">
     <span class="boards-selector-wrapper js-boards-selector-wrapper">
       <gl-dropdown
+        data-qa-selector="boards_dropdown"
         toggle-class="dropdown-menu-toggle js-dropdown-toggle"
         menu-class="flex-column dropdown-extended-height"
         :text="board.name"

app/views/shared/boards/_show.html.haml

@@ -16,7 +16,7 @@
 #board-app.boards-app.position-relative{ "v-cloak" => "true", data: board_data, ":class" => "{ 'is-compact': detailIssueVisible }" }
   = render 'shared/issuable/search_bar', type: :boards, board: board
 
-  .boards-list.w-100.py-3.px-2.text-nowrap
+  .boards-list.w-100.py-3.px-2.text-nowrap{ data: { qa_selector: "boards_list" } }
     .boards-app-loading.w-100.text-center{ "v-if" => "loading" }
       = icon("spinner spin 2x")
     %board{ "v-cloak" => "true",

app/views/shared/boards/components/_board.html.haml

@@ -1,7 +1,7 @@
 .board.d-inline-block.h-100.px-2.align-top.ws-normal{ ":class" => '{ "is-draggable": !list.preset, "is-expandable": list.isExpandable, "is-collapsed": !list.isExpanded, "board-type-assignee": list.type === "assignee" }',
-  ":data-id" => "list.id" }
+  ":data-id" => "list.id", data: { qa_selector: "board_list" } }
   .board-inner.d-flex.flex-column.position-relative.h-100.rounded
-    %header.board-header{ ":class" => '{ "has-border": list.label && list.label.color, "position-relative": list.isExpanded, "position-absolute position-top-0 position-left-0 w-100 h-100": !list.isExpanded }', ":style" => "{ borderTopColor: (list.label && list.label.color ? list.label.color : null) }" }
+    %header.board-header{ ":class" => '{ "has-border": list.label && list.label.color, "position-relative": list.isExpanded, "position-absolute position-top-0 position-left-0 w-100 h-100": !list.isExpanded }', ":style" => "{ borderTopColor: (list.label && list.label.color ? list.label.color : null) }", data: { qa_selector: "board_list_header" } }
       %h3.board-title.m-0.d-flex.js-board-handle{ ":class" => '{ "user-can-drag": (!disabled && !list.preset), "border-bottom-0": !list.isExpanded }' }
 
         .board-title-caret.no-drag{ "v-if": "list.isExpandable",