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]]); }); }); });