summaryrefslogtreecommitdiff
path: root/spec/frontend
diff options
context:
space:
mode:
authorGitLab Bot <gitlab-bot@gitlab.com>2022-07-05 10:20:03 +0000
committerGitLab Bot <gitlab-bot@gitlab.com>2022-07-05 10:20:03 +0000
commitd2612b42b9da6638d70b9d7144f6d427070d042d (patch)
treeed7de87d4b112cae8a45ba186d717ca9768c7d4e /spec/frontend
parentd80373b353005e70f44eca8a3bc4a4c5cfbf0e9e (diff)
downloadgitlab-ce-d2612b42b9da6638d70b9d7144f6d427070d042d.tar.gz
Add latest changes from gitlab-org/gitlab@15-1-stable-ee
Diffstat (limited to 'spec/frontend')
-rw-r--r--spec/frontend/clusters/agents/components/create_token_button_spec.js255
-rw-r--r--spec/frontend/clusters/agents/components/create_token_modal_spec.js223
-rw-r--r--spec/frontend/clusters/agents/components/token_table_spec.js6
3 files changed, 259 insertions, 225 deletions
diff --git a/spec/frontend/clusters/agents/components/create_token_button_spec.js b/spec/frontend/clusters/agents/components/create_token_button_spec.js
index fb1a3aa2963..73856b74a8d 100644
--- a/spec/frontend/clusters/agents/components/create_token_button_spec.js
+++ b/spec/frontend/clusters/agents/components/create_token_button_spec.js
@@ -1,262 +1,71 @@
-import { GlButton, GlTooltip, GlModal, GlFormInput, GlFormTextarea, GlAlert } from '@gitlab/ui';
-import Vue from 'vue';
-import VueApollo from 'vue-apollo';
-import createMockApollo from 'helpers/mock_apollo_helper';
-import waitForPromises from 'helpers/wait_for_promises';
+import { GlButton, GlTooltip } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import { mockTracking } from 'helpers/tracking_helper';
-import {
- EVENT_LABEL_MODAL,
- EVENT_ACTIONS_OPEN,
- TOKEN_NAME_LIMIT,
- TOKEN_STATUS_ACTIVE,
- MAX_LIST_COUNT,
- CREATE_TOKEN_MODAL,
-} from '~/clusters/agents/constants';
-import createNewAgentToken from '~/clusters/agents/graphql/mutations/create_new_agent_token.mutation.graphql';
-import getClusterAgentQuery from '~/clusters/agents/graphql/queries/get_cluster_agent.query.graphql';
-import AgentToken from '~/clusters_list/components/agent_token.vue';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import CreateTokenButton from '~/clusters/agents/components/create_token_button.vue';
-import {
- clusterAgentToken,
- getTokenResponse,
- createAgentTokenErrorResponse,
-} from '../../mock_data';
-
-Vue.use(VueApollo);
+import { CREATE_TOKEN_MODAL } from '~/clusters/agents/constants';
describe('CreateTokenButton', () => {
let wrapper;
- let apolloProvider;
- let trackingSpy;
- let createResponse;
-
- const clusterAgentId = 'cluster-agent-id';
- const cursor = {
- first: MAX_LIST_COUNT,
- last: null,
- };
- const agentName = 'cluster-agent';
- const projectPath = 'path/to/project';
const defaultProvide = {
- agentName,
- projectPath,
canAdminCluster: true,
};
- const propsData = {
- clusterAgentId,
- cursor,
- };
- const findModal = () => wrapper.findComponent(GlModal);
- const findBtn = () => wrapper.findComponent(GlButton);
- const findInput = () => wrapper.findComponent(GlFormInput);
- const findTextarea = () => wrapper.findComponent(GlFormTextarea);
- const findAlert = () => wrapper.findComponent(GlAlert);
+ const findButton = () => wrapper.findComponent(GlButton);
const findTooltip = () => wrapper.findComponent(GlTooltip);
- const findAgentInstructions = () => findModal().findComponent(AgentToken);
- const findButtonByVariant = (variant) =>
- findModal()
- .findAll(GlButton)
- .wrappers.find((button) => button.props('variant') === variant);
- const findActionButton = () => findButtonByVariant('confirm');
- const findCancelButton = () => wrapper.findByTestId('agent-token-close-button');
-
- const expectDisabledAttribute = (element, disabled) => {
- if (disabled) {
- expect(element.attributes('disabled')).toBe('true');
- } else {
- expect(element.attributes('disabled')).toBeUndefined();
- }
- };
-
- const createMockApolloProvider = ({ mutationResponse }) => {
- createResponse = jest.fn().mockResolvedValue(mutationResponse);
-
- return createMockApollo([[createNewAgentToken, createResponse]]);
- };
-
- const writeQuery = () => {
- apolloProvider.clients.defaultClient.cache.writeQuery({
- query: getClusterAgentQuery,
- data: getTokenResponse.data,
- variables: {
- agentName,
- projectPath,
- tokenStatus: TOKEN_STATUS_ACTIVE,
- ...cursor,
- },
- });
- };
- const createWrapper = async ({ provideData = {} } = {}) => {
+ const createWrapper = ({ provideData = {} } = {}) => {
wrapper = shallowMountExtended(CreateTokenButton, {
- apolloProvider,
provide: {
...defaultProvide,
...provideData,
},
- propsData,
+ directives: {
+ GlModalDirective: createMockDirective(),
+ },
stubs: {
- GlModal,
GlTooltip,
},
});
- wrapper.vm.$refs.modal.hide = jest.fn();
-
- trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
};
- const mockCreatedResponse = (mutationResponse) => {
- apolloProvider = createMockApolloProvider({ mutationResponse });
- writeQuery();
-
- createWrapper();
-
- findInput().vm.$emit('input', 'new-token');
- findTextarea().vm.$emit('input', 'new-token-description');
- findActionButton().vm.$emit('click');
-
- return waitForPromises();
- };
-
- beforeEach(() => {
- createWrapper();
- });
-
afterEach(() => {
wrapper.destroy();
- apolloProvider = null;
- createResponse = null;
});
- describe('create agent token action', () => {
- it('displays create agent token button', () => {
- expect(findBtn().text()).toBe('Create token');
+ describe('when user can create token', () => {
+ beforeEach(() => {
+ createWrapper();
});
- describe('when user cannot create token', () => {
- beforeEach(() => {
- createWrapper({ provideData: { canAdminCluster: false } });
- });
-
- it('disabled the button', () => {
- expect(findBtn().attributes('disabled')).toBe('true');
- });
-
- it('shows a disabled tooltip', () => {
- expect(findTooltip().attributes('title')).toBe(
- 'Requires a Maintainer or greater role to perform these actions',
- );
- });
+ it('displays create agent token button', () => {
+ expect(findButton().text()).toBe('Create token');
});
- describe('when user can create a token and clicks the button', () => {
- beforeEach(() => {
- findBtn().vm.$emit('click');
- });
-
- it('displays a token creation modal', () => {
- expect(findModal().isVisible()).toBe(true);
- });
-
- describe('initial state', () => {
- it('renders an input for the token name', () => {
- expect(findInput().exists()).toBe(true);
- expectDisabledAttribute(findInput(), false);
- expect(findInput().attributes('max-length')).toBe(TOKEN_NAME_LIMIT.toString());
- });
-
- it('renders a textarea for the token description', () => {
- expect(findTextarea().exists()).toBe(true);
- expectDisabledAttribute(findTextarea(), false);
- });
-
- it('renders a cancel button', () => {
- expect(findCancelButton().isVisible()).toBe(true);
- expectDisabledAttribute(findCancelButton(), false);
- });
-
- it('renders a disabled next button', () => {
- expect(findActionButton().text()).toBe('Create token');
- expectDisabledAttribute(findActionButton(), true);
- });
-
- it('sends tracking event for modal shown', () => {
- findModal().vm.$emit('show');
- expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTIONS_OPEN, {
- label: EVENT_LABEL_MODAL,
- });
- });
- });
-
- describe('when user inputs the token name', () => {
- beforeEach(() => {
- expectDisabledAttribute(findActionButton(), true);
- findInput().vm.$emit('input', 'new-token');
- });
-
- it('enables the next button', () => {
- expectDisabledAttribute(findActionButton(), false);
- });
- });
-
- describe('when user clicks the create-token button', () => {
- beforeEach(async () => {
- const loadingResponse = new Promise(() => {});
- await mockCreatedResponse(loadingResponse);
-
- findInput().vm.$emit('input', 'new-token');
- findActionButton().vm.$emit('click');
- });
-
- it('disables the create-token button', () => {
- expectDisabledAttribute(findActionButton(), true);
- });
-
- it('hides the cancel button', () => {
- expect(findCancelButton().exists()).toBe(false);
- });
- });
-
- describe('creating a new token', () => {
- beforeEach(async () => {
- await mockCreatedResponse(clusterAgentToken);
- });
+ it('displays create agent token button as not disabled', () => {
+ expect(findButton().attributes('disabled')).toBeUndefined();
+ });
- it('creates a token', () => {
- expect(createResponse).toHaveBeenCalledWith({
- input: { clusterAgentId, name: 'new-token', description: 'new-token-description' },
- });
- });
+ it('triggers the modal', () => {
+ const binding = getBinding(findButton().element, 'gl-modal-directive');
- it('shows agent instructions', () => {
- expect(findAgentInstructions().props()).toMatchObject({
- agentName,
- agentToken: 'token-secret',
- modalId: CREATE_TOKEN_MODAL,
- });
- });
+ expect(binding.value).toBe(CREATE_TOKEN_MODAL);
+ });
+ });
- it('renders a close button', () => {
- expect(findActionButton().isVisible()).toBe(true);
- expect(findActionButton().text()).toBe('Close');
- expectDisabledAttribute(findActionButton(), false);
- });
- });
+ describe('when user cannot create token', () => {
+ beforeEach(() => {
+ createWrapper({ provideData: { canAdminCluster: false } });
+ });
- describe('error creating a new token', () => {
- beforeEach(async () => {
- await mockCreatedResponse(createAgentTokenErrorResponse);
- });
+ it('disabled the button', () => {
+ expect(findButton().attributes('disabled')).toBe('true');
+ });
- it('displays the error message', async () => {
- expect(findAlert().text()).toBe(
- createAgentTokenErrorResponse.data.clusterAgentTokenCreate.errors[0],
- );
- });
- });
+ it('shows a disabled tooltip', () => {
+ expect(findTooltip().attributes('title')).toBe(
+ 'Requires a Maintainer or greater role to perform these actions',
+ );
});
});
});
diff --git a/spec/frontend/clusters/agents/components/create_token_modal_spec.js b/spec/frontend/clusters/agents/components/create_token_modal_spec.js
new file mode 100644
index 00000000000..ad48afe10b6
--- /dev/null
+++ b/spec/frontend/clusters/agents/components/create_token_modal_spec.js
@@ -0,0 +1,223 @@
+import { GlButton, GlModal, GlFormInput, GlFormTextarea, GlAlert } from '@gitlab/ui';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { mockTracking } from 'helpers/tracking_helper';
+import {
+ EVENT_LABEL_MODAL,
+ EVENT_ACTIONS_OPEN,
+ TOKEN_NAME_LIMIT,
+ TOKEN_STATUS_ACTIVE,
+ MAX_LIST_COUNT,
+ CREATE_TOKEN_MODAL,
+} from '~/clusters/agents/constants';
+import createNewAgentToken from '~/clusters/agents/graphql/mutations/create_new_agent_token.mutation.graphql';
+import getClusterAgentQuery from '~/clusters/agents/graphql/queries/get_cluster_agent.query.graphql';
+import AgentToken from '~/clusters_list/components/agent_token.vue';
+import CreateTokenModal from '~/clusters/agents/components/create_token_modal.vue';
+import {
+ clusterAgentToken,
+ getTokenResponse,
+ createAgentTokenErrorResponse,
+} from '../../mock_data';
+
+Vue.use(VueApollo);
+
+describe('CreateTokenModal', () => {
+ let wrapper;
+ let apolloProvider;
+ let trackingSpy;
+ let createResponse;
+
+ const clusterAgentId = 'cluster-agent-id';
+ const cursor = {
+ first: MAX_LIST_COUNT,
+ last: null,
+ };
+ const agentName = 'cluster-agent';
+ const projectPath = 'path/to/project';
+
+ const provide = {
+ agentName,
+ projectPath,
+ };
+ const propsData = {
+ clusterAgentId,
+ cursor,
+ };
+
+ const findModal = () => wrapper.findComponent(GlModal);
+ const findInput = () => wrapper.findComponent(GlFormInput);
+ const findTextarea = () => wrapper.findComponent(GlFormTextarea);
+ const findAlert = () => wrapper.findComponent(GlAlert);
+ const findAgentInstructions = () => findModal().findComponent(AgentToken);
+ const findButtonByVariant = (variant) =>
+ findModal()
+ .findAll(GlButton)
+ .wrappers.find((button) => button.props('variant') === variant);
+ const findActionButton = () => findButtonByVariant('confirm');
+ const findCancelButton = () => wrapper.findByTestId('agent-token-close-button');
+
+ const expectDisabledAttribute = (element, disabled) => {
+ if (disabled) {
+ expect(element.attributes('disabled')).toBe('true');
+ } else {
+ expect(element.attributes('disabled')).toBeUndefined();
+ }
+ };
+
+ const createMockApolloProvider = ({ mutationResponse }) => {
+ createResponse = jest.fn().mockResolvedValue(mutationResponse);
+
+ return createMockApollo([[createNewAgentToken, createResponse]]);
+ };
+
+ const writeQuery = () => {
+ apolloProvider.clients.defaultClient.cache.writeQuery({
+ query: getClusterAgentQuery,
+ data: getTokenResponse.data,
+ variables: {
+ agentName,
+ projectPath,
+ tokenStatus: TOKEN_STATUS_ACTIVE,
+ ...cursor,
+ },
+ });
+ };
+
+ const createWrapper = () => {
+ wrapper = shallowMountExtended(CreateTokenModal, {
+ apolloProvider,
+ provide,
+ propsData,
+ stubs: {
+ GlModal,
+ },
+ });
+ wrapper.vm.$refs.modal.hide = jest.fn();
+
+ trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+ };
+
+ const mockCreatedResponse = (mutationResponse) => {
+ apolloProvider = createMockApolloProvider({ mutationResponse });
+ writeQuery();
+
+ createWrapper();
+
+ findInput().vm.$emit('input', 'new-token');
+ findTextarea().vm.$emit('input', 'new-token-description');
+ findActionButton().vm.$emit('click');
+
+ return waitForPromises();
+ };
+
+ beforeEach(() => {
+ createWrapper();
+ });
+
+ afterEach(() => {
+ wrapper.destroy();
+ apolloProvider = null;
+ createResponse = null;
+ });
+
+ describe('initial state', () => {
+ it('renders an input for the token name', () => {
+ expect(findInput().exists()).toBe(true);
+ expectDisabledAttribute(findInput(), false);
+ expect(findInput().attributes('max-length')).toBe(TOKEN_NAME_LIMIT.toString());
+ });
+
+ it('renders a textarea for the token description', () => {
+ expect(findTextarea().exists()).toBe(true);
+ expectDisabledAttribute(findTextarea(), false);
+ });
+
+ it('renders a cancel button', () => {
+ expect(findCancelButton().isVisible()).toBe(true);
+ expectDisabledAttribute(findCancelButton(), false);
+ });
+
+ it('renders a disabled next button', () => {
+ expect(findActionButton().text()).toBe('Create token');
+ expectDisabledAttribute(findActionButton(), true);
+ });
+
+ it('sends tracking event for modal shown', () => {
+ findModal().vm.$emit('show');
+ expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTIONS_OPEN, {
+ label: EVENT_LABEL_MODAL,
+ });
+ });
+ });
+
+ describe('when user inputs the token name', () => {
+ beforeEach(() => {
+ expectDisabledAttribute(findActionButton(), true);
+ findInput().vm.$emit('input', 'new-token');
+ });
+
+ it('enables the next button', () => {
+ expectDisabledAttribute(findActionButton(), false);
+ });
+ });
+
+ describe('when user clicks the create-token button', () => {
+ beforeEach(async () => {
+ const loadingResponse = new Promise(() => {});
+ await mockCreatedResponse(loadingResponse);
+
+ findInput().vm.$emit('input', 'new-token');
+ findActionButton().vm.$emit('click');
+ });
+
+ it('disables the create-token button', () => {
+ expectDisabledAttribute(findActionButton(), true);
+ });
+
+ it('hides the cancel button', () => {
+ expect(findCancelButton().exists()).toBe(false);
+ });
+ });
+
+ describe('creating a new token', () => {
+ beforeEach(async () => {
+ await mockCreatedResponse(clusterAgentToken);
+ });
+
+ it('creates a token', () => {
+ expect(createResponse).toHaveBeenCalledWith({
+ input: { clusterAgentId, name: 'new-token', description: 'new-token-description' },
+ });
+ });
+
+ it('shows agent instructions', () => {
+ expect(findAgentInstructions().props()).toMatchObject({
+ agentName,
+ agentToken: 'token-secret',
+ modalId: CREATE_TOKEN_MODAL,
+ });
+ });
+
+ it('renders a close button', () => {
+ expect(findActionButton().isVisible()).toBe(true);
+ expect(findActionButton().text()).toBe('Close');
+ expectDisabledAttribute(findActionButton(), false);
+ });
+ });
+
+ describe('error creating a new token', () => {
+ beforeEach(async () => {
+ await mockCreatedResponse(createAgentTokenErrorResponse);
+ });
+
+ it('displays the error message', async () => {
+ expect(findAlert().text()).toBe(
+ createAgentTokenErrorResponse.data.clusterAgentTokenCreate.errors[0],
+ );
+ });
+ });
+});
diff --git a/spec/frontend/clusters/agents/components/token_table_spec.js b/spec/frontend/clusters/agents/components/token_table_spec.js
index f6baaf87fa4..6caeaf5c192 100644
--- a/spec/frontend/clusters/agents/components/token_table_spec.js
+++ b/spec/frontend/clusters/agents/components/token_table_spec.js
@@ -2,6 +2,7 @@ import { GlEmptyState, GlTooltip, GlTruncate } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import TokenTable from '~/clusters/agents/components/token_table.vue';
import CreateTokenButton from '~/clusters/agents/components/create_token_button.vue';
+import CreateTokenModal from '~/clusters/agents/components/create_token_modal.vue';
import { useFakeDate } from 'helpers/fake_date';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import { MAX_LIST_COUNT } from '~/clusters/agents/constants';
@@ -50,6 +51,7 @@ describe('ClusterAgentTokenTable', () => {
const findEmptyState = () => wrapper.findComponent(GlEmptyState);
const findCreateTokenBtn = () => wrapper.findComponent(CreateTokenButton);
+ const findCreateModal = () => wrapper.findComponent(CreateTokenModal);
beforeEach(() => {
return createComponent(defaultTokens);
@@ -63,8 +65,8 @@ describe('ClusterAgentTokenTable', () => {
expect(findCreateTokenBtn().exists()).toBe(true);
});
- it('passes the correct params to the create token component', () => {
- expect(findCreateTokenBtn().props()).toMatchObject({
+ it('passes the correct params to the create token modal component', () => {
+ expect(findCreateModal().props()).toMatchObject({
clusterAgentId,
cursor,
});