Fix compare_dropdown_layout.vue for tests

- is-active class was missing
- added data selectors for QA / functional tests

app/assets/javascripts/diffs/components/compare_dropdown_layout.vue

 <script>
-import { GlIcon } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
   components: {
-    GlIcon,
+    GlDropdown,
+    GlDropdownItem,
     TimeAgo,
   },
   props: {
@@ -22,57 +23,35 @@ export default {
 </script>
 
 <template>
-  <span class="dropdown inline">
-    <a
-      class="dropdown-menu-toggle btn btn-default w-100"
-      data-toggle="dropdown"
-      aria-expanded="false"
+  <gl-dropdown :text="selectedVersionName" data-qa-selector="dropdown_content">
+    <gl-dropdown-item
+      v-for="version in versions"
+      :key="version.id"
+      :class="{
+        'is-active': version.selected,
+      }"
+      :is-check-item="true"
+      :is-checked="version.selected"
+      :href="version.href"
     >
-      <span> {{ selectedVersionName }} </span>
-      <gl-icon :size="12" name="angle-down" class="position-absolute" />
-    </a>
-    <div class="dropdown-menu dropdown-select dropdown-menu-selectable">
-      <div class="dropdown-content" data-qa-selector="dropdown_content">
-        <ul>
-          <li v-for="version in versions" :key="version.id">
-            <a :class="{ 'is-active': version.selected }" :href="version.href">
-              <div>
-                <strong>
-                  {{ version.versionName }}
-                  <template v-if="version.isHead">{{
-                    s__('DiffsCompareBaseBranch|(HEAD)')
-                  }}</template>
-                  <template v-else-if="version.isBase">{{
-                    s__('DiffsCompareBaseBranch|(base)')
-                  }}</template>
-                </strong>
-              </div>
-              <div>
-                <small class="commit-sha"> {{ version.short_commit_sha }} </small>
-              </div>
-              <div>
-                <small>
-                  <template v-if="version.commitsText">
-                    {{ version.commitsText }}
-                  </template>
-                  <time-ago
-                    v-if="version.created_at"
-                    :time="version.created_at"
-                    class="js-timeago"
-                  />
-                </small>
-              </div>
-            </a>
-          </li>
-        </ul>
+      <div>
+        <strong>
+          {{ version.versionName }}
+          <template v-if="version.isHead">{{ s__('DiffsCompareBaseBranch|(HEAD)') }}</template>
+          <template v-else-if="version.isBase">{{ s__('DiffsCompareBaseBranch|(base)') }}</template>
+        </strong>
       </div>
-    </div>
-  </span>
+      <div>
+        <small class="commit-sha"> {{ version.short_commit_sha }} </small>
+      </div>
+      <div>
+        <small>
+          <template v-if="version.commitsText">
+            {{ version.commitsText }}
+          </template>
+          <time-ago v-if="version.created_at" :time="version.created_at" class="js-timeago" />
+        </small>
+      </div>
+    </gl-dropdown-item>
+  </gl-dropdown>
 </template>
-
-<style>
-.dropdown {
-  min-width: 0;
-  max-height: 170px;
-}
-</style>

app/assets/stylesheets/pages/merge_requests.scss

@@ -720,7 +720,7 @@ $mr-widget-min-height: 69px;
     z-index: 199;
     white-space: nowrap;
 
-    .dropdown-menu-toggle {
+    .gl-dropdown-toggle {
       width: auto;
       max-width: 170px;
 

changelogs/unreleased/Migrate-Bootstrap-dropdown-to-GitLab-UI-GlDropdown-in-app-assets-javascri.yml

+---
+title: Migrate bootstrap dropdown to GlDropdown in app/assets/javascripts/diffs
+merge_request: 41451
+author: nuwe1
+type: other

spec/features/merge_request/user_sees_versions_spec.rb

@@ -73,12 +73,12 @@ RSpec.describe 'Merge request > User sees versions', :js do
 
     it 'shows the commit SHAs for every version in the dropdown' do
       page.within '.mr-version-dropdown' do
-        find('.btn-default').click
+        find('.gl-dropdown-toggle').click
+      end
 
-        page.within('.dropdown-content') do
-          shas = merge_request.merge_request_diffs.map { |diff| Commit.truncate_sha(diff.head_commit_sha) }
-          shas.each { |sha| expect(page).to have_content(sha) }
-        end
+      page.within '.mr-version-dropdown' do
+        shas = merge_request.merge_request_diffs.map { |diff| Commit.truncate_sha(diff.head_commit_sha) }
+        shas.each { |sha| expect(page).to have_content(sha) }
       end
     end
 
@@ -182,7 +182,7 @@ RSpec.describe 'Merge request > User sees versions', :js do
 
     it 'has 0 chages between versions' do
       page.within '.mr-version-compare-dropdown' do
-        expect(find('.dropdown-menu-toggle')).to have_content 'version 1'
+        expect(find('.gl-dropdown-toggle')).to have_content 'version 1'
       end
 
       page.within '.mr-version-dropdown' do
@@ -203,7 +203,7 @@ RSpec.describe 'Merge request > User sees versions', :js do
 
     it 'sets the compared versions to be the same' do
       page.within '.mr-version-compare-dropdown' do
-        expect(find('.dropdown-menu-toggle')).to have_content 'version 2'
+        expect(find('.gl-dropdown-toggle')).to have_content 'version 2'
       end
 
       page.within '.mr-version-dropdown' do

spec/frontend/diffs/components/compare_dropdown_layout_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { trimText } from 'helpers/text_helper';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import CompareDropdownLayout from '~/diffs/components/compare_dropdown_layout.vue';
@@ -22,7 +22,7 @@ describe('CompareDropdownLayout', () => {
   });
 
   const createComponent = (propsData = {}) => {
-    wrapper = shallowMount(CompareDropdownLayout, {
+    wrapper = mount(CompareDropdownLayout, {
       propsData: {
         ...propsData,
       },
@@ -35,7 +35,7 @@ describe('CompareDropdownLayout', () => {
       href: listItem.find('a').attributes('href'),
       text: trimText(listItem.text()),
       createdAt: listItem.findAll(TimeAgo).wrappers[0]?.props('time'),
-      isActive: listItem.find('a.is-active').exists(),
+      isActive: listItem.classes().includes('is-active'),
     }));
 
   afterEach(() => {
@@ -69,7 +69,7 @@ describe('CompareDropdownLayout', () => {
       expect(findListItemsData()).toEqual([
         {
           href: 'version/1',
-          text: 'version 1 (base) abcdef1 1 commit',
+          text: 'version 1 (base) abcdef1 1 commit 2 years ago',
           createdAt: TEST_CREATED_AT,
           isActive: true,
         },

spec/frontend/diffs/components/compare_versions_spec.js

@@ -59,8 +59,8 @@ describe('CompareVersions', () => {
 
       expect(sourceDropdown.exists()).toBe(true);
       expect(targetDropdown.exists()).toBe(true);
-      expect(sourceDropdown.find('a span').html()).toContain('latest version');
-      expect(targetDropdown.find('a span').html()).toContain(targetBranchName);
+      expect(sourceDropdown.find('a p').html()).toContain('latest version');
+      expect(targetDropdown.find('button').html()).toContain(targetBranchName);
     });
 
     it('should not render comparison dropdowns if no mergeRequestDiffs are specified', () => {