Fix failing tests

A number of the karma tests looked for the .fa-spinner class or the
icon element used for the font awesome spinner class.

These instances have been refactored to now look for the .spinner
class instead.

ee/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap

@@ -46,6 +46,7 @@ exports[`Design management index page designs renders loading icon 1`] = `
     class="mt-4"
   >
     <glloadingicon-stub
+      color="orange"
       label="Loading"
       size="2"
     />

ee/spec/frontend/design_management/router_spec.js

@@ -5,6 +5,9 @@ import Designs from 'ee/design_management/pages/index.vue';
 import DesignDetail from 'ee/design_management/pages/design/index.vue';
 import router from 'ee/design_management/router';
 import '~/commons/bootstrap';
+import { setTestTimeout } from 'helpers/timeout';
+
+setTestTimeout(500);
 
 describe('Design management router', () => {
   let vm;

ee/spec/javascripts/feature_flags/components/feature_flags_spec.js

@@ -72,7 +72,7 @@ describe('Feature Flags', () => {
       const loadingElement = component.$el.querySelector('.js-loading-state');
 
       expect(loadingElement).not.toBeNull();
-      expect(loadingElement.querySelector('i').getAttribute('aria-label')).toEqual(
+      expect(loadingElement.querySelector('span').getAttribute('aria-label')).toEqual(
         'Loading Feature Flags',
       );
 

ee/spec/javascripts/group_member_contributions/components/app_spec.js

@@ -56,7 +56,7 @@ describe('AppComponent', () => {
           const loadingEl = vm.$el.querySelector('.loading-animation');
 
           expect(loadingEl).not.toBeNull();
-          expect(loadingEl.querySelector('i').getAttribute('aria-label')).toBe(
+          expect(loadingEl.querySelector('span').getAttribute('aria-label')).toBe(
             'Loading contribution stats for group members',
           );
         })

ee/spec/javascripts/vue_shared/security_reports/card_security_reports_app_spec.js

@@ -178,7 +178,7 @@ describe('Card security reports app', () => {
       });
 
       it('renders loading summary text + spinner', done => {
-        expect(vm.$el.querySelector('.fa-spinner')).not.toBeNull();
+        expect(vm.$el.querySelector('.spinner')).not.toBeNull();
 
         expect(vm.$el.textContent).toContain('SAST is loading');
         expect(vm.$el.textContent).toContain('Dependency scanning is loading');

ee/spec/javascripts/vue_shared/security_reports/grouped_security_reports_app_spec.js

@@ -121,7 +121,7 @@ describe('Grouped security reports app', () => {
     });
 
     it('renders loading summary text + spinner', done => {
-      expect(vm.$el.querySelector('.fa-spinner')).not.toBeNull();
+      expect(vm.$el.querySelector('.spinner')).not.toBeNull();
       expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual(
         'Security scanning is loading',
       );

ee/spec/javascripts/vue_shared/security_reports/split_security_reports_app_spec.js

@@ -53,7 +53,7 @@ describe('Split security reports app', () => {
     });
 
     it('renders loading summary text + spinner', done => {
-      expect(vm.$el.querySelector('.fa-spinner')).not.toBeNull();
+      expect(vm.$el.querySelector('.spinner')).not.toBeNull();
 
       expect(vm.$el.textContent).toContain('SAST is loading');
       expect(vm.$el.textContent).toContain('Dependency scanning is loading');

package.json

@@ -30,7 +30,7 @@
     "@babel/preset-env": "^7.3.1",
     "@gitlab/csslab": "^1.8.0",
     "@gitlab/svgs": "^1.54.0",
-    "@gitlab/ui": "^2.2.3",
+    "@gitlab/ui": "^2.3.0",
     "apollo-boost": "^0.3.1",
     "apollo-client": "^2.5.1",
     "at.js": "^1.5.4",

spec/javascripts/badges/components/badge_list_spec.js

@@ -60,7 +60,7 @@ describe('BadgeList component', () => {
 
     Vue.nextTick()
       .then(() => {
-        const loadingIcon = vm.$el.querySelector('.fa-spinner');
+        const loadingIcon = vm.$el.querySelector('.spinner');
 
         expect(loadingIcon).toBeVisible();
       })

spec/javascripts/badges/components/badge_spec.js

@@ -15,7 +15,7 @@ describe('Badge component', () => {
     const buttons = vm.$el.querySelectorAll('button');
     return {
       badgeImage: vm.$el.querySelector('img.project-badge'),
-      loadingIcon: vm.$el.querySelector('.fa-spinner'),
+      loadingIcon: vm.$el.querySelector('.spinner'),
       reloadButton: buttons[buttons.length - 1],
     };
   };

spec/javascripts/boards/board_list_spec.js

@@ -205,7 +205,7 @@ describe('Board list component', () => {
     component.list.loadingMore = true;
 
     Vue.nextTick(() => {
-      expect(component.$el.querySelector('.board-list-count .fa-spinner')).not.toBeNull();
+      expect(component.$el.querySelector('.board-list-count .spinner')).not.toBeNull();
 
       done();
     });

spec/javascripts/frequent_items/components/app_spec.js

@@ -194,7 +194,7 @@ describe('Frequent Items App Component', () => {
 
         expect(loadingEl).toBeDefined();
         expect(loadingEl.classList.contains('prepend-top-20')).toBe(true);
-        expect(loadingEl.querySelector('i').getAttribute('aria-label')).toBe('Loading projects');
+        expect(loadingEl.querySelector('span').getAttribute('aria-label')).toBe('Loading projects');
         done();
       });
     });

spec/javascripts/groups/components/app_spec.js

@@ -502,7 +502,7 @@ describe('AppComponent', () => {
       vm.isLoading = true;
       Vue.nextTick(() => {
         expect(vm.$el.querySelector('.loading-animation')).toBeDefined();
-        expect(vm.$el.querySelector('i.fa').getAttribute('aria-label')).toBe('Loading groups');
+        expect(vm.$el.querySelector('span').getAttribute('aria-label')).toBe('Loading groups');
         done();
       });
     });

spec/javascripts/registry/components/app_spec.js

@@ -99,7 +99,7 @@ describe('Registry List', () => {
 
     it('should render a loading spinner', done => {
       Vue.nextTick(() => {
-        expect(vm.$el.querySelector('.fa-spinner')).not.toBe(null);
+        expect(vm.$el.querySelector('.spinner')).not.toBe(null);
         done();
       });
     });

spec/javascripts/reports/components/grouped_test_reports_app_spec.js

@@ -61,7 +61,7 @@ describe('Grouped Test Reports App', () => {
 
     it('renders success summary text', done => {
       setTimeout(() => {
-        expect(vm.$el.querySelector('.fa-spinner')).not.toBeNull();
+        expect(vm.$el.querySelector('.spinner')).not.toBeNull();
         expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual(
           'Test summary results are being parsed',
         );
@@ -81,7 +81,7 @@ describe('Grouped Test Reports App', () => {
 
     it('renders failed summary text + new badge', done => {
       setTimeout(() => {
-        expect(vm.$el.querySelector('.fa-spinner')).toBeNull();
+        expect(vm.$el.querySelector('.spinner')).toBeNull();
         expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual(
           'Test summary contained 2 failed test results out of 11 total tests',
         );
@@ -109,7 +109,7 @@ describe('Grouped Test Reports App', () => {
 
     it('renders summary text', done => {
       setTimeout(() => {
-        expect(vm.$el.querySelector('.fa-spinner')).toBeNull();
+        expect(vm.$el.querySelector('.spinner')).toBeNull();
         expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual(
           'Test summary contained 2 failed test results and 2 fixed test results out of 11 total tests',
         );
@@ -137,7 +137,7 @@ describe('Grouped Test Reports App', () => {
 
     it('renders summary text', done => {
       setTimeout(() => {
-        expect(vm.$el.querySelector('.fa-spinner')).toBeNull();
+        expect(vm.$el.querySelector('.spinner')).toBeNull();
         expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual(
           'Test summary contained 2 fixed test results out of 11 total tests',
         );
@@ -190,7 +190,7 @@ describe('Grouped Test Reports App', () => {
     });
 
     it('renders loading summary text with loading icon', done => {
-      expect(vm.$el.querySelector('.fa-spinner')).not.toBeNull();
+      expect(vm.$el.querySelector('.spinner')).not.toBeNull();
       expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual(
         'Test summary results are being parsed',
       );

spec/javascripts/vue_mr_widget/components/mr_widget_status_icon_spec.js

@@ -18,7 +18,7 @@ describe('MR widget status icon component', () => {
     it('renders loading icon', () => {
       vm = mountComponent(Component, { status: 'loading' });
 
-      expect(vm.$el.querySelector('.mr-widget-icon i').classList).toContain('fa-spinner');
+      expect(vm.$el.querySelector('.mr-widget-icon span').classList).toContain('spinner');
     });
   });
 

spec/javascripts/vue_mr_widget/components/states/mr_widget_auto_merge_failed_spec.js

@@ -38,7 +38,7 @@ describe('MRWidgetAutoMergeFailed', () => {
 
     Vue.nextTick(() => {
       expect(vm.$el.querySelector('button').getAttribute('disabled')).toEqual('disabled');
-      expect(vm.$el.querySelector('button i').classList).toContain('fa-spinner');
+      expect(vm.$el.querySelector('button .loading-container span').classList).toContain('spinner');
       done();
     });
   });

spec/javascripts/vue_mr_widget/components/states/mr_widget_checking_spec.js

@@ -20,7 +20,7 @@ describe('MRWidgetChecking', () => {
   });
 
   it('renders loading icon', () => {
-    expect(vm.$el.querySelector('.mr-widget-icon i').classList).toContain('fa-spinner');
+    expect(vm.$el.querySelector('.mr-widget-icon span').classList).toContain('spinner');
   });
 
   it('renders information about merging', () => {

spec/javascripts/vue_shared/components/file_icon_spec.js

@@ -70,12 +70,9 @@ describe('File Icon component', () => {
       loading: true,
     });
 
-    const { classList } = vm.$el.querySelector('i');
+    const { classList } = vm.$el.querySelector('.loading-container span');
 
-    expect(classList.contains('fa')).toEqual(true);
-    expect(classList.contains('fa-spin')).toEqual(true);
-    expect(classList.contains('fa-spinner')).toEqual(true);
-    expect(classList.contains('fa-1x')).toEqual(true);
+    expect(classList.contains('spinner')).toEqual(true);
   });
 
   it('should add a special class and a size class', () => {

spec/javascripts/vue_shared/components/header_ci_component_spec.js

@@ -88,7 +88,7 @@ describe('Header CI Component', () => {
       vm.actions[0].isLoading = true;
 
       Vue.nextTick(() => {
-        expect(vm.$el.querySelector('.btn .fa-spinner').getAttribute('style')).toBeFalsy();
+        expect(vm.$el.querySelector('.btn .spinner').getAttribute('style')).toBeFalsy();
         done();
       });
     });

yarn.lock

@@ -663,10 +663,10 @@
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.54.0.tgz#00320e845efd46716042cde0c348b990d4908daf"
   integrity sha512-DR17iy8TM5IbXEacqiDP0p8SuC/J8EL+98xbfVz5BKvRsPHpeZJQNlBF/petIV5d+KWM5A9v3GZTY7uMU7z/JQ==
 
-"@gitlab/ui@^2.2.3":
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-2.2.3.tgz#b3b4d1d785662dfba44ad2a7354fcbe4cee22fc9"
-  integrity sha512-N1Q1O6zpS4zZhmvWsUCtuGXTzQeHOzRWQZctbFTEJonidIWk6juqIBduYgR0MadG3DZxiovUN12jDGVtCfZKzw==
+"@gitlab/ui@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-2.3.0.tgz#7840aa4ad6638a90e82fa99f3a5dcac1785f7477"
+  integrity sha512-7hH+Q6SeP0hMMM21TQoGmvNjBcadgD+gWlGcKlnN1euH+6kfmOT5TCdrvsUjsZSNdycSXrEMMcQYy2oXG1sbdw==
   dependencies:
     "@babel/standalone" "^7.0.0"
     bootstrap-vue "^2.0.0-rc.11"