Add qa selector to cloud license page

Update frontend spec

ee/app/assets/javascripts/pages/admin/cloud_licenses/components/subscription_details_history.vue

@@ -139,6 +139,7 @@ export default {
       :tbody-tr-class="rowClass"
       responsive
       stacked="sm"
+      data-qa-selector="subscription_history"
     >
       <template #cell(type)="{ value }">
         <gl-badge size="md" variant="info">{{ value }}</gl-badge>

ee/app/assets/javascripts/pages/admin/cloud_licenses/components/subscription_details_table.vue

 <script>
 import { GlSkeletonLoader, GlTable } from '@gitlab/ui';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import { slugifyWithUnderscore } from '~/lib/utils/text_utility';
 import { copySubscriptionIdButtonText } from '../constants';
 
 const placeholderHeightFactor = 32;
@@ -60,6 +61,9 @@ export default {
     placeHolderPosition(index) {
       return (index - 1) * placeholderHeightFactor;
     },
+    qaSelectorValue(label) {
+      return slugifyWithUnderscore(label.toLowerCase());
+    },
   },
 };
 </script>
@@ -73,7 +77,11 @@ export default {
     </template>
 
     <template #cell(value)="{ item, value }">
-      <p class="gl-relative" data-testid="details-content">
+      <p
+        class="gl-relative"
+        data-testid="details-content"
+        :data-qa-selector="qaSelectorValue(item.label)"
+      >
         {{ value || '-' }}
         <clipboard-button
           v-if="item.canCopy"

ee/app/assets/javascripts/pages/admin/cloud_licenses/components/subscription_details_user_info.vue

@@ -65,7 +65,7 @@ export default {
     <div class="col-md-6 gl-mb-5">
       <gl-card data-testid="users-in-subscription">
         <header>
-          <h2>{{ usersInSubscription }}</h2>
+          <h2 data-qa-selector="users_in_subscription">{{ usersInSubscription }}</h2>
           <h5 class="gl-font-weight-normal text-uppercase">
             {{ $options.i18n.usersInSubscriptionTitle }}
           </h5>
@@ -79,7 +79,7 @@ export default {
     <div class="col-md-6 gl-mb-5">
       <gl-card data-testid="billable-users">
         <header>
-          <h2>{{ billableUsers }}</h2>
+          <h2 data-qa-selector="billable_users">{{ billableUsers }}</h2>
           <h5 class="gl-font-weight-normal text-uppercase">
             {{ $options.i18n.billableUsersTitle }}
           </h5>
@@ -99,7 +99,7 @@ export default {
     <div class="col-md-6 gl-mb-5">
       <gl-card data-testid="maximum-users">
         <header>
-          <h2>{{ maximumUsers }}</h2>
+          <h2 data-qa-selector="maximum_users">{{ maximumUsers }}</h2>
           <h5 class="gl-font-weight-normal text-uppercase">
             {{ $options.i18n.maximumUsersTitle }}
           </h5>
@@ -113,7 +113,7 @@ export default {
     <div class="col-md-6 gl-mb-5">
       <gl-card data-testid="users-over-license">
         <header>
-          <h2>{{ usersOverSubscription }}</h2>
+          <h2 data-qa-selector="users_over_subscription">{{ usersOverSubscription }}</h2>
           <h5 class="gl-font-weight-normal text-uppercase">
             {{ $options.i18n.usersOverSubscriptionTitle }}
           </h5>

ee/spec/frontend/admin/cloud_licenses/components/subscription_details_table_spec.js

@@ -60,6 +60,7 @@ describe('Subscription Details Table', () => {
     beforeEach(() => {
       createComponent([
         {
+          label: 'label',
           value: 'Something to copy',
           canCopy: true,
         },