22417 refactor smoke tests (#1533)

* Updated E2E tests * Bumped up version number * Removed unused file * Updated cypress config to point at dev instead of local * Removed unneeded test
bcgov · Aug 12, 2024 · 773bc1b · 773bc1b
1 parent 1e8a468
commit 773bc1b
Show file tree

Hide file tree

Showing 47 changed files with 1,999 additions and 720 deletions.
diff --git a/app/components/EditableTextBox.vue b/app/components/EditableTextBox.vue
@@ -11,6 +11,7 @@
         :readonly="readonly"
         :value="modelValue"
         @input="onTextAreaInput"
+        :data-testid="testID"
       />
 
       <span
@@ -29,6 +30,7 @@
           class="h-7"
           @click="onSubmit"
           :mnemonic="submitMnemonic"
+          :data-testid="`${testID}-save`"
         >
           <template #text>
             <slot name="submitText">Save</slot>
@@ -43,6 +45,7 @@
           class="h-7"
           @click="emit('cancel')"
           :mnemonic="cancelMnemonic"
+          :data-testid="`${testID}-cancel`"
         >
           <template #text>
             <slot name="cancelText">Cancel</slot>
@@ -84,6 +87,7 @@ const { modelValue, characterLimit, textRequired } = defineProps<{
   /** Whether to use `PopoverButton`s from HeadlessUI for the submit/cancel buttons,
    *  useful if using text box in a `Popover` and buttons should close `Popover` when clicked. */
   usePopoverButtons?: boolean
+  testID?: string
 }>()
 
 const showSubmitError = ref(false)

diff --git a/app/components/ListSelect.vue b/app/components/ListSelect.vue
@@ -16,6 +16,7 @@
             'pointer-events-none text-gray-400': disabled,
             'border-2 border-red-600': errorStyle,
           }"
+          :data-testid="testID"
         >
           <span class="block"><slot>Select</slot></span>
           <span class="absolute inset-y-0 right-0 flex items-center pr-3">
@@ -102,6 +103,7 @@ const props = defineProps<{
   optionsDisplay?: (option: ModelValueType) => string
   /** Style this input to indicate an error, useful to indicate invalid inputs */
   errorStyle?: boolean
+  testID?: string
 }>()
 
 const emit = defineEmits<{

diff --git a/app/components/NameRequestTypeInfo.vue b/app/components/NameRequestTypeInfo.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col justify-center font-bold">
-    <p>
+    <p data-testid="nrType">
       {{ requestTypeText }}
     </p>
     <p v-if="jurisdiction">

diff --git a/app/components/PopupDialog.vue b/app/components/PopupDialog.vue
@@ -28,6 +28,7 @@
           >
             <DialogPanel
               class="h-full w-full max-w-xl transform space-y-0 overflow-hidden rounded bg-white p-6 text-left align-middle shadow-xl transition-all"
+              data-testid="popupPanel"
             >
               <DialogTitle as="h3" class="text-lg font-bold text-gray-900">
                 <slot name="title"></slot>

diff --git a/app/components/StatusBox.vue b/app/components/StatusBox.vue
@@ -2,16 +2,16 @@
   <div class="rounded border border-gray-300">
     <div class="mb-6 ml-2 mt-2">
       Current status on
-      <span id="date">{{ status.todayStr }}</span>
+      <span id="date" data-testid="displayDate">{{ status.todayStr }}</span>
     </div>
     <div class="my-6 ml-2">
       Not Examined:
-      <span id="notExamined" class="font-bold">
+      <span id="notExamined" class="font-bold" data-testid="notExamined">
         {{ status.notExaminedNum }}
       </span>
     </div>
     <div class="mb-2 ml-2 mt-6">
-      Hold: <span id="hold" class="font-bold">{{ status.holdNum }}</span>
+      Hold: <span id="hold" class="font-bold" data-testid="numHold">{{ status.holdNum }}</span>
     </div>
   </div>
 </template>

diff --git a/app/components/examine/CommentsBox.vue b/app/components/examine/CommentsBox.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="flex flex-col space-y-2 overflow-auto">
+  <div 
+    class="flex flex-col space-y-2 overflow-auto"
+    data-testid="commentsContainer"
+  >
     <div
       class="comments-box-child flex flex-col rounded border border-gray-400 bg-white p-2 text-sm"
       v-for="comment in comments"

diff --git a/app/components/examine/EditActionButtons.vue b/app/components/examine/EditActionButtons.vue
@@ -6,6 +6,7 @@
       mnemonic="s"
       @click="save"
       class="w-1/2 whitespace-pre py-1"
+      data-testid="actionSaveBtn"
     >
       <CheckIcon v-if="!savingEdit" class="h-5 w-5 stroke-2" />
       <ArrowPathIcon v-else class="mr-0.5 h-5 w-5 animate-spin stroke-2" />
@@ -18,6 +19,7 @@
       mnemonic="c"
       @click="examine.cancelEdits"
       class="w-1/2 py-1"
+      data-testid="actionCancelBtn"
     >
       <XMarkIcon class="h-5 w-5 stroke-2" />
       <template #text><u>C</u>ancel</template>

diff --git a/app/components/examine/header/ActionButtons.vue b/app/components/examine/header/ActionButtons.vue
@@ -6,13 +6,19 @@
       light
       @click="examine.edit"
       mnemonic="d"
+      data-testid="actionEditBtn"
     >
       <PencilSquareIcon class="h-5 w-5" />
       <template #text>E<u>d</u>it Request</template>
     </IconButton>
 
     <!-- Toggle Details Button -->
-    <IconButton light @click="toggleDetails" mnemonic="b">
+    <IconButton 
+      light 
+      @click="toggleDetails" 
+      mnemonic="b"
+      :data-testid="examine.isHeaderShown ? 'actionHideDetailsBtn' : 'actionShowDetailsBtn'"
+    >
       <ArrowsPointingInIcon
         v-if="examine.isHeaderShown"
         class="h-5 w-5"

diff --git a/app/components/examine/header/RequestEditInputs.vue b/app/components/examine/header/RequestEditInputs.vue
@@ -6,6 +6,7 @@
       :options-display="(rt: RequestType) => rt.text"
       @change="onRequestTypeChanged"
       aria-label="Name Request Type"
+      testID="editCompanyTypeDropdown"
     >
       {{ selectedRequestType.text }}
     </ListSelect>

diff --git a/app/components/examine/header/index.vue b/app/components/examine/header/index.vue
@@ -9,6 +9,7 @@
           target="_blank"
           rel="noopener noreferrer"
           class="h-fit rounded p-1 text-bcgov-blue5 transition hover:bg-gray-200"
+          data-testid="openTransactionsLink"
         >
           <ArrowTopRightOnSquareIcon class="h-6 w-6" />
         </a>

diff --git a/app/components/examine/names_list/Choice.vue b/app/components/examine/names_list/Choice.vue
@@ -7,17 +7,19 @@
           'font-bold': (current || choiceApproved) && highlight,
           'text-bcgov-blue3': choiceApproved && highlight,
         }"
