diff options
Diffstat (limited to 'spec/frontend/token_access')
-rw-r--r-- | spec/frontend/token_access/mock_data.js | 84 | ||||
-rw-r--r-- | spec/frontend/token_access/token_access_spec.js | 218 | ||||
-rw-r--r-- | spec/frontend/token_access/token_projects_table_spec.js | 51 |
3 files changed, 353 insertions, 0 deletions
diff --git a/spec/frontend/token_access/mock_data.js b/spec/frontend/token_access/mock_data.js new file mode 100644 index 00000000000..14d7b00cb6d --- /dev/null +++ b/spec/frontend/token_access/mock_data.js @@ -0,0 +1,84 @@ +export const enabledJobTokenScope = { + data: { + project: { + ciCdSettings: { + jobTokenScopeEnabled: true, + __typename: 'ProjectCiCdSetting', + }, + __typename: 'Project', + }, + }, +}; + +export const disabledJobTokenScope = { + data: { + project: { + ciCdSettings: { + jobTokenScopeEnabled: false, + __typename: 'ProjectCiCdSetting', + }, + __typename: 'Project', + }, + }, +}; + +export const updateJobTokenScope = { + data: { + ciCdSettingsUpdate: { + ciCdSettings: { + jobTokenScopeEnabled: true, + __typename: 'ProjectCiCdSetting', + }, + errors: [], + __typename: 'CiCdSettingsUpdatePayload', + }, + }, +}; + +export const projectsWithScope = { + data: { + project: { + __typename: 'Project', + ciJobTokenScope: { + __typename: 'CiJobTokenScopeType', + projects: { + __typename: 'ProjectConnection', + nodes: [ + { + fullPath: 'root/332268-test', + name: 'root/332268-test', + }, + ], + }, + }, + }, + }, +}; + +export const addProjectSuccess = { + data: { + ciJobTokenScopeAddProject: { + errors: [], + __typename: 'CiJobTokenScopeAddProjectPayload', + }, + }, +}; + +export const removeProjectSuccess = { + data: { + ciJobTokenScopeRemoveProject: { + errors: [], + __typename: 'CiJobTokenScopeRemoveProjectPayload', + }, + }, +}; + +export const mockProjects = [ + { + name: 'merge-train-stuff', + fullPath: 'root/merge-train-stuff', + isLocked: false, + __typename: 'Project', + }, + { name: 'ci-project', fullPath: 'root/ci-project', isLocked: true, __typename: 'Project' }, +]; diff --git a/spec/frontend/token_access/token_access_spec.js b/spec/frontend/token_access/token_access_spec.js new file mode 100644 index 00000000000..c7323eb19fe --- /dev/null +++ b/spec/frontend/token_access/token_access_spec.js @@ -0,0 +1,218 @@ +import { GlToggle, GlLoadingIcon } from '@gitlab/ui'; +import { createLocalVue, shallowMount, mount } from '@vue/test-utils'; +import VueApollo from 'vue-apollo'; +import createMockApollo from 'helpers/mock_apollo_helper'; +import waitForPromises from 'helpers/wait_for_promises'; +import createFlash from '~/flash'; +import TokenAccess from '~/token_access/components/token_access.vue'; +import addProjectCIJobTokenScopeMutation from '~/token_access/graphql/mutations/add_project_ci_job_token_scope.mutation.graphql'; +import removeProjectCIJobTokenScopeMutation from '~/token_access/graphql/mutations/remove_project_ci_job_token_scope.mutation.graphql'; +import updateCIJobTokenScopeMutation from '~/token_access/graphql/mutations/update_ci_job_token_scope.mutation.graphql'; +import getCIJobTokenScopeQuery from '~/token_access/graphql/queries/get_ci_job_token_scope.query.graphql'; +import getProjectsWithCIJobTokenScopeQuery from '~/token_access/graphql/queries/get_projects_with_ci_job_token_scope.query.graphql'; +import { + enabledJobTokenScope, + disabledJobTokenScope, + updateJobTokenScope, + projectsWithScope, + addProjectSuccess, + removeProjectSuccess, +} from './mock_data'; + +const projectPath = 'root/my-repo'; +const error = new Error('Error'); +const localVue = createLocalVue(); + +localVue.use(VueApollo); + +jest.mock('~/flash'); + +describe('TokenAccess component', () => { + let wrapper; + + const enabledJobTokenScopeHandler = jest.fn().mockResolvedValue(enabledJobTokenScope); + const disabledJobTokenScopeHandler = jest.fn().mockResolvedValue(disabledJobTokenScope); + const updateJobTokenScopeHandler = jest.fn().mockResolvedValue(updateJobTokenScope); + const getProjectsWithScope = jest.fn().mockResolvedValue(projectsWithScope); + const addProjectSuccessHandler = jest.fn().mockResolvedValue(addProjectSuccess); + const addProjectFailureHandler = jest.fn().mockRejectedValue(error); + const removeProjectSuccessHandler = jest.fn().mockResolvedValue(removeProjectSuccess); + const removeProjectFailureHandler = jest.fn().mockRejectedValue(error); + + const findToggle = () => wrapper.findComponent(GlToggle); + const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon); + const findAddProjectBtn = () => wrapper.find('[data-testid="add-project-button"]'); + const findRemoveProjectBtn = () => wrapper.find('[data-testid="remove-project-button"]'); + const findTokenSection = () => wrapper.find('[data-testid="token-section"]'); + + const createMockApolloProvider = (requestHandlers) => { + return createMockApollo(requestHandlers); + }; + + const createComponent = (requestHandlers, mountFn = shallowMount) => { + wrapper = mountFn(TokenAccess, { + localVue, + provide: { + fullPath: projectPath, + }, + apolloProvider: createMockApolloProvider(requestHandlers), + data() { + return { + targetProjectPath: 'root/test', + }; + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + describe('loading state', () => { + it('shows loading state while waiting on query to resolve', async () => { + createComponent([ + [getCIJobTokenScopeQuery, enabledJobTokenScopeHandler], + [getProjectsWithCIJobTokenScopeQuery, getProjectsWithScope], + ]); + + expect(findLoadingIcon().exists()).toBe(true); + + await waitForPromises(); + + expect(findLoadingIcon().exists()).toBe(false); + }); + }); + + describe('toggle', () => { + it('the toggle should be enabled and the token section should show', async () => { + createComponent([ + [getCIJobTokenScopeQuery, enabledJobTokenScopeHandler], + [getProjectsWithCIJobTokenScopeQuery, getProjectsWithScope], + ]); + + await waitForPromises(); + + expect(findToggle().props('value')).toBe(true); + expect(findTokenSection().exists()).toBe(true); + }); + + it('the toggle should be disabled and the token section should not show', async () => { + createComponent([ + [getCIJobTokenScopeQuery, disabledJobTokenScopeHandler], + [getProjectsWithCIJobTokenScopeQuery, getProjectsWithScope], + ]); + + await waitForPromises(); + + expect(findToggle().props('value')).toBe(false); + expect(findTokenSection().exists()).toBe(false); + }); + + it('switching the toggle calls the mutation and fetches the projects again', async () => { + createComponent([ + [getCIJobTokenScopeQuery, disabledJobTokenScopeHandler], + [updateCIJobTokenScopeMutation, updateJobTokenScopeHandler], + [getProjectsWithCIJobTokenScopeQuery, getProjectsWithScope], + ]); + + await waitForPromises(); + + expect(getProjectsWithScope).toHaveBeenCalledTimes(1); + + findToggle().vm.$emit('change', true); + + await waitForPromises(); + + expect(updateJobTokenScopeHandler).toHaveBeenCalledWith({ + input: { fullPath: projectPath, jobTokenScopeEnabled: true }, + }); + expect(getProjectsWithScope).toHaveBeenCalledTimes(2); + }); + }); + + describe('add project', () => { + it('calls add project mutation', async () => { + createComponent( + [ + [getCIJobTokenScopeQuery, enabledJobTokenScopeHandler], + [getProjectsWithCIJobTokenScopeQuery, getProjectsWithScope], + [addProjectCIJobTokenScopeMutation, addProjectSuccessHandler], + ], + mount, + ); + + await waitForPromises(); + + findAddProjectBtn().trigger('click'); + + expect(addProjectSuccessHandler).toHaveBeenCalledWith({ + input: { + projectPath, + targetProjectPath: 'root/test', + }, + }); + }); + + it('add project handles error correctly', async () => { + createComponent( + [ + [getCIJobTokenScopeQuery, enabledJobTokenScopeHandler], + [getProjectsWithCIJobTokenScopeQuery, getProjectsWithScope], + [addProjectCIJobTokenScopeMutation, addProjectFailureHandler], + ], + mount, + ); + + await waitForPromises(); + + findAddProjectBtn().trigger('click'); + + await waitForPromises(); + + expect(createFlash).toHaveBeenCalled(); + }); + }); + + describe('remove project', () => { + it('calls remove project mutation', async () => { + createComponent( + [ + [getCIJobTokenScopeQuery, enabledJobTokenScopeHandler], + [getProjectsWithCIJobTokenScopeQuery, getProjectsWithScope], + [removeProjectCIJobTokenScopeMutation, removeProjectSuccessHandler], + ], + mount, + ); + + await waitForPromises(); + + findRemoveProjectBtn().trigger('click'); + + expect(removeProjectSuccessHandler).toHaveBeenCalledWith({ + input: { + projectPath, + targetProjectPath: 'root/332268-test', + }, + }); + }); + + it('remove project handles error correctly', async () => { + createComponent( + [ + [getCIJobTokenScopeQuery, enabledJobTokenScopeHandler], + [getProjectsWithCIJobTokenScopeQuery, getProjectsWithScope], + [removeProjectCIJobTokenScopeMutation, removeProjectFailureHandler], + ], + mount, + ); + + await waitForPromises(); + + findRemoveProjectBtn().trigger('click'); + + await waitForPromises(); + + expect(createFlash).toHaveBeenCalled(); + }); + }); +}); diff --git a/spec/frontend/token_access/token_projects_table_spec.js b/spec/frontend/token_access/token_projects_table_spec.js new file mode 100644 index 00000000000..3bda0d0b530 --- /dev/null +++ b/spec/frontend/token_access/token_projects_table_spec.js @@ -0,0 +1,51 @@ +import { GlTable, GlButton } from '@gitlab/ui'; +import { mount } from '@vue/test-utils'; +import TokenProjectsTable from '~/token_access/components/token_projects_table.vue'; +import { mockProjects } from './mock_data'; + +describe('Token projects table', () => { + let wrapper; + + const createComponent = () => { + wrapper = mount(TokenProjectsTable, { + provide: { + fullPath: 'root/ci-project', + }, + propsData: { + projects: mockProjects, + }, + }); + }; + + const findTable = () => wrapper.findComponent(GlTable); + const findAllTableRows = () => wrapper.findAll('[data-testid="projects-token-table-row"]'); + const findDeleteProjectBtn = () => wrapper.findComponent(GlButton); + const findAllDeleteProjectBtn = () => wrapper.findAllComponents(GlButton); + + beforeEach(() => { + createComponent(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('displays a table', () => { + expect(findTable().exists()).toBe(true); + }); + + it('displays the correct amount of table rows', () => { + expect(findAllTableRows()).toHaveLength(mockProjects.length); + }); + + it('delete project button emits event with correct project to delete', async () => { + await findDeleteProjectBtn().trigger('click'); + + expect(wrapper.emitted('removeProject')).toEqual([[mockProjects[0].fullPath]]); + }); + + it('does not show the remove icon if the project is locked', () => { + // currently two mock projects with one being a locked project + expect(findAllDeleteProjectBtn()).toHaveLength(1); + }); +}); |