2 files changed, 45 insertions, 64 deletions

diff --git a/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap b/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap
index 211f4ea20f5..8ccad7d5c22 100644
--- a/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap
+++ b/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap
@@ -9,65 +9,54 @@ exports[`Code Coverage when fetching data is successful matches the snapshot 1`]
      
     <!---->
      
-    <gl-deprecated-dropdown-stub
+    <gl-dropdown-stub
+      category="tertiary"
+      headertext=""
+      size="medium"
       text="rspec"
+      variant="default"
     >
-      <gl-deprecated-dropdown-item-stub
+      <gl-dropdown-item-stub
+        avatarurl=""
+        iconcolor=""
+        iconname=""
+        iconrightname=""
+        ischecked="true"
+        ischeckitem="true"
+        secondarytext=""
         value="rspec"
       >
-        <div
-          class="gl-display-flex"
-        >
-          <gl-icon-stub
-            class="gl-absolute"
-            name="mobile-issue-close"
-            size="16"
-          />
-           
-          <span
-            class="gl-display-flex align-items-center ml-4"
-          >
-            
-            rspec
-          
-          </span>
-        </div>
-      </gl-deprecated-dropdown-item-stub>
-      <gl-deprecated-dropdown-item-stub
+        
+        rspec
+      
+      </gl-dropdown-item-stub>
+      <gl-dropdown-item-stub
+        avatarurl=""
+        iconcolor=""
+        iconname=""
+        iconrightname=""
+        ischeckitem="true"
+        secondarytext=""
         value="cypress"
       >
-        <div
-          class="gl-display-flex"
-        >
-          <!---->
-           
-          <span
-            class="gl-display-flex align-items-center ml-4"
-          >
-            
-            cypress
-          
-          </span>
-        </div>
-      </gl-deprecated-dropdown-item-stub>
-      <gl-deprecated-dropdown-item-stub
+        
+        cypress
+      
+      </gl-dropdown-item-stub>
+      <gl-dropdown-item-stub
+        avatarurl=""
+        iconcolor=""
+        iconname=""
+        iconrightname=""
+        ischeckitem="true"
+        secondarytext=""
         value="karma"
       >
-        <div
-          class="gl-display-flex"
-        >
-          <!---->
-           
-          <span
-            class="gl-display-flex align-items-center ml-4"
-          >
-            
-            karma
-          
-          </span>
-        </div>
-      </gl-deprecated-dropdown-item-stub>
-    </gl-deprecated-dropdown-stub>
+        
+        karma
+      
+      </gl-dropdown-item-stub>
+    </gl-dropdown-stub>
   </div>
    
   <gl-area-chart-stub
diff --git a/spec/frontend/pages/projects/graphs/code_coverage_spec.js b/spec/frontend/pages/projects/graphs/code_coverage_spec.js
index 8884f7815ab..4a60c7fd509 100644
--- a/spec/frontend/pages/projects/graphs/code_coverage_spec.js
+++ b/spec/frontend/pages/projects/graphs/code_coverage_spec.js
@@ -1,6 +1,6 @@
 import MockAdapter from 'axios-mock-adapter';
 import { shallowMount } from '@vue/test-utils';
-import { GlAlert, GlIcon, GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
+import { GlAlert, GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { GlAreaChart } from '@gitlab/ui/dist/charts';
 
 import waitForPromises from 'helpers/wait_for_promises';
@@ -17,7 +17,7 @@ describe('Code Coverage', () => {
 
   const findAlert = () => wrapper.find(GlAlert);
   const findAreaChart = () => wrapper.find(GlAreaChart);
-  const findAllDropdownItems = () => wrapper.findAll(GlDeprecatedDropdownItem);
+  const findAllDropdownItems = () => wrapper.findAll(GlDropdownItem);
   const findFirstDropdownItem = () => findAllDropdownItems().at(0);
   const findSecondDropdownItem = () => findAllDropdownItems().at(1);
 
@@ -124,7 +124,7 @@ describe('Code Coverage', () => {
     });
 
     it('renders the dropdown with all custom names as options', () => {
-      expect(wrapper.find(GlDeprecatedDropdown).exists()).toBeDefined();
+      expect(wrapper.find(GlDropdown).exists()).toBeDefined();
       expect(findAllDropdownItems()).toHaveLength(codeCoverageMockData.length);
       expect(findFirstDropdownItem().text()).toBe(codeCoverageMockData[0].group_name);
     });
@@ -145,16 +145,8 @@ describe('Code Coverage', () => {
 
       await wrapper.vm.$nextTick();
 
-      expect(
-        findFirstDropdownItem()
-          .find(GlIcon)
-          .exists(),
-      ).toBe(false);
-      expect(
-        findSecondDropdownItem()
-          .find(GlIcon)
-          .exists(),
-      ).toBe(true);
+      expect(findFirstDropdownItem().attributes('ischecked')).toBeFalsy();
+      expect(findSecondDropdownItem().attributes('ischecked')).toBeTruthy();
     });
 
     it('updates the graph data when selecting a different option in dropdown', async () => {