diff --git a/frontend/cypress/e2e/FormBCSCPage.cy.ts b/frontend/cypress/e2e/FormBCSCPage.cy.ts index b30940fff1..359273fe0e 100644 --- a/frontend/cypress/e2e/FormBCSCPage.cy.ts +++ b/frontend/cypress/e2e/FormBCSCPage.cy.ts @@ -79,6 +79,8 @@ describe("BCSC Form", () => { .should("be.visible") .click(); + cy.focused().should('have.id', 'firstName_1'); + cy .get('#role_1') .should("be.visible") @@ -142,6 +144,8 @@ describe("BCSC Form", () => { .should("be.visible") .click(); + cy.focused().should('have.id', 'firstName_1'); + cy .get('#role_1') .should("be.visible") diff --git a/frontend/cypress/fixtures/contact.json b/frontend/cypress/fixtures/contact.json index e376c48bf8..113fb75536 100644 --- a/frontend/cypress/fixtures/contact.json +++ b/frontend/cypress/fixtures/contact.json @@ -7,5 +7,5 @@ "firstName": "Jhon", "lastName": "Wick", "phoneNumber": "", - "email": "" + "email": "jhon@wick.com" } \ No newline at end of file diff --git a/frontend/src/components/grouping/ContactGroupComponent.vue b/frontend/src/components/grouping/ContactGroupComponent.vue index e46e3a69b7..322c639594 100644 --- a/frontend/src/components/grouping/ContactGroupComponent.vue +++ b/frontend/src/components/grouping/ContactGroupComponent.vue @@ -92,7 +92,11 @@ const nameTypesToCodeDescr = ( }; onMounted(() => { - setFocusedComponent(`address_${props.id}`, 800); + if (props.id === 0) { + setFocusedComponent(`phoneNumber_${props.id}`, 800); + } else { + setFocusedComponent(`firstName_${props.id}`, 800); + } }); const updateContactType = (value: CodeNameType | undefined) => { @@ -104,113 +108,147 @@ const updateContactType = (value: CodeNameType | undefined) => { diff --git a/frontend/src/pages/FormBCeIDPage.vue b/frontend/src/pages/FormBCeIDPage.vue index 26284707de..9e4489c15f 100644 --- a/frontend/src/pages/FormBCeIDPage.vue +++ b/frontend/src/pages/FormBCeIDPage.vue @@ -355,7 +355,7 @@ const scrollToNewContact = () => { // Skip auto-focus so to do it only when scroll is done. const index = contactWizardRef.value.addContact(false) - 1; setScrollPoint(`additional-contact-${index}`, undefined, () => { - setFocusedComponent(`addressname_${index}`); + setFocusedComponent(`firstName_${index}`); }); } }; @@ -442,16 +442,7 @@ const scrollToNewContact = () => { >Add authorized people to the account

- Your first name, last name and email address are from your BCeID. - If they're incorrect, - go to BCeID - to update them before submitting your form. -

Be sure to add your phone number, location and role. + Review your name and email address. They’re from your BCeID.

diff --git a/frontend/src/pages/bceidform/ContactWizardStep.vue b/frontend/src/pages/bceidform/ContactWizardStep.vue index 0d5a997bf5..61dc55e8e5 100644 --- a/frontend/src/pages/bceidform/ContactWizardStep.vue +++ b/frontend/src/pages/bceidform/ContactWizardStep.vue @@ -75,7 +75,7 @@ const addContact = (autoFocus = true) => { ); if (autoFocus) { const focusIndex = newLength - 1; - setFocusedComponent(`addressname_${focusIndex}`); + setFocusedComponent(`firstName_${focusIndex}`); } return newLength; }; @@ -129,7 +129,7 @@ const handleRemove = (index: number) => { }); }; -onMounted(() => setFocusedComponent("addressname_0", 800)); +onMounted(() => setFocusedComponent("phoneNumber_0", 800)); defineExpose({ addContact, @@ -175,7 +175,8 @@ defineExpose({ - To add another contact to the account, select "Add another contact" button below. + You can add contacts to the account. For example, a person you want to give or receive + information on your behalf. ", () => { }); 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