Skip to content

Commit

Permalink
src/stores: remove unnecessary variable email from register store (#634)
Browse files Browse the repository at this point in the history 
* remove unnecessary email property from register store

* update used fixture

* fix getter

* src/components/__tests__: add defaultLoginUserEmailStoreValue const

* src/stores: fix logger info message text

* src/components/register: add defaultFormRegisterValue const

---------

Co-authored-by: Šimon Macek <simon.macek@proficio.cz>
Co-authored-by: Tomas Zigo <tomas.zigo@slovanet.sk>
  • Loading branch information
@maceksimon @tmszi
3 people authored Oct 22, 2024
1 parent 3613d12 commit 2169919
Show file tree
Hide file tree
Showing 6 changed files with 77 additions and 69 deletions.
92 changes: 49 additions & 43 deletions src/components/__tests__/EmailVerification.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -35,7 +36,6 @@ const fontSizeText = 14;
const fontWeightText = 400;
const avatarSize = 64;
const iconSize = 40;
const testEmail = 'test@test.cz';

describe('<EmailVerification>', () => {
it('has translation for all strings', () => {
Expand Down Expand Up @@ -69,14 +69,17 @@ describe('<EmailVerification>', () => {
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();
Expand All @@ -100,14 +103,17 @@ describe('<EmailVerification>', () => {
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();
Expand All @@ -116,35 +122,35 @@ describe('<EmailVerification>', () => {

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')
Expand Down
17 changes: 11 additions & 6 deletions src/components/__tests__/FormRegister.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};

Expand Down Expand Up @@ -316,8 +317,9 @@ describe('<FormRegister>', () => {

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(
Expand All @@ -336,7 +338,9 @@ describe('<FormRegister>', () => {
(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(
Expand All @@ -348,8 +352,9 @@ describe('<FormRegister>', () => {

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(
Expand All @@ -371,7 +376,7 @@ describe('<FormRegister>', () => {
// 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);
Expand Down
6 changes: 4 additions & 2 deletions src/components/register/EmailVerification.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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<void> => {
if (!isEmailVerified.value) {
logger?.info(
'Check if email is verified by <checkIsEmailVerified()> function.',
Expand Down
13 changes: 7 additions & 6 deletions src/components/register/FormRegister.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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;
Expand Down
1 change: 1 addition & 0 deletions src/stores/login.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
17 changes: 5 additions & 12 deletions src/stores/register.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
},
Expand Down Expand Up @@ -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}>.`,
Expand Down Expand Up @@ -131,8 +122,10 @@ export const useRegisterStore = defineStore('register', {
*/
async checkEmailVerification(): Promise<void> {
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;
Expand Down Expand Up @@ -160,6 +153,6 @@ export const useRegisterStore = defineStore('register', {
},

persist: {
pick: ['email', 'isEmailVerified'],
pick: ['isEmailVerified'],
},
});

0 comments on commit 2169919

Please sign in to comment.