1 files changed, 39 insertions, 21 deletions

diff --git a/spec/frontend/clusters_list/components/clusters_spec.js b/spec/frontend/clusters_list/components/clusters_spec.js
index 941a3adb625..a34202c789d 100644
--- a/spec/frontend/clusters_list/components/clusters_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_spec.js
@@ -8,6 +8,7 @@ import * as Sentry from '@sentry/browser';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import Clusters from '~/clusters_list/components/clusters.vue';
+import ClustersEmptyState from '~/clusters_list/components/clusters_empty_state.vue';
 import ClusterStore from '~/clusters_list/store';
 import axios from '~/lib/utils/axios_utils';
 import { apiData } from '../mock_data';
@@ -18,26 +19,38 @@ describe('Clusters', () => {
   let wrapper;
 
   const endpoint = 'some/endpoint';
+  const totalClustersNumber = 6;
+  const clustersEmptyStateImage = 'path/to/svg';
+  const emptyStateHelpText = null;
+  const newClusterPath = '/path/to/new/cluster';
 
   const entryData = {
     endpoint,
     imgTagsAwsText: 'AWS Icon',
     imgTagsDefaultText: 'Default Icon',
     imgTagsGcpText: 'GCP Icon',
+    totalClusters: totalClustersNumber,
   };
 
-  const findLoader = () => wrapper.find(GlLoadingIcon);
-  const findPaginatedButtons = () => wrapper.find(GlPagination);
-  const findTable = () => wrapper.find(GlTable);
+  const provideData = {
+    clustersEmptyStateImage,
+    emptyStateHelpText,
+    newClusterPath,
+  };
+
+  const findLoader = () => wrapper.findComponent(GlLoadingIcon);
+  const findPaginatedButtons = () => wrapper.findComponent(GlPagination);
+  const findTable = () => wrapper.findComponent(GlTable);
   const findStatuses = () => findTable().findAll('.js-status');
+  const findEmptyState = () => wrapper.findComponent(ClustersEmptyState);
 
   const mockPollingApi = (response, body, header) => {
     mock.onGet(`${endpoint}?page=${header['x-page']}`).reply(response, body, header);
   };
 
-  const mountWrapper = () => {
+  const createWrapper = ({ propsData = {} }) => {
     store = ClusterStore(entryData);
-    wrapper = mount(Clusters, { store });
+    wrapper = mount(Clusters, { propsData, provide: provideData, store, stubs: { GlTable } });
     return axios.waitForAll();
   };
 
@@ -57,7 +70,7 @@ describe('Clusters', () => {
     mock = new MockAdapter(axios);
     mockPollingApi(200, apiData, paginationHeader());
 
-    return mountWrapper();
+    return createWrapper({});
   });
 
   afterEach(() => {
@@ -70,7 +83,6 @@ describe('Clusters', () => {
     describe('when data is loading', () => {
       beforeEach(() => {
         wrapper.vm.$store.state.loadingClusters = true;
-        return wrapper.vm.$nextTick();
       });
 
       it('displays a loader instead of the table while loading', () => {
@@ -79,23 +91,29 @@ describe('Clusters', () => {
       });
     });
 
-    it('displays a table component', () => {
-      expect(findTable().exists()).toBe(true);
+    describe('when clusters are present', () => {
+      it('displays a table component', () => {
+        expect(findTable().exists()).toBe(true);
+      });
     });
 
-    it('renders the correct table headers', () => {
-      const tableHeaders = wrapper.vm.fields;
-      const headers = findTable().findAll('th');
-
-      expect(headers.length).toBe(tableHeaders.length);
-
-      tableHeaders.forEach((headerText, i) =>
-        expect(headers.at(i).text()).toEqual(headerText.label),
-      );
+    describe('when there are no clusters', () => {
+      beforeEach(() => {
+        wrapper.vm.$store.state.totalClusters = 0;
+      });
+      it('should render empty state', () => {
+        expect(findEmptyState().exists()).toBe(true);
+      });
     });
 
-    it('should stack on smaller devices', () => {
-      expect(findTable().classes()).toContain('b-table-stacked-md');
+    describe('when is loaded as a child component', () => {
+      beforeEach(() => {
+        createWrapper({ limit: 6 });
+      });
+
+      it("shouldn't render pagination buttons", () => {
+        expect(findPaginatedButtons().exists()).toBe(false);
+      });
     });
   });
 
@@ -240,7 +258,7 @@ describe('Clusters', () => {
 
     beforeEach(() => {
       mockPollingApi(200, apiData, paginationHeader(totalFirstPage, perPage, 1));
-      return mountWrapper();
+      return createWrapper({});
     });
 
     it('should load to page 1 with header values', () => {