Add latest changes from gitlab-org/gitlab@master

4 files changed, 55 insertions, 35 deletions

diff --git a/spec/frontend/registry/explorer/pages/details_spec.js b/spec/frontend/registry/explorer/pages/details_spec.js
index 48f3b0f9b65..2b83f7e7351 100644
--- a/spec/frontend/registry/explorer/pages/details_spec.js
+++ b/spec/frontend/registry/explorer/pages/details_spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import { GlTable, GlPagination, GlLoadingIcon } from '@gitlab/ui';
+import { GlTable, GlPagination, GlSkeletonLoader } from '@gitlab/ui';
 import Tracking from '~/tracking';
 import stubChildren from 'helpers/stub_children';
 import component from '~/registry/explorer/pages/details.vue';
@@ -14,8 +14,7 @@ describe('Details Page', () => {
 
   const findDeleteModal = () => wrapper.find(GlModal);
   const findPagination = () => wrapper.find(GlPagination);
-  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
-  const findTagsTable = () => wrapper.find(GlTable);
+  const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader);
   const findMainCheckbox = () => wrapper.find({ ref: 'mainCheckbox' });
   const findFirstRowItem = ref => wrapper.find({ ref });
   const findBulkDeleteButton = () => wrapper.find({ ref: 'bulkDeleteButton' });
@@ -33,7 +32,7 @@ describe('Details Page', () => {
         ...stubChildren(component),
         GlModal,
         GlSprintf: false,
-        GlTable: false,
+        GlTable,
       },
       mocks: {
         $route: {
@@ -53,18 +52,19 @@ describe('Details Page', () => {
   });
 
   describe('when isLoading is true', () => {
-    beforeAll(() => store.commit(SET_MAIN_LOADING, true));
+    beforeEach(() => {
+      store.dispatch('receiveTagsListSuccess', { ...tagsListResponse, data: [] });
+      store.commit(SET_MAIN_LOADING, true);
+    });
 
     afterAll(() => store.commit(SET_MAIN_LOADING, false));
 
-    it('has a loading icon', () => {
-      expect(findLoadingIcon().exists()).toBe(true);
+    it('has a skeleton loader', () => {
+      expect(findSkeletonLoader().exists()).toBe(true);
     });
 
-    it('does not have a main content', () => {
-      expect(findTagsTable().exists()).toBe(false);
-      expect(findPagination().exists()).toBe(false);
-      expect(findDeleteModal().exists()).toBe(false);
+    it('does not have list items', () => {
+      expect(findFirstRowItem('rowCheckbox').exists()).toBe(false);
     });
   });
 
diff --git a/spec/frontend/registry/explorer/pages/list_spec.js b/spec/frontend/registry/explorer/pages/list_spec.js
index f463dc49035..91c3c242ed4 100644
--- a/spec/frontend/registry/explorer/pages/list_spec.js
+++ b/spec/frontend/registry/explorer/pages/list_spec.js
@@ -1,6 +1,6 @@
 import VueRouter from 'vue-router';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
-import { GlPagination, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
+import { GlPagination, GlSkeletonLoader, GlSprintf } from '@gitlab/ui';
 import Tracking from '~/tracking';
 import component from '~/registry/explorer/pages/list.vue';
 import store from '~/registry/explorer/stores/';
@@ -17,7 +17,7 @@ describe('List Page', () => {
 
   const findDeleteBtn = () => wrapper.find({ ref: 'deleteImageButton' });
   const findDeleteModal = () => wrapper.find(GlModal);
-  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader);
   const findImagesList = () => wrapper.find({ ref: 'imagesList' });
   const findRowItems = () => wrapper.findAll({ ref: 'rowItem' });
   const findEmptyState = () => wrapper.find(GlEmptyState);
@@ -71,7 +71,7 @@ describe('List Page', () => {
     });
 
     it('should not show the loading or default state', () => {
-      expect(findLoadingIcon().exists()).toBe(false);
+      expect(findSkeletonLoader().exists()).toBe(false);
       expect(findImagesList().exists()).toBe(false);
     });
   });
@@ -81,8 +81,8 @@ describe('List Page', () => {
 
     afterAll(() => store.commit(SET_MAIN_LOADING, false));
 
-    it('shows the loading icon', () => {
-      expect(findLoadingIcon().exists()).toBe(true);
+    it('shows the skeleton loader', () => {
+      expect(findSkeletonLoader().exists()).toBe(true);
     });
 
     it('imagesList is not visible', () => {
diff --git a/spec/frontend/registry/explorer/stores/actions_spec.js b/spec/frontend/registry/explorer/stores/actions_spec.js
index a3fb29c0eb9..3e22621058e 100644
--- a/spec/frontend/registry/explorer/stores/actions_spec.js
+++ b/spec/frontend/registry/explorer/stores/actions_spec.js
@@ -180,10 +180,7 @@ describe('Actions RegistryExplorer Store', () => {
         {
           tagsPagination: {},
         },
-        [
-          { type: types.SET_MAIN_LOADING, payload: true },
-          { type: types.SET_MAIN_LOADING, payload: false },
-        ],
+        [{ type: types.SET_MAIN_LOADING, payload: true }],
         [
           {
             type: 'requestTagsList',
@@ -220,13 +217,11 @@ describe('Actions RegistryExplorer Store', () => {
   });
 
   describe('request delete multiple tags', () => {
-    const id = 1;
-    const params = window.btoa(JSON.stringify({ id }));
-    const projectPath = 'project-path';
-    const url = `${projectPath}/registry/repository/${id}/tags/bulk_destroy`;
+    const url = `project-path/registry/repository/foo/tags`;
+    const params = window.btoa(JSON.stringify({ tags_path: `${url}?format=json` }));
 
     it('successfully performs the delete request', done => {
-      mock.onDelete(url).replyOnce(200);
+      mock.onDelete(`${url}/bulk_destroy`).replyOnce(200);
 
       testAction(
         actions.requestDeleteTags,
@@ -235,15 +230,9 @@ describe('Actions RegistryExplorer Store', () => {
           params,
         },
         {
-          config: {
-            projectPath,
-          },
           tagsPagination: {},
         },
-        [
-          { type: types.SET_MAIN_LOADING, payload: true },
-          { type: types.SET_MAIN_LOADING, payload: false },
-        ],
+        [{ type: types.SET_MAIN_LOADING, payload: true }],
         [
           {
             type: 'requestTagsList',
@@ -267,9 +256,6 @@ describe('Actions RegistryExplorer Store', () => {
           params,
         },
         {
-          config: {
-            projectPath,
-          },
           tagsPagination: {},
         },
         [
diff --git a/spec/frontend/registry/explorer/stores/getters_spec.js b/spec/frontend/registry/explorer/stores/getters_spec.js
new file mode 100644
index 00000000000..c224f076d30
--- /dev/null
+++ b/spec/frontend/registry/explorer/stores/getters_spec.js
@@ -0,0 +1,34 @@
+import * as getters from '~/registry/explorer/stores/getters';
+
+describe('Getters RegistryExplorer  store', () => {
+  let state;
+  const tags = ['foo', 'bar'];
+
+  describe('tags', () => {
+    describe('when isLoading is false', () => {
+      beforeEach(() => {
+        state = {
+          tags,
+          isLoading: false,
+        };
+      });
+
+      it('returns tags', () => {
+        expect(getters.tags(state)).toEqual(state.tags);
+      });
+    });
+
+    describe('when isLoading is true', () => {
+      beforeEach(() => {
+        state = {
+          tags,
+          isLoading: true,
+        };
+      });
+
+      it('returns empty array', () => {
+        expect(getters.tags(state)).toEqual([]);
+      });
+    });
+  });
+});