From 4862107805612031e6cdbfde5471e42f29102c40 Mon Sep 17 00:00:00 2001
From: Gerardo <gerardo@b310.de>
Date: Mon, 15 Jan 2024 18:43:50 +0100
Subject: [PATCH 1/6] feat: Protected packages: Update protection rules in
 project settings ui

MR includes:
- Adding option to update the protection rule
- Sending a graphql mutation "updatePackagesProtectionRule"
  when access level for push protection changes
- Adding an alert when the graphql mutation is not successful
- Adding tests

Changelog: added
---
 .../components/packages_protection_rules.vue  | 107 +++++++++---
 ..._packages_protection_rule.mutation.graphql |  10 ++
 locale/gitlab.pot                             |   3 +
 .../packages_protection_rules_spec.js         | 155 +++++++++++++++++-
 .../settings/project/settings/mock_data.js    |  15 ++
 5 files changed, 263 insertions(+), 27 deletions(-)
 create mode 100644 app/assets/javascripts/packages_and_registries/settings/project/graphql/mutations/update_packages_protection_rule.mutation.graphql

diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rules.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rules.vue
index 152ce8474f2465..8238d7d7f95dd8 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rules.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rules.vue
@@ -8,22 +8,18 @@ import {
   GlKeysetPagination,
   GlModal,
   GlModalDirective,
+  GlFormSelect,
 } from '@gitlab/ui';
 import packagesProtectionRuleQuery from '~/packages_and_registries/settings/project/graphql/queries/get_packages_protection_rules.query.graphql';
 import { getPackageTypeLabel } from '~/packages_and_registries/package_registry/utils';
 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 SettingsBlock from '~/packages_and_registries/shared/components/settings_block.vue';
 import PackagesProtectionRuleForm from '~/packages_and_registries/settings/project/components/packages_protection_rule_form.vue';
 import { s__, __ } from '~/locale';
 
 const PAGINATION_DEFAULT_PER_PAGE = 10;
 
