bfg-common 1.3.518 → 1.3.520

package/components/atoms/alert/Alert.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['alert', status]">
+  <div :class="['alert', status]" :data-id="props.testId">
     <div class="alert-items">
       <slot v-if="$slots.headline" name="headline" :icon="iconName" />
 

package/components/atoms/modal/bySteps/BySteps.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="props.show" class="modal clr-wizard wizard-xl">
-    <div class="modal-dialog modal-xl relative">
+    <div class="modal-dialog modal-xl relative" :data-id="props.testId">
       <div class="modal-content-wrapper">
         <nav class="modal-nav clr-wizard-stepnav-wrapper">
           <h1 class="clr-wizard-title">

package/components/atoms/tooltip/Signpost.vue

@@ -2,6 +2,7 @@
   <div
     id="signpost"
     :class="['signpost', signpostClass]"
+    :data-id="`${props.testId}-signpost`"
     :style="signpostStyles"
     @click.stop
     @mouseenter="hovered = true"

package/components/common/details/DetailsItem.vue

@@ -16,7 +16,7 @@
       <div class="stack-view-key">
         <slot name="stackBlockKey" />
       </div>
-      <div class="stack-block-content">
+      <div class="stack-block-content" :data-id="props.testId">
         <slot name="stackBlockContent" />
       </div>
     </div>

package/components/common/details/lib/models/interfaces.ts

@@ -1,10 +1,11 @@
 import type { UI_I_Button } from '~/components/common/tools/lib/models/interfaces'
 
 export interface UI_I_DetailsItem {
-    label: string,
-    value: string,
-    items: UI_I_DetailsItem[]
-    actions?: UI_I_Button[]
-    permission?: string[]
-    data?: any
+  label: string
+  value: string
+  items: UI_I_DetailsItem[]
+  actions?: UI_I_Button[]
+  permission?: string[]
+  data?: any
+  testId?: string
 }

package/components/common/select/radio/RadioGroup.vue

@@ -34,6 +34,7 @@
             <atoms-tooltip-signpost
               v-if="radio.isTooltip"
               :elem-id="`${radio.value}-select-tooltip-icon`"
+              :data-id="radio.testId"
               @hide="radio.isTooltip = false"
             >
               <div class="tooltip-content-container">

package/components/common/wizards/datastore/add/lib/config/stepItems.ts

@@ -11,11 +11,17 @@ const stepFromSharedStorm = (
   mode: UI_T_WizardDatastoreMode
 ): UI_I_VerticalStepItem[] => {
   const steps = [
-    { text: localization.type, disabled: false, complete: false },
+    {
+      text: localization.type,
+      disabled: false,
+      complete: false,
+      testId: 'create-datastore-select-type',
+    },
     {
       text: localization.nameAndDeviceSelection,
       disabled: true,
       complete: false,
+      testId: 'create-datastore-name-and-device-selection',
     },
     // {
     //   text: localization.vmfsVersion,
@@ -34,12 +40,14 @@ const stepFromSharedStorm = (
       text: localization.partitionConfiguration,
       disabled: true,
       complete: false,
+      testId: 'create-datastore-partition-configuration',
     })
   }
   steps.push({
     text: localization.readyComplete,
     disabled: true,
     complete: false,
+    testId: 'create-datastore-ready-complete',
   })
   return steps
 }
@@ -49,12 +57,23 @@ const stepFromNfs = (
   mode: UI_T_WizardDatastoreMode
 ): UI_I_VerticalStepItem[] => {
   const steps = [
-    { text: localization.type, disabled: false, complete: false },
-    { text: localization.nfsVersion, disabled: true, complete: false },
+    {
+      text: localization.type,
+      disabled: false,
+      complete: false,
+      testId: 'create-datastore-select-type',
+    },
+    {
+      text: localization.nfsVersion,
+      disabled: true,
+      complete: false,
+      testId: 'create-datastore-select-nfs-version',
+    },
     {
       text: localization.nameAndConfiguration,
       disabled: true,
       complete: false,
+      testId: 'create-datastore-name-and-configuration',
     },
     // {
     //   text: localization.kerberosAuthentication,
@@ -71,6 +90,7 @@ const stepFromNfs = (
       text: localization.hostsAccessibility,
       disabled: true,
       complete: false,
+      testId: 'create-datastore-hosts-accessibility',
     })
   }
 
