1 files changed, 26 insertions, 17 deletions

diff --git a/spec/javascripts/registry/components/collapsible_container_spec.js b/spec/javascripts/registry/components/collapsible_container_spec.js
index 256a242f784..a3f7ff76dc7 100644
--- a/spec/javascripts/registry/components/collapsible_container_spec.js
+++ b/spec/javascripts/registry/components/collapsible_container_spec.js
@@ -1,14 +1,24 @@
+import MockAdapter from 'axios-mock-adapter';
+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 } from '../mock_data';
+import * as types from '~/registry/stores/mutation_types';
+
+import { repoPropsData, registryServerResponse, reposServerResponse } from '../mock_data';
 
 describe('collapsible registry container', () => {
   let vm;
-  let Component;
+  let mock;
+  const Component = Vue.extend(collapsibleComponent);
 
   beforeEach(() => {
-    Component = Vue.extend(collapsibleComponent);
+    mock = new MockAdapter(axios);
+
+    mock.onGet(repoPropsData.tagsPath).replyOnce(200, registryServerResponse, {});
+
+    store.commit(types.SET_REPOS_LIST, reposServerResponse);
+
     vm = new Component({
       store,
       propsData: {
@@ -18,24 +28,23 @@ describe('collapsible registry container', () => {
   });
 
   afterEach(() => {
+    mock.restore();
     vm.$destroy();
   });
 
   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');
     });
 
     it('should be open when user clicks on closed repo', done => {
       vm.$el.querySelector('.js-toggle-repo').click();
+
       Vue.nextTick(() => {
-        expect(vm.$el.querySelector('.container-image-tags')).toBeDefined();
-        expect(vm.$el.querySelector('.container-image-head i').className).toEqual(
-          'fa fa-chevron-up',
-        );
+        expect(vm.$el.querySelector('.container-image-tags')).not.toBeNull();
+        expect(vm.iconName).toEqual('angle-up');
+
         done();
       });
     });
@@ -45,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();
+          });
         });
       });
     });
@@ -58,7 +67,7 @@ describe('collapsible registry container', () => {
 
   describe('delete repo', () => {
     it('should be possible to delete a repo', () => {
-      expect(vm.$el.querySelector('.js-remove-repo')).toBeDefined();
+      expect(vm.$el.querySelector('.js-remove-repo')).not.toBeNull();
     });
   });
 });