Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add react-hook-form on register #474

Merged
merged 5 commits into from
Nov 22, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
247 changes: 125 additions & 122 deletions cypress/e2e/auth/register.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,152 +7,155 @@ import {
EMAIL_SIGN_UP_FIELD_ID,
NAME_SIGN_UP_FIELD_ID,
REGISTER_BUTTON_ID,
SIGN_UP_SAVE_ACTIONS_ID,
REGISTER_SAVE_ACTIONS_ID,
SUCCESS_CONTENT_ID,
} from '../../../src/config/selectors';
import { AUTH_MEMBERS } from '../../fixtures/members';
import { checkInvitationFields, fillSignUpLayout } from './util';

describe('Register', () => {
describe('Must accept all terms to register', () => {
beforeEach(() => {
cy.visit('/auth/register');
cy.intercept({ method: 'post', pathname: '/register' }, ({ reply }) => {
return reply({
statusCode: StatusCodes.NO_CONTENT,
});
describe('Must accept all terms to register', () => {
beforeEach(() => {
cy.visit('/auth/register');
cy.intercept({ method: 'post', pathname: '/register' }, ({ reply }) => {
return reply({
statusCode: StatusCodes.NO_CONTENT,
});
});
});

it('Cannot register without accepting terms', () => {
cy.get(`#${REGISTER_BUTTON_ID}`).should('be.disabled');
});
it('Cannot register without accepting terms', () => {
cy.get(`#${REGISTER_BUTTON_ID}`).click();
cy.get(`#${REGISTER_BUTTON_ID}`).should('be.disabled');
});

it('Register is available when accepting all terms', () => {
fillSignUpLayout({ name: 'name', email: 'email' });
cy.get(`#${REGISTER_BUTTON_ID}`).should('be.disabled');
it('Register is available when accepting all terms', () => {
fillSignUpLayout({ name: 'name', email: '[email protected]' });
cy.get(`#${REGISTER_BUTTON_ID}`).click();
cy.get(`#${REGISTER_BUTTON_ID}`).should('be.disabled');

cy.agreeWithAllTerms();
cy.get(`#${REGISTER_BUTTON_ID}`).should('not.be.disabled');
});
cy.agreeWithAllTerms();
cy.get(`#${REGISTER_BUTTON_ID}`).should('not.be.disabled');
});
});

describe('Name and Email Validation', () => {
it('Register', () => {
const { GRAASP, WRONG_NAME, INVALID_EMAIL: WRONG_EMAIL } = AUTH_MEMBERS;
cy.visit('/auth/register');
cy.intercept({ method: 'post', pathname: '/register' }, ({ reply }) => {
return reply({
statusCode: StatusCodes.NO_CONTENT,
});
describe('Name and Email Validation', () => {
beforeEach(() => {
cy.visit('/auth/register');
cy.intercept({ method: 'post', pathname: '/register' }, ({ reply }) => {
return reply({
statusCode: StatusCodes.NO_CONTENT,
});
});
});

// Signing up with a wrong name and right email
cy.signUpAndCheck(WRONG_NAME, true);
// Signing up with a wrong email and right name
cy.signUpAndCheck(WRONG_EMAIL, true);
// Signing up with right email and name
cy.signUpAndCheck(GRAASP, true);
it('Wrong name', () => {
// Signing up with a wrong name and right email
cy.signUpAndCheck(AUTH_MEMBERS.WRONG_NAME, true);
});

cy.get(`#${SUCCESS_CONTENT_ID}`).should('be.visible');
});
it('Invalid Email', () => {
// Signing up with a wrong email and right name
cy.signUpAndCheck(AUTH_MEMBERS.INVALID_EMAIL, true);
});

it('Register from invitation with name', () => {
const invitation = {
id: v4(),
name: 'name',
email: 'email',
};
cy.intercept(
API_ROUTES.buildGetInvitationRoute(invitation.id),
({ reply }) => {
reply(invitation);
},
);
const search = new URLSearchParams();
search.set('invitationId', invitation.id);
cy.visit(`/auth/register?${search.toString()}`);
checkInvitationFields(invitation);
});
it('Correct inputs', () => {
// Signing up with right email and name
cy.signUpAndCheck(AUTH_MEMBERS.GRAASP, true);
cy.get(`#${SUCCESS_CONTENT_ID}`).should('be.visible');
});

it('Register from invitation without name', () => {
const invitation = {
id: v4(),
email: 'email',
};
cy.intercept(
API_ROUTES.buildGetInvitationRoute(invitation.id),
invitation,
);
const search = new URLSearchParams();
search.set('invitationId', invitation.id);
cy.visit(`/auth/register?${search.toString()}`);
checkInvitationFields(invitation);
});
it('Username can not contain special characters', () => {
const badUsername = '<<div>%^\'"';

cy.visit('/auth/register');
cy.get(`#${NAME_SIGN_UP_FIELD_ID}`).clear();
cy.get(`#${NAME_SIGN_UP_FIELD_ID}`).type(badUsername);
cy.get(`#${EMAIL_SIGN_UP_FIELD_ID}`).clear();
cy.get(`#${EMAIL_SIGN_UP_FIELD_ID}`).type('[email protected]');
cy.agreeWithAllTerms();
cy.get(`#${REGISTER_BUTTON_ID}`).click();

// The helper text should display the message about special characters
cy.get('[id$=-helper-text]').should(
'have.text',
'User name must not contain quotes, anti-slash, <, >, ^, %',
);
});
});

it('Register with invalid invitation', () => {
const invitation = {
id: v4(),
email: 'email',
};
cy.intercept(API_ROUTES.buildGetInvitationRoute(invitation.id), {
statusCode: 404,
body: { message: '404 Not Found!' },
});
const search = new URLSearchParams();
search.set('invitationId', invitation.id);
cy.visit(`/auth/register?${search.toString()}`);
cy.get(`#${REGISTER_BUTTON_ID}`).should('be.visible');
});
describe('Invitations', () => {
it('Register from invitation with name', () => {
const invitation = {
id: v4(),
name: 'name',
email: 'email',
};
cy.intercept(
API_ROUTES.buildGetInvitationRoute(invitation.id),
({ reply }) => {
reply(invitation);
},
);
const search = new URLSearchParams();
search.set('invitationId', invitation.id);
cy.visit(`/auth/register?${search.toString()}`);
checkInvitationFields(invitation);
});

it('Username can not contain special characters', () => {
const badUsername = '<<div>%^\'"';

cy.visit('/auth/register');
cy.get(`#${NAME_SIGN_UP_FIELD_ID}`).clear();
cy.get(`#${NAME_SIGN_UP_FIELD_ID}`).type(badUsername);
cy.get(`#${EMAIL_SIGN_UP_FIELD_ID}`).clear();
cy.get(`#${EMAIL_SIGN_UP_FIELD_ID}`).type('[email protected]');
cy.agreeWithAllTerms();
cy.get(`#${REGISTER_BUTTON_ID}`).click();

// The helper text should display the message about special characters
cy.get('[id$=-helper-text]').should(
'have.text',
'User name must not contain " ", ", <, >, ^, %, \\',
);
});
it('Register from invitation without name', () => {
const invitation = {
id: v4(),
email: 'email',
};
cy.intercept(API_ROUTES.buildGetInvitationRoute(invitation.id), invitation);
const search = new URLSearchParams();
search.set('invitationId', invitation.id);
cy.visit(`/auth/register?${search.toString()}`);
checkInvitationFields(invitation);
});

describe('Defining analytics on register', () => {
beforeEach(() => {
cy.visit('/auth/register');
cy.intercept({ method: 'post', pathname: '/register' }, ({ reply }) => {
return reply({
statusCode: StatusCodes.NO_CONTENT,
});
}).as('waitOnRegister');
it('Register with invalid invitation', () => {
const invitation = {
id: v4(),
email: 'email',
};
cy.intercept(API_ROUTES.buildGetInvitationRoute(invitation.id), {
statusCode: 404,
body: { message: 'Invitation not found!' },
});
const search = new URLSearchParams();
search.set('invitationId', invitation.id);
cy.visit(`/auth/register?${search.toString()}`);
cy.get(`#${REGISTER_BUTTON_ID}`).should('be.visible');
});
});

it('Analytics should be visible and checked', () => {
cy.get(`#${SIGN_UP_SAVE_ACTIONS_ID}`)
.should('exist')
.should('be.checked');
});
describe('Defining analytics on register', () => {
beforeEach(() => {
cy.visit('/auth/register');
cy.intercept({ method: 'post', pathname: '/register' }, ({ reply }) => {
return reply({
statusCode: StatusCodes.NO_CONTENT,
});
}).as('waitOnRegister');
});

it('Register with analytics enabled', () => {
cy.signUpAndCheck(AUTH_MEMBERS.GRAASP, true);
cy.wait('@waitOnRegister')
.its('request.body.enableSaveActions')
.should('eq', true);
});
it('Analytics should be visible and checked', () => {
cy.get(`#${REGISTER_SAVE_ACTIONS_ID}`).should('exist').should('be.checked');
});

it('Register with analytics disabled', () => {
cy.get(`#${SIGN_UP_SAVE_ACTIONS_ID}`).click().should('not.be.checked');
cy.signUpAndCheck(AUTH_MEMBERS.GRAASP, true);
cy.wait('@waitOnRegister')
.its('request.body.enableSaveActions')
.should('eq', false);
});
it('Register with analytics enabled', () => {
cy.signUpAndCheck(AUTH_MEMBERS.GRAASP, true);
cy.wait('@waitOnRegister')
.its('request.body.enableSaveActions')
.should('eq', true);
});

it('Register with analytics disabled', () => {
cy.get(`#${REGISTER_SAVE_ACTIONS_ID}`).click().should('not.be.checked');
cy.signUpAndCheck(AUTH_MEMBERS.GRAASP, true);
cy.wait('@waitOnRegister')
.its('request.body.enableSaveActions')
.should('eq', false);
});
});
6 changes: 2 additions & 4 deletions cypress/e2e/auth/util.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,7 @@ export const checkInvitationFields = ({
email: string;
}): void => {
if (name) {
cy.get(`#${NAME_SIGN_UP_FIELD_ID}`)
.should('have.value', name)
.should('be.disabled');
cy.get(`#${NAME_SIGN_UP_FIELD_ID}`).should('have.value', name);
}
cy.get(`#${EMAIL_SIGN_UP_FIELD_ID}`)
.should('have.value', email)
Expand All @@ -51,7 +49,7 @@ export const submitSignIn = (): void => {
cy.get(`#${SIGN_IN_BUTTON_ID}`).click();
};

export const submitSignUp = (): void => {
export const submitRegister = (): void => {
cy.get(`#${REGISTER_BUTTON_ID}`).click();
};

Expand Down
8 changes: 4 additions & 4 deletions cypress/support/commands.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ import {
MAGIC_LINK_EMAIL_FIELD_ID,
NAME_SIGN_UP_FIELD_ID,
PASSWORD_SIGN_IN_FIELD_ID,
SIGN_UP_AGREEMENTS_CHECKBOX_ID,
REGISTER_AGREEMENTS_CHECKBOX_ID,
} from '../../src/config/selectors';
import {
fillPasswordSignInLayout,
fillSignInByMailLayout,
fillSignUpLayout,
submitPasswordSignIn,
submitRegister,
submitSignIn,
submitSignUp,
} from '../e2e/auth/util';
import {
CURRENT_MEMBER,
Expand Down Expand Up @@ -177,7 +177,7 @@ Cypress.Commands.add('checkErrorTextField', (id, flag) => {
});

Cypress.Commands.add('agreeWithAllTerms', () => {
cy.get(`[data-cy="${SIGN_UP_AGREEMENTS_CHECKBOX_ID}"] input`)
cy.get(`[data-cy="${REGISTER_AGREEMENTS_CHECKBOX_ID}"] input`)
.check()
.should('be.checked');
});
Expand All @@ -187,7 +187,7 @@ Cypress.Commands.add('signUpAndCheck', (user, acceptAllTerms) => {
if (acceptAllTerms) {
cy.agreeWithAllTerms();
}
submitSignUp();
submitRegister();

cy.checkErrorTextField(NAME_SIGN_UP_FIELD_ID, user.nameValid);
cy.checkErrorTextField(EMAIL_SIGN_UP_FIELD_ID, user.emailValid);
Expand Down
5 changes: 0 additions & 5 deletions public/locales/ar/auth.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,6 @@
"API_UNAVAILABLE_EXPLANATION": "يبدو أن خادم Graasp غير قابل للوصول في الوقت الحالي.",
"API_UNAVAILABLE_INSTRUCTIONS": "الرجاء معاودة المحاولة في وقت لاحق.",
"API_UNAVAILABLE_BUTTON": "أعد المحاولة",
"USER_AGREEMENTS_TERMS_OF_SERVICE": "شروط الخدمة",
"USER_AGREEMENTS_PRIVACY_POLICY": "سياسة الخصوصية",
"USER_AGREEMENTS_CHECKBOX_LABEL": "بالنقر على <0>{{sign_up_btn}}</0>، فإنني أوافق على <1>{{terms_of_service}}</1> و<2>{{privacy_policy}}</2>.",
"TERMS_OF_SERVICE_LINK": "/terms",
"PRIVACY_POLICY_LINK": "/privacy",
"INVITATIONS_LOADING_MESSAGE": "نحن في انتظار دعوتك، يرجى الاستعداد…",
"USERNAME_TOO_SHORT_ERROR": "الرجاء إدخال اسم مستخدم يحتوي على أكثر من {{min}} حرفًا",
"USERNAME_TOO_LONG_ERROR": "الرجاء إدخال اسم مستخدم تحت {{max}} من الأحرف",
Expand Down
8 changes: 2 additions & 6 deletions public/locales/de/auth.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"SIGN_IN_BUTTON": "Einloggen",
"SIGN_IN_PASSWORD_BUTTON": "Einloggen",
"LOGIN_TITLE": "Einloggen",
"SIGN_IN_LINK_TEXT": "Sie haben bereits ein Konto? Klicken Sie hier, um sich anzumelden",
"SIGN_IN_LINK_TEXT": "Sie haben bereits ein Konto? Einloggen",
"SIGN_IN_SUCCESS_EMAIL_PROBLEM": "Wenn Sie keine E-Mail erhalten haben, überprüfen Sie Ihren Spam-Ordner. Wenn Sie eine institutionelle E-Mail (z. B. eine Schule oder ein Unternehmen) verwendet haben, wurde diese möglicherweise blockiert und Sie müssen warten, bis die E-Mail von Ihrem Spam-System freigegeben wird.",
"SIGN_IN_SUCCESS_TEXT": "Bitte überprüfen Sie Ihren Emails <bold>{{email}}</bold>, um Ihren persönlichen Login-Link für den Zugriff auf Graasp abzurufen. Dies kann mehrere Minuten dauern.",
"SIGN_IN_SUCCESS_TITLE": "Willkommen zurück!",
Expand All @@ -31,11 +31,7 @@
"API_UNAVAILABLE_EXPLANATION": "Der Graasp-Server scheint momentan nicht erreichbar.",
"API_UNAVAILABLE_INSTRUCTIONS": "Bitte versuchen Sie es später erneut.",
"API_UNAVAILABLE_BUTTON": "Wiederholen",
"USER_AGREEMENTS_TERMS_OF_SERVICE": "Nutzungsbedingungen",
"USER_AGREEMENTS_PRIVACY_POLICY": "Datenschutzrichtlinie",
"USER_AGREEMENTS_CHECKBOX_LABEL": "Indem ich auf <0>{{sign_up_btn}}</0> klicke, stimme ich den <1>{{terms_of_service}}</1> und der <2>{{privacy_policy}}</2> zu.",
"TERMS_OF_SERVICE_LINK": "/de/terms",
"PRIVACY_POLICY_LINK": "/de/privacy",
"USER_AGREEMENTS_CHECKBOX_LABEL": "Ich stimme den <terms>Nutzungsbedingungen</terms> und der <privacy>Datenschutzrichtlinie</privacy> zu.",
"INVITATIONS_LOADING_MESSAGE": "Wir warten auf Ihre Einladung, bitte warten …",
"USERNAME_TOO_SHORT_ERROR": "Bitte geben Sie einen Benutzernamen mit mehr als {{min}} Zeichen ein",
"USERNAME_TOO_LONG_ERROR": "Bitte geben Sie einen Benutzernamen mit weniger als {{max}} Zeichen ein.",
Expand Down
2 changes: 2 additions & 0 deletions public/locales/en/account.json
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,8 @@
"PROFILE_DELETE_CONFIRMATION_VALUE": "delete",
"USERNAME_EMPTY_ERROR": "The field cannot be empty",
"USERNAME_LENGTH_ERROR": "Username must be between {{min}} and {{max}} characters long",
"USERNAME_MAX_LENGTH_ERROR": "Username must be less than {{max}} characters",
"USERNAME_MIN_LENGTH_ERROR": "Username must be longer than {{min}} characters",
"USERNAME_SPECIAL_CHARACTERS_ERROR": "User name must not contain \" \", \", <, >, ^, %, \\",
"EDIT_BUTTON_LABEL": "Edit",
"CONFIGURE_BUTTON_LABEL": "Configure",
Expand Down
Loading