diff --git a/src/components/__tests__/EmailVerification.cy.js b/src/components/__tests__/EmailVerification.cy.js index ecb59c93f..9cb52cfb4 100644 --- a/src/components/__tests__/EmailVerification.cy.js +++ b/src/components/__tests__/EmailVerification.cy.js @@ -2,6 +2,7 @@ import { colors } from 'quasar'; import { createPinia, setActivePinia } from 'pinia'; import EmailVerification from 'components/register/EmailVerification.vue'; import { i18n } from '../../boot/i18n'; +import { useLoginStore } from '../../stores/login'; import { useRegisterStore } from '../../stores/register'; import { routesConf } from '../../router/routes_conf'; import { rideToWorkByBikeConfig } from '../../boot/global_vars'; @@ -35,7 +36,6 @@ const fontSizeText = 14; const fontWeightText = 400; const avatarSize = 64; const iconSize = 40; -const testEmail = 'test@test.cz'; describe('', () => { it('has translation for all strings', () => { @@ -69,14 +69,17 @@ describe('', () => { cy.intercept('GET', apiEmailVerificationUrl, { statusCode: httpSuccessfullStatus, body: { has_user_verified_email_address: true }, - }) - .as('emailVerificationRequest') - .then(() => { - // mount after intercept - cy.mount(EmailVerification, { - props: {}, - }); + }).as('emailVerificationRequest'); + // mount after intercept + cy.mount(EmailVerification, { + props: {}, + }).then(() => { + // set store var + cy.fixture('loginResponse.json').then((loginResponse) => { + const loginStore = useLoginStore(); + loginStore.setUser(loginResponse.user); }); + }); }); coreTests(); @@ -100,14 +103,17 @@ describe('', () => { cy.intercept('GET', apiEmailVerificationUrl, { statusCode: httpSuccessfullStatus, body: { has_user_verified_email_address: true }, - }) - .as('emailVerificationRequest') - .then(() => { - // mount after intercept - cy.mount(EmailVerification, { - props: {}, - }); + }).as('emailVerificationRequest'); + // mount after intercept + cy.mount(EmailVerification, { + props: {}, + }).then(() => { + // set store var + cy.fixture('loginResponse.json').then((loginResponse) => { + const loginStore = useLoginStore(); + loginStore.setUser(loginResponse.user); }); + }); }); coreTests(); @@ -116,35 +122,35 @@ describe('', () => { function coreTests() { it('renders component', () => { - cy.dataCy(selectorEmailVerification).should('be.visible'); - // title - cy.dataCy(selectorEmailVerificationTitle) - .should('be.visible') - .and('have.css', 'font-size', `${fontSizeTitle}px`) - .and('have.css', 'font-weight', `${fontWeightTitle}`) - .and('have.color', white) - .and('contain', i18n.global.t('register.form.titleEmailVerification')); - // text - const store = useRegisterStore(); - store.setEmail(testEmail); - cy.dataCy(selectorEmailVerificationText) - .should('be.visible') - .and('contain', testEmail); - // check inner html - cy.dataCy(selectorEmailVerificationText) - .should('be.visible') - .and('have.css', 'font-size', `${fontSizeText}px`) - .and('have.css', 'font-weight', `${fontWeightText}`) - .then(($el) => { - const content = $el.text(); - cy.stripHtmlTags( - i18n.global.t('register.form.textEmailVerification', { - email: testEmail, - }), - ).then((text) => { - expect(content).to.equal(text); + cy.fixture('loginResponse.json').then((loginResponse) => { + cy.dataCy(selectorEmailVerification).should('be.visible'); + // title + cy.dataCy(selectorEmailVerificationTitle) + .should('be.visible') + .and('have.css', 'font-size', `${fontSizeTitle}px`) + .and('have.css', 'font-weight', `${fontWeightTitle}`) + .and('have.color', white) + .and('contain', i18n.global.t('register.form.titleEmailVerification')); + // text + cy.dataCy(selectorEmailVerificationText) + .should('be.visible') + .and('contain', loginResponse.user.email); + // check inner html + cy.dataCy(selectorEmailVerificationText) + .should('be.visible') + .and('have.css', 'font-size', `${fontSizeText}px`) + .and('have.css', 'font-weight', `${fontWeightText}`) + .then(($el) => { + const content = $el.text(); + cy.stripHtmlTags( + i18n.global.t('register.form.textEmailVerification', { + email: loginResponse.user.email, + }), + ).then((text) => { + expect(content).to.equal(text); + }); }); - }); + }); // wrong email hint cy.dataCy(selectorEmailVerificationWrongEmailHint) .should('be.visible') diff --git a/src/components/__tests__/FormRegister.cy.js b/src/components/__tests__/FormRegister.cy.js index 14ac39393..8d86e9ecf 100644 --- a/src/components/__tests__/FormRegister.cy.js +++ b/src/components/__tests__/FormRegister.cy.js @@ -58,13 +58,14 @@ const testEmail = 'test@test.com'; const testPassword = '12345a'; const { apiBase, apiDefaultLang, borderRadiusCardSmall, urlApiRegister } = rideToWorkByBikeConfig; +const defaultLoginUserEmailStoreValue = ''; const compareRegisterResponseWithStore = (registerResponse) => { cy.contains(i18n.global.t('register.apiMessageSuccess')).should('be.visible'); const registerStore = useRegisterStore(); - expect(registerStore.getEmail).to.equal(registerResponse.user.email); - expect(registerStore.getIsEmailVerified).to.equal(false); const loginStore = useLoginStore(); + expect(registerStore.getIsEmailVerified).to.equal(false); + expect(loginStore.getUserEmail).to.equal(registerResponse.user.email); expect(loginStore.getUser).to.eql(registerResponse.user); }; @@ -316,8 +317,9 @@ describe('', () => { it('shows an error if the registration fails', () => { const registerStore = useRegisterStore(); + const loginStore = useLoginStore(); // default store state - expect(registerStore.getEmail).to.equal(''); + expect(loginStore.getUserEmail).to.equal(defaultLoginUserEmailStoreValue); expect(registerStore.getIsEmailVerified).to.equal(false); // variables const apiBaseUrl = getApiBaseUrlWithLang( @@ -336,7 +338,9 @@ describe('', () => { (response) => { expect(response).to.deep.equal(null); // state does not change - expect(registerStore.getEmail).to.equal(''); + expect(loginStore.getUserEmail).to.equal( + defaultLoginUserEmailStoreValue, + ); expect(registerStore.getIsEmailVerified).to.equal(false); // error is shown cy.contains( @@ -348,8 +352,9 @@ describe('', () => { it('allows to register with email and password', () => { const registerStore = useRegisterStore(); + const loginStore = useLoginStore(); // default store state - expect(registerStore.getEmail).to.equal(''); + expect(loginStore.getUserEmail).to.equal(defaultLoginUserEmailStoreValue); expect(registerStore.getIsEmailVerified).to.equal(false); // variables const apiBaseUrl = getApiBaseUrlWithLang( @@ -371,7 +376,7 @@ describe('', () => { // test function return value expect(response).to.deep.equal(registerResponse); // store state - expect(registerStore.getEmail).to.equal( + expect(loginStore.getUserEmail).to.equal( registerResponse.user.email, ); expect(registerStore.getIsEmailVerified).to.equal(false); diff --git a/src/components/register/EmailVerification.vue b/src/components/register/EmailVerification.vue index c36db7d48..2898dec1c 100644 --- a/src/components/register/EmailVerification.vue +++ b/src/components/register/EmailVerification.vue @@ -22,6 +22,7 @@ import { routesConf } from '../../router/routes_conf'; // stores import { useRegisterStore } from '../../stores/register'; +import { useLoginStore } from '../../stores/login'; // types import type { Logger } from '../types/Logger'; @@ -30,11 +31,12 @@ export default defineComponent({ name: 'EmailVerification', setup() { const logger = inject('vuejs3-logger') as Logger | null; + const loginStore = useLoginStore(); const registerStore = useRegisterStore(); - const email = computed(() => registerStore.getEmail); + const email = computed(() => loginStore.getUserEmail); const isEmailVerified = computed(() => registerStore.getIsEmailVerified); - const checkIsEmailVerified = async (): void => { + const checkIsEmailVerified = async (): Promise => { if (!isEmailVerified.value) { logger?.info( 'Check if email is verified by function.', diff --git a/src/components/register/FormRegister.vue b/src/components/register/FormRegister.vue index 436e76dbc..37f04d91c 100644 --- a/src/components/register/FormRegister.vue +++ b/src/components/register/FormRegister.vue @@ -49,10 +49,11 @@ export default defineComponent({ }, emits: ['formSubmit'], setup() { + const defaultFormRegisterValue = ''; const formRegister = reactive({ - email: '', - password1: '', - password2: '', + email: defaultFormRegisterValue, + password1: defaultFormRegisterValue, + password2: defaultFormRegisterValue, }); const registerStore = useRegisterStore(); @@ -74,9 +75,9 @@ export default defineComponent({ }; const onReset = (): void => { - formRegister.email = ''; - formRegister.password1 = ''; - formRegister.password2 = ''; + formRegister.email = defaultFormRegisterValue; + formRegister.password1 = defaultFormRegisterValue; + formRegister.password2 = defaultFormRegisterValue; }; const { getPaletteColor, changeAlpha } = colors; diff --git a/src/stores/login.ts b/src/stores/login.ts index 765aeed5c..5db514e8e 100644 --- a/src/stores/login.ts +++ b/src/stores/login.ts @@ -81,6 +81,7 @@ export const useLoginStore = defineStore('login', { getPasswordResetEmail: (state): string => state.passwordResetEmail, getRefreshTokenTimeout: (state): NodeJS.Timeout | null => state.refreshTokenTimeout, + getUserEmail: (state): string => state.user.email, }, actions: { diff --git a/src/stores/register.ts b/src/stores/register.ts index 731803d58..4a41e3e2a 100644 --- a/src/stores/register.ts +++ b/src/stores/register.ts @@ -34,19 +34,14 @@ export const useRegisterStore = defineStore('register', { state: () => ({ // property set in pinia.js boot file $log: null as Logger | null, - email: '', isEmailVerified: false, }), getters: { - getEmail: (state): string => state.email, getIsEmailVerified: (state): boolean => state.isEmailVerified, }, actions: { - setEmail(email: string): void { - this.email = email; - }, setIsEmailVerified(awaiting: boolean): void { this.isEmailVerified = awaiting; }, @@ -85,12 +80,8 @@ export const useRegisterStore = defineStore('register', { }); if (data?.user?.email) { - // set email in store - this.$log?.info('Registration successful. Saving email to store.'); - this.setEmail(data.user.email); - this.$log?.debug(`Register store saved email <${this.getEmail}>.`); // set isEmailVerified in store - this.$log?.info('Setting isEmailVerified flag.'); + this.$log?.info('Setting isEmailVerified state.'); this.setIsEmailVerified(false); this.$log?.debug( `Register store set isEmailVerified to <${this.getIsEmailVerified}>.`, @@ -131,8 +122,10 @@ export const useRegisterStore = defineStore('register', { */ async checkEmailVerification(): Promise { const { apiFetch } = useApi(); - this.$log?.debug(`Checking email verification for <${this.email}>.`); const loginStore = useLoginStore(); + this.$log?.debug( + `Checking email verification for <${loginStore.getUserEmail}>.`, + ); // Append access token into HTTP header const requestTokenHeader_ = { ...requestTokenHeader }; requestTokenHeader_.Authorization += loginStore.getAccessToken; @@ -160,6 +153,6 @@ export const useRegisterStore = defineStore('register', { }, persist: { - pick: ['email', 'isEmailVerified'], + pick: ['isEmailVerified'], }, });