E2E: Usage Quotas Page data-testid Migration

Migrates data-qa-selectors in Gitlab::Page::Group::Settings::UsageQuotas
to data-testids

.rubocop_todo/capybara/testid_finders.yml

@@ -45,7 +45,6 @@ Capybara/TestidFinders:
     - 'ee/spec/features/groups/show_spec.rb'
     - 'ee/spec/features/groups/usage_quotas/pipelines_tab_spec.rb'
     - 'ee/spec/features/groups/usage_quotas/seats_tab_spec.rb'
-    - 'ee/spec/features/groups/usage_quotas/usage_quotas_spec.rb'
     - 'ee/spec/features/incidents/incident_details_spec.rb'
     - 'ee/spec/features/incidents/user_uploads_metric_images_spec.rb'
     - 'ee/spec/features/issues/blocking_issues_spec.rb'

app/assets/javascripts/usage_quotas/storage/components/usage_graph.vue

@@ -121,7 +121,6 @@ export default {
         :key="storageType.name"
         class="col-md-auto gl-display-flex gl-align-items-center"
         data-testid="storage-type-legend"
-        data-qa-selector="storage_type_legend"
       >
         <div class="gl-h-2 gl-w-5 gl-mr-2 gl-display-inline-block" :class="storageType.class"></div>
         <span class="gl-mr-2 gl-font-weight-bold gl-font-sm">

ee/app/assets/javascripts/pending_members/components/app.vue

@@ -159,8 +159,7 @@ export default {
           v-for="item in tableItems"
           :key="item.id"
           class="gl-p-5 gl-border-0 gl-border-b-1! gl-border-gray-100 gl-border-solid gl-display-flex gl-justify-content-space-between"
-          data-testid="pending-members-row"
-          data-qa-selector="pending_members"
+          data-testid="pending-members"
         >
           <gl-avatar-link target="blank" :href="item.web_url" :alt="item.name">
             <gl-avatar-labeled
@@ -179,14 +178,13 @@ export default {
             v-gl-modal-directive="`approve-confirmation-modal-${item.id}`"
             :loading="item.loading"
             :disabled="item.approved"
-            data-qa-selector="approve_member"
+            data-testid="approve-member"
           >
             {{ $options.LABEL_APPROVE }}
           </gl-button>
           <gl-modal
             :modal-id="`approve-confirmation-modal-${item.id}`"
             :title="$options.LABEL_CONFIRM"
-            data-qa-selector="approve_member_confirmation_modal"
             no-fade
             @primary="approveMember(item.id)"
           >

ee/app/assets/javascripts/usage_quotas/pipelines/components/app.vue

@@ -277,7 +277,7 @@ export default {
           :class="{ 'gl-pt-5': !shouldShowBuyAdditionalMinutes }"
           :minutes-title="monthlyUsageTitle"
           :minutes-used="monthlyMinutesUsed"
-          minutes-used-qa-selector="plan_ci_minutes"
+          minutes-used-testid-selector="plan-ci-minutes"
           :minutes-used-percentage="usagePercentage(ciMinutesMonthlyMinutesUsedPercentage)"
           :minutes-limit="ciMinutesMonthlyMinutesLimit"
           :help-link-href="$options.CI_MINUTES_HELP_LINK"
@@ -289,7 +289,7 @@ export default {
           class="gl-pt-5"
           :minutes-title="$options.ADDITIONAL_MINUTES"
           :minutes-used="purchasedMinutesUsed"
-          minutes-used-qa-selector="additional_ci_minutes"
+          minutes-used-testid-selector="additional-ci-minutes"
           :minutes-used-percentage="usagePercentage(ciMinutesPurchasedMinutesUsedPercentage)"
           :minutes-limit="ciMinutesPurchasedMinutesLimit"
           :help-link-href="$options.ADDITIONAL_MINUTES_HELP_LINK"

ee/app/assets/javascripts/usage_quotas/pipelines/components/usage_overview.vue

@@ -14,10 +14,10 @@ export default {
       type: String,
       required: true,
     },
-    minutesUsedQaSelector: {
+    minutesUsedTestidSelector: {
       type: String,
       required: false,
-      default: '',
+      default: 'minutes-used',
     },
     minutesUsedPercentage: {
       type: String,
@@ -47,7 +47,7 @@ export default {
       <h5 class="gl-m-0" data-testid="minutes-title">
         {{ minutesTitle }}
       </h5>
-      <div :data-qa-selector="minutesUsedQaSelector" data-testid="minutes-used">
+      <div :data-testid="minutesUsedTestidSelector">
         {{ minutesUsed }}
         <gl-link :href="helpLinkHref" :aria-label="helpLinkLabel">
           <gl-icon name="question-o" :size="12" />

ee/app/assets/javascripts/usage_quotas/seats/components/statistics_seats_card.vue

@@ -106,8 +106,7 @@ export default {
       <p
         v-if="shouldRenderSeatsUsedBlock"
         class="gl-font-size-h-display gl-font-weight-bold gl-mb-3"
-        data-testid="seats-used-block"
-        data-qa-selector="seats_used"
+        data-testid="seats-used"
       >
         <span class="gl-relative gl-top-1">
           {{ seatsUsed }}
@@ -126,8 +125,7 @@ export default {
       <p
         v-if="shouldRenderSeatsOwedBlock"
         class="gl-font-size-h-display gl-font-weight-bold gl-mb-0"
-        data-testid="seats-owed-block"
-        data-qa-selector="seats_owed"
+        data-testid="seats-owed"
       >
         <span class="gl-relative gl-top-1">
           {{ seatsOwed }}
@@ -152,7 +150,6 @@ export default {
       variant="confirm"
       class="gl-ml-3 gl-align-self-start"
       data-testid="purchase-button"
-      data-qa-selector="add_seats"
       @click="handleAddSeats"
     >
       {{ $options.i18n.addSeatsText }}

ee/app/assets/javascripts/usage_quotas/seats/components/subscription_seats.vue

@@ -153,7 +153,6 @@ export default {
       :primary-button-text="$options.i18n.pendingMembersAlertButtonText"
       class="gl-my-3"
       data-testid="pending-members-alert"
-      data-qa-selector="pending_members_alert"
       @primaryAction="navigateToPendingMembersPage"
     >
       {{ pendingMembersAlertMessage }}
@@ -190,7 +189,7 @@ export default {
           :percentage="seatsInUsePercentage"
           :usage-value="String(totalSeatsInUse)"
           :total-value="displayedTotalSeats"
-          data-qa-selector="seats_in_use"
+          data-testid="seats-in-use"
         />
         <subscription-upgrade-info-card
           v-if="showUpgradeInfoCard"

ee/app/assets/javascripts/usage_quotas/seats/components/subscription_usage_statistics_card.vue

@@ -118,7 +118,6 @@ export default {
           size="small"
           variant="default"
           data-testid="add-seats"
-          data-qa-selector="add_seats"
         >
           {{ $options.i18n.addSeatsText }}
         </gl-button>
@@ -144,7 +143,7 @@ export default {
       </template>
       <template #additional-info>
         <div class="gl-mt-5 gl-mb-3 gl-display-grid gl-grid-template-columns-2 gl-gap-3">
-          <div class="gl-font-weight-bold" data-qa-selector="seats_used" data-testid="seats-used">
+          <div class="gl-font-weight-bold" data-testid="seats-used">
             <span class="gl-display-inline-block gl-mr-3">{{ maxSeatsUsed }}</span>
             <span>{{ $options.i18n.seatsUsedText }}</span>
             <gl-link
@@ -161,7 +160,7 @@ export default {
             }}</span>
             <span data-testid="subscription-start-date">{{ formattedStartDate }}</span>
           </div>
-          <div class="gl-font-weight-bold" data-qa-selector="seats_owed" data-testid="seats-owed">
+          <div class="gl-font-weight-bold" data-testid="seats-owed">
             <span class="gl-display-inline-block gl-mr-3">{{ seatsOwed }}</span>
             <span>{{ $options.i18n.seatsOwedText }}</span>
             <gl-link

ee/app/assets/javascripts/usage_quotas/seats/components/subscription_user_list.vue

@@ -152,8 +152,7 @@ export default {
       :fields="$options.tableFields"
       :busy="isLoaderShown"
       :show-empty="true"
-      data-testid="table"
-      data-qa-selector="subscription_users"
+      data-testid="subscription-users"
       :empty-text="emptyText"
     >
       <template #cell(disclosure)="{ item, toggleDetails, detailsShowing }">
@@ -229,7 +228,6 @@ export default {
           category="secondary"
           variant="danger"
           data-testid="remove-user"
-          data-qa-selector="remove_user"
           @click="displayRemoveMemberModal(data.item.user)"
         >
           {{ __('Remove user') }}

ee/app/assets/javascripts/usage_quotas/storage/components/container_registry_usage.vue

@@ -37,7 +37,7 @@ export default {
 };
 </script>
 <template>
-  <usage-banner data-qa-selector="container_registry_usage">
+  <usage-banner>
     <template #left-primary-text>
       {{ $options.i18n.containerRegistry }}
     </template>
@@ -53,11 +53,7 @@ export default {
       {{ $options.i18n.storageUsed }}
     </template>
     <template #right-secondary-text>
-      <number-to-human-size
-        :value="containerRegistrySize"
-        data-testid="total-size-section"
-        data-qa-selector="container_registry_size"
-      />
+      <number-to-human-size :value="containerRegistrySize" data-testid="total-size-section" />
       <storage-type-warning v-if="containerRegistrySizeIsEstimated">
         {{ $options.i18n.estimatedWarningTooltip }}
         <help-page-link

ee/app/assets/javascripts/usage_quotas/storage/components/dependency_proxy_usage.vue

@@ -36,7 +36,7 @@ export default {
 };
 </script>
 <template>
-  <usage-banner :loading="loading" data-qa-selector="dependency_proxy_usage">
+  <usage-banner :loading="loading">
     <template #left-primary-text>
       {{ $options.i18n.dependencyProxy }}
     </template>
@@ -55,8 +55,7 @@ export default {
     <template #right-secondary-text>
       <number-to-human-size
         :value="Number(dependencyProxyTotalSize)"
-        data-testid="total-size-section"
-        data-qa-selector="dependency_proxy_size"
+        data-testid="dependency-proxy-size"
       />
     </template>
   </usage-banner>

ee/app/assets/javascripts/usage_quotas/storage/components/project_list.vue

@@ -187,24 +187,15 @@ export default {
     </template>
     <template #cell(lfsObjects)="{ item: project }">
-      <number-to-human-size
-        :value="project.statistics.lfsObjectsSize"
-        data-testid="project-lfs-object-size"
-      />
+      <number-to-human-size :value="project.statistics.lfsObjectsSize" />
     </template>
     <template #cell(buildArtifacts)="{ item: project }">
-      <number-to-human-size
-        :value="project.statistics.buildArtifactsSize"
-        data-testid="project-build-artifact-size"
-      />
+      <number-to-human-size :value="project.statistics.buildArtifactsSize" />
     </template>
     <template #cell(packages)="{ item: project }">
-      <number-to-human-size
-        :value="project.statistics.packagesSize"
-        data-testid="project-packages-size"
-      />
+      <number-to-human-size :value="project.statistics.packagesSize" />
     </template>
     <template #cell(wiki)="{ item: project }">

ee/app/assets/javascripts/usage_quotas/storage/components/storage_usage_statistics.vue

@@ -103,7 +103,7 @@ export default {
         :target="buyAddonTargetAttr"
         category="primary"
         variant="confirm"
-        data-qa-selector="purchase_more_storage"
+        data-testid="purchase-more-storage"
       >
         {{ $options.i18n.purchaseButtonText }}
       </gl-button>
@@ -121,7 +121,7 @@ export default {
         :used-storage="usedStorage"
         :total-storage="totalStorage"
         :loading="loading"
-        data-qa-selector="namespace_usage_total"
+        data-testid="namespace-usage-total"
         class="gl-w-full"
       />
       <total-storage-available-breakdown-card

ee/app/views/groups/usage_quotas/index.html.haml

@@ -31,7 +31,7 @@
     = gl_tab_link_to '#storage-quota-tab', data: { testid: 'storage-tab' } do
       = s_('UsageQuota|Storage')
     - if Feature.enabled?(:data_transfer_monitoring, @group)
-      = gl_tab_link_to '#transfer-quota-tab', data: { testid: 'transfer-tab' } do
+      = gl_tab_link_to '#transfer-quota-tab' do
         = s_('UsageQuota|Transfer')
   .tab-content

ee/app/views/profiles/usage_quotas/index.html.haml

@@ -15,9 +15,9 @@
     = s_('UsageQuota|Usage of resources across your projects').html_safe
 = gl_tabs_nav({ class: 'js-storage-tabs' }) do
-  = gl_tab_link_to '#pipelines-quota-tab', data: { qa_selector: 'pipelines_tab' }, item_active: true do
+  = gl_tab_link_to '#pipelines-quota-tab', data: { testid: 'pipelines-tab' }, item_active: true do
     =  s_('UsageQuota|Pipelines')
-  = gl_tab_link_to '#storage-quota-tab', data: { qa_selector: 'storage_tab' } do
+  = gl_tab_link_to '#storage-quota-tab', data: { testid: 'storage-tab' } do
     = s_('UsageQuota|Storage')
 .tab-content.gl-tab-content

ee/spec/features/groups/usage_quotas/seats_tab_spec.rb

@@ -316,7 +316,7 @@ def billable_member_modal_selector
   end
   def member_table_selector
-    '[data-testid="table"]'
+    '[data-testid="subscription-users"]'
   end
   def user_to_remove_row

ee/spec/features/groups/usage_quotas/usage_quotas_spec.rb

@@ -78,7 +78,7 @@
     it 'lists awaiting members and approves them' do
       visit pending_members_group_usage_quotas_path(group)
-      expect(page.find('[data-testid="pending-members-row"]')).to have_text(awaiting_member.user.name)
+      expect(find_by_testid('pending-members')).to have_text(awaiting_member.user.name)
       click_button 'Approve'
       click_button 'OK'

ee/spec/frontend/pending_members/components/__snapshots__/app_spec.js.snap

@@ -4,8 +4,7 @@ exports[`PendingMembersApp renders pending members 1`] = `
 Array [
   <div
     class="gl-border-0 gl-border-b-1! gl-border-gray-100 gl-border-solid gl-display-flex gl-justify-content-space-between gl-p-5"
-    data-qa-selector="pending_members"
-    data-testid="pending-members-row"
+    data-testid="pending-members"
   >
     <gl-avatar-link-stub
       alt="334050-1 334050-1"
@@ -24,7 +23,7 @@ Array [
     <gl-button-stub
       buttontextclasses=""
       category="primary"
-      data-qa-selector="approve_member"
+      data-testid="approve-member"
       icon=""
       role="button"
       size="medium"
@@ -35,7 +34,6 @@ Array [
     </gl-button-stub>
     <gl-modal-stub
       arialabel=""
-      data-qa-selector="approve_member_confirmation_modal"
       dismisslabel="Close"
       modalclass=""
       modalid="approve-confirmation-modal-177"
@@ -51,8 +49,7 @@ Array [
   </div>,
   <div
     class="gl-border-0 gl-border-b-1! gl-border-gray-100 gl-border-solid gl-display-flex gl-justify-content-space-between gl-p-5"
-    data-qa-selector="pending_members"
-    data-testid="pending-members-row"
+    data-testid="pending-members"
   >
     <gl-avatar-link-stub
       target="blank"
@@ -69,7 +66,7 @@ Array [
     <gl-button-stub
       buttontextclasses=""
       category="primary"
-      data-qa-selector="approve_member"
+      data-testid="approve-member"
       icon=""
       role="button"
       size="medium"
@@ -80,7 +77,6 @@ Array [
     </gl-button-stub>
     <gl-modal-stub
       arialabel=""
-      data-qa-selector="approve_member_confirmation_modal"
       dismisslabel="Close"
       modalclass=""
       modalid="approve-confirmation-modal-178"

ee/spec/frontend/pending_members/components/app_spec.js

@@ -51,7 +51,7 @@ describe('PendingMembersApp', () => {
     );
   };
-  const findMemberRows = () => wrapper.findAllByTestId('pending-members-row');
+  const findPendingMembers = () => wrapper.findAllByTestId('pending-members');
   const findPagination = () => wrapper.findComponent(GlPagination);
   beforeEach(() => {
@@ -98,10 +98,10 @@ describe('PendingMembersApp', () => {
   });
   it('renders pending members', () => {
-    const memberRows = findMemberRows();
-    expect(memberRows.length).toBe(mockDataMembers.data.length);
-    expect(findMemberRows().wrappers.map((w) => w.html())).toMatchSnapshot();
+    const pendingMembers = findPendingMembers();
+    expect(pendingMembers.length).toBe(mockDataMembers.data.length);
+    expect(findPendingMembers().wrappers.map((w) => w.html())).toMatchSnapshot();
   });
   it('pagination is rendered and passed correct values', () => {

ee/spec/frontend/usage_quotas/components/statistics_seats_card_spec.js

@@ -29,8 +29,8 @@ describe('StatisticsSeatsCard', () => {
     });
   };
-  const findSeatsUsedBlock = () => wrapper.findByTestId('seats-used-block');
-  const findSeatsOwedBlock = () => wrapper.findByTestId('seats-owed-block');
+  const findSeatsUsedBlock = () => wrapper.findByTestId('seats-used');
+  const findSeatsOwedBlock = () => wrapper.findByTestId('seats-owed');
   const findPurchaseButton = () => wrapper.findByTestId('purchase-button');
   const findLimitedAccessModal = () => wrapper.findComponent(LimitedAccessModal);