diff --git a/frontend/src/components/Message/Message.spec.js b/frontend/src/components/Message/Message.spec.js new file mode 100644 index 000000000..7b28d83fd --- /dev/null +++ b/frontend/src/components/Message/Message.spec.js @@ -0,0 +1,63 @@ +import { mount } from '@vue/test-utils' +import Message from './Message' + +const localVue = global.localVue + +const propsData = { + headline: 'site.thx.title', + subtitle: 'site.thx.email', + buttonText: 'login', + linkTo: '/login', +} + +const mocks = { + $t: jest.fn((t) => t), +} + +describe('Message', () => { + let wrapper + + const Wrapper = () => { + return mount(Message, { localVue, mocks, propsData }) + } + + describe('mount', () => { + beforeEach(() => { + wrapper = Wrapper() + }) + + it('renders the component', () => { + expect(wrapper.find('div.header').exists()).toBe(true) + }) + + describe('with button', () => { + it('renders title, subtitle, and button text', () => { + expect(wrapper.find('.test-message-headline').text()).toBe('site.thx.title') + expect(wrapper.find('.test-message-subtitle').text()).toBe('site.thx.email') + expect(wrapper.find('.test-message-button').text()).toBe('login') + }) + + it('button link redirects to /login', () => { + expect(wrapper.find('a.btn').attributes('href')).toBe('/login') + }) + }) + + describe('without button', () => { + beforeEach(() => { + wrapper.setProps({ + buttonText: null, + linkTo: null, + }) + }) + + it('renders title, subtitle, and button text', () => { + expect(wrapper.find('.test-message-headline').text()).toBe('site.thx.title') + expect(wrapper.find('.test-message-subtitle').text()).toBe('site.thx.email') + }) + + it('button is not shown', () => { + expect(wrapper.find('.test-message-button').exists()).toBe(false) + }) + }) + }) +}) diff --git a/frontend/src/components/Message/Message.vue b/frontend/src/components/Message/Message.vue new file mode 100644 index 000000000..96faf5b9f --- /dev/null +++ b/frontend/src/components/Message/Message.vue @@ -0,0 +1,36 @@ + + + diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json index e9ad958cf..0d496bc3f 100644 --- a/frontend/src/locales/de.json +++ b/frontend/src/locales/de.json @@ -33,9 +33,12 @@ "email-already-sent": "Wir haben dir bereits eine E-Mail vor weniger als 10 Minuten geschickt.", "empty-transactionlist": "Es gab einen Fehler mit der Übermittlung der Anzahl deiner Transaktionen.", "error": "Fehler!", - "no-account": "Leider konnten wir keinen Account mit diesen Daten finden.", - "no-transactionlist": "Es gab leider einen Fehler. Es wurden keine Transaktionen vom Server übermittelt", - "session-expired": "Die Sitzung wurde aus Sicherheitsgründen beendet." + "no-account": "Leider konnten wir keinen (aktivierten) Account mit diesen Daten finden.", + "no-transactionlist": "Es gab leider einen Fehler. Es wurden keine Transaktionen vom Server übermittelt.", + "no-user": "Kein Benutzer mit diesen Anmeldedaten.", + "session-expired": "Die Sitzung wurde aus Sicherheitsgründen beendet.", + "unknown-error": "Unbekanter Fehler: ", + "user-already-exists": "Ein Benutzer mit diesen Daten existiert bereits." }, "footer": { "app_version": "App version {version}", @@ -234,7 +237,8 @@ "register": "Du bist jetzt registriert, bitte überprüfe deine Emails und klicke auf den Aktivierungslink.", "reset": "Dein Passwort wurde geändert.", "resetPassword": "Den Code den Du genutzt hast ist zu alt bitte fordere ein neuen über die Passwort Reset Seite an.", - "title": "Danke!" + "title": "Danke!", + "unsetPassword": "Dein Passwort wurde noch nicht gesetzt. Bitte setze es neu." } }, "success": "Erfolg", diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json index 2c53837d0..f5009e04f 100644 --- a/frontend/src/locales/en.json +++ b/frontend/src/locales/en.json @@ -33,9 +33,12 @@ "email-already-sent": "We already sent you an email less than 10 minutes ago.", "empty-transactionlist": "There was an error with the transmission of the number of your transactions.", "error": "Error!", - "no-account": "Unfortunately we could not find an account to the given data!", + "no-account": "Unfortunately we could not find an (activated) account to the given data.", "no-transactionlist": "Unfortunately, there was an error. No transactions have been sent from the server.", - "session-expired": "The session was closed for security reasons." + "no-user": "No user with this credentials.", + "session-expired": "The session was closed for security reasons.", + "unknown-error": "Unknown error: ", + "user-already-exists": "A user with this data already exists." }, "footer": { "app_version": "App version {version}", @@ -226,7 +229,7 @@ "uppercase": "One uppercase letter required." }, "thx": { - "activateEmail": "Your account has not been activated yet, please check your emails and click the activation link or order a new activation link over the password reset page.", + "activateEmail": "Your account has not been activated yet. Please check your emails and click the activation link or order a new activation link over the password reset page.", "checkEmail": "Your email has been successfully verified. You can sign in now.", "email": "We have sent you an email.", "emailActivated": "Thank you your email has been activated.", @@ -234,7 +237,8 @@ "register": "You are registered now, please check your emails and click the activation link.", "reset": "Your password has been changed.", "resetPassword": "The code you used was to old please order a new on over the password reset page.", - "title": "Thank you!" + "title": "Thank you!", + "unsetPassword": "Your password has not been set yet. Please set it again." } }, "success": "Success", diff --git a/frontend/src/pages/ForgotPassword.spec.js b/frontend/src/pages/ForgotPassword.spec.js index dd703d7fc..cb22c77be 100644 --- a/frontend/src/pages/ForgotPassword.spec.js +++ b/frontend/src/pages/ForgotPassword.spec.js @@ -1,8 +1,7 @@ import { mount, RouterLinkStub } from '@vue/test-utils' import flushPromises from 'flush-promises' -import ForgotPassword from './ForgotPassword' - import { toastErrorSpy } from '@test/testSetup' +import ForgotPassword from './ForgotPassword' const mockAPIcall = jest.fn() @@ -48,7 +47,7 @@ describe('ForgotPassword', () => { }) it('renders the component', () => { - expect(wrapper.find('div.forgot-password').exists()).toBeTruthy() + expect(wrapper.find('div.forgot-password').exists()).toBe(true) }) it('has a title', () => { @@ -85,7 +84,7 @@ describe('ForgotPassword', () => { }) it('has a submit button', () => { - expect(form.find('button[type="submit"]').exists()).toBeTruthy() + expect(form.find('button[type="submit"]').exists()).toBe(true) }) describe('invalid Email', () => { @@ -118,19 +117,25 @@ describe('ForgotPassword', () => { await flushPromises() }) - it('toasts a standard error message', () => { - expect(toastErrorSpy).toBeCalledWith('error.email-already-sent') + it('shows error title, subtitle, login button', () => { + expect(wrapper.vm.showPageMessage).toBe(true) + expect(wrapper.find('.test-message-headline').text()).toBe('site.thx.errorTitle') + expect(wrapper.find('.test-message-subtitle').text()).toBe('error.email-already-sent') + expect(wrapper.find('.test-message-button').text()).toBe('login') }) - it('pushes to "/thx/forgotPassword"', () => { - expect(mockAPIcall).toBeCalledWith( - expect.objectContaining({ - variables: { - email: 'user@example.org', - }, - }), - ) - expect(mockRouterPush).toHaveBeenCalledWith('/thx/forgotPassword') + it('button link directs to "/login"', () => { + expect(wrapper.find('.test-message-button').attributes('href')).toBe('/login') + }) + + it.skip('click redirects to "/login"', async () => { + // wrapper.find('.test-message-button').trigger('click') + // await wrapper.vm.$nextTick() + expect(mockRouterPush).toBeCalledWith('/login') + }) + + it('toasts a standard error message', () => { + expect(toastErrorSpy).toBeCalledWith('error.email-already-sent') }) }) @@ -147,15 +152,19 @@ describe('ForgotPassword', () => { await flushPromises() }) - it('pushes to "/thx/forgotPassword"', () => { - expect(mockAPIcall).toBeCalledWith( - expect.objectContaining({ - variables: { - email: 'user@example.org', - }, - }), - ) - expect(mockRouterPush).toHaveBeenCalledWith('/thx/forgotPassword') + it('shows success title, subtitle, login button', () => { + expect(wrapper.vm.showPageMessage).toBe(true) + expect(wrapper.find('.test-message-headline').text()).toBe('site.thx.title') + expect(wrapper.find('.test-message-subtitle').text()).toBe('site.thx.email') + expect(wrapper.find('.test-message-button').text()).toBe('login') + }) + + it('button link redirects to "/login"', () => { + expect(wrapper.find('.test-message-button').attributes('href')).toBe('/login') + }) + + it.skip('click redirects to "/login"', () => { + // expect(mockRouterPush).toBeCalledWith('/login') }) }) }) diff --git a/frontend/src/pages/ForgotPassword.vue b/frontend/src/pages/ForgotPassword.vue index 580a0ed97..182df5bc3 100644 --- a/frontend/src/pages/ForgotPassword.vue +++ b/frontend/src/pages/ForgotPassword.vue @@ -13,7 +13,7 @@ - + @@ -36,24 +36,48 @@ {{ $t('back') }} + + + + diff --git a/frontend/src/pages/Login.spec.js b/frontend/src/pages/Login.spec.js index abe3415c6..80177ab2b 100644 --- a/frontend/src/pages/Login.spec.js +++ b/frontend/src/pages/Login.spec.js @@ -1,8 +1,7 @@ import { RouterLinkStub, mount } from '@vue/test-utils' import flushPromises from 'flush-promises' -import Login from './Login' - import { toastErrorSpy } from '@test/testSetup' +import Login from './Login' const localVue = global.localVue @@ -60,7 +59,7 @@ describe('Login', () => { }) it('renders the Login form', () => { - expect(wrapper.find('div.login-form').exists()).toBeTruthy() + expect(wrapper.find('div.login-form').exists()).toBe(true) }) describe('Login header', () => { @@ -103,19 +102,19 @@ describe('Login', () => { describe('Login form', () => { it('has a login form', () => { - expect(wrapper.find('form').exists()).toBeTruthy() + expect(wrapper.find('form').exists()).toBe(true) }) it('has an Email input field', () => { - expect(wrapper.find('input[placeholder="Email"]').exists()).toBeTruthy() + expect(wrapper.find('input[placeholder="Email"]').exists()).toBe(true) }) it('has an Password input field', () => { - expect(wrapper.find('input[placeholder="form.password"]').exists()).toBeTruthy() + expect(wrapper.find('input[placeholder="form.password"]').exists()).toBe(true) }) it('has a Submit button', () => { - expect(wrapper.find('button[type="submit"]').exists()).toBeTruthy() + expect(wrapper.find('button[type="submit"]').exists()).toBe(true) }) }) @@ -205,61 +204,111 @@ describe('Login', () => { }) describe('login fails', () => { - beforeEach(async () => { + const createError = async (errorMessage) => { + apolloQueryMock.mockRejectedValue({ + message: errorMessage, + }) + wrapper = Wrapper() jest.clearAllMocks() await wrapper.find('input[placeholder="Email"]').setValue('user@example.org') await wrapper.find('input[placeholder="form.password"]').setValue('1234') await flushPromises() - apolloQueryMock.mockRejectedValue({ - message: '..No user with this credentials', - }) await wrapper.find('form').trigger('submit') await flushPromises() - }) - - it('hides the spinner', () => { - expect(spinnerHideMock).toBeCalled() - }) - - it('toasts an error message', () => { - expect(toastErrorSpy).toBeCalledWith('error.no-account') - }) + } describe('login fails with "User email not validated"', () => { beforeEach(async () => { - apolloQueryMock.mockRejectedValue({ - message: 'User email not validated', - }) - wrapper = Wrapper() - jest.clearAllMocks() - await wrapper.find('input[placeholder="Email"]').setValue('user@example.org') - await wrapper.find('input[placeholder="form.password"]').setValue('1234') - await flushPromises() - await wrapper.find('form').trigger('submit') - await flushPromises() + await createError('GraphQL error: User email not validated.') }) - it('redirects to /thx/login', () => { - expect(mockRouterPush).toBeCalledWith('/thx/login') + it('hides the spinner', () => { + expect(spinnerHideMock).toBeCalled() + }) + + it('shows error title, subtitle, login button', () => { + expect(wrapper.vm.showPageMessage).toBe(true) + expect(wrapper.find('.test-message-headline').text()).toBe('site.thx.errorTitle') + expect(wrapper.find('.test-message-subtitle').text()).toBe('site.thx.activateEmail') + expect(wrapper.find('.test-message-button').text()).toBe('settings.password.reset') + }) + + it('button link directs to "/forgot-password"', () => { + expect(wrapper.find('.test-message-button').attributes('href')).toBe('/forgot-password') + }) + + it.skip('click redirects to "/forgot-password"', async () => { + // wrapper.find('.test-message-button').trigger('click') + // await flushPromises() + // await wrapper.vm.$nextTick() + // expect(mockRouterPush).toBeCalledWith('/forgot-password') + }) + + it('toasts the error message', () => { + expect(toastErrorSpy).toBeCalledWith('error.no-account') }) }) describe('login fails with "User has no password set yet"', () => { beforeEach(async () => { - apolloQueryMock.mockRejectedValue({ - message: 'User has no password set yet', - }) - wrapper = Wrapper() - jest.clearAllMocks() - await wrapper.find('input[placeholder="Email"]').setValue('user@example.org') - await wrapper.find('input[placeholder="form.password"]').setValue('1234') - await flushPromises() - await wrapper.find('form').trigger('submit') - await flushPromises() + await createError('GraphQL error: User has no password set yet.') }) - it('redirects to /reset-password/login', () => { - expect(mockRouterPush).toBeCalledWith('/reset-password/login') + it('shows error title, subtitle, login button', () => { + expect(wrapper.vm.showPageMessage).toBe(true) + expect(wrapper.find('.test-message-headline').text()).toBe('site.thx.errorTitle') + expect(wrapper.find('.test-message-subtitle').text()).toBe('site.thx.unsetPassword') + expect(wrapper.find('.test-message-button').text()).toBe('settings.password.reset') + }) + + it('button link directs to "/reset-password/login"', () => { + expect(wrapper.find('.test-message-button').attributes('href')).toBe( + '/reset-password/login', + ) + }) + + it.skip('click redirects to "/reset-password/login"', () => { + // expect(mockRouterPush).toBeCalledWith('/reset-password/login') + }) + + it('toasts the error message', () => { + expect(toastErrorSpy).toBeCalledWith('error.no-account') + }) + }) + + describe('login fails with "No user with this credentials"', () => { + beforeEach(async () => { + await createError('GraphQL error: No user with this credentials.') + }) + + it('shows no error message on the page', () => { + // don't show any error on the page! against boots + expect(wrapper.vm.showPageMessage).toBe(false) + expect(wrapper.find('.test-message-headline').exists()).toBe(false) + expect(wrapper.find('.test-message-subtitle').exists()).toBe(false) + expect(wrapper.find('.test-message-button').exists()).toBe(false) + }) + + it('toasts the error message', () => { + expect(toastErrorSpy).toBeCalledWith('error.no-user') + }) + }) + + describe('login fails with an unknow error', () => { + beforeEach(async () => { + await createError(' – Unknow error') + }) + + it('shows no error message on the page', () => { + // don't show any error on the page! against boots + expect(wrapper.vm.showPageMessage).toBe(false) + expect(wrapper.find('.test-message-headline').exists()).toBe(false) + expect(wrapper.find('.test-message-subtitle').exists()).toBe(false) + expect(wrapper.find('.test-message-button').exists()).toBe(false) + }) + + it('toasts the error message', () => { + expect(toastErrorSpy).toBeCalledWith('error.unknown-error – Unknow error') }) }) }) diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue index f01332202..10fcca649 100755 --- a/frontend/src/pages/Login.vue +++ b/frontend/src/pages/Login.vue @@ -13,7 +13,7 @@ - + @@ -57,11 +57,21 @@ + + + + diff --git a/frontend/src/pages/Register.spec.js b/frontend/src/pages/Register.spec.js index 1e791f7d4..f7a6c0ac8 100644 --- a/frontend/src/pages/Register.spec.js +++ b/frontend/src/pages/Register.spec.js @@ -1,5 +1,6 @@ import { mount, RouterLinkStub } from '@vue/test-utils' import flushPromises from 'flush-promises' +import { toastErrorSpy } from '@test/testSetup' import Register from './Register' const localVue = global.localVue @@ -49,7 +50,7 @@ describe('Register', () => { }) it('renders the Register form', () => { - expect(wrapper.find('div#registerform').exists()).toBeTruthy() + expect(wrapper.find('div#registerform').exists()).toBe(true) }) describe('Register header', () => { @@ -93,22 +94,22 @@ describe('Register', () => { describe('Register form', () => { it('has a register form', () => { - expect(wrapper.find('form').exists()).toBeTruthy() + expect(wrapper.find('form').exists()).toBe(true) }) it('has firstname input fields', () => { - expect(wrapper.find('#registerFirstname').exists()).toBeTruthy() + expect(wrapper.find('#registerFirstname').exists()).toBe(true) }) it('has lastname input fields', () => { - expect(wrapper.find('#registerLastname').exists()).toBeTruthy() + expect(wrapper.find('#registerLastname').exists()).toBe(true) }) it('has email input fields', () => { - expect(wrapper.find('#Email-input-field').exists()).toBeTruthy() + expect(wrapper.find('#Email-input-field').exists()).toBe(true) }) it('has Language selected field', () => { - expect(wrapper.find('.selectedLanguage').exists()).toBeTruthy() + expect(wrapper.find('.selectedLanguage').exists()).toBe(true) }) it('selects Language value en', async () => { @@ -117,7 +118,7 @@ describe('Register', () => { }) it('has 1 checkbox input fields', () => { - expect(wrapper.find('#registerCheckbox').exists()).toBeTruthy() + expect(wrapper.find('#registerCheckbox').exists()).toBe(true) }) it('has PublisherId input fields', () => { @@ -220,42 +221,63 @@ describe('Register', () => { }) describe('server sends back error', () => { - beforeEach(async () => { - registerUserMutationMock.mockRejectedValue({ message: 'Ouch!' }) + const createError = async (errorMessage) => { + registerUserMutationMock.mockRejectedValue({ + message: errorMessage, + }) await wrapper.find('form').trigger('submit') await flushPromises() + } + + describe('server sends back error "User already exists."', () => { + beforeEach(async () => { + await createError('GraphQL error: User already exists.') + }) + + it('shows no error message on the page', () => { + // don't show any error on the page! against boots + expect(wrapper.vm.showPageMessage).toBe(false) + expect(wrapper.find('.test-message-headline').exists()).toBe(false) + expect(wrapper.find('.test-message-subtitle').exists()).toBe(false) + expect(wrapper.find('.test-message-button').exists()).toBe(false) + }) + + it('toasts the error message', () => { + expect(toastErrorSpy).toBeCalledWith('error.user-already-exists') + }) }) - it('shows error message', () => { - expect(wrapper.find('span.alert-text').exists()).toBeTruthy() - expect(wrapper.find('span.alert-text').text().length !== 0).toBeTruthy() - expect(wrapper.find('span.alert-text').text()).toContain('error.error') - expect(wrapper.find('span.alert-text').text()).toContain('Ouch!') - }) + describe('server sends back error "Unknown error"', () => { + beforeEach(async () => { + await createError(' – Unknown error.') + }) - it('button to dismisses error message is present', () => { - expect(wrapper.find('button.close').exists()).toBeTruthy() - }) + it('shows no error message on the page', () => { + // don't show any error on the page! against boots + expect(wrapper.vm.showPageMessage).toBe(false) + expect(wrapper.find('.test-message-headline').exists()).toBe(false) + expect(wrapper.find('.test-message-subtitle').exists()).toBe(false) + expect(wrapper.find('.test-message-button').exists()).toBe(false) + }) - it('dismisses error message', async () => { - await wrapper.find('button.close').trigger('click') - await flushPromises() - expect(wrapper.find('span.alert-text').exists()).not.toBeTruthy() + it('toasts the error message', () => { + expect(toastErrorSpy).toBeCalledWith('error.unknown-error – Unknown error.') + }) }) }) describe('server sends back success', () => { - beforeEach(() => { + beforeEach(async () => { registerUserMutationMock.mockResolvedValue({ data: { create: 'success', }, }) - }) - - it('routes to "/thx/register"', async () => { await wrapper.find('form').trigger('submit') await flushPromises() + }) + + it('submit sends apollo mutate', () => { expect(registerUserMutationMock).toBeCalledWith( expect.objectContaining({ variables: { @@ -267,7 +289,16 @@ describe('Register', () => { }, }), ) - expect(routerPushMock).toHaveBeenCalledWith('/thx/register') + }) + + it('shows success title, subtitle', () => { + expect(wrapper.vm.showPageMessage).toBe(true) + expect(wrapper.find('.test-message-headline').text()).toBe('site.thx.title') + expect(wrapper.find('.test-message-subtitle').text()).toBe('site.thx.register') + }) + + it('button is not present', () => { + expect(wrapper.find('.test-message-button').exists()).toBe(false) }) }) }) diff --git a/frontend/src/pages/Register.vue b/frontend/src/pages/Register.vue index 94441c636..39230cb1e 100755 --- a/frontend/src/pages/Register.vue +++ b/frontend/src/pages/Register.vue @@ -15,7 +15,7 @@ - + @@ -105,19 +105,6 @@ - - - - {{ $t('error.error') }} - {{ messageError }} - - {{ $t('publisher.publisherId') }} {{ $store.state.publisherId }} @@ -177,6 +164,9 @@ + + +