Fix tests relating to GLIcon

Fix all tests relating to GlIcon

ee/spec/features/projects/audit_events_spec.rb

@@ -91,7 +91,7 @@ RSpec.describe 'Projects > Audit Events', :js do
       visit project_deploy_keys_path(project)
 
       accept_confirm do
-        find('.ic-remove').click
+        find('[data-testid="remove-icon"]').click
       end
 
       visit project_audit_events_path(project)

ee/spec/frontend/billings/components/subscription_table_row_spec.js

@@ -54,7 +54,9 @@ describe('Subscription Table Row', () => {
     });
 
     it('should render an icon in the header cell', () => {
-      expect(vm.$el.querySelector(`.header-cell .ic-${header.icon}`)).not.toBe(null);
+      expect(vm.$el.querySelector(`.header-cell [data-testid="${header.icon}-icon"]`)).not.toBe(
+        null,
+      );
     });
 
     columns.forEach((col, idx) => {

ee/spec/frontend/environments/environments_app_spec.js

@@ -83,7 +83,9 @@ describe('Environment', () => {
       });
 
       it('should render arrow to open deploy boards', () => {
-        expect(wrapper.find('.deploy-board-icon .ic-chevron-down').exists()).toBe(true);
+        expect(wrapper.find('.deploy-board-icon [data-testid="chevron-down-icon"]').exists()).toBe(
+          true,
+        );
       });
     });
 

ee/spec/frontend/environments/environments_folder_view_spec.js

@@ -54,7 +54,7 @@ describe('Environments Folder View', () => {
 
     describe('deploy boards', () => {
       it('should render arrow to open deploy boards', () => {
-        expect(wrapper.find('.folder-icon.ic-chevron-right').exists()).toBe(true);
+        expect(wrapper.find('.folder-icon[data-testid="chevron-right-icon"]').exists()).toBe(true);
       });
     });
   });

ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_header_spec.js.snap

@@ -94,11 +94,11 @@ exports[`Environment Header renders name and link to app matches the snapshot 1`
     
   View app 
     <svg
-      aria-hidden="true"
-      class="fgray s16 ic-external-link"
+      class="fgray gl-icon s16"
+      data-testid="external-link-icon"
     >
       <use
-        xlink:href="#external-link"
+        href="#external-link"
       />
     </svg>
   </a>

ee/spec/frontend/geo_nodes/components/geo_node_header_spec.js

@@ -65,7 +65,7 @@ describe('GeoNodeHeader', () => {
       });
 
       it(`should ${showWarning ? 'render' : 'not render'} the status icon`, () => {
-        expect(Boolean(vm.$el.querySelector('.ic-warning'))).toBe(showWarning);
+        expect(Boolean(vm.$el.querySelector('[data-testid="warning-icon"]'))).toBe(showWarning);
       });
     });
   });

ee/spec/frontend/geo_nodes/components/node_detail_sections/section_reveal_button_spec.js

@@ -63,7 +63,7 @@ describe('SectionRevealButton', () => {
   describe('template', () => {
     it('renders button element', () => {
       expect(vm.$el.classList.contains('btn-link')).toBe(true);
-      expect(vm.$el.querySelector('svg use').getAttribute('xlink:href')).toContain('#angle-down');
+      expect(vm.$el.querySelector('svg').getAttribute('data-testid')).toBe('angle-down-icon');
       expect(vm.$el.querySelector('span').innerText.trim()).toBe('Foo button');
     });
   });

ee/spec/frontend/geo_replicable/components/geo_replicable_status_spec.js

@@ -71,8 +71,8 @@ describe('GeoReplicableStatus', () => {
         expect(wrapper.vm.icon.cssClass).toEqual(iconClass);
       });
 
-      it(`sets svg to ic-${iconName}`, () => {
-        expect(findIcon().classes()).toContain(`ic-${wrapper.vm.icon.name}`);
+      it(`sets svg to icon '${iconName}'`, () => {
+        expect(findIcon().attributes('data-testid')).toBe(`${wrapper.vm.icon.name}-icon`);
       });
     });
   });

