Replace fa- classes in fixtures

- Replace fontawesome classes
with SVGs in frontend fixtures

spec/frontend/fixtures/static/create_item_dropdown.html

@@ -7,21 +7,26 @@
       data-toggle="dropdown"
     >
       <span class="dropdown-toggle-text ">some label</span
-      ><i aria-hidden="true" data-hidden="true" class="fa fa-chevron-down"></i>
+      >
+      <svg data-testid="chevron-down-icon" class="gl-icon s16">
+        <use
+          href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#chevron-down"
+        ></use>
+      </svg>
     </button>
     <div class="dropdown-menu dropdown-select dropdown-menu-selectable">
       <div class="dropdown-input">
-        <input type="search" id="" class="dropdown-input-field" autocomplete="off" /><i
-          aria-hidden="true"
-          data-hidden="true"
-          class="fa fa-search dropdown-input-search"
-        ></i
-        ><i
-          aria-hidden="true"
-          data-hidden="true"
-          role="button"
-          class="fa fa-times dropdown-input-clear js-dropdown-input-clear"
-        ></i>
+        <input type="search" id="" class="dropdown-input-field" autocomplete="off" />
+        <svg data-testid="search-icon" class="gl-icon s16 dropdown-input-search">
+          <use
+            href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#search"
+          ></use>
+        </svg>        
+        <svg data-testid="close-icon" class="gl-icon s16 dropdown-input-clear js-dropdown-input-clear">
+          <use
+            href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#close"
+          ></use>
+        </svg>
       </div>
       <div class="dropdown-content js-dropdown-content"></div>
       <div class="dropdown-footer">

spec/frontend/fixtures/static/deprecated_jquery_dropdown.html

@@ -9,7 +9,11 @@
       <div class="dropdown-toggle-text">
         Projects
       </div>
-      <i class="fa fa-chevron-down dropdown-toggle-caret js-projects-dropdown-toggle"></i>
+      <svg data-testid="chevron-down-icon" class="gl-icon s16 dropdown-toggle-caret js-projects-dropdown-toggle">
+        <use
+          href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#chevron-down"
+        ></use>
+      </svg>      
     </button>
     <div class="dropdown-menu dropdown-select dropdown-menu-selectable">
       <div class="dropdown-title gl-display-flex gl-align-items-center">
@@ -28,7 +32,11 @@
       </div>
       <div class="dropdown-input">
         <input class="dropdown-input-field" placeholder="Filter results" type="search" />
-        <i class="fa fa-search dropdown-input-search"></i>
+        <svg data-testid="search-icon" class="gl-icon s16 dropdown-input-search">
+          <use
+            href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#search"
+          ></use>
+        </svg>         
       </div>
       <div class="dropdown-content"></div>
       <div class="dropdown-loading">

spec/frontend/fixtures/static/line_highlighter.html

@@ -2,103 +2,153 @@
 <div class="file-content">
 <div class="line-numbers">
 <a data-line-number="1" href="#L1" id="L1">
-<i class="fa fa-link"></i>
+<svg data-testid="link-icon" class="s12">
+<use href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#link"></use>
+</svg>
 1
 </a>
 <a data-line-number="2" href="#L2" id="L2">
-<i class="fa fa-link"></i>
+<svg data-testid="link-icon" class="s12">
+<use href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#link"></use>
+</svg>
 2
 </a>
 <a data-line-number="3" href="#L3" id="L3">
-<i class="fa fa-link"></i>
+<svg data-testid="link-icon" class="s12">
+<use href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#link"></use>
+</svg>
 3
 </a>
 <a data-line-number="4" href="#L4" id="L4">
-<i class="fa fa-link"></i>
+<svg data-testid="link-icon" class="s12">
+<use href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#link"></use>
+</svg>
 4
 </a>
 <a data-line-number="5" href="#L5" id="L5">
-<i class="fa fa-link"></i>
+<svg data-testid="link-icon" class="s12">
+<use href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#link"></use>
+</svg>
 5
 </a>
 <a data-line-number="6" href="#L6" id="L6">
-<i class="fa fa-link"></i>
+<svg data-testid="link-icon" class="s12">
+<use href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#link"></use>
+</svg>
 6
 </a>
 <a data-line-number="7" href="#L7" id="L7">
-<i class="fa fa-link"></i>
+<svg data-testid="link-icon" class="s12">
+<use href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#link"></use>
+</svg>
 7
 </a>
 <a data-line-number="8" href="#L8" id="L8">
-<i class="fa fa-link"></i>
+<svg data-testid="link-icon" class="s12">
+<use href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#link"></use>
+</svg>
 8
 </a>
 <a data-line-number="9" href="#L9" id="L9">
