-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
VKT(Frontend): Tests for contact request flow
- Loading branch information
Showing
7 changed files
with
257 additions
and
0 deletions.
There are no files selected for viewing
138 changes: 138 additions & 0 deletions
138
frontend/packages/vkt/src/tests/cypress/integration/public_enrollment_contact.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,138 @@ | ||
import { PublicEnrollmentContact } from 'interfaces/publicEnrollment'; | ||
Check failure on line 1 in frontend/packages/vkt/src/tests/cypress/integration/public_enrollment_contact.spec.ts GitHub Actions / frontend / common-frontend (20.9.0)
|
||
import { onPublicEnrollmentContactPage } from 'tests/cypress/support/page-objects/publicEnrollmentContactPage'; | ||
import { | ||
expectNoDialog, | ||
findDialogByText, | ||
} from 'tests/cypress/support/utils/dialog'; | ||
import { publicExaminers } from 'tests/msw/fixtures/publicExaminer'; | ||
import { onPublicGoodAndSatisfactoryLevelPage } from '../support/page-objects/publicGoodAndSatisfactoryLevelPage'; | ||
|
||
interface ContactDetailsField { | ||
label: string; | ||
value: string; | ||
} | ||
|
||
const examinerToContact = publicExaminers.filter(({ id }) => id === 2)[0]; | ||
|
||
const expectedEnrollmentContact: PublicEnrollmentContact = { | ||
firstName: 'Tero', | ||
lastName: 'Testaaja', | ||
message: 'Viestiä pukkaa!', | ||
privacyStatementConfirmation: false, | ||
email: '[email protected]', | ||
emailConfirmation: '[email protected]', | ||
phoneNumber: '0501234567', | ||
}; | ||
|
||
const contactDetailsFields: Array<ContactDetailsField> = [ | ||
{ label: 'Etunimi *', value: expectedEnrollmentContact.firstName }, | ||
{ label: 'Sukunimi *', value: expectedEnrollmentContact.lastName }, | ||
{ label: 'Puhelinnumero *', value: expectedEnrollmentContact.phoneNumber }, | ||
{ label: 'Sähköposti *', value: expectedEnrollmentContact.email }, | ||
{ label: 'Vahvista sähköposti *', value: '[email protected]' }, | ||
]; | ||
|
||
const expectAndCloseErrorDialog = ( | ||
expectedText = 'Tiedoissa on korjattavaa!', | ||
) => { | ||
findDialogByText(expectedText) | ||
.findByRole('button', { | ||
name: 'Takaisin', | ||
}) | ||
.click(); | ||
expectNoDialog(); | ||
}; | ||
|
||
describe('PublicEnrollmentContactPage', () => { | ||
it('should require user to fill contact information and specify their desired exam', () => { | ||
cy.openPublicEnrollmentContactPage(examinerToContact.id); | ||
// Step 1: Fill contact details | ||
onPublicEnrollmentContactPage.expectStepHeading('Yhteystietosi'); | ||
onPublicEnrollmentContactPage.clickNext(); | ||
expectAndCloseErrorDialog(); | ||
|
||
// Assert error dialog is raised if there are missing or incorrect fields | ||
contactDetailsFields.forEach(({ label, value }) => { | ||
cy.findByRole('textbox', { name: label }).type(value); | ||
onPublicEnrollmentContactPage.clickNext(); | ||
expectAndCloseErrorDialog(); | ||
}); | ||
|
||
// Fix confirmation of email and proceed to next step | ||
cy.findByRole('textbox', { name: 'Vahvista sähköposti *' }) | ||
.clear() | ||
.type('[email protected]'); | ||
onPublicEnrollmentContactPage.clickNext(); | ||
|
||
// Step 2: Fill info regarding desired exam | ||
|
||
onPublicEnrollmentContactPage.expectStepHeading( | ||
'Valitse tutkinto ja lähetä viesti', | ||
); | ||
onPublicEnrollmentContactPage.clickSubmit(); | ||
expectAndCloseErrorDialog(); | ||
|
||
onPublicEnrollmentContactPage.selectFullExam(false); | ||
onPublicEnrollmentContactPage.selectPreviousEnrollment(false); | ||
onPublicEnrollmentContactPage.writeMessage('Viestiä pukkaa!'); | ||
|
||
onPublicEnrollmentContactPage.clickSubmit(); | ||
expectAndCloseErrorDialog( | ||
'Kerro, minkä osakokeen / mitkä osakokeet haluat suorittaa', | ||
); | ||
|
||
onPublicEnrollmentContactPage.writePartialExamDescription('kirjoittaminen'); | ||
onPublicEnrollmentContactPage.clickSubmit(); | ||
|
||
onPublicEnrollmentContactPage.expectStepHeading('Viesti lähetetty'); | ||
}); | ||
|
||
describe('after successfully submitting a contact request', () => { | ||
const stateToPersist = { | ||
publicEnrollmentContact: JSON.stringify({ | ||
enrollment: expectedEnrollmentContact, | ||
contactedExaminers: [{ id: examinerToContact.id }], | ||
}), | ||
}; | ||
beforeEach(() => { | ||
cy.openPublicEnrollmentContactPage( | ||
2, | ||
'valmis', | ||
JSON.stringify(stateToPersist), | ||
); | ||
}); | ||
|
||
it('should allow user to contact another examiner with same details after submitting one request', () => { | ||
onPublicEnrollmentContactPage.submitAnotherMessage(); | ||
onPublicGoodAndSatisfactoryLevelPage.assertExaminerAlreadyContacted( | ||
'Anneli Alanen', | ||
); | ||
onPublicGoodAndSatisfactoryLevelPage.contactExaminer('Eero Eskola'); | ||
onPublicEnrollmentContactPage.expectStepHeading('Vahvista yhteystietosi'); | ||
|
||
onPublicEnrollmentContactPage.continueWithExistingDetails(); | ||
contactDetailsFields.forEach(({ label, value }) => { | ||
if (label === 'Vahvista sähköposti *') { | ||
cy.findByRole('textbox', { name: label }).should( | ||
'have.value', | ||
expectedEnrollmentContact.email, | ||
); | ||
} else { | ||
cy.findByRole('textbox', { name: label }).should('have.value', value); | ||
} | ||
}); | ||
}); | ||
|
||
it('should allow user to clear their details', () => { | ||
onPublicEnrollmentContactPage.clearExistingDetails(); | ||
|
||
// Contacting same examiner again should now be possible | ||
onPublicGoodAndSatisfactoryLevelPage.contactExaminer('Anneli Alanen'); | ||
onPublicEnrollmentContactPage.expectStepHeading('Yhteystietosi'); | ||
// Expect all fields to be empty | ||
contactDetailsFields.forEach(({ label }) => { | ||
cy.findByRole('textbox', { name: label }).should('be.empty'); | ||
}); | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
84 changes: 84 additions & 0 deletions
84
frontend/packages/vkt/src/tests/cypress/support/page-objects/publicEnrollmentContactPage.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
class PublicEnrollmentContactPage { | ||
elements = { | ||
nextButton: () => cy.findByRole('button', { name: 'Seuraava' }), | ||
backButton: () => cy.findByRole('button', { name: 'Takaisin' }), | ||
cancelButton: () => cy.findByRole('button', { name: 'Peruuta' }), | ||
submitButton: () => cy.findByRole('button', { name: 'Lähetä' }), | ||
submitAnotherMessageButton: () => | ||
cy.findByRole('button', { name: 'Lähetä toinen viesti' }), | ||
backToHomePageButton: () => | ||
cy.findByRole('button', { name: 'Takaisin etusivulle' }), | ||
continueWithExistingDetailsButton: () => cy.findByRole('button', { name: 'Kyllä, jatka'}), | ||
heading: (heading: string) => cy.findByRole('heading', { name: heading }), | ||
fullOrPartialExamRadioGroup: () => | ||
cy.findByRole('group', { | ||
name: 'Haluatko suorittaa sekä suullisen että kirjallisen taidon tutkinnon? *', | ||
}), | ||
previousEnrollmentRadioGroup: () => | ||
cy.findByRole('group', { | ||
name: 'Oletko osallistunut aiemmin hyvän ja tyydyttävän taidon kielitutkintoon? *', | ||
}), | ||
partialExamDescription: () => | ||
cy.findByRole('textbox', { | ||
name: 'Kerro, minkä osakokeen / mitkä osakokeet haluat suorittaa *', | ||
}), | ||
message: () => cy.findByRole('textbox', { name: 'Viesti *' }), | ||
}; | ||
|
||
clickNext() { | ||
this.elements.nextButton().click(); | ||
} | ||
|
||
clickCancel() { | ||
this.elements.cancelButton().click(); | ||
} | ||
|
||
clickSubmit() { | ||
this.elements.submitButton().click(); | ||
} | ||
|
||
expectStepHeading(heading: string) { | ||
this.elements.heading(heading).should('be.visible'); | ||
} | ||
|
||
private selectRadioButton(radioGroup: Cypress.Chainable, value: boolean) { | ||
const radioButtonSelector = value ? /Kyllä.*/ : /En.*/; | ||
radioGroup.findByRole('radio', { name: radioButtonSelector }).click(); | ||
} | ||
|
||
selectFullExam(isFullExam: boolean) { | ||
this.selectRadioButton( | ||
this.elements.fullOrPartialExamRadioGroup(), | ||
isFullExam, | ||
); | ||
} | ||
|
||
selectPreviousEnrollment(hasPreviousEnrollment: boolean) { | ||
this.selectRadioButton( | ||
this.elements.previousEnrollmentRadioGroup(), | ||
hasPreviousEnrollment, | ||
); | ||
} | ||
|
||
writePartialExamDescription(description: string) { | ||
this.elements.partialExamDescription().type(description); | ||
} | ||
|
||
writeMessage(message: string) { | ||
this.elements.message().type(message); | ||
} | ||
|
||
submitAnotherMessage() { | ||
this.elements.submitAnotherMessageButton().click(); | ||
} | ||
|
||
clearExistingDetails() { | ||
this.elements.backToHomePageButton().click(); | ||
} | ||
|
||
continueWithExistingDetails() { | ||
this.elements.continueWithExistingDetailsButton().click(); | ||
} | ||
} | ||
|
||
export const onPublicEnrollmentContactPage = new PublicEnrollmentContactPage(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 4 additions & 0 deletions
4
frontend/packages/vkt/src/tests/cypress/support/utils/dialog.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
export const findDialogByText = (text: string) => | ||
cy.findByRole('dialog').should('contain', text); | ||
|
||
export const expectNoDialog = () => cy.findByRole('dialog').should('not.exist'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters