diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/container_protection_rules.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/container_protection_rules.vue index 2f9352fcef5d38158d13c8a4dedb66d14323fbd6..504065499500756fe8d5c732341f4fb15d322eb0 100644 --- a/app/assets/javascripts/packages_and_registries/settings/project/components/container_protection_rules.vue +++ b/app/assets/javascripts/packages_and_registries/settings/project/components/container_protection_rules.vue @@ -80,6 +80,30 @@ export default { }, }, }, + fields: [ + { + key: 'repositoryPathPattern', + label: s__('ContainerRegistry|Repository path pattern'), + tdClass: '!gl-align-middle', + }, + { + key: 'minimumAccessLevelForPush', + label: I18N_MINIMUM_ACCESS_LEVEL_FOR_PUSH, + tdClass: '!gl-align-middle', + }, + { + key: 'minimumAccessLevelForDelete', + label: I18N_MINIMUM_ACCESS_LEVEL_FOR_DELETE, + tdClass: '!gl-align-middle', + }, + { + key: 'rowActions', + label: __('Actions'), + thClass: 'gl-text-right', + tdClass: '!gl-align-middle gl-text-right', + }, + ], + modal: { id: 'delete-protection-rule-confirmation-modal' }, data() { return { protectionRules: [], @@ -205,30 +229,6 @@ export default { }); }, }, - fields: [ - { - key: 'repositoryPathPattern', - label: s__('ContainerRegistry|Repository path pattern'), - tdClass: '!gl-align-middle', - }, - { - key: 'minimumAccessLevelForPush', - label: I18N_MINIMUM_ACCESS_LEVEL_FOR_PUSH, - tdClass: '!gl-align-middle', - }, - { - key: 'minimumAccessLevelForDelete', - label: I18N_MINIMUM_ACCESS_LEVEL_FOR_DELETE, - tdClass: '!gl-align-middle', - }, - { - key: 'rowActions', - label: __('Actions'), - thClass: 'gl-text-right', - tdClass: '!gl-align-middle gl-text-right', - }, - ], - modal: { id: 'delete-protection-rule-confirmation-modal' }, }; diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rule_form.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rule_form.vue index 42990af8082df9ed2c5ec38afd3f1e1e2a8bfa3c..cc28b27e67dec9c5e1913e5777550828daa87563 100644 --- a/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rule_form.vue +++ b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rule_form.vue @@ -12,11 +12,6 @@ import HelpPageLink from '~/vue_shared/components/help_page_link/help_page_link. import createPackagesProtectionRuleMutation from '~/packages_and_registries/settings/project/graphql/mutations/create_packages_protection_rule.mutation.graphql'; import { s__, __ } from '~/locale'; -const PACKAGES_PROTECTION_RULES_SAVED_SUCCESS_MESSAGE = s__('PackageRegistry|Rule saved.'); -const PACKAGES_PROTECTION_RULES_SAVED_ERROR_MESSAGE = s__( - 'PackageRegistry|Something went wrong while saving the package protection rule.', -); - const GRAPHQL_ACCESS_LEVEL_VALUE_MAINTAINER = 'MAINTAINER'; const GRAPHQL_ACCESS_LEVEL_VALUE_DEVELOPER = 'DEVELOPER'; const GRAPHQL_ACCESS_LEVEL_VALUE_OWNER = 'OWNER'; @@ -34,29 +29,30 @@ export default { }, inject: ['projectPath'], i18n: { - PACKAGES_PROTECTION_RULES_SAVED_SUCCESS_MESSAGE, - PACKAGES_PROTECTION_RULES_SAVED_ERROR_MESSAGE, packageNamePatternInputHelpText: s__( 'PackageRegistry|%{linkStart}Wildcards%{linkEnd} such as `@my-scope/my-package-*` are supported.', ), + protectionRulesSavedErrorMessage: s__( + 'PackageRegistry|Something went wrong while saving the package protection rule.', + ), }, data() { return { - packageProtectionRuleFormData: { + protectionRuleFormData: { packageNamePattern: '', packageType: 'NPM', pushProtectedUpToAccessLevel: GRAPHQL_ACCESS_LEVEL_VALUE_DEVELOPER, }, - updateInProgress: false, + protectionRuleMutationInProgress: false, alertErrorMessage: '', }; }, computed: { showLoadingIcon() { - return this.updateInProgress; + return this.protectionRuleMutationInProgress; }, isEmptyPackageName() { - return !this.packageProtectionRuleFormData.packageNamePattern; + return !this.protectionRuleFormData.packageNamePattern; }, isSubmitButtonDisabled() { return this.isEmptyPackageName || this.showLoadingIcon; @@ -64,13 +60,12 @@ export default { isFieldDisabled() { return this.showLoadingIcon; }, - createPackagesProtectionRuleMutationInput() { + createProtectionRuleMutationInput() { return { projectPath: this.projectPath, - packageNamePattern: this.packageProtectionRuleFormData.packageNamePattern, - packageType: this.packageProtectionRuleFormData.packageType, - pushProtectedUpToAccessLevel: this.packageProtectionRuleFormData - .pushProtectedUpToAccessLevel, + packageNamePattern: this.protectionRuleFormData.packageNamePattern, + packageType: this.protectionRuleFormData.packageType, + pushProtectedUpToAccessLevel: this.protectionRuleFormData.pushProtectedUpToAccessLevel, }; }, packageTypeOptions() { @@ -88,12 +83,12 @@ export default { submit() { this.clearAlertErrorMessage(); - this.updateInProgress = true; + this.protectionRuleMutationInProgress = true; return this.$apollo .mutate({ mutation: createPackagesProtectionRuleMutation, variables: { - input: this.createPackagesProtectionRuleMutationInput, + input: this.createProtectionRuleMutationInput, }, }) .then(({ data }) => { @@ -106,10 +101,10 @@ export default { this.$emit('submit', data.createPackagesProtectionRule.packageProtectionRule); }) .catch(() => { - this.alertErrorMessage = PACKAGES_PROTECTION_RULES_SAVED_ERROR_MESSAGE; + this.alertErrorMessage = this.$options.i18n.protectionRulesSavedErrorMessage; }) .finally(() => { - this.updateInProgress = false; + this.protectionRuleMutationInProgress = false; }); }, clearAlertErrorMessage() { @@ -141,7 +136,7 @@ export default { > { + return this.protectionRulesQueryPayloadNodes.map((protectionRule) => { return { - id: packagesProtectionRule.id, - pushProtectedUpToAccessLevel: packagesProtectionRule.pushProtectedUpToAccessLevel, - col_1_package_name_pattern: packagesProtectionRule.packageNamePattern, - col_2_package_type: getPackageTypeLabel(packagesProtectionRule.packageType), + id: protectionRule.id, + pushProtectedUpToAccessLevel: protectionRule.pushProtectedUpToAccessLevel, + col_1_package_name_pattern: protectionRule.packageNamePattern, + col_2_package_type: getPackageTypeLabel(protectionRule.packageType), }; }); }, - packageProtectionRulesQueryPageInfo() { - return this.packageProtectionRulesQueryPayload.pageInfo; + protectionRulesQueryPageInfo() { + return this.protectionRulesQueryPayload.pageInfo; }, - packageProtectionRulesQueryResult() { - return this.packageProtectionRulesQueryPayload.nodes; + protectionRulesQueryPayloadNodes() { + return this.protectionRulesQueryPayload.nodes; }, - isLoadingPackageProtectionRules() { - return this.$apollo.queries.packageProtectionRulesQueryPayload.loading; + isProtectionRulesQueryPayloadLoading() { + return this.$apollo.queries.protectionRulesQueryPayload.loading; }, isAddProtectionRuleButtonDisabled() { return this.protectionRuleFormVisibility; @@ -116,23 +157,6 @@ export default { ]; }, }, - apollo: { - packageProtectionRulesQueryPayload: { - query: packagesProtectionRuleQuery, - variables() { - return { - projectPath: this.projectPath, - ...this.packageProtectionRulesQueryPaginationParams, - }; - }, - update(data) { - return data.project?.packagesProtectionRules ?? this.packageProtectionRulesQueryPayload; - }, - error(e) { - this.alertErrorMessage = e.message; - }, - }, - }, methods: { showProtectionRuleForm() { this.protectionRuleFormVisibility = true; @@ -141,18 +165,18 @@ export default { this.protectionRuleFormVisibility = false; }, refetchProtectionRules() { - this.$apollo.queries.packageProtectionRulesQueryPayload.refetch(); + this.$apollo.queries.protectionRulesQueryPayload.refetch(); this.hideProtectionRuleForm(); }, onNextPage() { - this.packageProtectionRulesQueryPaginationParams = { - after: this.packageProtectionRulesQueryPageInfo.endCursor, + this.protectionRulesQueryPaginationParams = { + after: this.protectionRulesQueryPageInfo.endCursor, first: PAGINATION_DEFAULT_PER_PAGE, }; }, onPrevPage() { - this.packageProtectionRulesQueryPaginationParams = { - before: this.packageProtectionRulesQueryPageInfo.startCursor, + this.protectionRulesQueryPaginationParams = { + before: this.protectionRulesQueryPageInfo.startCursor, last: PAGINATION_DEFAULT_PER_PAGE, }; }, @@ -166,7 +190,7 @@ export default { return this.$apollo .mutate({ - mutation: deletePackagesProtectionRuleMutation, + mutation: graphMutationDeleteProtectionRule, variables: { input: { id: protectionRule.id } }, }) .then(({ data }) => { @@ -178,26 +202,26 @@ export default { this.refetchProtectionRules(); this.$toast.show(s__('PackageRegistry|Package protection rule deleted.')); }) - .catch((e) => { - this.alertErrorMessage = e.message; + .catch((error) => { + this.alertErrorMessage = error.message; }) .finally(() => { this.resetProtectionRuleMutation(); }); }, - updatePackageProtectionRule(packageProtectionRule) { + updateProtectionRule(protectionRule) { this.clearAlertMessage(); - this.protectionRuleMutationItem = packageProtectionRule; + this.protectionRuleMutationItem = protectionRule; this.protectionRuleMutationInProgress = true; return this.$apollo .mutate({ - mutation: updatePackagesProtectionRuleMutation, + mutation: graphMutationUpdateProtectionRule, variables: { input: { - id: packageProtectionRule.id, - pushProtectedUpToAccessLevel: packageProtectionRule.pushProtectedUpToAccessLevel, + id: protectionRule.id, + pushProtectedUpToAccessLevel: protectionRule.pushProtectedUpToAccessLevel, }, }, }) @@ -233,30 +257,6 @@ export default { return this.protectionRuleMutationItem === item && this.protectionRuleMutationInProgress; }, }, - fields: [ - { - key: 'col_1_package_name_pattern', - label: s__('PackageRegistry|Name pattern'), - tdClass: '!gl-align-middle', - }, - { - key: 'col_2_package_type', - label: s__('PackageRegistry|Type'), - tdClass: '!gl-align-middle', - }, - { - key: 'col_3_push_protected_up_to_access_level', - label: I18N_PUSH_PROTECTED_UP_TO_ACCESS_LEVEL, - tdClass: '!gl-align-middle', - }, - { - key: 'col_4_actions', - label: __('Actions'), - thClass: 'gl-text-right', - tdClass: '!gl-align-middle gl-text-right', - }, - ], - modal: { id: 'delete-package-protection-rule-confirmation-modal' }, }; @@ -311,7 +311,7 @@ export default { show-empty stacked="md" :aria-label="$options.i18n.settingBlockTitle" - :busy="isLoadingPackageProtectionRules" + :busy="isProtectionRulesQueryPayloadLoading" > @@ -345,7 +345,7 @@ export default {
{ it('renders alert and dismisses it correctly', async () => { const alertErrorMessage = 'Error message'; createComponent({ - config: { - data() { - return { - alertErrorMessage, - }; - }, - }, + config: { data: () => ({ alertErrorMessage }) }, }); await waitForPromises(); diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_protection_rules_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_protection_rules_spec.js index c73983a50deeb5e213967c6822632e9550bd4c6c..9f041cc717380e199c8086c1b8f69600d1ab3338 100644 --- a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_protection_rules_spec.js +++ b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_protection_rules_spec.js @@ -8,9 +8,9 @@ import { getBinding } from 'helpers/vue_mock_directive'; import PackagesProtectionRules from '~/packages_and_registries/settings/project/components/packages_protection_rules.vue'; import PackagesProtectionRuleForm from '~/packages_and_registries/settings/project/components/packages_protection_rule_form.vue'; import SettingsBlock from '~/packages_and_registries/shared/components/settings_block.vue'; -import packagesProtectionRuleQuery from '~/packages_and_registries/settings/project/graphql/queries/get_packages_protection_rules.query.graphql'; -import deletePackagesProtectionRuleMutation from '~/packages_and_registries/settings/project/graphql/mutations/delete_packages_protection_rule.mutation.graphql'; -import updatePackagesProtectionRuleMutation from '~/packages_and_registries/settings/project/graphql/mutations/update_packages_protection_rule.mutation.graphql'; +import graphMutationDeleteProtectionRule from '~/packages_and_registries/settings/project/graphql/mutations/delete_packages_protection_rule.mutation.graphql'; +import graphMutationUpdateProtectionRule from '~/packages_and_registries/settings/project/graphql/mutations/update_packages_protection_rule.mutation.graphql'; +import graphQueryProtectionRules from '~/packages_and_registries/settings/project/graphql/queries/get_packages_protection_rules.query.graphql'; import { packagesProtectionRuleQueryPayload, packagesProtectionRulesData, @@ -37,11 +37,11 @@ describe('Packages protection rules project settings', () => { const findTableRow = (i) => extendedWrapper(findTableBody().findAllByRole('row').at(i)); const findTableRowButtonDelete = (i) => findTableRow(i).findByRole('button', { name: /delete/i }); const findTableLoadingIcon = () => wrapper.findComponent(GlLoadingIcon); - const findProtectionRuleForm = () => wrapper.findComponent(PackagesProtectionRuleForm); - const findAddProtectionRuleButton = () => + const findAddProtectionRuleForm = () => wrapper.findComponent(PackagesProtectionRuleForm); + const findAddProtectionRuleFormSubmitButton = () => wrapper.findByRole('button', { name: /add protection rule/i }); const findAlert = () => wrapper.findByRole('alert'); - const findModal = () => wrapper.findComponent(GlModal); + const findDeleteProtectionRuleConfirmationModal = () => wrapper.findComponent(GlModal); const mountComponent = (mountFn = mountExtended, provide = defaultProvidedValues, config) => { wrapper = mountFn(PackagesProtectionRules, { @@ -60,21 +60,21 @@ describe('Packages protection rules project settings', () => { const createComponent = ({ mountFn = mountExtended, provide = defaultProvidedValues, - packagesProtectionRuleQueryResolver = jest + protectionRulesQueryResolver = jest .fn() .mockResolvedValue(packagesProtectionRuleQueryPayload()), - deletePackagesProtectionRuleMutationResolver = jest + deleteProtectionRuleMutationResolver = jest .fn() .mockResolvedValue(deletePackagesProtectionRuleMutationPayload()), - updatePackagesProtectionRuleMutationResolver = jest + updateProtectionRuleMutationResolver = jest .fn() .mockResolvedValue(updatePackagesProtectionRuleMutationPayload()), config = {}, } = {}) => { const requestHandlers = [ - [packagesProtectionRuleQuery, packagesProtectionRuleQueryResolver], - [deletePackagesProtectionRuleMutation, deletePackagesProtectionRuleMutationResolver], - [updatePackagesProtectionRuleMutation, updatePackagesProtectionRuleMutationResolver], + [graphQueryProtectionRules, protectionRulesQueryResolver], + [graphMutationDeleteProtectionRule, deleteProtectionRuleMutationResolver], + [graphMutationUpdateProtectionRule, updateProtectionRuleMutationResolver], ]; fakeApollo = createMockApollo(requestHandlers); @@ -126,12 +126,12 @@ describe('Packages protection rules project settings', () => { }); it('calls graphql api query', () => { - const packagesProtectionRuleQueryResolver = jest + const protectionRulesQueryResolver = jest .fn() .mockResolvedValue(packagesProtectionRuleQueryPayload()); - createComponent({ packagesProtectionRuleQueryResolver }); + createComponent({ protectionRulesQueryResolver }); - expect(packagesProtectionRuleQueryResolver).toHaveBeenCalledWith( + expect(protectionRulesQueryResolver).toHaveBeenCalledWith( expect.objectContaining({ projectPath: defaultProvidedValues.projectPath }), ); }); @@ -154,12 +154,12 @@ describe('Packages protection rules project settings', () => { }); it('calls initial graphql api query with pagination information', () => { - const packagesProtectionRuleQueryResolver = jest + const protectionRulesQueryResolver = jest .fn() .mockResolvedValue(packagesProtectionRuleQueryPayload()); - createComponent({ packagesProtectionRuleQueryResolver }); + createComponent({ protectionRulesQueryResolver }); - expect(packagesProtectionRuleQueryResolver).toHaveBeenCalledWith( + expect(protectionRulesQueryResolver).toHaveBeenCalledWith( expect.objectContaining({ projectPath: defaultProvidedValues.projectPath, first: 10, @@ -169,11 +169,11 @@ describe('Packages protection rules project settings', () => { it('show alert when GraphQL request fails', async () => { const protectionRuleQueryResolverRejectedErrorMessage = 'Error protectionRuleQueryResolver'; - const packagesProtectionRuleQueryResolver = jest + const protectionRulesQueryResolver = jest .fn() .mockRejectedValue(new Error(protectionRuleQueryResolverRejectedErrorMessage)); - createComponent({ packagesProtectionRuleQueryResolver }); + createComponent({ protectionRulesQueryResolver }); await waitForPromises(); @@ -182,7 +182,7 @@ describe('Packages protection rules project settings', () => { }); describe('when button "Previous" is clicked', () => { - const packagesProtectionRuleQueryResolver = jest + const protectionRulesQueryResolver = jest .fn() .mockResolvedValueOnce( packagesProtectionRuleQueryPayload({ @@ -201,7 +201,7 @@ describe('Packages protection rules project settings', () => { extendedWrapper(findPagination()).findByRole('button', { name: /previous/i }); beforeEach(async () => { - createComponent({ packagesProtectionRuleQueryResolver }); + createComponent({ protectionRulesQueryResolver }); await waitForPromises(); @@ -209,8 +209,8 @@ describe('Packages protection rules project settings', () => { }); it('sends a second graphql api query with new pagination params', () => { - expect(packagesProtectionRuleQueryResolver).toHaveBeenCalledTimes(2); - expect(packagesProtectionRuleQueryResolver).toHaveBeenLastCalledWith( + expect(protectionRulesQueryResolver).toHaveBeenCalledTimes(2); + expect(protectionRulesQueryResolver).toHaveBeenLastCalledWith( expect.objectContaining({ before: '10', last: 10, @@ -221,7 +221,7 @@ describe('Packages protection rules project settings', () => { }); describe('when button "Next" is clicked', () => { - const packagesProtectionRuleQueryResolver = jest + const protectionRulesQueryResolver = jest .fn() .mockResolvedValueOnce(packagesProtectionRuleQueryPayload()) .mockResolvedValueOnce( @@ -240,7 +240,7 @@ describe('Packages protection rules project settings', () => { extendedWrapper(findPagination()).findByRole('button', { name: /next/i }); beforeEach(async () => { - createComponent({ packagesProtectionRuleQueryResolver }); + createComponent({ protectionRulesQueryResolver }); await waitForPromises(); @@ -248,8 +248,8 @@ describe('Packages protection rules project settings', () => { }); it('sends a second graphql api query with new pagination params', () => { - expect(packagesProtectionRuleQueryResolver).toHaveBeenCalledTimes(2); - expect(packagesProtectionRuleQueryResolver).toHaveBeenLastCalledWith( + expect(protectionRulesQueryResolver).toHaveBeenCalledTimes(2); + expect(protectionRulesQueryResolver).toHaveBeenLastCalledWith( expect.objectContaining({ after: '10', first: 10, @@ -311,18 +311,18 @@ describe('Packages protection rules project settings', () => { }); it('sends graphql mutation', async () => { - const updatePackagesProtectionRuleMutationResolver = jest + const updateProtectionRuleMutationResolver = jest .fn() .mockResolvedValue(updatePackagesProtectionRuleMutationPayload()); - createComponent({ updatePackagesProtectionRuleMutationResolver }); + createComponent({ updateProtectionRuleMutationResolver }); await waitForPromises(); await findComboboxInTableRow(0).setValue(accessLevelValueOwner); - expect(updatePackagesProtectionRuleMutationResolver).toHaveBeenCalledTimes(1); - expect(updatePackagesProtectionRuleMutationResolver).toHaveBeenCalledWith({ + expect(updateProtectionRuleMutationResolver).toHaveBeenCalledTimes(1); + expect(updateProtectionRuleMutationResolver).toHaveBeenCalledWith({ input: { id: packagesProtectionRulesData[0].id, pushProtectedUpToAccessLevel: accessLevelValueOwner, @@ -363,11 +363,11 @@ describe('Packages protection rules project settings', () => { }); it('handles erroneous graphql mutation', async () => { - const updatePackagesProtectionRuleMutationResolver = jest + const updateProtectionRuleMutationResolver = jest .fn() .mockRejectedValue(new Error('error')); - createComponent({ updatePackagesProtectionRuleMutationResolver }); + createComponent({ updateProtectionRuleMutationResolver }); await waitForPromises(); @@ -381,14 +381,14 @@ describe('Packages protection rules project settings', () => { it('handles graphql mutation with error response', async () => { const serverErrorMessage = 'Server error message'; - const updatePackagesProtectionRuleMutationResolver = jest.fn().mockResolvedValue( + const updateProtectionRuleMutationResolver = jest.fn().mockResolvedValue( updatePackagesProtectionRuleMutationPayload({ packageProtectionRule: null, errors: [serverErrorMessage], }), ); - createComponent({ updatePackagesProtectionRuleMutationResolver }); + createComponent({ updateProtectionRuleMutationResolver }); await waitForPromises(); @@ -434,9 +434,11 @@ describe('Packages protection rules project settings', () => { const modalId = getBinding(findTableRowButtonDelete(0).element, 'gl-modal'); - expect(findModal().props('modal-id')).toBe(modalId); - expect(findModal().props('title')).toBe('Delete package protection rule?'); - expect(findModal().text()).toContain( + expect(findDeleteProtectionRuleConfirmationModal().props('modal-id')).toBe(modalId); + expect(findDeleteProtectionRuleConfirmationModal().props('title')).toBe( + 'Delete package protection rule?', + ); + expect(findDeleteProtectionRuleConfirmationModal().text()).toContain( 'Users with at least the Developer role for this project will be able to publish, edit, and delete packages with this package name.', ); }); @@ -448,11 +450,11 @@ describe('Packages protection rules project settings', () => { describe('modal "confirmation for delete action"', () => { const createComponentAndClickButtonDeleteInTableRow = async ({ tableRowIndex = 0, - deletePackagesProtectionRuleMutationResolver = jest + deleteProtectionRuleMutationResolver = jest .fn() .mockResolvedValue(deletePackagesProtectionRuleMutationPayload()), } = {}) => { - createComponent({ deletePackagesProtectionRuleMutationResolver }); + createComponent({ deleteProtectionRuleMutationResolver }); await waitForPromises(); @@ -460,7 +462,8 @@ describe('Packages protection rules project settings', () => { }; describe('when modal button "primary" clicked', () => { - const clickOnModalPrimaryBtn = () => findModal().vm.$emit('primary'); + const clickOnModalPrimaryBtn = () => + findDeleteProtectionRuleConfirmationModal().vm.$emit('primary'); it('disables the button when graphql mutation is executed', async () => { await createComponentAndClickButtonDeleteInTableRow(); @@ -473,30 +476,30 @@ describe('Packages protection rules project settings', () => { }); it('sends graphql mutation', async () => { - const deletePackagesProtectionRuleMutationResolver = jest + const deleteProtectionRuleMutationResolver = jest .fn() .mockResolvedValue(deletePackagesProtectionRuleMutationPayload()); await createComponentAndClickButtonDeleteInTableRow({ - deletePackagesProtectionRuleMutationResolver, + deleteProtectionRuleMutationResolver, }); await clickOnModalPrimaryBtn(); - expect(deletePackagesProtectionRuleMutationResolver).toHaveBeenCalledTimes(1); - expect(deletePackagesProtectionRuleMutationResolver).toHaveBeenCalledWith({ + expect(deleteProtectionRuleMutationResolver).toHaveBeenCalledTimes(1); + expect(deleteProtectionRuleMutationResolver).toHaveBeenCalledWith({ input: { id: packagesProtectionRulesData[0].id }, }); }); it('handles erroneous graphql mutation', async () => { const alertErrorMessage = 'Client error message'; - const deletePackagesProtectionRuleMutationResolver = jest + const deleteProtectionRuleMutationResolver = jest .fn() .mockRejectedValue(new Error(alertErrorMessage)); await createComponentAndClickButtonDeleteInTableRow({ - deletePackagesProtectionRuleMutationResolver, + deleteProtectionRuleMutationResolver, }); await clickOnModalPrimaryBtn(); @@ -509,7 +512,7 @@ describe('Packages protection rules project settings', () => { it('handles graphql mutation with error response', async () => { const alertErrorMessage = 'Server error message'; - const deletePackagesProtectionRuleMutationResolver = jest.fn().mockResolvedValue({ + const deleteProtectionRuleMutationResolver = jest.fn().mockResolvedValue({ data: { deletePackagesProtectionRule: { packageProtectionRule: null, @@ -519,7 +522,7 @@ describe('Packages protection rules project settings', () => { }); await createComponentAndClickButtonDeleteInTableRow({ - deletePackagesProtectionRuleMutationResolver, + deleteProtectionRuleMutationResolver, }); await clickOnModalPrimaryBtn(); @@ -531,22 +534,22 @@ describe('Packages protection rules project settings', () => { }); it('refetches package protection rules after successful graphql mutation', async () => { - const deletePackagesProtectionRuleMutationResolver = jest + const deleteProtectionRuleMutationResolver = jest .fn() .mockResolvedValue(deletePackagesProtectionRuleMutationPayload()); - const packagesProtectionRuleQueryResolver = jest + const protectionRulesQueryResolver = jest .fn() .mockResolvedValue(packagesProtectionRuleQueryPayload()); createComponent({ - packagesProtectionRuleQueryResolver, - deletePackagesProtectionRuleMutationResolver, + protectionRulesQueryResolver, + deleteProtectionRuleMutationResolver, }); await waitForPromises(); - expect(packagesProtectionRuleQueryResolver).toHaveBeenCalledTimes(1); + expect(protectionRulesQueryResolver).toHaveBeenCalledTimes(1); await findTableRowButtonDelete(0).trigger('click'); @@ -554,7 +557,7 @@ describe('Packages protection rules project settings', () => { await waitForPromises(); - expect(packagesProtectionRuleQueryResolver).toHaveBeenCalledTimes(2); + expect(protectionRulesQueryResolver).toHaveBeenCalledTimes(2); }); it('shows a toast with success message', async () => { @@ -575,7 +578,7 @@ describe('Packages protection rules project settings', () => { await waitForPromises(); - expect(findAddProtectionRuleButton().isVisible()).toBe(true); + expect(findAddProtectionRuleFormSubmitButton().isVisible()).toBe(true); }); it('does not initially render form "add package protection"', async () => { @@ -583,8 +586,8 @@ describe('Packages protection rules project settings', () => { await waitForPromises(); - expect(findAddProtectionRuleButton().isVisible()).toBe(true); - expect(findProtectionRuleForm().exists()).toBe(false); + expect(findAddProtectionRuleFormSubmitButton().isVisible()).toBe(true); + expect(findAddProtectionRuleForm().exists()).toBe(false); }); describe('when button is clicked', () => { @@ -593,50 +596,50 @@ describe('Packages protection rules project settings', () => { await waitForPromises(); - await findAddProtectionRuleButton().trigger('click'); + await findAddProtectionRuleFormSubmitButton().trigger('click'); }); it('renders form "add package protection"', () => { - expect(findProtectionRuleForm().isVisible()).toBe(true); + expect(findAddProtectionRuleForm().isVisible()).toBe(true); }); it('disables the button "add protection rule"', () => { - expect(findAddProtectionRuleButton().attributes('disabled')).toBeDefined(); + expect(findAddProtectionRuleFormSubmitButton().attributes('disabled')).toBeDefined(); }); }); }); describe('form "add protection rule"', () => { - let packagesProtectionRuleQueryResolver; + let protectionRulesQueryResolver; beforeEach(async () => { - packagesProtectionRuleQueryResolver = jest + protectionRulesQueryResolver = jest .fn() .mockResolvedValue(packagesProtectionRuleQueryPayload()); - createComponent({ packagesProtectionRuleQueryResolver }); + createComponent({ protectionRulesQueryResolver }); await waitForPromises(); - await findAddProtectionRuleButton().trigger('click'); + await findAddProtectionRuleFormSubmitButton().trigger('click'); }); it('handles event "submit"', async () => { - await findProtectionRuleForm().vm.$emit('submit'); + await findAddProtectionRuleForm().vm.$emit('submit'); - expect(packagesProtectionRuleQueryResolver).toHaveBeenCalledTimes(2); + expect(protectionRulesQueryResolver).toHaveBeenCalledTimes(2); - expect(findProtectionRuleForm().exists()).toBe(false); - expect(findAddProtectionRuleButton().attributes('disabled')).not.toBeDefined(); + expect(findAddProtectionRuleForm().exists()).toBe(false); + expect(findAddProtectionRuleFormSubmitButton().attributes('disabled')).not.toBeDefined(); }); it('handles event "cancel"', async () => { - await findProtectionRuleForm().vm.$emit('cancel'); + await findAddProtectionRuleForm().vm.$emit('cancel'); - expect(packagesProtectionRuleQueryResolver).toHaveBeenCalledTimes(1); + expect(protectionRulesQueryResolver).toHaveBeenCalledTimes(1); - expect(findProtectionRuleForm().exists()).toBe(false); - expect(findAddProtectionRuleButton().attributes()).not.toHaveProperty('disabled'); + expect(findAddProtectionRuleForm().exists()).toBe(false); + expect(findAddProtectionRuleFormSubmitButton().attributes()).not.toHaveProperty('disabled'); }); }); @@ -646,13 +649,7 @@ describe('Packages protection rules project settings', () => { it('renders alert and dismisses it correctly', async () => { const alertErrorMessage = 'Error message'; createComponent({ - config: { - data() { - return { - alertErrorMessage, - }; - }, - }, + config: { data: () => ({ alertErrorMessage }) }, }); await waitForPromises();