+       :data-testid="testID && `${testID}-text`"
       >
         {{ choice.name }}
       </span>
 
-      <CheckIcon v-if="choiceApproved" class="h-5 w-5 stroke-2 text-lime-600" />
-      <XMarkIcon
-        v-else-if="choice.state === Status.Rejected"
-        class="h-5 w-5 stroke-2 text-red-600"
-      />
+      <span v-if="choiceApproved" :data-testid="`${testID}-checkmark`">
+        <CheckIcon class="h-5 w-5 stroke-2 text-lime-600" />
+      </span>
+      <span v-else-if="choice.state === Status.Rejected" :data-testid="`${testID}-xmark`">
+        <XMarkIcon class="h-5 w-5 stroke-2 text-red-600" />
+      </span>
       <span v-else-if="indicateDraft" class="italic">(Draft)</span>
-
+      
       <IconButton
         v-if="undoable"
         @click="undo?.(choice)"
@@ -32,6 +34,7 @@
       :class="{
         'text-[#1359A0]': choiceApproved && highlight,
       }"
+      :data-testid="`${testID}-decisiontxt`"
     >
       {{ choice.decision_text }}
     </span>
@@ -56,6 +59,7 @@ const props = defineProps<{
   current?: boolean
   highlight?: boolean
   indicateDraft?: boolean
+  testID?: string
 }>()
 
 const choiceApproved = computed(

diff --git a/app/components/examine/names_list/Editable.vue b/app/components/examine/names_list/Editable.vue
@@ -5,6 +5,7 @@
         v-model="nameInputs[i]"
         @input="clearErrorOnInput(i)"
         :error-style="errorMessage?.choice === i"
+        :data-testid="`editNameChoiceTxt${i + 1}`"
       />
       <span
         v-if="errorMessage && errorMessage.choice === i"

diff --git a/app/components/examine/names_list/index.vue b/app/components/examine/names_list/index.vue
@@ -1,6 +1,6 @@
 <template>
   <ol class="list-decimal">
-    <li v-for="choice in sortedChoices">
+    <li v-for="(choice, i) in sortedChoices">
       <ExamineNamesListChoice
         :choice="choice"
         :decision-text="decisionReasonOrConflictList(choice)"
@@ -9,6 +9,7 @@
         :current="isCurrent(choice.choice)"
         :highlight="highlight"
         :indicate-draft="indicateDraft"
+        :testID="`choice${i + 1}`" 
       />
     </li>
   </ol>

diff --git a/app/components/examine/request_info/AdditionalInfo.vue b/app/components/examine/request_info/AdditionalInfo.vue
@@ -24,7 +24,7 @@
       </template>
 
       <template #maximized>
-        <p>{{ additionalInfoDisplay }}</p>
+        <p data-testid="additionalInfo">{{ additionalInfoDisplay }}</p>
       </template>
 
       <template #editable>
@@ -35,6 +35,7 @@
           :character-limit="characterLimit"
           hide-submit
           hide-cancel
+          testID="editAdditionalInfoTxtBox"
         />
         <p v-if="info.length > characterLimit" class="font-bold text-red-600">
           {{ characterLimitDisplay }}

diff --git a/app/components/examine/request_info/CommentsPopup.vue b/app/components/examine/request_info/CommentsPopup.vue
@@ -5,6 +5,7 @@
         ref="popoverButton"
         :class="open ? '' : 'text-opacity-90'"
         class="group inline-flex w-full items-center space-x-2 rounded border border-gray-300 bg-white px-3 py-1.5 font-bold text-black transition hover:bg-gray-200"
+        data-testid="commentsPopupBtn"
       >
         <ChatBubbleLeftIcon class="h-5 w-5" />
         <span class="grow text-left">
@@ -46,6 +47,7 @@
                   text-required
                   @submit="onSubmit"
                   @cancel="onCancel(close)"
+                  testID="commentEditableTxtBox"
                 >
                   <template #submitText>
                     <span>Sa<u>v</u>e</span>

diff --git a/app/components/examine/request_info/Status.vue b/app/components/examine/request_info/Status.vue
@@ -4,12 +4,12 @@
 
     <div class="flex items-center">
       <h2 class="font-bold">Status:&nbsp;</h2>
-      <p>{{ nrStatus }}</p>
+      <p data-testid="nrStatus">{{ nrStatus }}</p>
     </div>
 
     <div class="flex items-center">
       <h2 class="font-bold">Examiner:&nbsp;</h2>
-      <p>{{ examinerStatus }}</p>
+      <p data-testid="nrExaminer">{{ examinerStatus }}</p>
     </div>
 
     <ExamineRequestInfoCommentsPopup />

diff --git a/app/components/examine/request_info/applicant/Complete.vue b/app/components/examine/request_info/applicant/Complete.vue
@@ -2,42 +2,42 @@
   <div class="flex flex-col gap-y-2">
     <div v-if="examine.clientFirstName || examine.clientLastName">
       <h3 class="font-bold">Client</h3>
-      <p>{{ examine.clientFirstName }} {{ examine.clientLastName }}</p>
+      <p data-testid="clientName">{{ examine.clientFirstName }} {{ examine.clientLastName }}</p>
     </div>
 
     <div v-if="examine.firstName || examine.lastName">
       <h3 class="font-bold">Applicant</h3>
-      <p>{{ examine.firstName }} {{ examine.lastName }}</p>
+      <p data-testid="applicantName">{{ examine.firstName }} {{ examine.lastName }}</p>
     </div>
 
     <div>
       <h3 class="font-bold">Address</h3>
-      <p>{{ examine.addressLine1 }}</p>
-      <p>{{ examine.addressLine2 }}</p>
-      <p>{{ examine.addressLine3 }}</p>
-      <p>{{ examine.city }} {{ examine.province }}</p>
-      <p>{{ examine.postalCode }}</p>
-      <p>{{ examine.country }}</p>
+      <p data-testid="addressLine1">{{ examine.addressLine1 }}</p>
+      <p data-testid="addressLine2">{{ examine.addressLine2 }}</p>
+      <p data-testid="addressLine3">{{ examine.addressLine3 }}</p>
+      <p data-testid="addressCityProvince">{{ examine.city }} {{ examine.province }}</p>
+      <p data-testid="addressPostalCode">{{ examine.postalCode }}</p>
+      <p data-testid="addressCountry">{{ examine.country }}</p>
     </div>
 
     <div v-if="examine.phone">
       <h3 class="font-bold">Phone</h3>
-      <p>{{ examine.phone }}</p>
+      <p data-testid="phone">{{ examine.phone }}</p>
     </div>
 
     <div v-if="examine.fax">
       <h3 class="font-bold">Fax</h3>
-      <p>{{ examine.fax }}</p>
+      <p data-testid="fax">{{ examine.fax }}</p>
     </div>
 
     <div v-if="examine.conEmail">
       <h3 class="font-bold">Email</h3>
-      <p>{{ examine.conEmail }}</p>
+      <p data-testid="email">{{ examine.conEmail }}</p>
     </div>
 
     <div v-if="examine.contactName">
       <h3 class="font-bold">Contact</h3>
-      <p>{{ examine.contactName }}</p>
+      <p data-testid="contact">{{ examine.contactName }}</p>
     </div>
   </div>
 </template>