diff --git a/frontend/jest.config.js b/frontend/jest.config.js index cc261f68c..7563a3499 100644 --- a/frontend/jest.config.js +++ b/frontend/jest.config.js @@ -1,6 +1,6 @@ module.exports = { verbose: true, - collectCoverageFrom: ['**/*.{js,vue}', '!**/node_modules/**', '!**/?(*.)+(spec|test).js?(x)'], + //collectCoverageFrom: ['**/*.{js,vue}', '!**/node_modules/**', '!**/?(*.)+(spec|test).js?(x)'], moduleFileExtensions: [ 'js', //'jsx', @@ -13,12 +13,12 @@ module.exports = { '\\.(css|less)$': 'identity-obj-proxy', }, transform: { - '^.+\\.vue$': '/node_modules/vue-jest', - '^.+\\.(js|jsx)?$': '/node_modules/babel-jest', + '^.+\\.vue$': 'vue-jest', + '^.+\\.(js|jsx)?$': 'babel-jest', + '/node_modules/vee-validate/dist/rules': 'babel-jest', }, setupFiles: ['/test/testSetup.js'], testMatch: ['**/?(*.)+(spec|test).js?(x)'], // snapshotSerializers: ['jest-serializer-vue'], - transformIgnorePatterns: ['/node_modules/'], - preset: '@vue/cli-plugin-unit-jest', + transformIgnorePatterns: ['/node_modules/(?!vee-validate/dist/rules)'], } diff --git a/frontend/package.json b/frontend/package.json index 01e42e3ac..93fc9b7ec 100755 --- a/frontend/package.json +++ b/frontend/package.json @@ -44,6 +44,7 @@ "eslint-plugin-vue": "^7.8.0", "express": "^4.17.1", "flatpickr": "^4.5.7", + "flush-promises": "^1.0.2", "fuse.js": "^3.2.0", "google-maps": "^3.2.1", "identity-obj-proxy": "^3.0.0", @@ -54,6 +55,7 @@ "prettier": "^2.2.1", "qrcode": "^1.4.4", "quill": "^1.3.6", + "regenerator-runtime": "^0.13.7", "sweetalert2": "^9.5.4", "vee-validate": "^3.4.5", "vue": "^2.6.11", diff --git a/frontend/src/views/Pages/Login.spec.js b/frontend/src/views/Pages/Login.spec.js new file mode 100644 index 000000000..651cc22f0 --- /dev/null +++ b/frontend/src/views/Pages/Login.spec.js @@ -0,0 +1,108 @@ +import { mount, RouterLinkStub } from '@vue/test-utils' +import Vuex from 'vuex' +import flushPromises from 'flush-promises' + +import Login from './Login' + +const localVue = global.localVue + +describe('Login', () => { + let wrapper + + let mocks = { + $i18n: { + locale: 'en', + }, + $t: jest.fn((t) => t), + } + + let state = { + loginfail: false, + } + + let store = new Vuex.Store({ + state, + }) + + let stubs = { + RouterLink: RouterLinkStub, + } + + const Wrapper = () => { + return mount(Login, { localVue, mocks, store, stubs }) + } + + describe('mount', () => { + beforeEach(() => { + wrapper = Wrapper() + }) + + it('renders the Login form', () => { + expect(wrapper.find('div.login-form').exists()).toBeTruthy() + }) + + describe('Login header', () => { + it('has a welcome message', () => { + expect(wrapper.find('div.header').text()).toBe('Gradido site.login.community') + }) + }) + + describe('links', () => { + it('has a link "Forgot Password?"', () => { + expect(wrapper.findAllComponents(RouterLinkStub).at(0).text()).toEqual( + 'site.login.forgot_pwd', + ) + }) + + it('links to /password when clicking "Forgot Password?"', () => { + expect(wrapper.findAllComponents(RouterLinkStub).at(0).props().to).toBe('/password') + }) + + it('has a link "Create new account"', () => { + expect(wrapper.findAllComponents(RouterLinkStub).at(1).text()).toEqual( + 'site.login.new_wallet', + ) + }) + + it('links to /register when clicking "Create new account"', () => { + expect(wrapper.findAllComponents(RouterLinkStub).at(1).props().to).toBe('/register') + }) + }) + + describe('Login form', () => { + it('has a login form', () => { + expect(wrapper.find('form').exists()).toBeTruthy() + }) + + it('has an Email input field', () => { + expect(wrapper.find('input[placeholder="Email"]').exists()).toBeTruthy() + }) + + it('has an Password input field', () => { + expect(wrapper.find('input[placeholder="form.password"]').exists()).toBeTruthy() + }) + + it('has a Submit button', () => { + expect(wrapper.find('button[type="submit"]').exists()).toBeTruthy() + }) + + it('shows a warning when no valid Email is entered', async () => { + wrapper.find('input[placeholder="Email"]').setValue('no_valid@Email') + await flushPromises() + await expect(wrapper.find('.invalid-feedback').text()).toEqual( + 'The Email field must be a valid email', + ) + }) + + it('shows a warning when password is too short', async () => { + wrapper.find('input[placeholder="form.password"]').setValue('1234') + await flushPromises() + await expect(wrapper.find('.invalid-feedback').text()).toEqual( + 'The Password field must be at least 6 characters', + ) + }) + }) + + // to do: test submit button + }) +}) diff --git a/frontend/src/views/Pages/Login.vue b/frontend/src/views/Pages/Login.vue index 6fd7e13e7..52e117bbc 100755 --- a/frontend/src/views/Pages/Login.vue +++ b/frontend/src/views/Pages/Login.vue @@ -1,5 +1,5 @@