test: fix component test

bcgov · Dec 8, 2023 · cccf31a · cccf31a
1 parent a8ee97b
commit cccf31a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 59 deletions.
diff --git a/frontend/src/components/grouping/ContactGroupComponent.vue b/frontend/src/components/grouping/ContactGroupComponent.vue
@@ -129,12 +129,14 @@ const updateContactType = (value: CodeNameType | undefined) => {
         <br /><br />
 
         <p class="label-01">Full name</p>
-        <p class="body-compact-01">{{ selectedValue.firstName }} {{ selectedValue.lastName }}</p>
+        <p id="fullName_0" class="body-compact-01">
+          {{ selectedValue.firstName }} {{ selectedValue.lastName }}
+        </p>
       </div>
       <hr class="divider" />
       <div>
         <p class="label-01">Email address</p>
-        <p class="body-compact-01">{{ selectedValue.email }}</p>
+        <p id="email_0" class="body-compact-01">{{ selectedValue.email }}</p>
       </div>
     </div>
 

diff --git a/frontend/tests/components/components/grouping/ContactGroupComponent.cy.ts b/frontend/tests/components/components/grouping/ContactGroupComponent.cy.ts
@@ -40,65 +40,14 @@ describe("<ContactGroupComponent />", () => {
     });
 
     cy.get("@contactFixture").then((contact: Contact) => {
-      cy.get("#firstName_0")
-        .should("be.visible")
-        .and("have.value", contact.firstName);
 
-      cy.get("#lastName_0")
-        .should("be.visible")
-        .and("have.value", contact.lastName);
+      cy.contains("Full name").should("be.visible");
+      cy.get("#fullName_0")
+        .contains(`${contact.firstName} ${contact.lastName}`)
+        .should("be.visible");
 
-      cy.get("#email_0").should("be.visible").and("have.value", "");
-
-      cy.get("#phoneNumber_0").should("be.visible").and("have.value", "");
-    });
-  });
-
-  it("should render the component with validation", () => {
-    cy.get("@contactFixture").then((contact: Contact) => {
-      cy.get("@rolesFixture").then((roles) => {
-        cy.get("@addressesFixture").then((addresses) => {
-          cy.mount(ContactGroupComponent, {
-            props: {
-              id: 0,
-              modelValue: {
-                ...contact,
-                firstName: contact.firstName + " fault",
-              },
-              enabled: true,
-              roleList: roles,
-              addressList: addresses,
-              validations: [dummyValidation()],
-            },
-          });
-        });
-      });
-    });
-
-    cy.get("@contactFixture").then((contact: Contact) => {
-      cy.get("#firstName_0")
-        .should("be.visible")
-        .and("have.value", contact.firstName + " fault");
-
-      cy.get("#firstName_0")
-        .shadow()
-        .find(".cds--form-requirement")
-        .should("be.visible")
-        .find("slot")
-        .and("include.text", "Error");
-
-      cy.get("#lastName_0")
-        .should("be.visible")
-        .and("have.value", contact.lastName);
-
-      cy.get("#lastName_0")
-        .shadow()
-        .find(".cds--form-requirement")
-        .should("be.visible")
-        .find("slot")
-        .and("include.text", "Error");
-
-      cy.get("#email_0").should("be.visible").and("have.value", "");
+      cy.contains("Email address").should("be.visible");
+      cy.get("#email_0").contains(contact.email).should("be.visible");
 
       cy.get("#phoneNumber_0").should("be.visible").and("have.value", "");
     });
@@ -125,6 +74,8 @@ describe("<ContactGroupComponent />", () => {
       });
     });
 
+    cy.focused().should('have.id', 'phoneNumber_0');
+
     cy.get("#addressname_0").should("be.visible").and("have.value", "");
 
     cy.get("#addressname_0")
@@ -160,6 +111,8 @@ describe("<ContactGroupComponent />", () => {
       });
     });
 
+    cy.focused().should('have.id', 'phoneNumber_0');
+
     cy.get("#addressname_0").should("be.visible").and("have.value", "");
 
     cy.get("#addressname_0")
@@ -202,6 +155,8 @@ describe("<ContactGroupComponent />", () => {
       });
     });
 
+    cy.focused().should('have.id', 'phoneNumber_0');
+
     cy.get("#addressname_0").should("be.visible").and("have.value", "");
 
     cy.get("#addressname_0")
@@ -263,6 +218,7 @@ describe("<ContactGroupComponent />", () => {
         });
       });
 
+      cy.focused().should('have.id', 'firstName_1');
       cy.get(fieldSelector).shadow().find("input").clear(); // emits false
       cy.get(fieldSelector).blur(); // (doesn't emit)
       cy.get(fieldSelector).shadow().find("input").type(firstContent); // emits true before blurring