2019-09-04 21:01:54 +05:30
|
|
|
import { shallowMount } from '@vue/test-utils';
|
2021-01-03 14:25:43 +05:30
|
|
|
import { GlDropdownItem, GlButton } from '@gitlab/ui';
|
2019-09-04 21:01:54 +05:30
|
|
|
import KnativeDomainEditor from '~/clusters/components/knative_domain_editor.vue';
|
|
|
|
import { APPLICATION_STATUS } from '~/clusters/constants';
|
|
|
|
|
|
|
|
const { UPDATING } = APPLICATION_STATUS;
|
|
|
|
|
|
|
|
describe('KnativeDomainEditor', () => {
|
|
|
|
let wrapper;
|
|
|
|
let knative;
|
|
|
|
|
|
|
|
const createComponent = (props = {}) => {
|
|
|
|
wrapper = shallowMount(KnativeDomainEditor, {
|
|
|
|
propsData: { ...props },
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
knative = {
|
|
|
|
title: 'Knative',
|
|
|
|
hostname: 'example.com',
|
|
|
|
installed: true,
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
wrapper.destroy();
|
2020-03-13 15:44:24 +05:30
|
|
|
wrapper = null;
|
2019-09-04 21:01:54 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
describe('knative has an assigned IP address', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
knative.externalIp = '1.1.1.1';
|
|
|
|
createComponent({ knative });
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders ip address with a clipboard button', () => {
|
|
|
|
expect(wrapper.find('.js-knative-endpoint').exists()).toBe(true);
|
|
|
|
expect(wrapper.find('.js-knative-endpoint').element.value).toEqual(knative.externalIp);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('displays ip address clipboard button', () => {
|
|
|
|
expect(wrapper.find('.js-knative-endpoint-clipboard-btn').attributes('text')).toEqual(
|
|
|
|
knative.externalIp,
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders domain & allows editing', () => {
|
|
|
|
const domainNameInput = wrapper.find('.js-knative-domainname');
|
|
|
|
|
|
|
|
expect(domainNameInput.element.value).toEqual(knative.hostname);
|
|
|
|
expect(domainNameInput.attributes('readonly')).toBeFalsy();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders an update/save Knative domain button', () => {
|
|
|
|
expect(wrapper.find('.js-knative-save-domain-button').exists()).toBe(true);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('knative without ip address', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
knative.externalIp = null;
|
|
|
|
createComponent({ knative });
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders an input text with a loading icon', () => {
|
|
|
|
expect(wrapper.find('.js-knative-ip-loading-icon').exists()).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders message indicating there is not IP address assigned', () => {
|
|
|
|
expect(wrapper.find('.js-no-knative-endpoint-message').exists()).toBe(true);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('clicking save changes button', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
createComponent({ knative });
|
|
|
|
});
|
|
|
|
|
|
|
|
it('triggers save event and pass current knative hostname', () => {
|
2020-11-24 15:15:51 +05:30
|
|
|
wrapper.find(GlButton).vm.$emit('click');
|
2020-03-13 15:44:24 +05:30
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
2020-04-22 19:07:51 +05:30
|
|
|
expect(wrapper.emitted('save').length).toEqual(1);
|
2020-03-13 15:44:24 +05:30
|
|
|
});
|
2019-09-04 21:01:54 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when knative domain name was saved successfully', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
createComponent({ knative });
|
|
|
|
});
|
|
|
|
|
|
|
|
it('displays toast indicating a successful update', () => {
|
|
|
|
wrapper.vm.$toast = { show: jest.fn() };
|
2020-05-24 23:13:21 +05:30
|
|
|
wrapper.setProps({ knative: { updateSuccessful: true, ...knative } });
|
2019-09-04 21:01:54 +05:30
|
|
|
|
|
|
|
return wrapper.vm.$nextTick(() => {
|
|
|
|
expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(
|
|
|
|
'Knative domain name was updated successfully.',
|
|
|
|
);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when knative domain name input changes', () => {
|
|
|
|
it('emits "set" event with updated domain name', () => {
|
2020-04-22 19:07:51 +05:30
|
|
|
const newDomain = {
|
|
|
|
id: 4,
|
|
|
|
domain: 'newhostname.com',
|
|
|
|
};
|
|
|
|
|
|
|
|
createComponent({ knative: { ...knative, availableDomains: [newDomain] } });
|
|
|
|
jest.spyOn(wrapper.vm, 'selectDomain');
|
|
|
|
|
2021-01-03 14:25:43 +05:30
|
|
|
wrapper.find(GlDropdownItem).vm.$emit('click');
|
2020-03-13 15:44:24 +05:30
|
|
|
|
2020-04-22 19:07:51 +05:30
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
|
|
|
expect(wrapper.vm.selectDomain).toHaveBeenCalledWith(newDomain);
|
|
|
|
expect(wrapper.emitted('set')[0]).toEqual([
|
|
|
|
{
|
|
|
|
domain: newDomain.domain,
|
|
|
|
domainId: newDomain.id,
|
|
|
|
},
|
|
|
|
]);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('emits "set" event with updated custom domain name', () => {
|
2019-09-04 21:01:54 +05:30
|
|
|
const newHostname = 'newhostname.com';
|
|
|
|
|
2020-04-22 19:07:51 +05:30
|
|
|
createComponent({ knative });
|
|
|
|
jest.spyOn(wrapper.vm, 'selectCustomDomain');
|
|
|
|
|
2019-09-04 21:01:54 +05:30
|
|
|
wrapper.setData({ knativeHostname: newHostname });
|
|
|
|
|
2020-03-13 15:44:24 +05:30
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
2020-04-22 19:07:51 +05:30
|
|
|
expect(wrapper.vm.selectCustomDomain).toHaveBeenCalledWith(newHostname);
|
|
|
|
expect(wrapper.emitted('set')[0]).toEqual([
|
|
|
|
{
|
|
|
|
domain: newHostname,
|
|
|
|
domainId: null,
|
|
|
|
},
|
|
|
|
]);
|
2020-03-13 15:44:24 +05:30
|
|
|
});
|
2019-09-04 21:01:54 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when updating knative domain name failed', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
createComponent({ knative });
|
|
|
|
});
|
|
|
|
|
|
|
|
it('displays an error banner indicating the operation failure', () => {
|
|
|
|
wrapper.setProps({ knative: { updateFailed: true, ...knative } });
|
|
|
|
|
2020-03-13 15:44:24 +05:30
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
|
|
|
expect(wrapper.find('.js-cluster-knative-domain-name-failure-message').exists()).toBe(true);
|
|
|
|
});
|
2019-09-04 21:01:54 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe(`when knative status is ${UPDATING}`, () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
createComponent({ knative: { status: UPDATING, ...knative } });
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders loading spinner in save button', () => {
|
2020-11-24 15:15:51 +05:30
|
|
|
expect(wrapper.find(GlButton).props('loading')).toBe(true);
|
2019-09-04 21:01:54 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('renders disabled save button', () => {
|
2020-11-24 15:15:51 +05:30
|
|
|
expect(wrapper.find(GlButton).props('disabled')).toBe(true);
|
2019-09-04 21:01:54 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('renders save button with "Saving" label', () => {
|
2020-11-24 15:15:51 +05:30
|
|
|
expect(wrapper.find(GlButton).text()).toBe('Saving');
|
2019-09-04 21:01:54 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|