-const ACCESS_LEVEL_GRAPHQL_VALUE_TO_LABEL = {
-  DEVELOPER: __('Developer'),
-  MAINTAINER: __('Maintainer'),
-  OWNER: __('Owner'),
-};
-
 export default {
   components: {
     SettingsBlock,
@@ -35,6 +31,7 @@ export default {
     PackagesProtectionRuleForm,
     GlKeysetPagination,
     GlModal,
+    GlFormSelect,
   },
   directives: {
     GlModal: GlModalDirective,
@@ -59,11 +56,9 @@ export default {
       protectionRuleFormVisibility: false,
       packageProtectionRulesQueryPayload: { nodes: [], pageInfo: {} },
       packageProtectionRulesQueryPaginationParams: { first: PAGINATION_DEFAULT_PER_PAGE },
-      deleteInProgress: false,
-      deleteItem: null,
+      protectionRuleMutationInProgress: false,
+      protectionRuleMutationItem: null,
       alertErrorMessage: '',
-      protectionRuleDeletionInProgress: false,
-      protectionRuleDeletionItem: null,
     };
   },
   computed: {
@@ -71,12 +66,9 @@ export default {
       return this.packageProtectionRulesQueryResult.map((packagesProtectionRule) => {
         return {
           id: packagesProtectionRule.id,
+          pushProtectedUpToAccessLevel: packagesProtectionRule.pushProtectedUpToAccessLevel,
           col_1_package_name_pattern: packagesProtectionRule.packageNamePattern,
           col_2_package_type: getPackageTypeLabel(packagesProtectionRule.packageType),
-          col_3_push_protected_up_to_access_level:
-            ACCESS_LEVEL_GRAPHQL_VALUE_TO_LABEL[
-              packagesProtectionRule.pushProtectedUpToAccessLevel
-            ],
         };
       });
     },
@@ -105,6 +97,13 @@ export default {
         text: __('Cancel'),
       };
     },
+    pushProtectedUpToAccessLevelOptions() {
+      return [
+        { value: 'DEVELOPER', text: __('Developer') },
+        { value: 'MAINTAINER', text: __('Maintainer') },
+        { value: 'OWNER', text: __('Owner') },
+      ];
+    },
   },
   apollo: {
     packageProtectionRulesQueryPayload: {
@@ -146,16 +145,13 @@ export default {
         last: PAGINATION_DEFAULT_PER_PAGE,
       };
     },
-    isButtonDisabled(item) {
-      return this.protectionRuleDeletionItem === item && this.protectionRuleDeletionInProgress;
-    },
     showProtectionRuleDeletionConfirmModal(protectionRule) {
-      this.protectionRuleDeletionItem = protectionRule;
+      this.protectionRuleMutationItem = protectionRule;
     },
     deleteProtectionRule(protectionRule) {
       this.clearAlertMessage();
 
-      this.protectionRuleDeletionInProgress = true;
+      this.protectionRuleMutationInProgress = true;
 
       return this.$apollo
         .mutate({
@@ -175,30 +171,78 @@ export default {
           this.alertErrorMessage = e.message;
         })
         .finally(() => {
-          this.protectionRuleDeletionItem = null;
-          this.protectionRuleDeletionInProgress = false;
+          this.resetProtectionRuleMutation();
+        });
+    },
+    updatePackageProtectionRule(packageProtectionRule) {
+      this.clearAlertMessage();
+
+      this.protectionRuleMutationItem = packageProtectionRule;
+      this.protectionRuleMutationInProgress = true;
+
+      return this.$apollo
+        .mutate({
+          mutation: updatePackagesProtectionRuleMutation,
+          variables: {
+            input: {
+              id: packageProtectionRule.id,
+              pushProtectedUpToAccessLevel: packageProtectionRule.pushProtectedUpToAccessLevel,
+            },
+          },
+        })
+        .then(({ data }) => {
+          const [errorMessage] = data?.updatePackagesProtectionRule?.errors ?? [];
+          if (errorMessage) {
+            this.alertErrorMessage = errorMessage;
+          }
+
+          this.$toast.show(s__('PackageRegistry|Package protection rule updated.'));
+        })
+        .catch((error) => {
+          this.alertErrorMessage = error.message;
+        })
+        .finally(() => {
+          this.resetProtectionRuleMutation();
         });
     },
     clearAlertMessage() {
       this.alertErrorMessage = '';
     },
+    resetProtectionRuleMutation() {
+      this.protectionRuleMutationItem = null;
+      this.protectionRuleMutationInProgress = false;
+    },
+    isProtectionRulePushProtectedUpToAccessLevelFormSelectDisabled(item) {
+      return this.isProtectionRuleMutationInProgress(item);
+    },
+    isProtectionRuleDeleteButtonDisabled(item) {
+      return this.isProtectionRuleMutationInProgress(item);
+    },
+    isProtectionRuleMutationInProgress(item) {
+      return this.protectionRuleMutationItem === item && this.protectionRuleMutationInProgress;
+    },
   },
-  table: {},
   fields: [
     {
       key: 'col_1_package_name_pattern',
       label: s__('PackageRegistry|Package name pattern'),
+      tdClass: 'gl-w-30',
+    },
+    {
+      key: 'col_2_package_type',
+      label: s__('PackageRegistry|Package type'),
+      tdClass: 'gl-w-10',
     },
-    { key: 'col_2_package_type', label: s__('PackageRegistry|Package type') },
     {
       key: 'col_3_push_protected_up_to_access_level',
       label: s__('PackageRegistry|Push protected up to access level'),
+      tdClass: 'gl-w-15',
     },
     {
       key: 'col_4_actions',
       label: '',
       thClass: 'gl-display-none',
-      tdClass: 'gl-w-15p',
+      tdClass: 'gl-w-10',
     },
   ],
   modal: { id: 'delete-package-protection-rule-confirmation-modal' },
@@ -262,13 +306,24 @@ export default {
               <gl-loading-icon size="sm" class="gl-my-5" />
             </template>
 
+            <template #cell(col_3_push_protected_up_to_access_level)="{ item }">
+              <gl-form-select
+                v-model="item.pushProtectedUpToAccessLevel"
+                required
+                :aria-label="s__('PackageRegistry|Push protected up to access level')"
+                :options="pushProtectedUpToAccessLevelOptions"
+                :disabled="isProtectionRulePushProtectedUpToAccessLevelFormSelectDisabled(item)"
+                @change="updatePackageProtectionRule(item)"
+              />
+            </template>
+
             <template #cell(col_4_actions)="{ item }">
               <gl-button
                 v-gl-modal="$options.modal.id"
                 category="secondary"
                 variant="danger"
                 size="small"
-                :disabled="isButtonDisabled(item)"
+                :disabled="isProtectionRuleDeleteButtonDisabled(item)"
                 @click="showProtectionRuleDeletionConfirmModal(item)"
                 >{{ __('Delete') }}</gl-button
               >
@@ -293,7 +348,7 @@ export default {
         :title="$options.i18n.protectionRuleDeletionConfirmModal.title"
         :action-primary="modalActionPrimary"
         :action-cancel="modalActionCancel"
-        @primary="deleteProtectionRule(protectionRuleDeletionItem)"
+        @primary="deleteProtectionRule(protectionRuleMutationItem)"
       >
         <p>{{ $options.i18n.protectionRuleDeletionConfirmModal.description }}</p>
       </gl-modal>
diff --git a/app/assets/javascripts/packages_and_registries/settings/project/graphql/mutations/update_packages_protection_rule.mutation.graphql b/app/assets/javascripts/packages_and_registries/settings/project/graphql/mutations/update_packages_protection_rule.mutation.graphql
new file mode 100644
index 00000000000000..a1087849469108
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/settings/project/graphql/mutations/update_packages_protection_rule.mutation.graphql
@@ -0,0 +1,10 @@
+mutation updatePackagesProtectionRule($input: UpdatePackagesProtectionRuleInput!) {
+  updatePackagesProtectionRule(input: $input) {
+    packageProtectionRule {
+      id
+      packageType
+      packageNamePattern
+    }
+    errors
+  }
+}
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index fcab04af97ba48..969951c1cd070a 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -35426,6 +35426,9 @@ msgstr ""
 msgid "PackageRegistry|Package protection rule deleted."
 msgstr ""
 
+msgid "PackageRegistry|Package protection rule updated."
+msgstr ""
+
 msgid "PackageRegistry|Package protection rules"
 msgstr ""
 
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 45088d49c8221b..b6191120112abc 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
@@ -11,10 +11,12 @@ import PackagesProtectionRuleForm from '~/packages_and_registries/settings/proje
 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 {
   packagesProtectionRuleQueryPayload,
   packagesProtectionRulesData,
   deletePackagesProtectionRuleMutationPayload,
+  updatePackagesProtectionRuleMutationPayload,
 } from '../mock_data';
 
 Vue.use(VueApollo);
@@ -64,11 +66,15 @@ describe('Packages protection rules project settings', () => {
     deletePackagesProtectionRuleMutationResolver = jest
       .fn()
       .mockResolvedValue(deletePackagesProtectionRuleMutationPayload()),
+    updatePackagesProtectionRuleMutationResolver = jest
+      .fn()
+      .mockResolvedValue(updatePackagesProtectionRuleMutationPayload()),
     config = {},
   } = {}) => {
     const requestHandlers = [
       [packagesProtectionRuleQuery, packagesProtectionRuleQueryResolver],
       [deletePackagesProtectionRuleMutation, deletePackagesProtectionRuleMutationResolver],
+      [updatePackagesProtectionRuleMutation, updatePackagesProtectionRuleMutationResolver],
     ];
 
     fakeApollo = createMockApollo(requestHandlers);
@@ -88,7 +94,10 @@ describe('Packages protection rules project settings', () => {
     expect(findTable().exists()).toBe(true);
   });
 
-  describe('table "package protection rules"', () => {
+  describe('table package protection rules', () => {
+    const findComboboxInTableRow = (i) =>
+      findTableRow(i).findByRole('combobox', { name: /Push protected up to access level/i });
+
     it('renders table with packages protection rules', async () => {
       createComponent({ mountFn: mountExtended });
 
@@ -268,6 +277,150 @@ describe('Packages protection rules project settings', () => {
           });
         });
       });
+
+      describe('column "Push protected up to access level" with selectbox (combobox)', () => {
+        it('contains combobox with respective access level', async () => {
+          createComponent({ mountFn: mountExtended });
+
+          await waitForPromises();
+
+          expect(findComboboxInTableRow(0).isVisible()).toBe(true);
+          expect(findComboboxInTableRow(0).attributes('disabled')).toBeUndefined();
+          expect(findComboboxInTableRow(0).element.value).toBe(
+            packagesProtectionRulesData[0].pushProtectedUpToAccessLevel,
+          );
+        });
+
+        it('contains combobox with allowed access levels', async () => {
+          createComponent({ mountFn: mountExtended });
+
+          await waitForPromises();
+
+          const pushProtectedUpToAccessLevelSelectOptions = findComboboxInTableRow(1)
+            .findAll('option')
+            .wrappers.map((option) => option.element.value);
+          expect(pushProtectedUpToAccessLevelSelectOptions).toEqual([
+            'DEVELOPER',
+            'MAINTAINER',
+            'OWNER',
+          ]);
+        });
+
+        describe('when value changes', () => {
+          const newPushProtectedUpToAccessLevelValue = 'OWNER';
+
+          it('sends graphql mutation', async () => {
+            const updatePackagesProtectionRuleMutationResolver = jest
+              .fn()
+              .mockResolvedValue(updatePackagesProtectionRuleMutationPayload());
+
+            createComponent({
+              mountFn: mountExtended,
+              updatePackagesProtectionRuleMutationResolver,
+            });
+
+            await waitForPromises();
+
+            await findComboboxInTableRow(0).setValue(newPushProtectedUpToAccessLevelValue);
+
+            expect(updatePackagesProtectionRuleMutationResolver).toHaveBeenCalledTimes(1);
+            expect(updatePackagesProtectionRuleMutationResolver).toHaveBeenCalledWith({
+              input: {
+                id: packagesProtectionRulesData[0].id,
+                pushProtectedUpToAccessLevel: newPushProtectedUpToAccessLevelValue,
+              },
+            });
+          });
+
+          it('disables only the changed selectbox and keeps other selectboxes in other table rows active when graphql mutation is in progress', async () => {
+            createComponent({ mountFn: mountExtended });
+
+            await waitForPromises();
+
+            await findComboboxInTableRow(0).setValue(newPushProtectedUpToAccessLevelValue);
+
+            expect(findComboboxInTableRow(0).props('disabled')).toBe(true);
+            expect(findComboboxInTableRow(1).props('disabled')).toBe(false);
+
+            await waitForPromises();
+
+            expect(findComboboxInTableRow(0).props('disabled')).toBe(false);
+            expect(findComboboxInTableRow(1).props('disabled')).toBe(false);
+          });
+
+          it('disables selectbox (and other interactive elements in table row) when graphql mutation is in progress', async () => {
+            createComponent({ mountFn: mountExtended });
+
+            await waitForPromises();
+
+            await findComboboxInTableRow(0).setValue(newPushProtectedUpToAccessLevelValue);
+
+            expect(findComboboxInTableRow(0).props('disabled')).toBe(true);
+            expect(findTableRowButtonDelete(0).props('disabled')).toBe(true);
+
+            await waitForPromises();
+
+            expect(findComboboxInTableRow(1).props('disabled')).toBe(false);
+            expect(findTableRowButtonDelete(1).props('disabled')).toBe(false);
+          });
+
+          it('handles erroneous graphql mutation', async () => {
+            const updatePackagesProtectionRuleMutationResolver = jest
+              .fn()
+              .mockRejectedValue(new Error('error'));
+
+            createComponent({
+              mountFn: mountExtended,
+              updatePackagesProtectionRuleMutationResolver,
+            });
+
+            await waitForPromises();
+
+            await findComboboxInTableRow(0).setValue(newPushProtectedUpToAccessLevelValue);
+
+            await waitForPromises();
+
+            expect(findAlert().isVisible()).toBe(true);
+            expect(findAlert().text()).toBe('error');
+          });
+
+          it('handles graphql mutation with error response', async () => {
+            const serverErrorMessage = 'Server error message';
+            const updatePackagesProtectionRuleMutationResolver = jest.fn().mockResolvedValue(
+              updatePackagesProtectionRuleMutationPayload({
+                packageProtectionRule: null,
+                errors: [serverErrorMessage],
+              }),
+            );
+
+            createComponent({
+              mountFn: mountExtended,
+              updatePackagesProtectionRuleMutationResolver,
+            });
+
+            await waitForPromises();
+
+            await findComboboxInTableRow(0).setValue(newPushProtectedUpToAccessLevelValue);
+
+            await waitForPromises();
+
+            expect(findAlert().isVisible()).toBe(true);
+            expect(findAlert().text()).toBe(serverErrorMessage);
+          });
+
+          it('shows a toast with success message', async () => {
+            createComponent({ mountFn: mountExtended });
+
+            await waitForPromises();
+
+            await findComboboxInTableRow(0).setValue(newPushProtectedUpToAccessLevelValue);
+
+            await waitForPromises();
+
+            expect($toast.show).toHaveBeenCalledWith('Package protection rule updated.');
+          });
+        });
+      });
     });
   });
 
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js b/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js
index 23a1179011d0d6..0b6bdc76f2c428 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js
@@ -150,3 +150,18 @@ export const deletePackagesProtectionRuleMutationPayload = ({
     },
   },
 });
+
+export const updatePackagesProtectionRuleMutationPayload = ({
+  packageProtectionRule = {
+    ...packagesProtectionRulesData[0],
+    pushProtectedUpToAccessLevel: 'OWNER',
+  },
+  errors = [],
+} = {}) => ({
+  data: {
+    updatePackagesProtectionRule: {
+      packageProtectionRule,
+      errors,
+    },
+  },
+});
-- 
GitLab


From 769ccc3dc69262e39890d8fcae9510d51906f553 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Thu, 15 Feb 2024 09:45:26 +0000
Subject: [PATCH 2/6] refactor: Apply suggestion from @seggenberger

- Extract to external string to i18n to avoid code duplication
---
 .../project/components/packages_protection_rules.vue     | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rules.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rules.vue
index 8238d7d7f95dd8..b8fc8ccb65c58b 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rules.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rules.vue
@@ -20,6 +20,10 @@ import { s__, __ } from '~/locale';
 
 const PAGINATION_DEFAULT_PER_PAGE = 10;
 
+const I18N_PUSH_PROTECTED_UP_TO_ACCESS_LEVEL = s__(
+  'PackageRegistry|Push protected up to access level',
+);
+
 export default {
   components: {
     SettingsBlock,
@@ -48,6 +52,7 @@ export default {
         'PackageRegistry|Users with at least the Developer role for this project will be able to publish, edit, and delete packages.',
       ),
     },
+    pushProtectedUpToAccessLevel: I18N_PUSH_PROTECTED_UP_TO_ACCESS_LEVEL,
   },
   data() {
     return {
@@ -235,7 +240,7 @@ export default {
     },
     {
       key: 'col_3_push_protected_up_to_access_level',
-      label: s__('PackageRegistry|Push protected up to access level'),
+      label: I18N_PUSH_PROTECTED_UP_TO_ACCESS_LEVEL,
       tdClass: 'gl-w-15',
     },
     {
@@ -310,7 +315,7 @@ export default {
               <gl-form-select
                 v-model="item.pushProtectedUpToAccessLevel"
                 required
-                :aria-label="s__('PackageRegistry|Push protected up to access level')"
+                :aria-label="$options.i18n.pushProtectedUpToAccessLevel"
                 :options="pushProtectedUpToAccessLevelOptions"
                 :disabled="isProtectionRulePushProtectedUpToAccessLevelFormSelectDisabled(item)"
                 @change="updatePackageProtectionRule(item)"
-- 
GitLab


From e6cd967a26387cba827e79dcc46ac8ee4f04f08b Mon Sep 17 00:00:00 2001
From: Gerardo <gerardo@b310.de>
Date: Thu, 22 Feb 2024 10:19:44 +0100
Subject: [PATCH 3/6] refactor: Apply suggestion from @deepika.guliani

- Switching to `mountExtended` as default `mountFn` in tests
---
 .../packages_protection_rules_spec.js         | 69 ++++++++-----------
 1 file changed, 27 insertions(+), 42 deletions(-)

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 b6191120112abc..363192247e19d7 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
@@ -1,5 +1,4 @@
 import { GlLoadingIcon, GlKeysetPagination, GlModal } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import { mountExtended, extendedWrapper } from 'helpers/vue_test_utils_helper';
@@ -43,7 +42,7 @@ describe('Packages protection rules project settings', () => {
   const findAlert = () => wrapper.findByRole('alert');
   const findModal = () => wrapper.findComponent(GlModal);
 
-  const mountComponent = (mountFn = shallowMount, provide = defaultProvidedValues, config) => {
+  const mountComponent = (mountFn = mountExtended, provide = defaultProvidedValues, config) => {
     wrapper = mountFn(PackagesProtectionRules, {
       stubs: {
         SettingsBlock,
@@ -58,7 +57,7 @@ describe('Packages protection rules project settings', () => {
   };
 
   const createComponent = ({
-    mountFn = shallowMount,
+    mountFn = mountExtended,
     provide = defaultProvidedValues,
     packagesProtectionRuleQueryResolver = jest
       .fn()
@@ -86,7 +85,7 @@ describe('Packages protection rules project settings', () => {
   };
 
   it('renders the setting block with table', async () => {
-    createComponent({ mountFn: mountExtended });
+    createComponent();
 
     await waitForPromises();
 
@@ -94,12 +93,9 @@ describe('Packages protection rules project settings', () => {
     expect(findTable().exists()).toBe(true);
   });
 
-  describe('table package protection rules', () => {
-    const findComboboxInTableRow = (i) =>
-      findTableRow(i).findByRole('combobox', { name: /Push protected up to access level/i });
-
+  describe('table "package protection rules"', () => {
     it('renders table with packages protection rules', async () => {
-      createComponent({ mountFn: mountExtended });
+      createComponent();
 
       await waitForPromises();
 
@@ -115,7 +111,7 @@ describe('Packages protection rules project settings', () => {
     });
 
     it('displays table in busy state and shows loading icon inside table', async () => {
-      createComponent({ mountFn: mountExtended });
+      createComponent();
 
       expect(findTableLoadingIcon().exists()).toBe(true);
       expect(findTableLoadingIcon().attributes('aria-label')).toBe('Loading');
@@ -143,7 +139,7 @@ describe('Packages protection rules project settings', () => {
       const findPagination = () => wrapper.findComponent(GlKeysetPagination);
 
       it('renders pagination', async () => {
-        createComponent({ mountFn: mountExtended });
+        createComponent();
 
         await waitForPromises();
 
@@ -190,7 +186,7 @@ describe('Packages protection rules project settings', () => {
           extendedWrapper(findPagination()).findByRole('button', { name: 'Previous' });
 
         beforeEach(async () => {
-          createComponent({ mountFn: mountExtended, packagesProtectionRuleQueryResolver });
+          createComponent({ packagesProtectionRuleQueryResolver });
 
           await waitForPromises();
 
@@ -229,7 +225,7 @@ describe('Packages protection rules project settings', () => {
           extendedWrapper(findPagination()).findByRole('button', { name: 'Next' });
 
         beforeEach(async () => {
-          createComponent({ mountFn: mountExtended, packagesProtectionRuleQueryResolver });
+          createComponent({ packagesProtectionRuleQueryResolver });
 
           await waitForPromises();
 
@@ -252,7 +248,7 @@ describe('Packages protection rules project settings', () => {
     describe('table rows', () => {
       describe('button "Delete"', () => {
         it('exists in table', async () => {
-          createComponent({ mountFn: mountExtended });
+          createComponent();
 
           await waitForPromises();
 
@@ -261,7 +257,7 @@ describe('Packages protection rules project settings', () => {
 
         describe('when button is clicked', () => {
           it('binds confirmation modal', async () => {
-            createComponent({ mountFn: mountExtended });
+            createComponent();
 
             await waitForPromises();
 
@@ -279,8 +275,11 @@ describe('Packages protection rules project settings', () => {
       });
 
       describe('column "Push protected up to access level" with selectbox (combobox)', () => {
+        const findComboboxInTableRow = (i) =>
+          findTableRow(i).findByRole('combobox', { name: /push protected up to access level/i });
+
         it('contains combobox with respective access level', async () => {
-          createComponent({ mountFn: mountExtended });
+          createComponent();
 
           await waitForPromises();
 
@@ -292,7 +291,7 @@ describe('Packages protection rules project settings', () => {
         });
 
         it('contains combobox with allowed access levels', async () => {
-          createComponent({ mountFn: mountExtended });
+          createComponent();
 
           await waitForPromises();
 
@@ -314,10 +313,7 @@ describe('Packages protection rules project settings', () => {
               .fn()
               .mockResolvedValue(updatePackagesProtectionRuleMutationPayload());
 
-            createComponent({
-              mountFn: mountExtended,
-              updatePackagesProtectionRuleMutationResolver,
-            });
+            createComponent({ updatePackagesProtectionRuleMutationResolver });
 
             await waitForPromises();
 
@@ -333,7 +329,7 @@ describe('Packages protection rules project settings', () => {
           });
 
           it('disables only the changed selectbox and keeps other selectboxes in other table rows active when graphql mutation is in progress', async () => {
-            createComponent({ mountFn: mountExtended });
+            createComponent();
 
             await waitForPromises();
 
@@ -349,7 +345,7 @@ describe('Packages protection rules project settings', () => {
           });
 
           it('disables selectbox (and other interactive elements in table row) when graphql mutation is in progress', async () => {
-            createComponent({ mountFn: mountExtended });
+            createComponent();
 
             await waitForPromises();
 
@@ -369,10 +365,7 @@ describe('Packages protection rules project settings', () => {
               .fn()
               .mockRejectedValue(new Error('error'));
 
-            createComponent({
-              mountFn: mountExtended,
-              updatePackagesProtectionRuleMutationResolver,
-            });
+            createComponent({ updatePackagesProtectionRuleMutationResolver });
 
             await waitForPromises();
 
@@ -393,10 +386,7 @@ describe('Packages protection rules project settings', () => {
               }),
             );
 
-            createComponent({
-              mountFn: mountExtended,
-              updatePackagesProtectionRuleMutationResolver,
-            });
+            createComponent({ updatePackagesProtectionRuleMutationResolver });
 
             await waitForPromises();
 
@@ -409,7 +399,7 @@ describe('Packages protection rules project settings', () => {
           });
 
           it('shows a toast with success message', async () => {
-            createComponent({ mountFn: mountExtended });
+            createComponent();
 
             await waitForPromises();
 
@@ -431,10 +421,7 @@ describe('Packages protection rules project settings', () => {
         .fn()
         .mockResolvedValue(deletePackagesProtectionRuleMutationPayload()),
     } = {}) => {
-      createComponent({
-        mountFn: mountExtended,
-        deletePackagesProtectionRuleMutationResolver,
-      });
+      createComponent({ deletePackagesProtectionRuleMutationResolver });
 
       await waitForPromises();
 
@@ -522,7 +509,6 @@ describe('Packages protection rules project settings', () => {
           .mockResolvedValue(packagesProtectionRuleQueryPayload());
 
         createComponent({
-          mountFn: mountExtended,
           packagesProtectionRuleQueryResolver,
           deletePackagesProtectionRuleMutationResolver,
         });
@@ -553,7 +539,7 @@ describe('Packages protection rules project settings', () => {
   });
 
   it('does not initially render package protection form', async () => {
-    createComponent({ mountFn: mountExtended });
+    createComponent();
 
     await waitForPromises();
 
@@ -563,7 +549,7 @@ describe('Packages protection rules project settings', () => {
 
   describe('button "Add protection rule"', () => {
     it('button exists', async () => {
-      createComponent({ mountFn: mountExtended });
+      createComponent();
 
       await waitForPromises();
 
@@ -572,7 +558,7 @@ describe('Packages protection rules project settings', () => {
 
     describe('when button is clicked', () => {
       beforeEach(async () => {
-        createComponent({ mountFn: mountExtended });
+        createComponent();
 
         await waitForPromises();
 
@@ -597,7 +583,7 @@ describe('Packages protection rules project settings', () => {
         .fn()
         .mockResolvedValue(packagesProtectionRuleQueryPayload());
 
-      createComponent({ packagesProtectionRuleQueryResolver, mountFn: mountExtended });
+      createComponent({ packagesProtectionRuleQueryResolver });
 
       await waitForPromises();
 
@@ -629,7 +615,6 @@ describe('Packages protection rules project settings', () => {
     it('renders alert and dismisses it correctly', async () => {
       const alertErrorMessage = 'Error message';
       createComponent({
-        mountFn: mountExtended,
         config: {
           data() {
             return {
-- 
GitLab


From 6c78716ba1839af2b7dd0e1b5b6763e455cde901 Mon Sep 17 00:00:00 2001
From: Gerardo <gerardo@b310.de>
Date: Thu, 22 Feb 2024 10:27:55 +0100
Subject: [PATCH 4/6] test: Retructures test cases for more readability

- Small adjustments in test structure
---
 .../packages_protection_rules_spec.js         | 240 +++++++++---------
 1 file changed, 120 insertions(+), 120 deletions(-)

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 363192247e19d7..1cd31135c962d5 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
@@ -245,176 +245,176 @@ describe('Packages protection rules project settings', () => {
       });
     });
 
-    describe('table rows', () => {
-      describe('button "Delete"', () => {
-        it('exists in table', async () => {
-          createComponent();
+    describe('column "Push protected up to access level" with selectbox (combobox)', () => {
+      const findComboboxInTableRow = (i) =>
+        findTableRow(i).findByRole('combobox', { name: /push protected up to access level/i });
 
-          await waitForPromises();
+      it('contains combobox with respective access level', async () => {
+        createComponent();
 
-          expect(findTableRowButtonDelete(0).exists()).toBe(true);
-        });
+        await waitForPromises();
 
-        describe('when button is clicked', () => {
-          it('binds confirmation modal', async () => {
-            createComponent();
+        expect(findComboboxInTableRow(0).isVisible()).toBe(true);
+        expect(findComboboxInTableRow(0).attributes('disabled')).toBeUndefined();
+        expect(findComboboxInTableRow(0).element.value).toBe(
+          packagesProtectionRulesData[0].pushProtectedUpToAccessLevel,
+        );
+      });
 
-            await waitForPromises();
+      it('contains combobox with allowed access levels', async () => {
+        createComponent();
 
-            const modalId = getBinding(findTableRowButtonDelete(0).element, 'gl-modal');
+        await waitForPromises();
 
-            expect(findModal().props('modal-id')).toBe(modalId);
-            expect(findModal().props('title')).toBe(
-              'Are you sure you want to delete the package protection rule?',
-            );
-            expect(findModal().text()).toBe(
-              'Users with at least the Developer role for this project will be able to publish, edit, and delete packages.',
-            );
-          });
-        });
+        const pushProtectedUpToAccessLevelSelectOptions = findComboboxInTableRow(1)
+          .findAll('option')
+          .wrappers.map((option) => option.element.value);
+        expect(pushProtectedUpToAccessLevelSelectOptions).toEqual([
+          'DEVELOPER',
+          'MAINTAINER',
+          'OWNER',
+        ]);
       });
 
-      describe('column "Push protected up to access level" with selectbox (combobox)', () => {
-        const findComboboxInTableRow = (i) =>
-          findTableRow(i).findByRole('combobox', { name: /push protected up to access level/i });
+      describe('when value changes', () => {
+        const newPushProtectedUpToAccessLevelValue = 'OWNER';
 
-        it('contains combobox with respective access level', async () => {
-          createComponent();
+        it('sends graphql mutation', async () => {
+          const updatePackagesProtectionRuleMutationResolver = jest
+            .fn()
+            .mockResolvedValue(updatePackagesProtectionRuleMutationPayload());
+
+          createComponent({ updatePackagesProtectionRuleMutationResolver });
 
           await waitForPromises();
 
-          expect(findComboboxInTableRow(0).isVisible()).toBe(true);
-          expect(findComboboxInTableRow(0).attributes('disabled')).toBeUndefined();
-          expect(findComboboxInTableRow(0).element.value).toBe(
-            packagesProtectionRulesData[0].pushProtectedUpToAccessLevel,
-          );
+          await findComboboxInTableRow(0).setValue(newPushProtectedUpToAccessLevelValue);
+
+          expect(updatePackagesProtectionRuleMutationResolver).toHaveBeenCalledTimes(1);
+          expect(updatePackagesProtectionRuleMutationResolver).toHaveBeenCalledWith({
+            input: {
+              id: packagesProtectionRulesData[0].id,
+              pushProtectedUpToAccessLevel: newPushProtectedUpToAccessLevelValue,
+            },
+          });
         });
 
-        it('contains combobox with allowed access levels', async () => {
+        it('disables only the changed selectbox and keeps other selectboxes in other table rows active when graphql mutation is in progress', async () => {
           createComponent();
 
           await waitForPromises();
 
-          const pushProtectedUpToAccessLevelSelectOptions = findComboboxInTableRow(1)
-            .findAll('option')
-            .wrappers.map((option) => option.element.value);
-          expect(pushProtectedUpToAccessLevelSelectOptions).toEqual([
-            'DEVELOPER',
-            'MAINTAINER',
-            'OWNER',
-          ]);
-        });
-
-        describe('when value changes', () => {
-          const newPushProtectedUpToAccessLevelValue = 'OWNER';
+          await findComboboxInTableRow(0).setValue(newPushProtectedUpToAccessLevelValue);
 
-          it('sends graphql mutation', async () => {
-            const updatePackagesProtectionRuleMutationResolver = jest
-              .fn()
-              .mockResolvedValue(updatePackagesProtectionRuleMutationPayload());
+          expect(findComboboxInTableRow(0).props('disabled')).toBe(true);
+          expect(findComboboxInTableRow(1).props('disabled')).toBe(false);
 
-            createComponent({ updatePackagesProtectionRuleMutationResolver });
+          await waitForPromises();
 
-            await waitForPromises();
+          expect(findComboboxInTableRow(0).props('disabled')).toBe(false);
+          expect(findComboboxInTableRow(1).props('disabled')).toBe(false);
+        });
 
-            await findComboboxInTableRow(0).setValue(newPushProtectedUpToAccessLevelValue);
+        it('disables selectbox (and other interactive elements in table row) when graphql mutation is in progress', async () => {
+          createComponent();
 
-            expect(updatePackagesProtectionRuleMutationResolver).toHaveBeenCalledTimes(1);
-            expect(updatePackagesProtectionRuleMutationResolver).toHaveBeenCalledWith({
-              input: {
-                id: packagesProtectionRulesData[0].id,
-                pushProtectedUpToAccessLevel: newPushProtectedUpToAccessLevelValue,
-              },
-            });
-          });
+          await waitForPromises();
 
-          it('disables only the changed selectbox and keeps other selectboxes in other table rows active when graphql mutation is in progress', async () => {
-            createComponent();
+          await findComboboxInTableRow(0).setValue(newPushProtectedUpToAccessLevelValue);
 
-            await waitForPromises();
+          expect(findComboboxInTableRow(0).props('disabled')).toBe(true);
+          expect(findTableRowButtonDelete(0).props('disabled')).toBe(true);
 
-            await findComboboxInTableRow(0).setValue(newPushProtectedUpToAccessLevelValue);
+          await waitForPromises();
 
-            expect(findComboboxInTableRow(0).props('disabled')).toBe(true);
-            expect(findComboboxInTableRow(1).props('disabled')).toBe(false);
+          expect(findComboboxInTableRow(1).props('disabled')).toBe(false);
+          expect(findTableRowButtonDelete(1).props('disabled')).toBe(false);
+        });
 
-            await waitForPromises();
+        it('handles erroneous graphql mutation', async () => {
+          const updatePackagesProtectionRuleMutationResolver = jest
+            .fn()
+            .mockRejectedValue(new Error('error'));
 
-            expect(findComboboxInTableRow(0).props('disabled')).toBe(false);
-            expect(findComboboxInTableRow(1).props('disabled')).toBe(false);
-          });
+          createComponent({ updatePackagesProtectionRuleMutationResolver });
 
-          it('disables selectbox (and other interactive elements in table row) when graphql mutation is in progress', async () => {
-            createComponent();
+          await waitForPromises();
 
-            await waitForPromises();
+          await findComboboxInTableRow(0).setValue(newPushProtectedUpToAccessLevelValue);
 
-            await findComboboxInTableRow(0).setValue(newPushProtectedUpToAccessLevelValue);
+          await waitForPromises();
 
-            expect(findComboboxInTableRow(0).props('disabled')).toBe(true);
-            expect(findTableRowButtonDelete(0).props('disabled')).toBe(true);
+          expect(findAlert().isVisible()).toBe(true);
+          expect(findAlert().text()).toBe('error');
+        });
 
-            await waitForPromises();
+        it('handles graphql mutation with error response', async () => {
+          const serverErrorMessage = 'Server error message';
+          const updatePackagesProtectionRuleMutationResolver = jest.fn().mockResolvedValue(
+            updatePackagesProtectionRuleMutationPayload({
+              packageProtectionRule: null,
+              errors: [serverErrorMessage],
+            }),
+          );
 
-            expect(findComboboxInTableRow(1).props('disabled')).toBe(false);
-            expect(findTableRowButtonDelete(1).props('disabled')).toBe(false);
-          });
+          createComponent({ updatePackagesProtectionRuleMutationResolver });
 
-          it('handles erroneous graphql mutation', async () => {
-            const updatePackagesProtectionRuleMutationResolver = jest
-              .fn()
-              .mockRejectedValue(new Error('error'));
+          await waitForPromises();
 
-            createComponent({ updatePackagesProtectionRuleMutationResolver });
+          await findComboboxInTableRow(0).setValue(newPushProtectedUpToAccessLevelValue);
 
-            await waitForPromises();
+          await waitForPromises();
 
-            await findComboboxInTableRow(0).setValue(newPushProtectedUpToAccessLevelValue);
+          expect(findAlert().isVisible()).toBe(true);
+          expect(findAlert().text()).toBe(serverErrorMessage);
+        });
 
-            await waitForPromises();
+        it('shows a toast with success message', async () => {
+          createComponent();
 
-            expect(findAlert().isVisible()).toBe(true);
-            expect(findAlert().text()).toBe('error');
-          });
+          await waitForPromises();
 
-          it('handles graphql mutation with error response', async () => {
-            const serverErrorMessage = 'Server error message';
-            const updatePackagesProtectionRuleMutationResolver = jest.fn().mockResolvedValue(
-              updatePackagesProtectionRuleMutationPayload({
-                packageProtectionRule: null,
-                errors: [serverErrorMessage],
-              }),
-            );
+          await findComboboxInTableRow(0).setValue(newPushProtectedUpToAccessLevelValue);
 
-            createComponent({ updatePackagesProtectionRuleMutationResolver });
+          await waitForPromises();
 
-            await waitForPromises();
+          expect($toast.show).toHaveBeenCalledWith('Package protection rule updated.');
+        });
+      });
+    });
 
-            await findComboboxInTableRow(0).setValue(newPushProtectedUpToAccessLevelValue);
+    describe('column "Actions"', () => {
+      describe('button "Delete"', () => {
+        it('exists in table', async () => {
+          createComponent();
 
-            await waitForPromises();
+          await waitForPromises();
 
-            expect(findAlert().isVisible()).toBe(true);
-            expect(findAlert().text()).toBe(serverErrorMessage);
-          });
+          expect(findTableRowButtonDelete(0).exists()).toBe(true);
+        });
 
-          it('shows a toast with success message', async () => {
+        describe('when button is clicked', () => {
+          it('binds modal "confirmation for delete action"', async () => {
             createComponent();
 
             await waitForPromises();
 
-            await findComboboxInTableRow(0).setValue(newPushProtectedUpToAccessLevelValue);
-
-            await waitForPromises();
+            const modalId = getBinding(findTableRowButtonDelete(0).element, 'gl-modal');
 
-            expect($toast.show).toHaveBeenCalledWith('Package protection rule updated.');
+            expect(findModal().props('modal-id')).toBe(modalId);
+            expect(findModal().props('title')).toBe(
+              'Are you sure you want to delete the package protection rule?',
+            );
+            expect(findModal().text()).toBe(
+              'Users with at least the Developer role for this project will be able to publish, edit, and delete packages.',
+            );
           });
         });
       });
     });
   });
 
-  describe('modal "confirmation"', () => {
+  describe('modal "confirmation for delete action"', () => {
     const createComponentAndClickButtonDeleteInTableRow = async ({
       tableRowIndex = 0,
       deletePackagesProtectionRuleMutationResolver = jest
@@ -538,22 +538,22 @@ describe('Packages protection rules project settings', () => {
     });
   });
 
-  it('does not initially render package protection form', async () => {
-    createComponent();
+  describe('button "Add protection rule"', () => {
+    it('button exists', async () => {
+      createComponent();
 
-    await waitForPromises();
+      await waitForPromises();
 
-    expect(findAddProtectionRuleButton().isVisible()).toBe(true);
-    expect(findProtectionRuleForm().exists()).toBe(false);
-  });
+      expect(findAddProtectionRuleButton().isVisible()).toBe(true);
+    });
 
-  describe('button "Add protection rule"', () => {
-    it('button exists', async () => {
+    it('does not initially render form "add package protection"', async () => {
       createComponent();
 
       await waitForPromises();
 
       expect(findAddProtectionRuleButton().isVisible()).toBe(true);
+      expect(findProtectionRuleForm().exists()).toBe(false);
     });
 
     describe('when button is clicked', () => {
@@ -565,7 +565,7 @@ describe('Packages protection rules project settings', () => {
         await findAddProtectionRuleButton().trigger('click');
       });
 
-      it('renders package protection form', () => {
+      it('renders form "add package protection"', () => {
         expect(findProtectionRuleForm().isVisible()).toBe(true);
       });
 
-- 
GitLab


From 748535457ab97e21f2020326d7826e92c631a061 Mon Sep 17 00:00:00 2001
From: Gerardo <gerardo@b310.de>
Date: Thu, 22 Feb 2024 10:40:38 +0100
Subject: [PATCH 5/6] test: Use testing library query to find options in select
 box

---
 .../components/packages_protection_rules_spec.js | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

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 1cd31135c962d5..1164010f75f639 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
@@ -247,7 +247,9 @@ describe('Packages protection rules project settings', () => {
 
     describe('column "Push protected up to access level" with selectbox (combobox)', () => {
       const findComboboxInTableRow = (i) =>
-        findTableRow(i).findByRole('combobox', { name: /push protected up to access level/i });
+        extendedWrapper(
+          findTableRow(i).findByRole('combobox', { name: /push protected up to access level/i }),
+        );
 
       it('contains combobox with respective access level', async () => {
         createComponent();
@@ -266,14 +268,10 @@ describe('Packages protection rules project settings', () => {
 
         await waitForPromises();
 
-        const pushProtectedUpToAccessLevelSelectOptions = findComboboxInTableRow(1)
-          .findAll('option')
-          .wrappers.map((option) => option.element.value);
-        expect(pushProtectedUpToAccessLevelSelectOptions).toEqual([
-          'DEVELOPER',
-          'MAINTAINER',
-          'OWNER',
-        ]);
+        ['Developer', 'Maintainer', 'Owner'].forEach((optionName) => {
+          const selectOption = findComboboxInTableRow(0).findByRole('option', { name: optionName });
+          expect(selectOption.exists()).toBe(true);
+        });
       });
 
       describe('when value changes', () => {
-- 
GitLab


From fdb6e318173770c5114f01530dc37dccd650141a Mon Sep 17 00:00:00 2001
From: Gerardo <gerardo@b310.de>
Date: Tue, 27 Feb 2024 18:11:43 +0100
Subject: [PATCH 6/6] refactor: Apply suggestion from @ankit.panchal

- Adding test that ensures that select boxes in different rows only changes the value of the respective row; this will also indirectly test the method `resetProtectionRuleMutation` and increase the test coverage.
---
 .../packages_protection_rules_spec.js         | 34 ++++++++++++++-----
 1 file changed, 26 insertions(+), 8 deletions(-)

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 1164010f75f639..2939739f430b06 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
@@ -275,7 +275,25 @@ describe('Packages protection rules project settings', () => {
       });
 
       describe('when value changes', () => {
-        const newPushProtectedUpToAccessLevelValue = 'OWNER';
+        const accessLevelValueOwner = 'OWNER';
+        const accessLevelValueMaintainer = 'MAINTAINER';
+        const accessLevelValueDeveloper = 'DEVELOPER';
+
+        it('only changes the value of the selectbox in the same row', async () => {
+          createComponent();
+
+          await waitForPromises();
+
+          expect(findComboboxInTableRow(0).props('value')).toBe(accessLevelValueMaintainer);
+          await findComboboxInTableRow(0).setValue(accessLevelValueOwner);
+          expect(findComboboxInTableRow(0).props('value')).toBe(accessLevelValueOwner);
+
+          expect(findComboboxInTableRow(1).props('value')).toBe(accessLevelValueMaintainer);
+          await findComboboxInTableRow(1).setValue(accessLevelValueDeveloper);
+          expect(findComboboxInTableRow(1).props('value')).toBe(accessLevelValueDeveloper);
+
+          expect(findComboboxInTableRow(0).props('value')).toBe(accessLevelValueOwner);
+        });
 
         it('sends graphql mutation', async () => {
           const updatePackagesProtectionRuleMutationResolver = jest
@@ -286,13 +304,13 @@ describe('Packages protection rules project settings', () => {
 
           await waitForPromises();
 
-          await findComboboxInTableRow(0).setValue(newPushProtectedUpToAccessLevelValue);
+          await findComboboxInTableRow(0).setValue(accessLevelValueOwner);
 
           expect(updatePackagesProtectionRuleMutationResolver).toHaveBeenCalledTimes(1);
           expect(updatePackagesProtectionRuleMutationResolver).toHaveBeenCalledWith({
             input: {
               id: packagesProtectionRulesData[0].id,
-              pushProtectedUpToAccessLevel: newPushProtectedUpToAccessLevelValue,
+              pushProtectedUpToAccessLevel: accessLevelValueOwner,
             },
           });
         });
@@ -302,7 +320,7 @@ describe('Packages protection rules project settings', () => {
 
           await waitForPromises();
 
-          await findComboboxInTableRow(0).setValue(newPushProtectedUpToAccessLevelValue);
+          await findComboboxInTableRow(0).setValue(accessLevelValueOwner);
 
           expect(findComboboxInTableRow(0).props('disabled')).toBe(true);
           expect(findComboboxInTableRow(1).props('disabled')).toBe(false);
@@ -318,7 +336,7 @@ describe('Packages protection rules project settings', () => {
 
           await waitForPromises();
 
-          await findComboboxInTableRow(0).setValue(newPushProtectedUpToAccessLevelValue);
+          await findComboboxInTableRow(0).setValue(accessLevelValueOwner);
 
           expect(findComboboxInTableRow(0).props('disabled')).toBe(true);
           expect(findTableRowButtonDelete(0).props('disabled')).toBe(true);
@@ -338,7 +356,7 @@ describe('Packages protection rules project settings', () => {
 
           await waitForPromises();
 
-          await findComboboxInTableRow(0).setValue(newPushProtectedUpToAccessLevelValue);
+          await findComboboxInTableRow(0).setValue(accessLevelValueOwner);
 
           await waitForPromises();
 
@@ -359,7 +377,7 @@ describe('Packages protection rules project settings', () => {
 
           await waitForPromises();
 
-          await findComboboxInTableRow(0).setValue(newPushProtectedUpToAccessLevelValue);
+          await findComboboxInTableRow(0).setValue(accessLevelValueOwner);
 
           await waitForPromises();
 
@@ -372,7 +390,7 @@ describe('Packages protection rules project settings', () => {
 
           await waitForPromises();
 
-          await findComboboxInTableRow(0).setValue(newPushProtectedUpToAccessLevelValue);
+          await findComboboxInTableRow(0).setValue(accessLevelValueOwner);
 
           await waitForPromises();
 
-- 
GitLab