1 files changed, 243 insertions, 0 deletions
diff --git a/spec/frontend/clusters_list/components/clusters_view_all_spec.js b/spec/frontend/clusters_list/components/clusters_view_all_spec.js
new file mode 100644
index 00000000000..6ef56beddee
--- /dev/null
+++ b/spec/frontend/clusters_list/components/clusters_view_all_spec.js
@@ -0,0 +1,243 @@
+import { GlCard, GlLoadingIcon, GlButton, GlSprintf, GlBadge } from '@gitlab/ui';
+import { createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ClustersViewAll from '~/clusters_list/components/clusters_view_all.vue';
+import Agents from '~/clusters_list/components/agents.vue';
+import Clusters from '~/clusters_list/components/clusters.vue';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import {
+  AGENT,
+  CERTIFICATE_BASED,
+  AGENT_CARD_INFO,
+  CERTIFICATE_BASED_CARD_INFO,
+  MAX_CLUSTERS_LIST,
+  INSTALL_AGENT_MODAL_ID,
+} from '~/clusters_list/constants';
+import { sprintf } from '~/locale';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+const addClusterPath = '/path/to/add/cluster';
+const defaultBranchName = 'default-branch';
+
+describe('ClustersViewAllComponent', () => {
+  let wrapper;
+
+  const event = {
+    preventDefault: jest.fn(),
+  };
+
+  const propsData = {
+    defaultBranchName,
+  };
+
+  const provideData = {
+    addClusterPath,
+  };
+
+  const entryData = {
+    loadingClusters: false,
+    totalClusters: 0,
+  };
+
+  const findCards = () => wrapper.findAllComponents(GlCard);
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findAgentsComponent = () => wrapper.findComponent(Agents);
+  const findClustersComponent = () => wrapper.findComponent(Clusters);
+  const findCardsContainer = () => wrapper.findByTestId('clusters-cards-container');
+  const findAgentCardTitle = () => wrapper.findByTestId('agent-card-title');
+  const findRecommendedBadge = () => wrapper.findComponent(GlBadge);
+  const findClustersCardTitle = () => wrapper.findByTestId('clusters-card-title');
+  const findFooterButton = (line) => findCards().at(line).findComponent(GlButton);
+
+  const createStore = (initialState) =>
+    new Vuex.Store({
+      state: initialState,
+    });
+
+  const createWrapper = ({ initialState }) => {
+    wrapper = shallowMountExtended(ClustersViewAll, {
+      localVue,
+      store: createStore(initialState),
+      propsData,
+      provide: provideData,
+      directives: {
+        GlModalDirective: createMockDirective(),
+      },
+      stubs: { GlCard, GlSprintf },
+    });
+  };
+
+  beforeEach(() => {
+    createWrapper({ initialState: entryData });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when agents and clusters are not loaded', () => {
+    const initialState = {
+      loadingClusters: true,
+      totalClusters: 0,
+    };
+    beforeEach(() => {
+      createWrapper({ initialState });
+    });
+
+    it('should show the loading icon', () => {
+      expect(findLoadingIcon().exists()).toBe(true);
+    });
+  });
+
+  describe('when both agents and clusters are loaded', () => {
+    beforeEach(() => {
+      findAgentsComponent().vm.$emit('onAgentsLoad', 6);
+    });
+
+    it("shouldn't show the loading icon", () => {
+      expect(findLoadingIcon().exists()).toBe(false);
+    });
+
+    it('should make content visible', () => {
+      expect(findCardsContainer().isVisible()).toBe(true);
+    });
+
+    it('should render 2 cards', () => {
+      expect(findCards().length).toBe(2);
+    });
+  });
+
+  describe('agents card', () => {
+    it('should show recommended badge', () => {
+      expect(findRecommendedBadge().exists()).toBe(true);
+    });
+
+    it('should render Agents component', () => {
+      expect(findAgentsComponent().exists()).toBe(true);
+    });
+
+    it('should pass the limit prop', () => {
+      expect(findAgentsComponent().props('limit')).toBe(MAX_CLUSTERS_LIST);
+    });
+
+    it('should pass the default-branch-name prop', () => {
+      expect(findAgentsComponent().props('defaultBranchName')).toBe(defaultBranchName);
+    });
+
+    describe('when there are no agents', () => {
+      it('should show the empty title', () => {
+        expect(findAgentCardTitle().text()).toBe(AGENT_CARD_INFO.emptyTitle);
+      });
+
+      it('should show install new Agent button in the footer', () => {
+        expect(findFooterButton(0).exists()).toBe(true);
+      });
+
+      it('should render correct modal id for the agent link', () => {
+        const binding = getBinding(findFooterButton(0).element, 'gl-modal-directive');
+
+        expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID);
+      });
+    });
+
+    describe('when the agents are present', () => {
+      const findFooterLink = () => wrapper.findByTestId('agents-tab-footer-link');
+      const agentsNumber = 7;
+
+      beforeEach(() => {
+        findAgentsComponent().vm.$emit('onAgentsLoad', agentsNumber);
+      });
+
+      it('should show the correct title', () => {
+        expect(findAgentCardTitle().text()).toBe(
+          sprintf(AGENT_CARD_INFO.title, { number: MAX_CLUSTERS_LIST, total: agentsNumber }),
+        );
+      });
+
+      it('should show the link to the Agents tab in the footer', () => {
+        expect(findFooterLink().exists()).toBe(true);
+        expect(findFooterLink().text()).toBe(
+          sprintf(AGENT_CARD_INFO.footerText, { number: agentsNumber }),
+        );
+        expect(findFooterLink().attributes('href')).toBe(`?tab=${AGENT}`);
+      });
+
+      describe('when clicking on the footer link', () => {
+        beforeEach(() => {
+          findFooterLink().vm.$emit('click', event);
+        });
+
+        it('should trigger tab change', () => {
+          expect(wrapper.emitted('changeTab')).toEqual([[AGENT]]);
+        });
+      });
+    });
+  });
+
+  describe('clusters tab', () => {
+    it('should pass the limit prop', () => {
+      expect(findClustersComponent().props('limit')).toBe(MAX_CLUSTERS_LIST);
+    });
+
+    it('should pass the is-child-component prop', () => {
+      expect(findClustersComponent().props('isChildComponent')).toBe(true);
+    });
+
+    describe('when there are no clusters', () => {
+      it('should show the empty title', () => {
+        expect(findClustersCardTitle().text()).toBe(CERTIFICATE_BASED_CARD_INFO.emptyTitle);
+      });
+
+      it('should show install new Agent button in the footer', () => {
+        expect(findFooterButton(1).exists()).toBe(true);
+      });
+
+      it('should render correct href for the button in the footer', () => {
+        expect(findFooterButton(1).attributes('href')).toBe(addClusterPath);
+      });
+    });
+
+    describe('when the clusters are present', () => {
+      const findFooterLink = () => wrapper.findByTestId('clusters-tab-footer-link');
+
+      const clustersNumber = 7;
+      const initialState = {
+        loadingClusters: false,
+        totalClusters: clustersNumber,
+      };
+
+      beforeEach(() => {
+        createWrapper({ initialState });
+      });
+
+      it('should show the correct title', () => {
+        expect(findClustersCardTitle().text()).toBe(
+          sprintf(CERTIFICATE_BASED_CARD_INFO.title, {
+            number: MAX_CLUSTERS_LIST,
+            total: clustersNumber,
+          }),
+        );
+      });
+
+      it('should show the link to the Clusters tab in the footer', () => {
+        expect(findFooterLink().exists()).toBe(true);
+        expect(findFooterLink().text()).toBe(
+          sprintf(CERTIFICATE_BASED_CARD_INFO.footerText, { number: clustersNumber }),
+        );
+      });
+
+      describe('when clicking on the footer link', () => {
+        beforeEach(() => {
+          findFooterLink().vm.$emit('click', event);
+        });
+
+        it('should trigger tab change', () => {
+          expect(wrapper.emitted('changeTab')).toEqual([[CERTIFICATE_BASED]]);
+        });
+      });
+    });
+  });
+});