@@ -78,6 +98,7 @@ const stepFromNfs = (
     text: localization.readyComplete,
     disabled: true,
     complete: false,
+    testId: 'create-datastore-ready-complete',
   })
 
   return steps
@@ -121,15 +142,28 @@ const stemFromLocal = (
 ): UI_I_VerticalStepItem[] => {
   const isModeProcurator = mode === 'procurator'
   return [
-    { text: localization.type, disabled: false, complete: false },
+    {
+      text: localization.type,
+      disabled: false,
+      complete: false,
+      testId: 'create-datastore-select-type',
+    },
     {
       text: localization[
         isModeProcurator ? 'selectDatastoreName' : 'nameAndDeviceSelection'
       ],
       disabled: true,
       complete: false,
+      testId: `create-datastore-${
+        isModeProcurator ? 'select-datastore-name' : 'name-and-device-selection'
+      }`,
+    },
+    {
+      text: localization.readyComplete,
+      disabled: true,
+      complete: false,
+      testId: 'create-datastore-ready-complete',
     },
-    { text: localization.readyComplete, disabled: true, complete: false },
   ]
 }
 

package/components/common/wizards/datastore/add/local/createName/CreateName.vue

@@ -2,16 +2,16 @@
   <div class="create-datastore-name">
     <atoms-alert
       v-show="errors.length"
-      test-id="datastore-creat-name"
+      test-id="creat-storage-name-alert-error"
       status="alert-danger"
       :items="errors"
       @remove="onRemoveValidationErrors"
     />
 
     <div class="clr-form-control clr-row">
-      <label for="datastore-name" class="clr-control-label clr-col-md-2">{{
-        localization.datastoreName
-      }}</label>
+      <label for="datastore-name" class="clr-control-label clr-col-md-2">
+        {{ localization.datastoreName }}
+      </label>
 
       <div class="clr-control-container" :class="nameErrorText && 'clr-error'">
         <div class="flex-align-center">
@@ -27,7 +27,7 @@
           <atoms-the-icon class="error-icon" name="info-circle" />
         </div>
 
-        <div class="clr-subtext ng-star-inserted">
+        <div class="clr-subtext" data-id="datastore-name-field-require">
           {{ nameErrorText }}
         </div>
       </div>

package/components/common/wizards/datastore/add/nfs/configuration/Configuration.vue

@@ -11,7 +11,7 @@
 
       <atoms-alert
         v-show="alertInfo"
-        test-id="configuration-info"
+        test-id="configure-information-alert"
         status="alert-info"
         :items="[localization.nameAndConfigurationAlertInfo]"
         @remove="alertInfo = false"
@@ -19,9 +19,9 @@
       <h6 class="nd-mt-0">{{ localization.nfsShareDetails }}</h6>
 
       <div class="clr-form-control clr-row">
-        <label for="" class="clr-control-label clr-col-md-2">{{
-          localization.name
-        }}</label>
+        <label for="" class="clr-control-label clr-col-md-2">
+          {{ localization.name }}
+        </label>
 
         <div
           class="clr-control-container"
@@ -40,16 +40,16 @@
             <atoms-the-icon class="error-icon" name="info-circle" />
           </div>
 
-          <div class="clr-subtext ng-star-inserted">
+          <div class="clr-subtext" data-id="datastore-name-field-require">
             {{ nameErrorText }}
           </div>
         </div>
       </div>
 
       <div class="clr-form-control clr-row">
-        <label class="clr-control-label clr-col-md-2">{{
-          localization.folder
-        }}</label>
+        <label class="clr-control-label clr-col-md-2">
+          {{ localization.folder }}
+        </label>
 
         <div
           class="clr-control-container"
@@ -68,7 +68,11 @@
             <atoms-the-icon class="error-icon" name="info-circle" />
           </div>
 
-          <div v-if="folderErrorText" class="clr-subtext">
+          <div
+            v-if="folderErrorText"
+            class="clr-subtext"
+            data-id="folder-name-field-require"
+          >
             {{ folderErrorText }}
           </div>
           <div v-else class="clr-subtext">E.g: /vols/vol0/datastore-001</div>
@@ -76,9 +80,9 @@
       </div>
 
       <div class="nd-mt-0 clr-form-control clr-row">
