Reduces technical debt

Updates icons to use gitlab-svg
Updates buttons to use gitlab-ui

Updates broken tests

3 files changed, 23 insertions, 34 deletions

diff --git a/spec/javascripts/registry/components/app_spec.js b/spec/javascripts/registry/components/app_spec.js
index 103a59e7094..67118ac03a5 100644
--- a/spec/javascripts/registry/components/app_spec.js
+++ b/spec/javascripts/registry/components/app_spec.js
@@ -57,9 +57,9 @@ describe('Registry List', () => {
           Vue.nextTick(() => {
             vm.$el.querySelector('.js-toggle-repo').click();
             Vue.nextTick(() => {
-              expect(vm.$el.querySelector('.js-toggle-repo i').className).toEqual(
-                'fa fa-chevron-up',
-              );
+              expect(
+                vm.$el.querySelector('.js-toggle-repo use').getAttribute('xlink:href'),
+              ).toContain('angle-up');
               done();
             });
           });
diff --git a/spec/javascripts/registry/components/collapsible_container_spec.js b/spec/javascripts/registry/components/collapsible_container_spec.js
index 069139bc564..a3f7ff76dc7 100644
--- a/spec/javascripts/registry/components/collapsible_container_spec.js
+++ b/spec/javascripts/registry/components/collapsible_container_spec.js
@@ -3,7 +3,9 @@ import axios from '~/lib/utils/axios_utils';
 import Vue from 'vue';
 import collapsibleComponent from '~/registry/components/collapsible_container.vue';
 import store from '~/registry/stores';
-import { repoPropsData, registryServerResponse } from '../mock_data';
+import * as types from '~/registry/stores/mutation_types';
+
+import { repoPropsData, registryServerResponse, reposServerResponse } from '../mock_data';
 
 describe('collapsible registry container', () => {
   let vm;
@@ -13,9 +15,9 @@ describe('collapsible registry container', () => {
   beforeEach(() => {
     mock = new MockAdapter(axios);
 
-    mock
-      .onGet(repoPropsData.tagsPath)
-      .replyOnce(200, registryServerResponse, {});
+    mock.onGet(repoPropsData.tagsPath).replyOnce(200, registryServerResponse, {});
+
+    store.commit(types.SET_REPOS_LIST, reposServerResponse);
 
     vm = new Component({
       store,
@@ -33,25 +35,16 @@ describe('collapsible registry container', () => {
   describe('toggle', () => {
     it('should be closed by default', () => {
       expect(vm.$el.querySelector('.container-image-tags')).toBe(null);
-      expect(vm.$el.querySelector('.container-image-head i').className).toEqual(
-        'fa fa-chevron-right',
-      );
+      expect(vm.iconName).toEqual('angle-right');
     });
 
-    fit('should be open when user clicks on closed repo', done => {
-
-      console.log(vm.repo, vm.$el)
-
+    it('should be open when user clicks on closed repo', done => {
       vm.$el.querySelector('.js-toggle-repo').click();
-      
+
       Vue.nextTick(() => {
-      
-        console.log('nextTick', vm.repo, vm.$el)
-      
         expect(vm.$el.querySelector('.container-image-tags')).not.toBeNull();
-        expect(vm.$el.querySelector('.container-image-head i').className).toEqual(
-          'fa fa-chevron-up',
-        );
+        expect(vm.iconName).toEqual('angle-up');
+
         done();
       });
     });
@@ -61,12 +54,12 @@ describe('collapsible registry container', () => {
 
       Vue.nextTick(() => {
         vm.$el.querySelector('.js-toggle-repo').click();
-        Vue.nextTick(() => {
-          expect(vm.$el.querySelector('.container-image-tags')).toBe(null);
-          expect(vm.$el.querySelector('.container-image-head i').className).toEqual(
-            'fa fa-chevron-right',
-          );
-          done();
+        setTimeout(() => {
+          Vue.nextTick(() => {
+            expect(vm.$el.querySelector('.container-image-tags')).toBe(null);
+            expect(vm.iconName).toEqual('angle-right');
+            done();
+          });
         });
       });
     });
diff --git a/spec/javascripts/registry/stores/actions_spec.js b/spec/javascripts/registry/stores/actions_spec.js
index 30114f5dca5..c9aa82dba90 100644
--- a/spec/javascripts/registry/stores/actions_spec.js
+++ b/spec/javascripts/registry/stores/actions_spec.js
@@ -28,9 +28,7 @@ describe('Actions Registry Store', () => {
   describe('server requests', () => {
     describe('fetchRepos', () => {
       beforeEach(() => {
-        mock
-          .onGet(`${TEST_HOST}/endpoint.json`)
-          .replyOnce(200, reposServerResponse, {})
+        mock.onGet(`${TEST_HOST}/endpoint.json`).replyOnce(200, reposServerResponse, {});
       });
 
       it('should set receveived repos', done => {
@@ -53,11 +51,9 @@ describe('Actions Registry Store', () => {
       let repo;
       beforeEach(() => {
         mockedState.repos = parsedReposServerResponse;
-        [, repo ] = mockedState.repos;
+        [, repo] = mockedState.repos;
 
-        mock
-          .onGet(repo.tagsPath)
-          .replyOnce(200, registryServerResponse, {})
+        mock.onGet(repo.tagsPath).replyOnce(200, registryServerResponse, {});
       });
 
       it('should set received list', done => {