-<i class="fa fa-link"></i>
+<svg data-testid="link-icon" class="s12">
+<use href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#link"></use>
+</svg>
 9
 </a>
 <a data-line-number="10" href="#L10" id="L10">
-<i class="fa fa-link"></i>
+<svg data-testid="link-icon" class="s12">
+<use href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#link"></use>
+</svg>
 10
 </a>
 <a data-line-number="11" href="#L11" id="L11">
-<i class="fa fa-link"></i>
+<svg data-testid="link-icon" class="s12">
+<use href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#link"></use>
+</svg>
 11
 </a>
 <a data-line-number="12" href="#L12" id="L12">
-<i class="fa fa-link"></i>
+<svg data-testid="link-icon" class="s12">
+<use href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#link"></use>
+</svg>
 12
 </a>
 <a data-line-number="13" href="#L13" id="L13">
-<i class="fa fa-link"></i>
+<svg data-testid="link-icon" class="s12">
+<use href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#link"></use>
+</svg>
 13
 </a>
 <a data-line-number="14" href="#L14" id="L14">
-<i class="fa fa-link"></i>
+<svg data-testid="link-icon" class="s12">
+<use href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#link"></use>
+</svg>
 14
 </a>
 <a data-line-number="15" href="#L15" id="L15">
-<i class="fa fa-link"></i>
+<svg data-testid="link-icon" class="s12">
+<use href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#link"></use>
+</svg>
 15
 </a>
 <a data-line-number="16" href="#L16" id="L16">
-<i class="fa fa-link"></i>
+<svg data-testid="link-icon" class="s12">
+<use href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#link"></use>
+</svg>
 16
 </a>
 <a data-line-number="17" href="#L17" id="L17">
-<i class="fa fa-link"></i>
+<svg data-testid="link-icon" class="s12">
+<use href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#link"></use>
+</svg>
 17
 </a>
 <a data-line-number="18" href="#L18" id="L18">
-<i class="fa fa-link"></i>
+<svg data-testid="link-icon" class="s12">
+<use href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#link"></use>
+</svg>
 18
 </a>
 <a data-line-number="19" href="#L19" id="L19">
-<i class="fa fa-link"></i>
+<svg data-testid="link-icon" class="s12">
+<use href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#link"></use>
+</svg>
 19
 </a>
 <a data-line-number="20" href="#L20" id="L20">
-<i class="fa fa-link"></i>
+<svg data-testid="link-icon" class="s12">
+<use href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#link"></use>
+</svg>
 20
 </a>
 <a data-line-number="21" href="#L21" id="L21">
-<i class="fa fa-link"></i>
+<svg data-testid="link-icon" class="s12">
+<use href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#link"></use>
+</svg>
 21
 </a>
 <a data-line-number="22" href="#L22" id="L22">
-<i class="fa fa-link"></i>
+<svg data-testid="link-icon" class="s12">
+<use href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#link"></use>
+</svg>
 22
 </a>
 <a data-line-number="23" href="#L23" id="L23">
-<i class="fa fa-link"></i>
+<svg data-testid="link-icon" class="s12">
+<use href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#link"></use>
+</svg>
 23
 </a>
 <a data-line-number="24" href="#L24" id="L24">
-<i class="fa fa-link"></i>
+<svg data-testid="link-icon" class="s12">
+<use href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#link"></use>
+</svg>
 24
 </a>
 <a data-line-number="25" href="#L25" id="L25">
-<i class="fa fa-link"></i>
+<svg data-testid="link-icon" class="s12">
+<use href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#link"></use>
+</svg>
 25
 </a>
 </div>

spec/frontend/fixtures/static/project_select_combo_button.html

@@ -4,6 +4,10 @@
     <span class="gl-spinner"></span>
   </a>
   <a class="new-project-item-select-button">
-    <i class="fa fa-caret-down"></i>
+    <svg data-testid="chevron-down-icon" class="gl-icon s16">
+      <use
+        href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#chevron-down"
+      ></use>
+    </svg>
   </a>
 </div>

spec/frontend/line_highlighter_spec.js

@@ -89,7 +89,7 @@ describe('LineHighlighter', () => {
   describe('clickHandler', () => {
     it('handles clicking on a child icon element', () => {
       const spy = jest.spyOn(testContext.class, 'setHash');
-      $('#L13 i').mousedown().click();
+      $('#L13 [data-testid="link-icon"]').mousedown().click();
 
       expect(spy).toHaveBeenCalledWith(13);
       expect($('#LC13')).toHaveClass(testContext.css);