Test/forms 1285-Setting up Test Id to front end components (#1387)

* #FORMS-974 * #974 updates * #980 modification to cypress config * FORMS-980 * #992 * #992 Fix cypress scripts * #1011 Form design page * #1011 test scripts * #1023 cypress scripts * #1023 advanced data components * #1023 Updated scripts * #1023 updation * Updated json file * Test/forms (#1011)(#1023) (#1307) * #FORMS-974 * #974 updates * #980 modification to cypress config * FORMS-980 * #992 * #992 Fix cypress scripts * #1011 Form design page * #1011 test scripts * #1023 cypress scripts * #1023 advanced data components * #1023 Updated scripts * #1023 updation * Updated json file * #1059 workflow file for cypress * #1059 updated the base url * #1059 updated workflow * Updated node version * updated * updated * Updation * updated file * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * updated package file * Update cypress-ci.yaml * Updated config file * Update cypress-ci.yaml * #1059 updated package * #1060 scripts for Advanced fields and BC Gov components * Fixing review comments * Updated changes * # Updated with PR comments * updated * Update form-design-basicfields.cy.js * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Modifies test scripts * Updated files * Fixed errors during CI/CD Run * Updated browser type * Updated Simple BC address component * Updated * Fields updated * Test script changed * Updated * Updated fields * Updated env variable * Update form-design-basicfields.cy.js * Updated * Update cypress-ci.yaml * Updated email input * screenshots * Updated path * Update cypress-ci.yaml * Update cypress-ci.yaml * Updated version on workflow * Fix to failed tests * Fix to BC address component * Updated the component * Changed button element * Fixed BC components * Modified submission * Modified components * Updated attribute * Updated * Changed simpleBC address component * Update package.json * Update package-lock.json * Test scripts * Updated * Pushed the changes * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Env change * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Update cypress-ci.yaml * Updated * Updated to take default env variable * Updated with current workflow * updated * Formatted * Update cypress.config.js * updated * Added form deletion scripts * Fixed id issues on PR env * Set Ids for fron end components * Updated with test Ids * Updated * updated * Updated PR warnings * Updated PR warnings * Updated formatting issue * Updated formatting issues --------- Co-authored-by: jasonchung1871 <[email protected]>
bcgov · Jun 20, 2024 · d17bee1 · d17bee1
1 parent 98bf7eb
commit d17bee1
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 10 deletions.
diff --git a/app/frontend/src/components/designer/settings/FormFunctionalitySettings.vue b/app/frontend/src/components/designer/settings/FormFunctionalitySettings.vue
@@ -82,6 +82,7 @@ defineExpose({
 
     <v-checkbox
       v-model="form.enableStatusUpdates"
+      data-test="canUpdateStatusOfFormCheckbox"
       hide-details="auto"
       class="my-0"
     >
@@ -96,6 +97,7 @@ defineExpose({
 
     <v-checkbox
       v-model="form.allowSubmitterToUploadFile"
+      data-test="canUploadDraftCheckbox"
       hide-details="auto"
       class="my-0"
       :disabled="form.userType === ID_MODE.PUBLIC"
@@ -140,6 +142,7 @@ defineExpose({
       v-model="form.schedule.enabled"
       disabled
       hide-details="auto"
+      data-test="canScheduleFormSubmissionCheckbox"
       class="my-0"
     >
       <template #label>
@@ -153,6 +156,7 @@ defineExpose({
       v-if="formStore.isFormPublished"
       v-model="form.schedule.enabled"
       hide-details="auto"
+      data-test="canScheduleFormSubmissionCheckbox"
       class="my-0"
     >
       <template #label>
@@ -191,6 +195,7 @@ defineExpose({
     <v-checkbox
       v-model="form.enableCopyExistingSubmission"
       hide-details="auto"
+      data-test="canCopyExistingSubmissionCheckbox"
       class="my-0"
       :disabled="form.userType === ID_MODE.PUBLIC"
     >
@@ -231,6 +236,7 @@ defineExpose({
     <v-checkbox
       v-model="form.subscribe.enabled"
       hide-details="auto"
+      data-test="canAllowEventSubscriptionCheckbox"
       class="my-0"
       :disabled="primaryIdpUser === false || !formStore.isFormPublished"
     >
@@ -268,7 +274,12 @@ defineExpose({
         </div>
       </template>
     </v-checkbox>
-    <v-checkbox v-model="form.wideFormLayout" hide-details="auto" class="my-0">
+    <v-checkbox
+      v-model="form.wideFormLayout"
+      hide-details="auto"
+      data-test="canAllowWideFormLayoutCheckbox"
+      class="my-0"
+    >
       <template #label>
         <div :class="{ 'mr-2': isRTL }">
           <span

diff --git a/app/frontend/src/components/designer/settings/FormSubmissionSettings.vue b/app/frontend/src/components/designer/settings/FormSubmissionSettings.vue
@@ -32,6 +32,7 @@ const emailArrayRules = ref([
     <v-checkbox
       v-model="form.showSubmissionConfirmation"
       hide-details="auto"
+      data-test="canAllowSubmissionConfirmationCheckbox"
       class="my-0"
       :class="{ 'dir-rtl': isRTL }"
     >

diff --git a/app/frontend/src/components/forms/manage/ApiKey.vue b/app/frontend/src/components/forms/manage/ApiKey.vue
@@ -128,6 +128,7 @@ export default {
                 ? $t('trans.apiKey.regenerate')
                 : $t('trans.apiKey.generate')
             }${$t('trans.apiKey.apiKey')}`"
+            data-test="canGenerateAPIKey"
             @click="showConfirmationDialog = true"
           >
             <span :lang="lang"
@@ -163,6 +164,7 @@ export default {
                 size="x-small"
                 density="default"
                 :icon="showSecret ? 'mdi:mdi-eye-off' : 'mdi:mdi-eye'"
+                data-test="canReadAPIKey"
                 :title="$t('trans.apiKey.hideSecret')"
                 @click="showHideKey"
               />
@@ -175,6 +177,7 @@ export default {
 
           <BaseCopyToClipboard
             :disabled="!canReadSecret || !showSecret"
+            data-test="canAllowCopyAPIKey"
             class="mx-2"
             :text-to-copy="secret"
             :snack-bar-text="$t('trans.apiKey.sCTC')"
@@ -191,6 +194,7 @@ export default {
                 size="x-small"
                 density="default"
                 icon="mdi:mdi-delete"
+                data-test="canDeleteApiKey"
                 :title="$t('trans.apiKey.deleteKey')"
                 @click="showDeleteDialog = true"
               />
@@ -261,6 +265,7 @@ export default {
         v-model="filesApiAccess"
         :disabled="!apiKey"
         :label="$t('trans.apiKey.filesAPIAccess')"
+        data-test="canAllowFileAccess"
         @update:model-value="updateKey"
       ></v-checkbox>
     </v-col>

diff --git a/app/frontend/src/components/forms/manage/ManageForm.vue b/app/frontend/src/components/forms/manage/ManageForm.vue
@@ -145,7 +145,11 @@ export default {
       <v-expansion-panel flat>
         <!-- Form Settings -->
         <v-expansion-panel-title>
-          <div class="header" :lang="lang">
+          <div
+            class="header"
+            :lang="lang"
+            data-test="canExpandFormSettingsPanel"
+          >
             <strong>{{ $t('trans.manageForm.formSettings') }}</strong>
             <span :lang="lang">
               <small>
@@ -160,6 +164,7 @@ export default {
                 color="primary"
                 style="font-size: 14px"
                 :title="$t('trans.generalLayout.edit')"
+                data-test="canAllowEditFormSettings"
                 @click.stop="enableSettingsEdit"
               >
                 <v-icon icon="mdi:mdi-pencil"></v-icon>
@@ -186,13 +191,15 @@ export default {
               :class="isRTL ? 'ml-5' : 'mr-5'"
               color="primary"
               :title="$t('trans.manageForm.update')"
+              data-test="canEditForm"
               @click="updateSettings"
             >
               <span :lang="lang">{{ $t('trans.manageForm.update') }}</span>
             </v-btn>
             <v-btn
               variant="outlined"
               :title="$t('trans.manageForm.cancel')"
+              data-test="canCancelEdit"
               @click="cancelSettingsEdit"
             >
               <span :lang="lang">{{ $t('trans.manageForm.cancel') }}</span>
@@ -242,7 +249,11 @@ export default {
     >
       <v-expansion-panel flat>
         <v-expansion-panel-title>
-          <div class="header" :lang="lang">
+          <div
+            class="header"
+            :lang="lang"
+            data-test="canExpandApiKeySettingsPanel"
+          >
             <strong>{{ $t('trans.manageForm.apiKey') }}</strong>
             <span v-if="apiKey" :lang="lang">
               <small v-if="apiKey.updatedBy">
@@ -274,7 +285,7 @@ export default {
     >
       <v-expansion-panel flat>
         <v-expansion-panel-title>
-          <div class="header" :lang="lang">
+          <div class="header" :lang="lang" data-test="canExpandCDOGSPanel">
             <strong>{{ $t('trans.manageForm.cdogsTemplate') }}</strong>
           </div>
         </v-expansion-panel-title>
@@ -288,7 +299,11 @@ export default {
     <v-expansion-panels v-model="versionsPanel" class="nrmc-expand-collapse">
       <v-expansion-panel flat>
         <v-expansion-panel-title>
-          <div class="header" :lang="lang">
+          <div
+            class="header"
+            :lang="lang"
+            data-test="canExpandFormDesignHistoryPanel"
+          >
             <strong style="flex: 1">{{
               $t('trans.manageForm.formDesignHistory')
             }}</strong>

diff --git a/app/frontend/src/components/forms/manage/ManageFormActions.vue b/app/frontend/src/components/forms/manage/ManageFormActions.vue
@@ -70,6 +70,7 @@ export default {
               size="x-small"
               density="default"
               icon="mdi:mdi-list-box-outline"
+              data-test="canViewFormSubmissions"
               :title="$t('trans.manageFormActions.viewSubmissions')"
             />
           </router-link>
@@ -91,6 +92,7 @@ export default {
               size="x-small"
               density="default"
               icon="mdi:mdi-account-multiple"
+              data-test="canManageTeammembers"
               :title="$t('trans.manageFormActions.teamManagement')"
             />
           </router-link>
@@ -112,6 +114,7 @@ export default {
               size="x-small"
               density="default"
               icon="mdi:mdi-email"
+              data-test="canUpdateEmail"
               :title="$t('trans.manageFormActions.emailManagement')"
             />
           </router-link>
@@ -133,6 +136,7 @@ export default {
             size="x-small"
             density="default"
             icon="mdi:mdi-delete"
+            data-test="canRemoveForm"
             :title="$t('trans.manageFormActions.deleteForm')"
             @click="showDeleteDialog = true"
           />

diff --git a/app/frontend/src/components/forms/manage/TeamManagement.vue b/app/frontend/src/components/forms/manage/TeamManagement.vue
@@ -571,6 +571,7 @@ export default {
           v-model="item.form_designer"
           v-ripple
           :disabled="updating"
+          data-test="FormDesignerRoleCheckbox"
           @update:modelValue="toggleRole(item)"
         ></v-checkbox-btn>
       </template>
@@ -581,6 +582,7 @@ export default {
           v-model="item.owner"
           v-ripple
           :disabled="updating"
+          data-test="OwnerRoleCheckbox"
           @update:modelValue="toggleRole(item)"
         ></v-checkbox-btn>
       </template>
@@ -591,6 +593,7 @@ export default {
           v-model="item.submission_approver"
           v-ripple
           :disabled="updating"
+          data-test="ApproverRoleCheckbox"
           @update:modelValue="toggleRole(item)"
         ></v-checkbox-btn>
       </template>
@@ -601,6 +604,7 @@ export default {
           v-model="item.submission_reviewer"
           v-ripple
           :disabled="updating"
+          data-test="ReviewerRoleCheckbox"
           @update:modelValue="toggleRole(item)"
         ></v-checkbox-btn>
       </template>
@@ -611,6 +615,7 @@ export default {
           v-model="item.form_submitter"
           v-ripple
           :disabled="updating"
+          data-test="SubmitterRoleCheckbox"
           @update:modelValue="toggleRole(item)"
         ></v-checkbox-btn>
       </template>
@@ -621,6 +626,7 @@ export default {
           v-model="item.team_manager"
           v-ripple
           :disabled="updating"
+          data-test="TeamManagerRoleCheckbox"
           @update:modelValue="toggleRole(item)"
         ></v-checkbox-btn>
       </template>

diff --git a/app/frontend/src/components/forms/submission/NotesPanel.vue b/app/frontend/src/components/forms/submission/NotesPanel.vue
@@ -85,6 +85,7 @@ export default {
   >
     <div
       class="d-flex flex-md-row justify-space-between"
+      data-test="showNotesPanel"
       @click="showNotesContent = !showNotesContent"
     >
       <div cols="12" sm="6">
@@ -115,6 +116,7 @@ export default {
               size="x-small"
               v-bind="props"
               :title="$t('trans.notesPanel.addNewNote')"
+              data-test="canAddNewNote"
               @click.stop="showNoteField = true"
               @click="showNotesContent = true"
             >
@@ -135,6 +137,7 @@ export default {
           auto-grow
           density="compact"
           variant="outlined"
+          data-test="canAddNotes"
           solid
           :lang="lang"
         />
@@ -145,6 +148,7 @@ export default {
               color="primary"
               variant="outlined"
               :title="$t('trans.notesPanel.cancel')"
+              data-test="canCancelNote"
               @click="showNoteField = false"
             >
               <span :lang="lang">{{ $t('trans.notesPanel.cancel') }}</span>