Clean up board code

Remove some js- classes and refactor tests accordingly

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

@@ -240,7 +240,7 @@ export default {
       class="board-card-footer gl-display-flex gl-justify-content-space-between gl-align-items-flex-end"
     >
       <div
-        class="gl-display-flex align-items-start flex-wrap-reverse board-card-number-container gl-overflow-hidden js-board-card-number-container"
+        class="gl-display-flex align-items-start flex-wrap-reverse board-card-number-container gl-overflow-hidden"
       >
         <gl-loading-icon v-if="item.isLoading" size="md" class="mt-3" />
         <span

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

@@ -289,7 +289,7 @@ export default {
     <p v-if="isDeleteForm" data-testid="delete-confirmation-message">
       {{ $options.i18n.deleteConfirmationMessage }}
     </p>
-    <form v-else class="js-board-config-modal" data-testid="board-form-wrapper" @submit.prevent>
+    <form v-else data-testid="board-form-wrapper" @submit.prevent>
       <div v-if="!readonly" class="gl-mb-5" data-testid="board-form">
         <label class="gl-font-weight-bold gl-font-lg" for="board-new-name">
           {{ $options.i18n.titleFieldLabel }}

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

@@ -287,7 +287,7 @@ export default {
       :data-board-type="list.listType"
       :class="{ 'bg-danger-100': boardItemsSizeExceedsMax }"
       draggable=".board-card"
-      class="board-list gl-w-full gl-h-full gl-list-style-none gl-mb-0 gl-p-2 js-board-list"
+      class="board-list gl-w-full gl-h-full gl-list-style-none gl-mb-0 gl-p-2"
       data-testid="tree-root-wrapper"
       @start="handleDragOnStart"
       @end="handleDragOnEnd"

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

@@ -262,7 +262,7 @@ export default {
         'gl-py-2': list.collapsed && isSwimlanesHeader,
         'gl-flex-direction-column': list.collapsed,
       }"
-      class="board-title gl-m-0 gl-display-flex gl-align-items-center gl-font-base gl-px-3 js-board-handle"
+      class="board-title gl-m-0 gl-display-flex gl-align-items-center gl-font-base gl-px-3"
     >
       <gl-button
         v-gl-tooltip.hover
@@ -443,9 +443,10 @@ export default {
           ref="settingsBtn"
           v-gl-tooltip.hover
           :aria-label="$options.i18n.listSettings"
-          class="no-drag js-board-settings-button"
+          class="no-drag"
           :title="$options.i18n.listSettings"
           icon="settings"
+          data-testid="board-settings-button"
           @click="openSidebarSettings"
         />
         <gl-tooltip :target="() => $refs.settingsBtn">{{ $options.i18n.listSettings }}</gl-tooltip>

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

@@ -239,11 +239,12 @@ export default {
 </script>
 
 <template>
-  <div class="boards-switcher js-boards-selector gl-mr-3">
-    <span class="boards-selector-wrapper js-boards-selector-wrapper">
+  <div class="boards-switcher gl-mr-3" data-testid="boards-selector">
+    <span class="boards-selector-wrapper">
       <gl-dropdown
+        data-testid="boards-dropdown"
         data-qa-selector="boards_dropdown"
-        toggle-class="dropdown-menu-toggle js-dropdown-toggle"
+        toggle-class="dropdown-menu-toggle"
         menu-class="flex-column dropdown-extended-height"
         :loading="isBoardLoading"
         :text="board.name"
@@ -276,8 +277,8 @@ export default {
             <gl-dropdown-item
               v-for="recentBoard in recentBoards"
               :key="`recent-${recentBoard.id}`"
-              class="js-dropdown-item"
               :href="`${boardBaseUrl}/${recentBoard.id}`"
+              data-testid="dropdown-item"
             >
               {{ recentBoard.name }}
             </gl-dropdown-item>
@@ -292,8 +293,8 @@ export default {
           <gl-dropdown-item
             v-for="otherBoard in filteredBoards"
             :key="otherBoard.id"
-            class="js-dropdown-item"
             :href="`${boardBaseUrl}/${otherBoard.id}`"
+            data-testid="dropdown-item"
           >
             {{ otherBoard.name }}
           </gl-dropdown-item>
@@ -331,7 +332,7 @@ export default {
           <gl-dropdown-item
             v-if="showDelete"
             v-gl-modal-directive="'board-config-modal'"
-            class="text-danger js-delete-board"
+            class="text-danger"
             @click.prevent="showPage('delete')"
           >
             {{ s__('IssueBoards|Delete board') }}

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

@@ -43,7 +43,7 @@ export default {
     <gl-tooltip
       :target="() => $refs.issueTimeEstimate"
       placement="bottom"
-      class="js-issue-time-estimate"
+      data-testid="issue-time-estimate"
     >
       <span class="gl-font-weight-bold gl-display-block">{{ $options.i18n.timeEstimate }}</span>
       {{ title }}

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

@@ -29,7 +29,7 @@ export default {
     <span :class="{ 'text-danger': issuesExceedMax }" data-testid="board-items-count">
       {{ itemsSize }}
     </span>
-    <span v-if="isMaxLimitSet" class="js-max-issue-size">
+    <span v-if="isMaxLimitSet" class="max-issue-size">
       {{ maxIssueCount }}
     </span>
   </div>

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

@@ -38,7 +38,7 @@ export default {
       v-gl-tooltip
       category="tertiary"
       :icon="isFullscreen ? 'minimize' : 'maximize'"
-      class="js-focus-mode-btn"
+      data-testid="focus-mode-btn"
       data-qa-selector="focus_mode_button"
       :title="$options.i18n.toggleFocusMode"
       :aria-label="$options.i18n.toggleFocusMode"

app/assets/stylesheets/page_bundles/boards.scss

@@ -198,7 +198,7 @@
   border-bottom: 1px solid var(--gray-100, $gray-100);
   height: 3rem;
 
-  .js-max-issue-size::before {
+  .max-issue-size::before {
     content: '/';
   }
 }

ee/app/assets/javascripts/boards/components/board_settings_wip_limit.vue

@@ -107,8 +107,9 @@ export default {
     <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-mb-2">
       <label class="m-0">{{ $options.i18n.wipLimitText }}</label>
       <gl-button
-        class="js-edit-button gl-h-full gl-border-0 text-dark"
+        class="gl-h-full gl-border-0 text-dark"
         variant="link"
+        data-testid="edit-button"
         @click="showInput"
         >{{ $options.i18n.editLinkText }}</gl-button
       >
@@ -128,12 +129,13 @@ export default {
       @blur="offFocus"
     />
     <div v-else class="gl-display-flex gl-align-items-center">
-      <p class="js-wip-limit bold gl-m-0 text-secondary">{{ activeListWipLimit }}</p>
+      <p class="bold gl-m-0 text-secondary" data-testid="wip-limit">{{ activeListWipLimit }}</p>
       <template v-if="wipLimitIsSet">
         <span class="m-1">-</span>
         <gl-button
-          class="js-remove-limit gl-h-full gl-border-0 text-secondary"
+          class="gl-h-full gl-border-0 text-secondary"
           variant="link"
+          data-testid="remove-limit"
           @click="clearWipLimit"
           >{{ $options.i18n.removeLimitText }}</gl-button
         >

ee/app/assets/javascripts/boards/components/issue_card_weight.vue

@@ -30,11 +30,7 @@ export default {
   >
     <gl-icon name="weight" class="board-card-info-icon gl-mr-2" />
     <span data-testid="board-card-weight" class="board-card-info-text"> {{ weight }} </span>
-    <gl-tooltip
-      :target="() => $refs.itemWeight"
-      placement="bottom"
-      container="body"
-      class="js-item-weight"
+    <gl-tooltip :target="() => $refs.itemWeight" placement="bottom" container="body"
       >{{ __('Weight') }}<br /><span class="text-tertiary">{{ weight }}</span>
     </gl-tooltip>
   </component>

ee/spec/features/boards/boards_spec.rb

@@ -147,7 +147,7 @@ RSpec.describe 'Project issue boards', :js do
         it 'displays issue and max issue size' do
           page.within(find(".board:nth-child(2)")) do
             expect(page.find('[data-testid="board-items-count"]')).to have_text(total_development_issues)
-            expect(page.find('.js-max-issue-size')).to have_text(max_issue_count)
+            expect(page.find('.max-issue-size')).to have_text(max_issue_count)
           end
         end
       end
@@ -207,11 +207,11 @@ RSpec.describe 'Project issue boards', :js do
           end
 
           it "sets max issue count to zero" do
-            page.find('.js-remove-limit').click
+            page.find('[data-testid="remove-limit"]').click
 
             wait_for_requests
 
-            expect(page.find('.js-wip-limit')).to have_text("None")
+            expect(page.find('[data-testid="wip-limit"]')).to have_text("None")
           end
         end
 
@@ -235,7 +235,7 @@ RSpec.describe 'Project issue boards', :js do
               click_button('List settings')
             end
 
-            expect(page.find('.js-wip-limit')).to have_text(max_issue_count)
+            expect(page.find('[data-testid="wip-limit"]')).to have_text(max_issue_count)
           end
         end
 
@@ -253,7 +253,7 @@ RSpec.describe 'Project issue boards', :js do
 
             wait_for_requests
 
-            expect(page.find('.js-wip-limit')).to have_text(max_issue_count)
+            expect(page.find('[data-testid="wip-limit"]')).to have_text(max_issue_count)
           end
 
           context "When user sets max issue count to 0" do
@@ -270,7 +270,7 @@ RSpec.describe 'Project issue boards', :js do
 
               wait_for_requests
 
-              expect(page.find('.js-wip-limit')).to have_text("None")
+              expect(page.find('[data-testid="wip-limit"]')).to have_text("None")
             end
           end
         end
@@ -285,7 +285,7 @@ RSpec.describe 'Project issue boards', :js do
 
             wait_for_requests
 
-            expect(page.find('.js-wip-limit')).to have_text(1)
+            expect(page.find('[data-testid="wip-limit"]')).to have_text(1)
           end
         end
       end

ee/spec/features/boards/group_boards/board_deletion_spec.rb

@@ -20,18 +20,18 @@ RSpec.describe 'Group Boards', :js do
 
     wait_for_requests
 
-    find(:css, '.js-delete-board button').click
+    click_button _('Delete board')
     find(:css, '.board-config-modal .js-modal-action-primary').click
 
     click_boards_dropdown
 
-    page.within('.js-boards-selector') do
+    page.within('[data-testid="boards-selector"]') do
       expect(page).not_to have_content(board_dev.name)
       expect(page).to have_content(board_ux.name)
     end
   end
 
   def click_boards_dropdown
-    find(:css, '.js-dropdown-toggle').click
+    find('[data-testid="boards-dropdown"]').click
   end
 end

ee/spec/features/boards/group_boards/multiple_boards_spec.rb

@@ -27,7 +27,7 @@ RSpec.describe 'Multiple Issue Boards', :js do
 
       click_button board.name
 
-      page.within('.js-boards-selector .dropdown-menu') do
+      page.within('[data-testid="boards-selector"] .dropdown-menu') do
         expect(page).not_to have_content('Create new board')
         expect(page).not_to have_content('Delete board')
       end

ee/spec/features/boards/scoped_issue_board_spec.rb

@@ -112,7 +112,7 @@ RSpec.describe 'Scoped issue boards', :js do
           visit group_boards_path(group)
           wait_for_requests
 
-          expect(page).to have_css('.js-boards-selector')
+          expect(page).to have_selector('[data-testid="boards-selector"]')
           click_on_create_new_board
 
           click_button 'Expand'
@@ -572,7 +572,7 @@ RSpec.describe 'Scoped issue boards', :js do
     it "doesn't show the input when creating a board" do
       click_on_create_new_board
 
-      page.within '.js-board-config-modal' do
+      page.within '[data-testid="board-form-wrapper"]' do
         # To make sure the form is shown
         expect(page).to have_field('board-new-name')
 
@@ -681,7 +681,7 @@ RSpec.describe 'Scoped issue boards', :js do
   end
 
   def click_on_create_new_board
-    page.within '.js-boards-selector' do
+    page.within '[data-testid="boards-selector"]' do
       find('.dropdown-menu-toggle').click
       wait_for_requests
 

ee/spec/features/boards/sidebar_spec.rb

@@ -377,7 +377,7 @@ RSpec.describe 'Issue Boards', :js do
   end
 
   context 'when opening sidebars' do
-    let(:settings_button) { find('.js-board-settings-button') }
+    let(:settings_button) { find('[data-testid="board-settings-button"]') }
 
     it 'closes card sidebar when opening settings sidebar' do
       click_card(card1)

ee/spec/features/epic_boards/epic_boards_spec.rb

@@ -363,7 +363,7 @@ RSpec.describe 'epic boards', :js do
   end
 
   def click_on_create_new_board
-    page.within '.js-boards-selector' do
+    page.within '[data-testid="boards-selector"]' do
       find('.dropdown-menu-toggle').click
       wait_for_requests
 

ee/spec/features/epic_boards/multiple_epic_boards_spec.rb

@@ -87,7 +87,7 @@ RSpec.describe 'epic boards', :js do
 
     wait_for_requests
 
-    dropdown_selector = '.js-boards-selector .dropdown-menu'
+    dropdown_selector = '[data-testid="boards-selector"] .dropdown-menu'
     page.within(dropdown_selector) do
       yield
     end

ee/spec/frontend/boards/components/board_settings_wip_limit_spec.js

 import { GlFormInput } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
 import { noop } from 'lodash';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import BoardSettingsWipLimit from 'ee_component/boards/components/board_settings_wip_limit.vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { mockLabelList } from 'jest/boards/mock_data';
 
@@ -15,9 +15,9 @@ describe('BoardSettingsWipLimit', () => {
   const listId = mockLabelList.id;
   const currentWipLimit = 1; // Needs to be other than null to trigger requests
 
-  const clickEdit = () => wrapper.find('.js-edit-button').vm.$emit('click');
-  const findRemoveWipLimit = () => wrapper.find('.js-remove-limit');
-  const findWipLimit = () => wrapper.find('.js-wip-limit');
+  const clickEdit = () => wrapper.findByTestId('edit-button').vm.$emit('click');
+  const findRemoveWipLimit = () => wrapper.findByTestId('remove-limit');
+  const findWipLimit = () => wrapper.findByTestId('wip-limit');
   const findInput = () => wrapper.findComponent(GlFormInput);
 
   const createComponent = ({
@@ -33,7 +33,7 @@ describe('BoardSettingsWipLimit', () => {
       actions: storeActions,
     });
 
-    wrapper = shallowMount(BoardSettingsWipLimit, {
+    wrapper = shallowMountExtended(BoardSettingsWipLimit, {
       propsData: props,
       store,
       data() {

locale/gitlab.pot

@@ -11936,6 +11936,9 @@ msgstr ""
 msgid "Delete badge"
 msgstr ""
 
+msgid "Delete board"
+msgstr ""
+
 msgid "Delete column"
 msgstr ""
 

spec/features/boards/boards_spec.rb

@@ -282,7 +282,7 @@ RSpec.describe 'Project issue boards', :js do
             it 'shows issue count on the list' do
               page.within(find(".board:nth-child(2)")) do
                 expect(page.find('[data-testid="board-items-count"]')).to have_text(total_planning_issues)
-                expect(page).not_to have_selector('.js-max-issue-size')
+                expect(page).not_to have_selector('.max-issue-size')
               end
             end
           end

spec/features/boards/focus_mode_spec.rb

@@ -12,6 +12,6 @@ RSpec.describe 'Issue Boards focus mode', :js do
   end
 
   it 'shows focus mode button to anonymous users' do
-    expect(page).to have_selector('.js-focus-mode-btn')
+    expect(page).to have_selector('[data-testid="focus-mode-btn"]')
   end
 end

spec/features/boards/multi_select_spec.rb

@@ -72,7 +72,7 @@ RSpec.describe 'Multi Select Issue', :js do
 
       wait_for_requests
 
-      page.within(all('.js-board-list')[2]) do
+      page.within(all('.board-list')[2]) do
         expect(find('.board-card:nth-child(1)')).to have_content(issue1.title)
         expect(find('.board-card:nth-child(2)')).to have_content(issue2.title)
       end
@@ -87,7 +87,7 @@ RSpec.describe 'Multi Select Issue', :js do
 
       wait_for_requests
 
-      page.within(all('.js-board-list')[2]) do
+      page.within(all('.board-list')[2]) do
         expect(find('.board-card:nth-child(1)')).to have_content(issue1.title)
         expect(find('.board-card:nth-child(2)')).to have_content(issue2.title)
         expect(find('.board-card:nth-child(3)')).to have_content(issue3.title)
@@ -102,7 +102,7 @@ RSpec.describe 'Multi Select Issue', :js do
 
       wait_for_requests
 
-      page.within(all('.js-board-list')[1]) do
+      page.within(all('.board-list')[1]) do
         expect(find('.board-card:nth-child(1)')).to have_content(issue1.title)
         expect(find('.board-card:nth-child(2)')).to have_content(issue2.title)
         expect(find('.board-card:nth-child(3)')).to have_content(issue5.title)

spec/frontend/boards/components/boards_selector_spec.js

 import { GlDropdown, GlLoadingIcon, GlDropdownSectionHeader } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import Vuex from 'vuex';
@@ -14,6 +13,7 @@ import groupRecentBoardsQuery from '~/boards/graphql/group_recent_boards.query.g
 import projectRecentBoardsQuery from '~/boards/graphql/project_recent_boards.query.graphql';
 import defaultStore from '~/boards/stores';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import {
   mockGroupBoardResponse,
   mockProjectBoardResponse,
@@ -60,7 +60,7 @@ describe('BoardsSelector', () => {
     searchBoxInput.trigger('input');
   };
 
-  const getDropdownItems = () => wrapper.findAll('.js-dropdown-item');
+  const getDropdownItems = () => wrapper.findAllByTestId('dropdown-item');
   const getDropdownHeaders = () => wrapper.findAllComponents(GlDropdownSectionHeader);
   const getLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findDropdown = () => wrapper.findComponent(GlDropdown);
@@ -100,7 +100,7 @@ describe('BoardsSelector', () => {
       [groupRecentBoardsQuery, groupRecentBoardsQueryHandlerSuccess],
     ]);
 
-    wrapper = mount(BoardsSelector, {
+    wrapper = mountExtended(BoardsSelector, {
       store,
       apolloProvider: fakeApollo,
       propsData: {

spec/frontend/boards/components/issue_time_estimate_spec.js

@@ -5,6 +5,8 @@ import IssueTimeEstimate from '~/boards/components/issue_time_estimate.vue';
 describe('Issue Time Estimate component', () => {
   let wrapper;
 
+  const findIssueTimeEstimate = () => wrapper.find('[data-testid="issue-time-estimate"]');
+
   afterEach(() => {
     wrapper.destroy();
   });
@@ -26,7 +28,7 @@ describe('Issue Time Estimate component', () => {
     });
 
     it('renders expanded time estimate in tooltip', () => {
-      expect(wrapper.find('.js-issue-time-estimate').text()).toContain('2 weeks 3 days 1 minute');
+      expect(findIssueTimeEstimate().text()).toContain('2 weeks 3 days 1 minute');
     });
 
     it('prevents tooltip xss', async () => {
@@ -42,7 +44,7 @@ describe('Issue Time Estimate component', () => {
 
       expect(alertSpy).not.toHaveBeenCalled();
       expect(wrapper.find('time').text().trim()).toEqual('0m');
-      expect(wrapper.find('.js-issue-time-estimate').text()).toContain('0m');
+      expect(findIssueTimeEstimate().text()).toContain('0m');
     });
   });
 
@@ -63,7 +65,7 @@ describe('Issue Time Estimate component', () => {
     });
 
     it('renders expanded time estimate in tooltip', () => {
-      expect(wrapper.find('.js-issue-time-estimate').text()).toContain('104 hours 1 minute');
+      expect(findIssueTimeEstimate().text()).toContain('104 hours 1 minute');
     });
   });
 });

spec/frontend/boards/components/item_count_spec.js

@@ -29,7 +29,7 @@ describe('IssueCount', () => {
     });
 
     it('does not contains maxIssueCount in the template', () => {
-      expect(vm.find('.js-max-issue-size').exists()).toBe(false);
+      expect(vm.find('.max-issue-size').exists()).toBe(false);
     });
   });
 
@@ -50,7 +50,7 @@ describe('IssueCount', () => {
     });
 
     it('contains maxIssueCount in the template', () => {
-      expect(vm.find('.js-max-issue-size').text()).toEqual(String(maxIssueCount));
+      expect(vm.find('.max-issue-size').text()).toEqual(String(maxIssueCount));
     });
 
     it('does not have text-danger class when issueSize is less than maxIssueCount', () => {
@@ -75,7 +75,7 @@ describe('IssueCount', () => {
     });
 
     it('contains maxIssueCount in the template', () => {
-      expect(vm.find('.js-max-issue-size').text()).toEqual(String(maxIssueCount));
+      expect(vm.find('.max-issue-size').text()).toEqual(String(maxIssueCount));
     });
 
     it('has text-danger class', () => {

spec/support/shared_examples/boards/multiple_issue_boards_shared_examples.rb

@@ -138,7 +138,7 @@ RSpec.shared_examples 'multiple issue boards' do
 
     wait_for_requests
 
-    dropdown_selector = '.js-boards-selector .dropdown-menu'
+    dropdown_selector = '[data-testid="boards-selector"] .dropdown-menu'
     page.within(dropdown_selector) do
       yield
     end