-        <label class="clr-control-label clr-col-md-2">{{
-          localization.server
-        }}</label>
+        <label class="clr-control-label clr-col-md-2">
+          {{ localization.server }}
+        </label>
 
         <div
           class="clr-control-container"
@@ -96,7 +100,11 @@
             />
             <atoms-the-icon class="error-icon" name="info-circle" />
           </div>
-          <div v-if="serverErrorText" class="clr-subtext">
+          <div
+            v-if="serverErrorText"
+            class="clr-subtext"
+            data-id="server-name-field-require"
+          >
             {{ serverErrorText }}
           </div>
           <div v-else class="clr-subtext">

package/components/common/wizards/datastore/add/nfs/version/lib/config/versionOptions.ts

@@ -9,12 +9,14 @@ export const nfsVersionFunc = (
       value: 'nfs-3',
       disabled: false,
       description: localization.nfsVersionDesc1,
+      testId: 'datastore-nfs-version-3',
     },
     {
       label: 'NFS 4.1',
       value: 'nfs-4.1',
       disabled: false,
       description: localization.nfsVersionDesc2,
+      testId: 'datastore-nfs-version-4.1',
     },
   ]
 }

package/components/common/wizards/datastore/add/readyComplete/ReadyComplete.vue

@@ -4,11 +4,14 @@
 
     <common-details-list :items="properties" class="ready-complete__list list">
       <template #default="{ item }">
-        <common-details-item :has-children="true" open-by-default>
+        <common-details-item
+          :has-children="true"
+          open-by-default
+        >
           <template #stackBlockKey>
-            <span class="list__labels">{{
-              localization.chosenDatastoreName
-            }}</span>
+            <span class="list__labels">
+              {{ localization.chosenDatastoreName }}
+            </span>
           </template>
 
           <template #stackChildren>
@@ -18,6 +21,7 @@
             >
               <common-details-item
                 :has-children="false"
+                :test-id="item2.testId"
                 class="list__default-style"
               >
                 <template #stackBlockKey>
@@ -27,7 +31,11 @@
                 </template>
                 <template #stackBlockContent>
                   <div v-if="item2.data">
-                    <div v-for="item3 in item2.data" :key="item3" class="flex-align-center">
+                    <div
+                      v-for="item3 in item2.data"
+                      :key="item3"
+                      class="flex-align-center"
+                    >
                       <div class="vsphere-icon-host"></div>
                       <span>{{ item3 }}</span>
                     </div>

package/components/common/wizards/datastore/add/readyComplete/lib/config/propertiesDetails.ts

@@ -32,6 +32,7 @@ const nfsDetailsFunc = (
           label: localization.version,
           value: version.toUpperCase(),
           items: [],
+          testId: 'view-selected-nfs-version-in-complete',
         },
       ],
       actions: [],
@@ -44,16 +45,19 @@ const nfsDetailsFunc = (
           label: localization.datastoreName,
           value: name,
           items: [],
+          testId: 'view-storage-name-in-complete',
         },
         {
           label: localization.server,
           value: server,
           items: [],
+          testId: 'view-server-name-in-complete',
         },
         {
           label: localization.folder,
           value: folder,
           items: [],
+          testId: 'view-folder-name-in-complete',
         },
         // {
         //   label: localization.accessMode,
@@ -78,7 +82,7 @@ const nfsDetailsFunc = (
         },
       ],
       actions: [],
-    },)
+    })
   }
 
   return details
@@ -98,6 +102,7 @@ const localDetailsFunc = (
           label: localization.datastoreName,
           value: isSphereWizard ? event.name : event,
           items: [],
+          testId: 'view-storage-name-in-complete',
         },
       ],
       actions: [],
@@ -109,6 +114,7 @@ const localDetailsFunc = (
       label: localization.host,
       value: event.host,
       items: [],
+      testId: '',
     })
   }
   return data
@@ -129,11 +135,13 @@ const sharedStormDetailsFunc = (
           label: localization.datastoreName,
           value: name,
           items: [],
+          testId: 'view-storage-name-in-complete',
         },
         {
           label: localization.diskLun,
           value: constructLunDiskItems(lunDisk),
           items: [],
+          testId: 'view-selected-lun-disks-in-complete',
         },
       ],
       actions: [],

package/components/common/wizards/datastore/add/sharedStorm/deviceSelection/DeviceSelection.vue

