Add test hooks to network settings page

- Adds data-test-id test hooks to simplify the xpath queries needed
  to set up automation testing
- Adds standardized test hooks to all interactive elements: input fields,
  buttons, and form select

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: Id6253ac7355f1da8b73f55ffd2fcc1ea73c63555

1 files changed, 8 insertions, 0 deletions

diff --git a/src/views/Configuration/NetworkSettings/NetworkSettings.vue b/src/views/Configuration/NetworkSettings/NetworkSettings.vue
index 63de2376..604949ca 100644
--- a/src/views/Configuration/NetworkSettings/NetworkSettings.vue
+++ b/src/views/Configuration/NetworkSettings/NetworkSettings.vue
@@ -11,6 +11,7 @@
             <b-form-select
               id="interface-select"
               v-model="selectedInterfaceIndex"
+              data-test-id="networkSettings-select-interface"
               :options="interfaceSelectOptions"
               @change="selectInterface"
             >
@@ -30,6 +31,7 @@
               <b-form-input
                 id="default-gateway"
                 v-model.trim="form.gateway"
+                data-test-id="networkSettings-input-gateway"
                 type="text"
                 :readonly="dhcpEnabled"
                 :state="getValidationState($v.form.gateway)"
@@ -53,6 +55,7 @@
               <b-form-input
                 id="hostname-field"
                 v-model.trim="form.hostname"
+                data-test-id="networkSettings-input-hostname"
                 type="text"
                 :state="getValidationState($v.form.hostname)"
                 @change="$v.form.hostname.$touch()"
@@ -77,6 +80,7 @@
               <b-form-input
                 id="mac-address"
                 v-model.trim="form.macAddress"
+                data-test-id="networkSettings-input-macAddress"
                 type="text"
                 :state="getValidationState($v.form.macAddress)"
                 @change="$v.form.macAddress.$touch()"
@@ -104,6 +108,7 @@
               <template v-slot:cell(Address)="{ item, index }">
                 <b-form-input
                   v-model.trim="item.Address"
+                  :data-test-id="`networkSettings-input-staticIpv4-${index}`"
                   :aria-label="
                     $t('pageNetworkSettings.ariaLabel.staticIpv4AddressRow') +
                       ' ' +
@@ -143,6 +148,7 @@
               <template v-slot:cell(SubnetMask)="{ item, index }">
                 <b-form-input
                   v-model.trim="item.SubnetMask"
+                  :data-test-id="`networkSettings-input-subnetMask-${index}`"
                   :aria-label="
                     $t('pageNetworkSettings.ariaLabel.staticIpv4SubnetRow') +
                       ' ' +
@@ -211,6 +217,7 @@
               <template v-slot:cell(address)="{ item, index }">
                 <b-form-input
                   v-model.trim="item.address"
+                  :data-test-id="`networkSettings-input-dnsAddress-${index}`"
                   :aria-label="
                     $t('pageNetworkSettings.ariaLabel.staticDnsRow') +
                       ' ' +
@@ -270,6 +277,7 @@
       <b-button
         variant="primary"
         type="submit"
+        data-test-id="networkSettings-button-saveNetworkSettings"
         :disabled="!$v.form.$anyDirty || $v.form.$invalid"
       >
         {{ $t('global.action.saveSettings') }}