debian-mirror-gitlab/spec/frontend/environments/kubernetes_tabs_spec.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

169 lines
5 KiB
JavaScript
Raw Normal View History

2023-07-09 08:55:56 +05:30
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]]);
});
});
});