1 files changed, 168 insertions, 0 deletions
diff --git a/spec/frontend/environments/kubernetes_tabs_spec.js b/spec/frontend/environments/kubernetes_tabs_spec.js
new file mode 100644
index 00000000000..429f267347b
--- /dev/null
+++ b/spec/frontend/environments/kubernetes_tabs_spec.js
@@ -0,0 +1,168 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import { GlLoadingIcon, GlTabs, GlTab, GlTable, GlPagination, GlBadge } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { stubComponent } from 'helpers/stub_component';
+import { useFakeDate } from 'helpers/fake_date';
+import waitForPromises from 'helpers/wait_for_promises';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import KubernetesTabs from '~/environments/components/kubernetes_tabs.vue';
+import KubernetesSummary from '~/environments/components/kubernetes_summary.vue';
+import { SERVICES_LIMIT_PER_PAGE } from '~/environments/constants';
+import { mockKasTunnelUrl } from './mock_data';
+import { k8sServicesMock } from './graphql/mock_data';
+
+Vue.use(VueApollo);
+
+describe('~/environments/components/kubernetes_tabs.vue', () => {
+  let wrapper;
+
+  const namespace = 'my-kubernetes-namespace';
+  const configuration = {
+    basePath: mockKasTunnelUrl,
+    baseOptions: {
+      headers: { 'GitLab-Agent-Id': '1' },
+    },
+  };
+
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findTabs = () => wrapper.findComponent(GlTabs);
+  const findTab = () => wrapper.findComponent(GlTab);
+  const findTable = () => wrapper.findComponent(GlTable);
+  const findPagination = () => wrapper.findComponent(GlPagination);
+  const findKubernetesSummary = () => wrapper.findComponent(KubernetesSummary);
+
+  const createApolloProvider = () => {
+    const mockResolvers = {
+      Query: {
+        k8sServices: jest.fn().mockReturnValue(k8sServicesMock),
+      },
+    };
+
+    return createMockApollo([], mockResolvers);
+  };
+
+  const createWrapper = (apolloProvider = createApolloProvider()) => {
+    wrapper = shallowMountExtended(KubernetesTabs, {
+      propsData: { configuration, namespace },
+      apolloProvider,
+      stubs: {
+        GlTab,
+        GlTable: stubComponent(GlTable, {
+          props: ['items', 'per-page'],
+        }),
+        GlBadge,
+      },
+    });
+  };
+
+  describe('mounted', () => {
+    it('shows tabs', () => {
+      createWrapper();
+
+      expect(findTabs().exists()).toBe(true);
+    });
+
+    it('renders summary tab', () => {
+      createWrapper();
+
+      expect(findKubernetesSummary().props()).toEqual({ namespace, configuration });
+    });
+
+    it('renders services tab', () => {
+      createWrapper();
+
+      expect(findTab().text()).toMatchInterpolatedText(`${KubernetesTabs.i18n.servicesTitle} 0`);
+    });
+  });
+
+  describe('services tab', () => {
+    useFakeDate(2020, 6, 6);
+    it('shows the loading icon', () => {
+      createWrapper();
+
+      expect(findLoadingIcon().exists()).toBe(true);
+    });
+
+    describe('when services data is loaded', () => {
+      beforeEach(async () => {
+        createWrapper();
+        await waitForPromises();
+      });
+
+      it('hides the loading icon when the list of services loaded', () => {
+        expect(findLoadingIcon().exists()).toBe(false);
+      });
+
+      it('renders services table when gets services data', () => {
+        expect(findTable().props('perPage')).toBe(SERVICES_LIMIT_PER_PAGE);
+        expect(findTable().props('items')).toMatchObject([
+          {
+            name: 'my-first-service',
+            namespace: 'default',
+            type: 'ClusterIP',
+            clusterIP: '10.96.0.1',
+            externalIP: '-',
+            ports: '443/TCP',
+            age: '0s',
+          },
+          {
+            name: 'my-second-service',
+            namespace: 'default',
+            type: 'NodePort',
+            clusterIP: '10.105.219.238',
+            externalIP: '-',
+            ports: '80:31989/TCP, 443:32679/TCP',
+            age: '2d',
+          },
+        ]);
+      });
+
+      it("doesn't render pagination when services are less then SERVICES_LIMIT_PER_PAGE", async () => {
+        createWrapper();
+        await waitForPromises();
+
+        expect(findPagination().exists()).toBe(false);
+      });
+    });
+
+    it('shows pagination when services are more then SERVICES_LIMIT_PER_PAGE', async () => {
+      const createApolloProviderWithPagination = () => {
+        const mockResolvers = {
+          Query: {
+            k8sServices: jest
+              .fn()
+              .mockReturnValue(
+                Array.from({ length: 6 }, () => k8sServicesMock).flatMap((array) => array),
+              ),
+          },
+        };
+
+        return createMockApollo([], mockResolvers);
+      };
+
+      createWrapper(createApolloProviderWithPagination());
+      await waitForPromises();
+
+      expect(findPagination().exists()).toBe(true);
+    });
+
+    it('emits an error message when gets an error from the cluster_client API', async () => {
+      const error = new Error('Error from the cluster_client API');
+      const createErroredApolloProvider = () => {
+        const mockResolvers = {
+          Query: {
+            k8sServices: jest.fn().mockRejectedValueOnce(error),
+          },
+        };
+
+        return createMockApollo([], mockResolvers);
+      };
+
+      createWrapper(createErroredApolloProvider());
+      await waitForPromises();
+
+      expect(wrapper.emitted('cluster-error')).toEqual([[error]]);
+    });
+  });
+});