1 files changed, 34 insertions, 19 deletions

diff --git a/spec/frontend/registry/explorer/pages/details_spec.js b/spec/frontend/registry/explorer/pages/details_spec.js
index b7e01cad9bc..9bc0bae5c23 100644
--- a/spec/frontend/registry/explorer/pages/details_spec.js
+++ b/spec/frontend/registry/explorer/pages/details_spec.js
@@ -5,6 +5,7 @@ import component from '~/registry/explorer/pages/details.vue';
 import DeleteAlert from '~/registry/explorer/components/details_page/delete_alert.vue';
 import DetailsHeader from '~/registry/explorer/components/details_page/details_header.vue';
 import TagsLoader from '~/registry/explorer/components/details_page/tags_loader.vue';
+import TagsList from '~/registry/explorer/components/details_page/tags_list.vue';
 import EmptyTagsState from '~/registry/explorer/components/details_page/empty_tags_state.vue';
 import { createStore } from '~/registry/explorer/stores/';
 import {
@@ -15,7 +16,7 @@ import {
 } from '~/registry/explorer/stores/mutation_types/';
 
 import { tagsListResponse } from '../mock_data';
-import { TagsTable, DeleteModal } from '../stubs';
+import { DeleteModal } from '../stubs';
 
 describe('Details Page', () => {
   let wrapper;
@@ -25,18 +26,23 @@ describe('Details Page', () => {
   const findDeleteModal = () => wrapper.find(DeleteModal);
   const findPagination = () => wrapper.find(GlPagination);
   const findTagsLoader = () => wrapper.find(TagsLoader);
-  const findTagsTable = () => wrapper.find(TagsTable);
+  const findTagsList = () => wrapper.find(TagsList);
   const findDeleteAlert = () => wrapper.find(DeleteAlert);
   const findDetailsHeader = () => wrapper.find(DetailsHeader);
   const findEmptyTagsState = () => wrapper.find(EmptyTagsState);
 
   const routeId = window.btoa(JSON.stringify({ name: 'foo', tags_path: 'bar' }));
 
+  const tagsArrayToSelectedTags = tags =>
+    tags.reduce((acc, c) => {
+      acc[c.name] = true;
+      return acc;
+    }, {});
+
   const mountComponent = options => {
     wrapper = shallowMount(component, {
       store,
       stubs: {
-        TagsTable,
         DeleteModal,
       },
       mocks: {
@@ -66,15 +72,18 @@ describe('Details Page', () => {
 
   describe('when isLoading is true', () => {
     beforeEach(() => {
-      mountComponent();
       store.commit(SET_MAIN_LOADING, true);
-      return wrapper.vm.$nextTick();
+      mountComponent();
     });
 
     afterEach(() => store.commit(SET_MAIN_LOADING, false));
 
-    it('binds isLoading to tags-table', () => {
-      expect(findTagsTable().props('isLoading')).toBe(true);
+    it('shows the loader', () => {
+      expect(findTagsLoader().exists()).toBe(true);
+    });
+
+    it('does not show the list', () => {
+      expect(findTagsList().exists()).toBe(false);
     });
 
     it('does not show pagination', () => {
@@ -82,8 +91,9 @@ describe('Details Page', () => {
     });
   });
 
-  describe('table slots', () => {
+  describe('when the list of tags is empty', () => {
     beforeEach(() => {
+      store.commit(SET_TAGS_LIST_SUCCESS, []);
       mountComponent();
     });
 
@@ -91,32 +101,37 @@ describe('Details Page', () => {
       expect(findEmptyTagsState().exists()).toBe(true);
     });
 
-    it('has a skeleton loader', () => {
-      expect(findTagsLoader().exists()).toBe(true);
+    it('does not show the loader', () => {
+      expect(findTagsLoader().exists()).toBe(false);
+    });
+
+    it('does not show the list', () => {
+      expect(findTagsList().exists()).toBe(false);
     });
   });
 
-  describe('table', () => {
+  describe('list', () => {
     beforeEach(() => {
       mountComponent();
     });
 
     it('exists', () => {
-      expect(findTagsTable().exists()).toBe(true);
+      expect(findTagsList().exists()).toBe(true);
     });
 
     it('has the correct props bound', () => {
-      expect(findTagsTable().props()).toMatchObject({
+      expect(findTagsList().props()).toMatchObject({
         isDesktop: true,
-        isLoading: false,
         tags: store.state.tags,
       });
     });
 
     describe('deleteEvent', () => {
       describe('single item', () => {
+        let tagToBeDeleted;
         beforeEach(() => {
-          findTagsTable().vm.$emit('delete', [store.state.tags[0].name]);
+          [tagToBeDeleted] = store.state.tags;
+          findTagsList().vm.$emit('delete', { [tagToBeDeleted.name]: true });
         });
 
         it('open the modal', () => {
@@ -124,7 +139,7 @@ describe('Details Page', () => {
         });
 
         it('maps the selection to itemToBeDeleted', () => {
-          expect(wrapper.vm.itemsToBeDeleted).toEqual([store.state.tags[0]]);
+          expect(wrapper.vm.itemsToBeDeleted).toEqual([tagToBeDeleted]);
         });
 
         it('tracks a single delete event', () => {
@@ -136,7 +151,7 @@ describe('Details Page', () => {
 
       describe('multiple items', () => {
         beforeEach(() => {
-          findTagsTable().vm.$emit('delete', store.state.tags.map(t => t.name));
+          findTagsList().vm.$emit('delete', tagsArrayToSelectedTags(store.state.tags));
         });
 
         it('open the modal', () => {
@@ -202,7 +217,7 @@ describe('Details Page', () => {
       describe('when one item is selected to be deleted', () => {
         beforeEach(() => {
           mountComponent();
-          findTagsTable().vm.$emit('delete', [store.state.tags[0].name]);
+          findTagsList().vm.$emit('delete', { [store.state.tags[0].name]: true });
         });
 
         it('dispatch requestDeleteTag with the right parameters', () => {
@@ -217,7 +232,7 @@ describe('Details Page', () => {
       describe('when more than one item is selected to be deleted', () => {
         beforeEach(() => {
           mountComponent();
-          findTagsTable().vm.$emit('delete', store.state.tags.map(t => t.name));
+          findTagsList().vm.$emit('delete', tagsArrayToSelectedTags(store.state.tags));
         });
 
         it('dispatch requestDeleteTags with the right parameters', () => {