ee/spec/frontend/group_member_contributions/components/table_header_spec.js

@@ -87,9 +87,7 @@ describe('TableHeaderComponent', () => {
 
       expect(headerItemEl).not.toBeNull();
       expect(headerItemEl.innerText.trim()).toBe('Name');
-      expect(headerItemEl.querySelector('svg use').getAttribute('xlink:href')).toContain(
-        'angle-up',
-      );
+      expect(headerItemEl.querySelector('svg').getAttribute('data-testid')).toBe('angle-up-icon');
     });
   });
 });

ee/spec/frontend/security_dashboard/components/__snapshots__/unscanned_projects_spec.js.snap

@@ -41,11 +41,11 @@ exports[`UnscannedProjects component header matches the snapshot when the "helpP
       title="Project scanning help page"
     >
       <svg
-        aria-hidden="true"
-        class="align-top s12 ic-question"
+        class="align-top gl-icon s12"
+        data-testid="question-icon"
       >
         <use
-          xlink:href="#question"
+          href="#question"
         />
       </svg>
     </a>

ee/spec/frontend/security_dashboard/components/__snapshots__/vulnerability_severity_spec.js.snap

@@ -49,11 +49,11 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
               class="d-flex align-items-center p-2"
             >
               <svg
-                aria-hidden="true"
-                class="mr-2 gl-text-gray-900 s16 ic-angle-right"
+                class="mr-2 gl-text-gray-900 gl-icon s16"
+                data-testid="angle-right-icon"
               >
                 <use
-                  xlink:href="#angle-right"
+                  href="#angle-right"
                 />
               </svg>
                
@@ -126,11 +126,11 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
               class="d-flex align-items-center p-2"
             >
               <svg
-                aria-hidden="true"
-                class="mr-2 gl-text-gray-900 s16 ic-angle-right"
+                class="mr-2 gl-text-gray-900 gl-icon s16"
+                data-testid="angle-right-icon"
               >
                 <use
-                  xlink:href="#angle-right"
+                  href="#angle-right"
                 />
               </svg>
                
@@ -203,11 +203,11 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
               class="d-flex align-items-center p-2"
             >
               <svg
-                aria-hidden="true"
-                class="mr-2 gl-text-gray-900 s16 ic-angle-right"
+                class="mr-2 gl-text-gray-900 gl-icon s16"
+                data-testid="angle-right-icon"
               >
                 <use
-                  xlink:href="#angle-right"
+                  href="#angle-right"
                 />
               </svg>
                
@@ -280,11 +280,11 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
               class="d-flex align-items-center p-2"
             >
               <svg
-                aria-hidden="true"
-                class="mr-2 gl-text-gray-900 s16 ic-angle-right"
+                class="mr-2 gl-text-gray-900 gl-icon s16"
+                data-testid="angle-right-icon"
               >
                 <use
-                  xlink:href="#angle-right"
+                  href="#angle-right"
                 />
               </svg>
                
@@ -357,11 +357,11 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
               class="d-flex align-items-center p-2"
             >
               <svg
-                aria-hidden="true"
-                class="mr-2 gl-text-gray-900 s16 ic-angle-right"
+                class="mr-2 gl-text-gray-900 gl-icon s16"
+                data-testid="angle-right-icon"
               >
                 <use
-                  xlink:href="#angle-right"
+                  href="#angle-right"
                 />
               </svg>
                

ee/spec/frontend/security_dashboard/components/security_dashboard_table_row_spec.js

@@ -36,7 +36,7 @@ describe('Security Dashboard Table Row', () => {
 
   const findLoader = () => wrapper.find('.js-skeleton-loader');
   const findContent = i => wrapper.findAll('.table-mobile-content').at(i);
-  const findAllIssueCreated = () => wrapper.findAll('.ic-issue-created');
+  const findAllIssueCreated = () => wrapper.findAll('[data-testid="issue-created-icon"]');
   const hasSelectedClass = () => wrapper.classes('gl-bg-blue-50');
   const findCheckbox = () => wrapper.find(GlFormCheckbox);
 
@@ -173,7 +173,7 @@ describe('Security Dashboard Table Row', () => {
       createComponent(mount, { props: { vulnerability } });
     });
 
-    it('should have a `ic-issue-created` class', () => {
+    it('should have a `issue-created` icon', () => {
       expect(findAllIssueCreated()).toHaveLength(1);
     });
   });
@@ -185,7 +185,7 @@ describe('Security Dashboard Table Row', () => {
       createComponent(mount, { props: { vulnerability } });
     });
 
-    it('should not have a `ic-issue-created` class', () => {
+    it('should not have a `issue-created` icon', () => {
       expect(findAllIssueCreated()).toHaveLength(0);
     });
   });
@@ -197,7 +197,7 @@ describe('Security Dashboard Table Row', () => {
       createComponent(shallowMount, { props: { vulnerability } });
     });
 
-    it('should not have a `ic-issue-created` class', () => {
+    it('should not have a `issue-created` icon', () => {
       expect(findAllIssueCreated()).toHaveLength(0);
     });
 

ee/spec/frontend/vue_shared/components/notes/system_note_spec.js

@@ -90,7 +90,9 @@ describe('system note component', () => {
         expect(findDescriptionVersion().html()).toContain(diffData);
         expect(
           wrapper
-            .find('.description-version button.delete-description-history svg.ic-remove')
+            .find(
+              '.description-version button.delete-description-history svg[data-testid="remove-icon"]',
+            )
             .exists(),
         ).toBe(true);
         done();

ee/spec/frontend/vue_shared/license_compliance/components/admin_license_management_row_spec.js

@@ -167,7 +167,7 @@ describe('AdminLicenseManagementRow', () => {
       const buttonEl = findRemoveButton();
 
       expect(buttonEl).not.toBeNull();
-      expect(buttonEl.querySelector('.ic-remove')).not.toBeNull();
+      expect(buttonEl.querySelector('[data-testid="remove-icon"]')).not.toBeNull();
     });
 
     it('renders computed property dropdownText into dropdown toggle', () => {

spec/features/merge_request/user_posts_notes_spec.rb

@@ -82,7 +82,7 @@ RSpec.describe 'Merge request > User posts notes', :js do
       it 'shows a reply button' do
         reply_button = find('.js-reply-button', match: :first)
 
-        expect(reply_button).to have_selector('.ic-comment')
+        expect(reply_button).to have_selector('[data-testid="comment-icon"]')
       end
 
       it 'shows reply placeholder when clicking reply button' do

spec/features/projects/deploy_keys_spec.rb

@@ -22,7 +22,7 @@ RSpec.describe 'Project deploy keys', :js do
       page.within(find('.qa-deploy-keys-settings')) do
         expect(page).to have_selector('.deploy-key', count: 1)
 
-        accept_confirm { find('.ic-remove').click }
+        accept_confirm { find('[data-testid="remove-icon"]').click }
 
         wait_for_requests
 

spec/features/projects/environments/environments_spec.rb

@@ -106,7 +106,7 @@ RSpec.describe 'Environments page', :js do
 
           expect(page).to have_css('.environments-container')
           expect(page.all('.environment-name').length).to eq(1)
-          expect(page.all('.ic-stop').length).to eq(0)
+          expect(page.all('[data-testid="stop-icon"]').length).to eq(0)
         end
       end
     end
@@ -301,7 +301,7 @@ RSpec.describe 'Environments page', :js do
         end
 
         it 'has a dropdown for actionable jobs' do
-          expect(page).to have_selector('.dropdown-new.btn.btn-default .ic-play')
+          expect(page).to have_selector('.dropdown-new.btn.btn-default [data-testid="play-icon"]')
         end
 
         it "has link to the delayed job's action" do

spec/features/projects/settings/repository_settings_spec.rb

@@ -70,7 +70,7 @@ RSpec.describe 'Projects > Settings > Repository settings' do
         project.deploy_keys << private_deploy_key
         visit project_settings_repository_path(project)
 
-        find('.deploy-key', text: private_deploy_key.title).find('.ic-pencil').click
+        find('.deploy-key', text: private_deploy_key.title).find('[data-testid="pencil-icon"]').click
 
         fill_in 'deploy_key_title', with: 'updated_deploy_key'
         check 'deploy_key_deploy_keys_projects_attributes_0_can_push'
@@ -84,7 +84,7 @@ RSpec.describe 'Projects > Settings > Repository settings' do
         project.deploy_keys << public_deploy_key
         visit project_settings_repository_path(project)
 
-        find('.deploy-key', text: public_deploy_key.title).find('.ic-pencil').click
+        find('.deploy-key', text: public_deploy_key.title).find('[data-testid="pencil-icon"]').click
 
         check 'deploy_key_deploy_keys_projects_attributes_0_can_push'
         click_button 'Save changes'
@@ -102,7 +102,7 @@ RSpec.describe 'Projects > Settings > Repository settings' do
 
         find('.js-deployKeys-tab-available_project_keys').click
 
-        find('.deploy-key', text: private_deploy_key.title).find('.ic-pencil').click
+        find('.deploy-key', text: private_deploy_key.title).find('[data-testid="pencil-icon"]').click
 
         fill_in 'deploy_key_title', with: 'updated_deploy_key'
         click_button 'Save changes'
@@ -116,7 +116,7 @@ RSpec.describe 'Projects > Settings > Repository settings' do
         project.deploy_keys << private_deploy_key
         visit project_settings_repository_path(project)
 
-        accept_confirm { find('.deploy-key', text: private_deploy_key.title).find('.ic-remove').click }
+        accept_confirm { find('.deploy-key', text: private_deploy_key.title).find('[data-testid="remove-icon"]').click }
 
         expect(page).not_to have_content(private_deploy_key.title)
       end

spec/frontend/collapsed_sidebar_todo_spec.js

@@ -47,9 +47,9 @@ describe('Issuable right sidebar collapsed todo toggle', () => {
 
     expect(
       document
-        .querySelector('.js-issuable-todo.sidebar-collapsed-icon svg use')
-        .getAttribute('xlink:href'),
-    ).toContain('todo-add');
+        .querySelector('.js-issuable-todo.sidebar-collapsed-icon svg')
+        .getAttribute('data-testid'),
+    ).toBe('todo-add-icon');
 
     expect(
       document.querySelector('.js-issuable-todo.sidebar-collapsed-icon .todo-undone'),
@@ -72,9 +72,9 @@ describe('Issuable right sidebar collapsed todo toggle', () => {
 
       expect(
         document
-          .querySelector('.js-issuable-todo.sidebar-collapsed-icon svg.todo-undone use')
-          .getAttribute('xlink:href'),
-      ).toContain('todo-done');
+          .querySelector('.js-issuable-todo.sidebar-collapsed-icon svg.todo-undone')
+          .getAttribute('data-testid'),
+      ).toBe('todo-done-icon');
 
       done();
     });

spec/frontend/deploy_keys/components/key_spec.js

@@ -55,20 +55,20 @@ describe('Deploy keys key', () => {
     it('shows pencil button for editing', () => {
       createComponent({ deployKey });
 
-      expect(wrapper.find('.btn .ic-pencil')).toExist();
+      expect(wrapper.find('.btn [data-testid="pencil-icon"]')).toExist();
     });
 
     it('shows disable button when the project is not deletable', () => {
       createComponent({ deployKey });
 
-      expect(wrapper.find('.btn .ic-cancel')).toExist();
+      expect(wrapper.find('.btn [data-testid="cancel-icon"]')).toExist();
     });
 
     it('shows remove button when the project is deletable', () => {
       createComponent({
         deployKey: { ...deployKey, destroyed_when_orphaned: true, almost_orphaned: true },
       });
-      expect(wrapper.find('.btn .ic-remove')).toExist();
+      expect(wrapper.find('.btn [data-testid="remove-icon"]')).toExist();
     });
   });
 
@@ -147,7 +147,7 @@ describe('Deploy keys key', () => {
 
     it('shows pencil button for editing', () => {
       createComponent({ deployKey });
-      expect(wrapper.find('.btn .ic-pencil')).toExist();
+      expect(wrapper.find('.btn [data-testid="pencil-icon"]')).toExist();
     });
 
     it('shows disable button when key is enabled', () => {
@@ -155,7 +155,7 @@ describe('Deploy keys key', () => {
 
       createComponent({ deployKey });
 
-      expect(wrapper.find('.btn .ic-cancel')).toExist();
+      expect(wrapper.find('.btn [data-testid="cancel-icon"]')).toExist();
     });
   });
 });

spec/frontend/environments/environments_app_spec.js

@@ -144,16 +144,16 @@ describe('Environment', () => {
     });
 
     it('should open a closed folder', () => {
-      expect(wrapper.find('.folder-icon.ic-chevron-right').exists()).toBe(false);
+      expect(wrapper.find('.folder-icon[data-testid="chevron-right-icon"]').exists()).toBe(false);
     });
 
     it('should close an opened folder', () => {
-      expect(wrapper.find('.folder-icon.ic-chevron-down').exists()).toBe(true);
+      expect(wrapper.find('.folder-icon[data-testid="chevron-down-icon"]').exists()).toBe(true);
 
       // close folder
       wrapper.find('.folder-name').trigger('click');
       wrapper.vm.$nextTick(() => {
-        expect(wrapper.find('.folder-icon.ic-chevron-down').exists()).toBe(false);
+        expect(wrapper.find('.folder-icon[data-testid="chevron-down-icon"]').exists()).toBe(false);
       });
     });
 

spec/frontend/groups/components/item_actions_spec.js

@@ -57,8 +57,8 @@ describe('ItemActionsComponent', () => {
       expect(editBtn.getAttribute('href')).toBe(group.editPath);
       expect(editBtn.getAttribute('aria-label')).toBe('Edit group');
       expect(editBtn.dataset.originalTitle).toBe('Edit group');
-      expect(editBtn.querySelectorAll('svg use').length).not.toBe(0);
-      expect(editBtn.querySelector('svg use').getAttribute('xlink:href')).toContain('#settings');
+      expect(editBtn.querySelectorAll('svg').length).not.toBe(0);
+      expect(editBtn.querySelector('svg').getAttribute('data-testid')).toBe('settings-icon');
 
       newVm.$destroy();
     });
@@ -75,8 +75,8 @@ describe('ItemActionsComponent', () => {
       expect(leaveBtn.getAttribute('href')).toBe(group.leavePath);
       expect(leaveBtn.getAttribute('aria-label')).toBe('Leave this group');
       expect(leaveBtn.dataset.originalTitle).toBe('Leave this group');
-      expect(leaveBtn.querySelectorAll('svg use').length).not.toBe(0);
-      expect(leaveBtn.querySelector('svg use').getAttribute('xlink:href')).toContain('#leave');
+      expect(leaveBtn.querySelectorAll('svg').length).not.toBe(0);
+      expect(leaveBtn.querySelector('svg').getAttribute('data-testid')).toBe('leave-icon');
 
       newVm.$destroy();
     });

spec/frontend/groups/components/item_caret_spec.js

@@ -27,12 +27,12 @@ describe('ItemCaretComponent', () => {
 
     it('should render caret down icon if `isGroupOpen` prop is `true`', () => {
       vm = createComponent(true);
-      expect(vm.$el.querySelector('svg use').getAttribute('xlink:href')).toContain('angle-down');
+      expect(vm.$el.querySelector('svg').getAttribute('data-testid')).toBe('angle-down-icon');
     });
 
     it('should render caret right icon if `isGroupOpen` prop is `false`', () => {
       vm = createComponent();
-      expect(vm.$el.querySelector('svg use').getAttribute('xlink:href')).toContain('angle-right');
+      expect(vm.$el.querySelector('svg').getAttribute('data-testid')).toBe('angle-right-icon');
     });
   });
 });

spec/frontend/groups/components/item_stats_value_spec.js

@@ -72,7 +72,7 @@ describe('ItemStatsValueComponent', () => {
     });
 
     it('renders element icon correctly', () => {
-      expect(vm.$el.querySelector('svg use').getAttribute('xlink:href')).toContain('folder');
+      expect(vm.$el.querySelector('svg').getAttribute('data-testid')).toBe('folder-icon');
     });
 
     it('renders value count correctly', () => {

spec/frontend/groups/components/item_type_icon_spec.js

@@ -27,12 +27,12 @@ describe('ItemTypeIconComponent', () => {
 
       vm = createComponent(ITEM_TYPE.GROUP, true);
 
-      expect(vm.$el.querySelector('use').getAttribute('xlink:href')).toContain('folder-open');
+      expect(vm.$el.querySelector('svg').getAttribute('data-testid')).toBe('folder-open-icon');
       vm.$destroy();
 
       vm = createComponent(ITEM_TYPE.GROUP);
 
-      expect(vm.$el.querySelector('use').getAttribute('xlink:href')).toContain('folder');
+      expect(vm.$el.querySelector('svg').getAttribute('data-testid')).toBe('folder-icon');
       vm.$destroy();
     });
 
@@ -41,12 +41,12 @@ describe('ItemTypeIconComponent', () => {
 
       vm = createComponent(ITEM_TYPE.PROJECT);
 
-      expect(vm.$el.querySelector('use').getAttribute('xlink:href')).toContain('bookmark');
+      expect(vm.$el.querySelector('svg').getAttribute('data-testid')).toBe('bookmark-icon');
       vm.$destroy();
 
       vm = createComponent(ITEM_TYPE.GROUP);
 
-      expect(vm.$el.querySelector('use').getAttribute('xlink:href')).not.toContain('bookmark');
+      expect(vm.$el.querySelector('svg').getAttribute('data-testid')).not.toBe('bookmark-icon');
       vm.$destroy();
     });
   });

spec/frontend/ide/components/file_row_extra_spec.js

@@ -153,14 +153,14 @@ describe('IDE extra file row component', () => {
 
   describe('merge request icon', () => {
     it('hides when not a merge request change', () => {
-      expect(vm.$el.querySelector('.ic-git-merge')).toBe(null);
+      expect(vm.$el.querySelector('[data-testid="git-merge-icon"]')).toBe(null);
     });
 
     it('shows when a merge request change', done => {
       vm.file.mrChange = true;
 
       vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.ic-git-merge')).not.toBe(null);
+        expect(vm.$el.querySelector('[data-testid="git-merge-icon"]')).not.toBe(null);
 
         done();
       });

spec/frontend/ide/components/jobs/detail/description_spec.js

@@ -23,6 +23,8 @@ describe('IDE job description', () => {
   });
 
   it('renders CI icon', () => {
-    expect(vm.$el.querySelector('.ci-status-icon .ic-status_success_borderless')).not.toBe(null);
+    expect(
+      vm.$el.querySelector('.ci-status-icon [data-testid="status_success_borderless-icon"]'),
+    ).not.toBe(null);
   });
 });

spec/frontend/ide/components/jobs/item_spec.js

@@ -24,7 +24,7 @@ describe('IDE jobs item', () => {
   });
 
   it('renders CI icon', () => {
-    expect(vm.$el.querySelector('.ic-status_success_borderless')).not.toBe(null);
+    expect(vm.$el.querySelector('[data-testid="status_success_borderless-icon"]')).not.toBe(null);
   });
 
   it('does not render view logs button if not started', done => {

spec/frontend/ide/components/merge_requests/item_spec.js

@@ -33,7 +33,7 @@ describe('IDE merge request item', () => {
       store,
     });
   };
-  const findIcon = () => wrapper.find('.ic-mobile-issue-close');
+  const findIcon = () => wrapper.find('[data-testid="mobile-issue-close-icon"]');
 
   beforeEach(() => {
     store = createStore();

spec/frontend/ide/components/nav_dropdown_button_spec.js

@@ -23,7 +23,7 @@ describe('NavDropdown', () => {
     vm.$mount();
   };
 
-  const findIcon = name => vm.$el.querySelector(`.ic-${name}`);
+  const findIcon = name => vm.$el.querySelector(`[data-testid="${name}-icon]`);
   const findMRIcon = () => findIcon('merge-request');
   const findBranchIcon = () => findIcon('branch');
 

spec/frontend/ide/components/new_dropdown/button_spec.js

@@ -28,7 +28,7 @@ describe('IDE new entry dropdown button component', () => {
   });
 
   it('renders icon', () => {
-    expect(vm.$el.querySelector('.ic-doc-new')).not.toBe(null);
+    expect(vm.$el.querySelector('[data-testid="doc-new-icon"]')).not.toBe(null);
   });
 
   it('emits click event', () => {

spec/frontend/jobs/components/log/collapsible_section_spec.js

@@ -35,7 +35,7 @@ describe('Job Log Collapsible Section', () => {
     });
 
     it('renders an icon with the closed state', () => {
-      expect(findCollapsibleLineSvg().classes()).toContain('ic-angle-right');
+      expect(findCollapsibleLineSvg().attributes('data-testid')).toBe('angle-right-icon');
     });
   });
 
@@ -52,7 +52,7 @@ describe('Job Log Collapsible Section', () => {
     });
 
     it('renders an icon with the open state', () => {
-      expect(findCollapsibleLineSvg().classes()).toContain('ic-angle-down');
+      expect(findCollapsibleLineSvg().attributes('data-testid')).toBe('angle-down-icon');
     });
 
     it('renders collapsible lines content', () => {

spec/frontend/matchers.js

@@ -9,8 +9,8 @@ export default {
     }
 
     const iconReferences = [].slice.apply(element.querySelectorAll('svg use'));
-    const matchingIcon = iconReferences.find(reference =>
-      reference.getAttribute('xlink:href').endsWith(`#${iconName}`),
+    const matchingIcon = iconReferences.find(
+      reference => reference.parentNode.getAttribute('data-testid') === `${iconName}-icon`,
     );
 
     const pass = Boolean(matchingIcon);
@@ -22,7 +22,7 @@ export default {
       message = `${element.outerHTML} does not contain the sprite icon "${iconName}"!`;
 
       const existingIcons = iconReferences.map(reference => {
-        const iconUrl = reference.getAttribute('xlink:href');
+        const iconUrl = reference.getAttribute('href');
         return `"${iconUrl.replace(/^.+#/, '')}"`;
       });
       if (existingIcons.length > 0) {

spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js

@@ -121,10 +121,10 @@ describe('RelatedIssuableItem', () => {
     });
 
     it('renders milestone icon and name', () => {
-      const milestoneIcon = tokenMetadata().find('.item-milestone svg use');
+      const milestoneIcon = tokenMetadata().find('.item-milestone svg');
       const milestoneTitle = tokenMetadata().find('.item-milestone .milestone-title');
 
-      expect(milestoneIcon.attributes('href')).toContain('clock');
+      expect(milestoneIcon.attributes('data-testid')).toBe('clock-icon');
       expect(milestoneTitle.text()).toContain('Milestone title');
     });
 

spec/support/shared_examples/features/error_tracking_shared_example.rb

@@ -36,10 +36,10 @@ end
 RSpec.shared_examples 'expanded stack trace context' do |selected_line: nil, expected_line: 1|
   it 'expands the stack trace context', quarantine: { issue: 'https://gitlab.com/gitlab-org/gitlab/-/issues/217810' } do
     within('div.stacktrace') do
-      find("div.file-holder:nth-child(#{selected_line}) svg.ic-chevron-right").click if selected_line
+      find("div.file-holder:nth-child(#{selected_line}) svg[data-testid='chevron-right-icon']").click if selected_line
 
       expanded_line = find("div.file-holder:nth-child(#{expected_line})")
-      expect(expanded_line).to have_css('svg.ic-chevron-down')
+      expect(expanded_line).to have_css('svg[data-testid="chevron-down-icon"]')
 
       event_response['entries'][0]['data']['values'][0]['stacktrace']['frames'][-expected_line]['context'].each do |context|
         expect(page).to have_content(context[0])