552 lines
17 KiB
JavaScript
552 lines
17 KiB
JavaScript
import { shallowMount, mount } from '@vue/test-utils';
|
|
import Applications from '~/clusters/components/applications.vue';
|
|
import { CLUSTER_TYPE, PROVIDER_TYPE } from '~/clusters/constants';
|
|
import { APPLICATIONS_MOCK_STATE } from '../services/mock_data';
|
|
import eventHub from '~/clusters/event_hub';
|
|
import ApplicationRow from '~/clusters/components/application_row.vue';
|
|
import KnativeDomainEditor from '~/clusters/components/knative_domain_editor.vue';
|
|
import CrossplaneProviderStack from '~/clusters/components/crossplane_provider_stack.vue';
|
|
import IngressModsecuritySettings from '~/clusters/components/ingress_modsecurity_settings.vue';
|
|
import FluentdOutputSettings from '~/clusters/components/fluentd_output_settings.vue';
|
|
|
|
describe('Applications', () => {
|
|
let wrapper;
|
|
|
|
beforeEach(() => {
|
|
gon.features = gon.features || {};
|
|
});
|
|
|
|
const createApp = ({ applications, type, props } = {}, isShallow) => {
|
|
const mountMethod = isShallow ? shallowMount : mount;
|
|
|
|
wrapper = mountMethod(Applications, {
|
|
stubs: { ApplicationRow },
|
|
propsData: {
|
|
type,
|
|
applications: { ...APPLICATIONS_MOCK_STATE, ...applications },
|
|
...props,
|
|
},
|
|
});
|
|
};
|
|
|
|
const createShallowApp = options => createApp(options, true);
|
|
const findByTestId = id => wrapper.find(`[data-testid="${id}"]`);
|
|
afterEach(() => {
|
|
wrapper.destroy();
|
|
});
|
|
|
|
describe('Project cluster applications', () => {
|
|
beforeEach(() => {
|
|
createApp({ type: CLUSTER_TYPE.PROJECT });
|
|
});
|
|
|
|
it('renders a row for Ingress', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-ingress').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for Cert-Manager', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-cert_manager').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for Crossplane', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-crossplane').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for Prometheus', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-prometheus').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for GitLab Runner', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-runner').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for Jupyter', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-jupyter').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for Knative', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-knative').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for Elastic Stack', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-elastic_stack').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for Fluentd', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-fluentd').exists()).toBe(true);
|
|
});
|
|
it('renders a row for Cilium', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-cilium').exists()).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe('Group cluster applications', () => {
|
|
beforeEach(() => {
|
|
createApp({ type: CLUSTER_TYPE.GROUP });
|
|
});
|
|
|
|
it('renders a row for Ingress', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-ingress').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for Cert-Manager', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-cert_manager').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for Crossplane', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-crossplane').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for Prometheus', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-prometheus').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for GitLab Runner', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-runner').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for Jupyter', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-jupyter').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for Knative', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-knative').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for Elastic Stack', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-elastic_stack').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for Fluentd', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-fluentd').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for Cilium', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-cilium').exists()).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe('Instance cluster applications', () => {
|
|
beforeEach(() => {
|
|
createApp({ type: CLUSTER_TYPE.INSTANCE });
|
|
});
|
|
|
|
it('renders a row for Ingress', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-ingress').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for Cert-Manager', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-cert_manager').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for Crossplane', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-crossplane').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for Prometheus', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-prometheus').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for GitLab Runner', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-runner').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for Jupyter', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-jupyter').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for Knative', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-knative').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for Elastic Stack', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-elastic_stack').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for Fluentd', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-fluentd').exists()).toBe(true);
|
|
});
|
|
|
|
it('renders a row for Cilium', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-cilium').exists()).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe('Helm application', () => {
|
|
it('does not render a row for Helm Tiller', () => {
|
|
createApp();
|
|
expect(wrapper.find('.js-cluster-application-row-helm').exists()).toBe(false);
|
|
});
|
|
});
|
|
|
|
describe('Ingress application', () => {
|
|
it('shows the correct warning message', () => {
|
|
createApp();
|
|
expect(findByTestId('ingressCostWarning').element).toMatchSnapshot();
|
|
});
|
|
|
|
describe('with nested component', () => {
|
|
const propsData = {
|
|
applications: {
|
|
ingress: {
|
|
title: 'Ingress',
|
|
status: 'installed',
|
|
},
|
|
},
|
|
};
|
|
|
|
beforeEach(() => createShallowApp(propsData));
|
|
|
|
it('renders IngressModsecuritySettings', () => {
|
|
const modsecuritySettings = wrapper.find(IngressModsecuritySettings);
|
|
expect(modsecuritySettings.exists()).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe('when installed', () => {
|
|
describe('with ip address', () => {
|
|
it('renders ip address with a clipboard button', () => {
|
|
createApp({
|
|
applications: {
|
|
ingress: {
|
|
title: 'Ingress',
|
|
status: 'installed',
|
|
externalIp: '0.0.0.0',
|
|
},
|
|
},
|
|
});
|
|
|
|
expect(wrapper.find('.js-endpoint').element.value).toEqual('0.0.0.0');
|
|
expect(wrapper.find('.js-clipboard-btn').attributes('data-clipboard-text')).toEqual(
|
|
'0.0.0.0',
|
|
);
|
|
});
|
|
});
|
|
|
|
describe('with hostname', () => {
|
|
it('renders hostname with a clipboard button', () => {
|
|
createApp({
|
|
applications: {
|
|
ingress: {
|
|
title: 'Ingress',
|
|
status: 'installed',
|
|
externalHostname: 'localhost.localdomain',
|
|
modsecurity_enabled: false,
|
|
},
|
|
cert_manager: { title: 'Cert-Manager' },
|
|
crossplane: { title: 'Crossplane', stack: '' },
|
|
runner: { title: 'GitLab Runner' },
|
|
prometheus: { title: 'Prometheus' },
|
|
jupyter: { title: 'JupyterHub', hostname: '' },
|
|
knative: { title: 'Knative', hostname: '' },
|
|
elastic_stack: { title: 'Elastic Stack' },
|
|
fluentd: { title: 'Fluentd' },
|
|
cilium: { title: 'GitLab Container Network Policies' },
|
|
},
|
|
});
|
|
|
|
expect(wrapper.find('.js-endpoint').element.value).toEqual('localhost.localdomain');
|
|
|
|
expect(wrapper.find('.js-clipboard-btn').attributes('data-clipboard-text')).toEqual(
|
|
'localhost.localdomain',
|
|
);
|
|
});
|
|
});
|
|
|
|
describe('without ip address', () => {
|
|
it('renders an input text with a loading icon and an alert text', () => {
|
|
createApp({
|
|
applications: {
|
|
ingress: {
|
|
title: 'Ingress',
|
|
status: 'installed',
|
|
},
|
|
},
|
|
});
|
|
|
|
expect(wrapper.find('.js-ingress-ip-loading-icon').exists()).toBe(true);
|
|
expect(wrapper.find('.js-no-endpoint-message').exists()).toBe(true);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('before installing', () => {
|
|
it('does not render the IP address', () => {
|
|
createApp();
|
|
|
|
expect(wrapper.text()).not.toContain('Ingress IP Address');
|
|
expect(wrapper.find('.js-endpoint').exists()).toBe(false);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('Cert-Manager application', () => {
|
|
it('shows the correct description', () => {
|
|
createApp();
|
|
expect(findByTestId('certManagerDescription').element).toMatchSnapshot();
|
|
});
|
|
|
|
describe('when not installed', () => {
|
|
it('renders email & allows editing', () => {
|
|
createApp({
|
|
applications: {
|
|
cert_manager: {
|
|
title: 'Cert-Manager',
|
|
email: 'before@example.com',
|
|
status: 'installable',
|
|
},
|
|
},
|
|
});
|
|
|
|
expect(wrapper.find('.js-email').element.value).toEqual('before@example.com');
|
|
expect(wrapper.find('.js-email').attributes('readonly')).toBe(undefined);
|
|
});
|
|
});
|
|
|
|
describe('when installed', () => {
|
|
it('renders email in readonly', () => {
|
|
createApp({
|
|
applications: {
|
|
cert_manager: {
|
|
title: 'Cert-Manager',
|
|
email: 'after@example.com',
|
|
status: 'installed',
|
|
},
|
|
},
|
|
});
|
|
|
|
expect(wrapper.find('.js-email').element.value).toEqual('after@example.com');
|
|
expect(wrapper.find('.js-email').attributes('readonly')).toEqual('readonly');
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('Jupyter application', () => {
|
|
describe('with ingress installed with ip & jupyter installable', () => {
|
|
it('renders hostname active input', () => {
|
|
createApp({
|
|
applications: {
|
|
ingress: {
|
|
title: 'Ingress',
|
|
status: 'installed',
|
|
externalIp: '1.1.1.1',
|
|
},
|
|
},
|
|
});
|
|
|
|
expect(
|
|
wrapper.find('.js-cluster-application-row-jupyter .js-hostname').attributes('readonly'),
|
|
).toEqual(undefined);
|
|
});
|
|
});
|
|
|
|
describe('with ingress installed without external ip', () => {
|
|
it('does not render hostname input', () => {
|
|
createApp({
|
|
applications: {
|
|
ingress: { title: 'Ingress', status: 'installed' },
|
|
},
|
|
});
|
|
|
|
expect(wrapper.find('.js-cluster-application-row-jupyter .js-hostname').exists()).toBe(
|
|
false,
|
|
);
|
|
});
|
|
});
|
|
|
|
describe('with ingress & jupyter installed', () => {
|
|
it('renders readonly input', () => {
|
|
createApp({
|
|
applications: {
|
|
ingress: {
|
|
title: 'Ingress',
|
|
status: 'installed',
|
|
externalIp: '1.1.1.1',
|
|
},
|
|
jupyter: { title: 'JupyterHub', status: 'installed', hostname: '' },
|
|
},
|
|
});
|
|
|
|
expect(
|
|
wrapper.find('.js-cluster-application-row-jupyter .js-hostname').attributes('readonly'),
|
|
).toEqual('readonly');
|
|
});
|
|
});
|
|
|
|
describe('without ingress installed', () => {
|
|
beforeEach(() => {
|
|
createApp();
|
|
});
|
|
|
|
it('does not render input', () => {
|
|
expect(wrapper.find('.js-cluster-application-row-jupyter .js-hostname').exists()).toBe(
|
|
false,
|
|
);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('Prometheus application', () => {
|
|
it('shows the correct description', () => {
|
|
createApp();
|
|
expect(findByTestId('prometheusDescription').element).toMatchSnapshot();
|
|
});
|
|
});
|
|
|
|
describe('Knative application', () => {
|
|
const availableDomain = {
|
|
id: 4,
|
|
domain: 'newhostname.com',
|
|
};
|
|
const propsData = {
|
|
applications: {
|
|
knative: {
|
|
title: 'Knative',
|
|
hostname: 'example.com',
|
|
status: 'installed',
|
|
externalIp: '1.1.1.1',
|
|
installed: true,
|
|
availableDomains: [availableDomain],
|
|
pagesDomain: null,
|
|
},
|
|
},
|
|
};
|
|
let knativeDomainEditor;
|
|
|
|
beforeEach(() => {
|
|
createShallowApp(propsData);
|
|
jest.spyOn(eventHub, '$emit');
|
|
|
|
knativeDomainEditor = wrapper.find(KnativeDomainEditor);
|
|
});
|
|
|
|
it('shows the correct description', async () => {
|
|
createApp();
|
|
wrapper.setProps({
|
|
providerType: PROVIDER_TYPE.GCP,
|
|
preInstalledKnative: true,
|
|
});
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
expect(findByTestId('installedVia').element).toMatchSnapshot();
|
|
});
|
|
|
|
it('emits saveKnativeDomain event when knative domain editor emits save event', () => {
|
|
propsData.applications.knative.hostname = availableDomain.domain;
|
|
propsData.applications.knative.pagesDomain = availableDomain;
|
|
knativeDomainEditor.vm.$emit('save');
|
|
|
|
expect(eventHub.$emit).toHaveBeenCalledWith('saveKnativeDomain', {
|
|
id: 'knative',
|
|
params: {
|
|
hostname: availableDomain.domain,
|
|
pages_domain_id: availableDomain.id,
|
|
},
|
|
});
|
|
});
|
|
|
|
it('emits saveKnativeDomain event when knative domain editor emits save event with custom domain', () => {
|
|
const newHostName = 'someothernewhostname.com';
|
|
propsData.applications.knative.hostname = newHostName;
|
|
propsData.applications.knative.pagesDomain = null;
|
|
knativeDomainEditor.vm.$emit('save');
|
|
|
|
expect(eventHub.$emit).toHaveBeenCalledWith('saveKnativeDomain', {
|
|
id: 'knative',
|
|
params: {
|
|
hostname: newHostName,
|
|
pages_domain_id: undefined,
|
|
},
|
|
});
|
|
});
|
|
|
|
it('emits setKnativeHostname event when knative domain editor emits change event', () => {
|
|
wrapper.find(KnativeDomainEditor).vm.$emit('set', {
|
|
domain: availableDomain.domain,
|
|
domainId: availableDomain.id,
|
|
});
|
|
|
|
expect(eventHub.$emit).toHaveBeenCalledWith('setKnativeDomain', {
|
|
id: 'knative',
|
|
domain: availableDomain.domain,
|
|
domainId: availableDomain.id,
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('Crossplane application', () => {
|
|
const propsData = {
|
|
applications: {
|
|
crossplane: {
|
|
title: 'Crossplane',
|
|
stack: {
|
|
code: '',
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
beforeEach(() => createShallowApp(propsData));
|
|
|
|
it('renders the correct Component', () => {
|
|
const crossplane = wrapper.find(CrossplaneProviderStack);
|
|
expect(crossplane.exists()).toBe(true);
|
|
});
|
|
|
|
it('shows the correct description', () => {
|
|
createApp();
|
|
expect(findByTestId('crossplaneDescription').element).toMatchSnapshot();
|
|
});
|
|
});
|
|
|
|
describe('Elastic Stack application', () => {
|
|
describe('with elastic stack installable', () => {
|
|
it('renders the install button enabled', () => {
|
|
createApp();
|
|
|
|
expect(
|
|
wrapper
|
|
.find(
|
|
'.js-cluster-application-row-elastic_stack .js-cluster-application-install-button',
|
|
)
|
|
.attributes('disabled'),
|
|
).toBeUndefined();
|
|
});
|
|
});
|
|
|
|
describe('elastic stack installed', () => {
|
|
it('renders uninstall button', () => {
|
|
createApp({
|
|
applications: {
|
|
elastic_stack: { title: 'Elastic Stack', status: 'installed' },
|
|
},
|
|
});
|
|
|
|
expect(
|
|
wrapper
|
|
.find(
|
|
'.js-cluster-application-row-elastic_stack .js-cluster-application-install-button',
|
|
)
|
|
.attributes('disabled'),
|
|
).toEqual('disabled');
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('Fluentd application', () => {
|
|
beforeEach(() => createShallowApp());
|
|
|
|
it('renders the correct Component', () => {
|
|
expect(wrapper.find(FluentdOutputSettings).exists()).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe('Cilium application', () => {
|
|
it('shows the correct description', () => {
|
|
createApp({ props: { ciliumHelpPath: 'cilium-help-path' } });
|
|
expect(findByTestId('ciliumDescription').element).toMatchSnapshot();
|
|
});
|
|
});
|
|
});
|