diff --git a/frontend/src/components/grouping/ContactGroupComponent.vue b/frontend/src/components/grouping/ContactGroupComponent.vue
index 16496c19a0..322c639594 100644
--- a/frontend/src/components/grouping/ContactGroupComponent.vue
+++ b/frontend/src/components/grouping/ContactGroupComponent.vue
@@ -129,12 +129,14 @@ const updateContactType = (value: CodeNameType | undefined) => {
Full name
- {{ selectedValue.firstName }} {{ selectedValue.lastName }}
+
+ {{ selectedValue.firstName }} {{ selectedValue.lastName }}
+
Email address
-
{{ selectedValue.email }}
+
{{ selectedValue.email }}
diff --git a/frontend/tests/components/components/grouping/ContactGroupComponent.cy.ts b/frontend/tests/components/components/grouping/ContactGroupComponent.cy.ts
index 9811660ad5..3b577dc81b 100644
--- a/frontend/tests/components/components/grouping/ContactGroupComponent.cy.ts
+++ b/frontend/tests/components/components/grouping/ContactGroupComponent.cy.ts
@@ -40,65 +40,14 @@ describe("", () => {
});
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("", () => {
});
});
+ 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("", () => {
});
});
+ 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("", () => {
});
});
+ 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("", () => {
});
});
+ 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