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