@@ -2,16 +2,16 @@
   <div class="device-selection">
     <atoms-alert
       v-show="errors.length"
-      test-id="device-selection-errors"
+      test-id="device-selection-alert-error"
       status="alert-danger"
       :items="errors"
       @remove="onCloseAlertDanger"
     />
 
     <div class="clr-form-control clr-row">
-      <label for="" class="clr-control-label clr-col-md-2">{{
-        localization.name
-      }}</label>
+      <label for="" class="clr-control-label clr-col-md-2">
+        {{ localization.name }}
+      </label>
 
       <div
         class="clr-control-container"
@@ -30,7 +30,7 @@
           <atoms-the-icon class="error-icon" name="info-circle" />
         </div>
 
-        <div class="clr-subtext ng-star-inserted">
+        <div class="clr-subtext" data-id="datastore-name-filed-require">
           {{ formErrors?.errors?.name?.[0] || '' }}
         </div>
       </div>
@@ -38,7 +38,7 @@
 
     <atoms-alert
       v-show="alertInfo"
-      test-id="device-selection-info"
+      test-id="device-selection-information-alert"
       class="device-selection__alert-info"
       status="alert-info"
       :items="[localization.nameAndDeviceSelectionAlertInfo]"
@@ -49,9 +49,9 @@
       v-if="props.mode === 'sphere' && !props.hostId"
       class="clr-form-control clr-row"
     >
-      <label class="clr-control-label clr-col-12 clr-col-md-2">{{
-        localization.selectHost
-      }}</label>
+      <label class="clr-control-label clr-col-12 clr-col-md-2">
+        {{ localization.selectHost }}
+      </label>
 
       <div>
         <div class="clr-select-wrapper">

package/components/common/wizards/datastore/add/sharedStorm/partitionConfiguration/PartitionConfiguration.vue

@@ -41,7 +41,7 @@
               <input
                 id="datastore-size-input-0"
                 v-model="datastoreSize"
-                data-id="datastore-size-input-0"
+                data-id="select-storm-storage-size-range-field"
                 type="range"
                 min="0"
                 :max="countDatastoreSizeToGb"
@@ -54,6 +54,7 @@
 
         <input
           id="datastore-size-input-1"
+          data-id="select-storm-storage-size-input-field"
           v-model="datastoreSize"
           type="number"
           min="0"
@@ -74,7 +75,8 @@
         <div>
           <div class="clr-select-wrapper">
             <select
-              id="datastore-size-select"
+              id="storm-configuration-block-size"
+              data-id="storm-configuration-block-size"
               v-model="selectedSize"
               class="dropdown-toggle"
               @change="onSelectHost"
@@ -93,14 +95,15 @@
       </div>
 
       <div class="clr-form-control clr-row">
-        <label class="clr-col-md-4 clr-control-label">{{
-          localization.spaceReclamationGranularity
-        }}</label>
+        <label class="clr-col-md-4 clr-control-label">
+          {{ localization.spaceReclamationGranularity }}
+        </label>
 
         <div>
           <div class="clr-select-wrapper">
             <select
               id="granularity-select"
+              data-id="storm-configuration-space-granularity"
               v-model="selectedGranularity"
               class="dropdown-toggle"
               @change="onSelectHost"
@@ -119,14 +122,15 @@
       </div>
 
       <div class="clr-form-control clr-row">
-        <label class="clr-col-md-4 clr-control-label">{{
-          localization.spaceReclamationPriority
-        }}</label>
+        <label class="clr-col-md-4 clr-control-label">
+          {{ localization.spaceReclamationPriority }}
+        </label>
 
         <div>
           <div class="clr-select-wrapper">
             <select
               id="priority-select"
+              data-id="storm-configuration-space-priority"
               v-model="selectedPriority"
               class="dropdown-toggle"
               @change="onSelectHost"

package/components/common/wizards/datastore/add/types/Types.vue

@@ -16,6 +16,7 @@
         <atoms-tooltip-signpost
           v-if="isShowTypeHelp"
           elem-id="type-select-help-icon"
+          data-id="select-datastore-type"
           @hide="isShowTypeHelp = false"
         >
           <p class="help-desc">{{ localization.datastoreTypeHelpDesc }}</p>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.3.518",
+  "version": "1.3.520",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",