2021-10-08 18:13:02 +00:00
|
|
|
import { GlAlert, GlButton, GlFormInputGroup } from '@gitlab/ui';
|
2021-11-19 12:12:41 +00:00
|
|
|
import { createLocalVue } from '@vue/test-utils';
|
2021-10-08 18:13:02 +00:00
|
|
|
import VueApollo from 'vue-apollo';
|
2021-11-19 12:12:41 +00:00
|
|
|
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
|
2021-10-08 18:13:02 +00:00
|
|
|
import AvailableAgentsDropdown from '~/clusters_list/components/available_agents_dropdown.vue';
|
|
|
|
import InstallAgentModal from '~/clusters_list/components/install_agent_modal.vue';
|
2021-11-19 12:12:41 +00:00
|
|
|
import { I18N_AGENT_MODAL, MAX_LIST_COUNT } from '~/clusters_list/constants';
|
2021-11-15 15:10:57 +00:00
|
|
|
import getAgentsQuery from '~/clusters_list/graphql/queries/get_agents.query.graphql';
|
2021-11-19 12:12:41 +00:00
|
|
|
import getAgentConfigurations from '~/clusters_list/graphql/queries/agent_configurations.query.graphql';
|
2021-10-08 18:13:02 +00:00
|
|
|
import createAgentMutation from '~/clusters_list/graphql/mutations/create_agent.mutation.graphql';
|
|
|
|
import createAgentTokenMutation from '~/clusters_list/graphql/mutations/create_agent_token.mutation.graphql';
|
|
|
|
import createMockApollo from 'helpers/mock_apollo_helper';
|
|
|
|
import waitForPromises from 'helpers/wait_for_promises';
|
|
|
|
import CodeBlock from '~/vue_shared/components/code_block.vue';
|
|
|
|
import {
|
|
|
|
createAgentResponse,
|
|
|
|
createAgentErrorResponse,
|
|
|
|
createAgentTokenResponse,
|
|
|
|
createAgentTokenErrorResponse,
|
2021-11-15 15:10:57 +00:00
|
|
|
getAgentResponse,
|
2021-10-08 18:13:02 +00:00
|
|
|
} from '../mocks/apollo';
|
|
|
|
import ModalStub from '../stubs';
|
|
|
|
|
|
|
|
const localVue = createLocalVue();
|
|
|
|
localVue.use(VueApollo);
|
|
|
|
|
2021-11-15 15:10:57 +00:00
|
|
|
const projectPath = 'path/to/project';
|
2021-11-19 12:12:41 +00:00
|
|
|
const kasAddress = 'kas.example.com';
|
|
|
|
const kasEnabled = true;
|
|
|
|
const emptyStateImage = 'path/to/image';
|
2021-11-15 15:10:57 +00:00
|
|
|
const defaultBranchName = 'default';
|
2021-11-15 18:12:21 +00:00
|
|
|
const maxAgents = MAX_LIST_COUNT;
|
2021-11-15 15:10:57 +00:00
|
|
|
|
2021-10-08 18:13:02 +00:00
|
|
|
describe('InstallAgentModal', () => {
|
|
|
|
let wrapper;
|
|
|
|
let apolloProvider;
|
|
|
|
|
2021-11-19 12:12:41 +00:00
|
|
|
const configurations = [{ agentName: 'agent-name' }];
|
|
|
|
const apolloQueryResponse = {
|
|
|
|
data: {
|
|
|
|
project: {
|
|
|
|
clusterAgents: { nodes: [] },
|
|
|
|
agentConfigurations: { nodes: configurations },
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
2021-10-08 18:13:02 +00:00
|
|
|
const findModal = () => wrapper.findComponent(ModalStub);
|
|
|
|
const findAgentDropdown = () => findModal().findComponent(AvailableAgentsDropdown);
|
|
|
|
const findAlert = () => findModal().findComponent(GlAlert);
|
|
|
|
const findButtonByVariant = (variant) =>
|
|
|
|
findModal()
|
|
|
|
.findAll(GlButton)
|
|
|
|
.wrappers.find((button) => button.props('variant') === variant);
|
|
|
|
const findActionButton = () => findButtonByVariant('confirm');
|
|
|
|
const findCancelButton = () => findButtonByVariant('default');
|
2021-11-19 12:12:41 +00:00
|
|
|
const findSecondaryButton = () => wrapper.findByTestId('agent-secondary-button');
|
|
|
|
const findImage = () => wrapper.findByRole('img', { alt: I18N_AGENT_MODAL.install.altText });
|
2021-10-08 18:13:02 +00:00
|
|
|
|
|
|
|
const expectDisabledAttribute = (element, disabled) => {
|
|
|
|
if (disabled) {
|
|
|
|
expect(element.attributes('disabled')).toBe('true');
|
|
|
|
} else {
|
|
|
|
expect(element.attributes('disabled')).toBeUndefined();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const createWrapper = () => {
|
|
|
|
const provide = {
|
2021-11-15 15:10:57 +00:00
|
|
|
projectPath,
|
2021-11-19 12:12:41 +00:00
|
|
|
kasAddress,
|
|
|
|
kasEnabled,
|
|
|
|
emptyStateImage,
|
2021-10-08 18:13:02 +00:00
|
|
|
};
|
|
|
|
|
2021-11-15 15:10:57 +00:00
|
|
|
const propsData = {
|
|
|
|
defaultBranchName,
|
2021-11-15 18:12:21 +00:00
|
|
|
maxAgents,
|
2021-11-15 15:10:57 +00:00
|
|
|
};
|
|
|
|
|
2021-11-19 12:12:41 +00:00
|
|
|
wrapper = shallowMountExtended(InstallAgentModal, {
|
2021-10-08 18:13:02 +00:00
|
|
|
attachTo: document.body,
|
|
|
|
stubs: {
|
|
|
|
GlModal: ModalStub,
|
|
|
|
},
|
|
|
|
localVue,
|
|
|
|
apolloProvider,
|
|
|
|
provide,
|
2021-11-15 15:10:57 +00:00
|
|
|
propsData,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
const writeQuery = () => {
|
|
|
|
apolloProvider.clients.defaultClient.cache.writeQuery({
|
|
|
|
query: getAgentsQuery,
|
|
|
|
variables: {
|
|
|
|
projectPath,
|
|
|
|
defaultBranchName,
|
|
|
|
first: MAX_LIST_COUNT,
|
|
|
|
last: null,
|
|
|
|
},
|
|
|
|
data: getAgentResponse.data,
|
2021-10-08 18:13:02 +00:00
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2021-11-19 12:12:41 +00:00
|
|
|
const mockSelectedAgentResponse = async () => {
|
2021-10-08 18:13:02 +00:00
|
|
|
createWrapper();
|
2021-11-15 15:10:57 +00:00
|
|
|
writeQuery();
|
2021-10-08 18:13:02 +00:00
|
|
|
|
2021-11-19 12:12:41 +00:00
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
|
2021-10-08 18:13:02 +00:00
|
|
|
wrapper.vm.setAgentName('agent-name');
|
|
|
|
findActionButton().vm.$emit('click');
|
|
|
|
|
|
|
|
return waitForPromises();
|
|
|
|
};
|
|
|
|
|
|
|
|
beforeEach(() => {
|
2021-11-19 12:12:41 +00:00
|
|
|
apolloProvider = createMockApollo([
|
|
|
|
[getAgentConfigurations, jest.fn().mockResolvedValue(apolloQueryResponse)],
|
|
|
|
]);
|
2021-10-08 18:13:02 +00:00
|
|
|
createWrapper();
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
wrapper.destroy();
|
|
|
|
apolloProvider = null;
|
|
|
|
});
|
|
|
|
|
2021-11-19 12:12:41 +00:00
|
|
|
describe('when agent configurations are present', () => {
|
|
|
|
const i18n = I18N_AGENT_MODAL.register;
|
2021-10-08 18:13:02 +00:00
|
|
|
|
2021-11-19 12:12:41 +00:00
|
|
|
describe('initial state', () => {
|
|
|
|
it('renders the dropdown for available agents', () => {
|
|
|
|
expect(findAgentDropdown().isVisible()).toBe(true);
|
|
|
|
expect(findModal().text()).not.toContain(i18n.basicInstallTitle);
|
|
|
|
expect(findModal().findComponent(GlFormInputGroup).exists()).toBe(false);
|
|
|
|
expect(findModal().findComponent(GlAlert).exists()).toBe(false);
|
|
|
|
expect(findModal().findComponent(CodeBlock).exists()).toBe(false);
|
|
|
|
});
|
2021-10-08 18:13:02 +00:00
|
|
|
|
2021-11-19 12:12:41 +00:00
|
|
|
it('renders a cancel button', () => {
|
|
|
|
expect(findCancelButton().isVisible()).toBe(true);
|
|
|
|
expectDisabledAttribute(findCancelButton(), false);
|
|
|
|
});
|
2021-10-08 18:13:02 +00:00
|
|
|
|
2021-11-19 12:12:41 +00:00
|
|
|
it('renders a disabled next button', () => {
|
|
|
|
expect(findActionButton().isVisible()).toBe(true);
|
|
|
|
expect(findActionButton().text()).toBe(i18n.registerAgentButton);
|
|
|
|
expectDisabledAttribute(findActionButton(), true);
|
|
|
|
});
|
2021-10-08 18:13:02 +00:00
|
|
|
});
|
|
|
|
|
2021-11-19 12:12:41 +00:00
|
|
|
describe('an agent is selected', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
findAgentDropdown().vm.$emit('agentSelected');
|
|
|
|
});
|
2021-10-08 18:13:02 +00:00
|
|
|
|
2021-11-19 12:12:41 +00:00
|
|
|
it('enables the next button', () => {
|
|
|
|
expect(findActionButton().isVisible()).toBe(true);
|
|
|
|
expectDisabledAttribute(findActionButton(), false);
|
|
|
|
});
|
|
|
|
});
|
2021-10-08 18:13:02 +00:00
|
|
|
|
2021-11-19 12:12:41 +00:00
|
|
|
describe('registering an agent', () => {
|
|
|
|
const createAgentHandler = jest.fn().mockResolvedValue(createAgentResponse);
|
|
|
|
const createAgentTokenHandler = jest.fn().mockResolvedValue(createAgentTokenResponse);
|
2021-10-08 18:13:02 +00:00
|
|
|
|
2021-11-19 12:12:41 +00:00
|
|
|
beforeEach(() => {
|
|
|
|
apolloProvider = createMockApollo([
|
|
|
|
[getAgentConfigurations, jest.fn().mockResolvedValue(apolloQueryResponse)],
|
|
|
|
[createAgentMutation, createAgentHandler],
|
|
|
|
[createAgentTokenMutation, createAgentTokenHandler],
|
|
|
|
]);
|
2021-10-08 18:13:02 +00:00
|
|
|
|
2021-11-19 12:12:41 +00:00
|
|
|
return mockSelectedAgentResponse();
|
2021-10-08 18:13:02 +00:00
|
|
|
});
|
|
|
|
|
2021-11-19 12:12:41 +00:00
|
|
|
it('creates an agent and token', () => {
|
|
|
|
expect(createAgentHandler).toHaveBeenCalledWith({
|
|
|
|
input: { name: 'agent-name', projectPath },
|
|
|
|
});
|
2021-10-08 18:13:02 +00:00
|
|
|
|
2021-11-19 12:12:41 +00:00
|
|
|
expect(createAgentTokenHandler).toHaveBeenCalledWith({
|
|
|
|
input: { clusterAgentId: 'agent-id', name: 'agent-name' },
|
|
|
|
});
|
|
|
|
});
|
2021-10-08 18:13:02 +00:00
|
|
|
|
2021-11-19 12:12:41 +00:00
|
|
|
it('renders a close button', () => {
|
|
|
|
expect(findActionButton().isVisible()).toBe(true);
|
|
|
|
expect(findActionButton().text()).toBe(i18n.close);
|
|
|
|
expectDisabledAttribute(findActionButton(), false);
|
|
|
|
});
|
2021-10-08 18:13:02 +00:00
|
|
|
|
2021-11-19 12:12:41 +00:00
|
|
|
it('shows agent instructions', () => {
|
|
|
|
const modalText = findModal().text();
|
|
|
|
expect(modalText).toContain(i18n.basicInstallTitle);
|
|
|
|
expect(modalText).toContain(i18n.basicInstallBody);
|
2021-10-08 18:13:02 +00:00
|
|
|
|
2021-11-19 12:12:41 +00:00
|
|
|
const token = findModal().findComponent(GlFormInputGroup);
|
|
|
|
expect(token.props('value')).toBe('mock-agent-token');
|
2021-10-08 18:13:02 +00:00
|
|
|
|
2021-11-19 12:12:41 +00:00
|
|
|
const alert = findModal().findComponent(GlAlert);
|
|
|
|
expect(alert.props('title')).toBe(i18n.tokenSingleUseWarningTitle);
|
2021-10-08 18:13:02 +00:00
|
|
|
|
2021-11-19 12:12:41 +00:00
|
|
|
const code = findModal().findComponent(CodeBlock).props('code');
|
|
|
|
expect(code).toContain('--agent-token=mock-agent-token');
|
|
|
|
expect(code).toContain('--kas-address=kas.example.com');
|
|
|
|
});
|
2021-10-08 18:13:02 +00:00
|
|
|
|
2021-11-19 12:12:41 +00:00
|
|
|
describe('error creating agent', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
apolloProvider = createMockApollo([
|
|
|
|
[getAgentConfigurations, jest.fn().mockResolvedValue(apolloQueryResponse)],
|
|
|
|
[createAgentMutation, jest.fn().mockResolvedValue(createAgentErrorResponse)],
|
|
|
|
]);
|
|
|
|
|
|
|
|
return mockSelectedAgentResponse();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('displays the error message', () => {
|
|
|
|
expect(findAlert().text()).toBe(
|
|
|
|
createAgentErrorResponse.data.createClusterAgent.errors[0],
|
|
|
|
);
|
|
|
|
});
|
2021-10-08 18:13:02 +00:00
|
|
|
});
|
|
|
|
|
2021-11-19 12:12:41 +00:00
|
|
|
describe('error creating token', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
apolloProvider = createMockApollo([
|
|
|
|
[getAgentConfigurations, jest.fn().mockResolvedValue(apolloQueryResponse)],
|
|
|
|
[createAgentMutation, jest.fn().mockResolvedValue(createAgentResponse)],
|
|
|
|
[createAgentTokenMutation, jest.fn().mockResolvedValue(createAgentTokenErrorResponse)],
|
|
|
|
]);
|
|
|
|
|
|
|
|
return mockSelectedAgentResponse();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('displays the error message', async () => {
|
|
|
|
expect(findAlert().text()).toBe(
|
|
|
|
createAgentTokenErrorResponse.data.clusterAgentTokenCreate.errors[0],
|
|
|
|
);
|
|
|
|
});
|
2021-10-08 18:13:02 +00:00
|
|
|
});
|
|
|
|
});
|
2021-11-19 12:12:41 +00:00
|
|
|
});
|
2021-10-08 18:13:02 +00:00
|
|
|
|
2021-11-19 12:12:41 +00:00
|
|
|
describe('when there are no agent configurations present', () => {
|
|
|
|
const i18n = I18N_AGENT_MODAL.install;
|
|
|
|
const apolloQueryEmptyResponse = {
|
|
|
|
data: {
|
|
|
|
project: {
|
|
|
|
clusterAgents: { nodes: [] },
|
|
|
|
agentConfigurations: { nodes: [] },
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
2021-10-08 18:13:02 +00:00
|
|
|
|
2021-11-19 12:12:41 +00:00
|
|
|
beforeEach(() => {
|
|
|
|
apolloProvider = createMockApollo([
|
|
|
|
[getAgentConfigurations, jest.fn().mockResolvedValue(apolloQueryEmptyResponse)],
|
|
|
|
]);
|
|
|
|
createWrapper();
|
|
|
|
});
|
2021-10-08 18:13:02 +00:00
|
|
|
|
2021-11-19 12:12:41 +00:00
|
|
|
it('renders empty state image', () => {
|
|
|
|
expect(findImage().attributes('src')).toBe(emptyStateImage);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders a secondary button', () => {
|
|
|
|
expect(findSecondaryButton().isVisible()).toBe(true);
|
|
|
|
expect(findSecondaryButton().text()).toBe(i18n.secondaryButton);
|
2021-10-08 18:13:02 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|