Merge pull request #113 from gradido/test-login-form

feat: Test Login Form

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$': '<rootDir>/node_modules/vue-jest',
-    '^.+\\.(js|jsx)?$': '<rootDir>/node_modules/babel-jest',
+    '^.+\\.vue$': 'vue-jest',
+    '^.+\\.(js|jsx)?$': 'babel-jest',
+    '<rootDir>/node_modules/vee-validate/dist/rules': 'babel-jest',
   },
   setupFiles: ['<rootDir>/test/testSetup.js'],
   testMatch: ['**/?(*.)+(spec|test).js?(x)'],
   // snapshotSerializers: ['jest-serializer-vue'],
-  transformIgnorePatterns: ['<rootDir>/node_modules/'],
-  preset: '@vue/cli-plugin-unit-jest',
+  transformIgnorePatterns: ['<rootDir>/node_modules/(?!vee-validate/dist/rules)'],
 }

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",

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
+  })
+})

frontend/src/views/Pages/Login.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="login-form">
     <!-- Header -->
     <div class="header p-4">
       <b-container>

frontend/test/testSetup.js

@@ -1,8 +1,30 @@
 import { createLocalVue } from '@vue/test-utils'
 import ElementUI from 'element-ui'
-import BootstrapVue from 'bootstrap-vue'
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+import Vuex from 'vuex'
+import { ValidationProvider, ValidationObserver } from 'vee-validate'
+import * as rules from 'vee-validate/dist/rules'
+import { extend } from 'vee-validate'
+import { messages } from 'vee-validate/dist/locale/en.json'
+import BaseInput from '@/components/Inputs/BaseInput.vue'
+import BaseButton from '@/components/BaseButton.vue'
+import RegeneratorRuntime from 'regenerator-runtime'
 
 global.localVue = createLocalVue()
 
+Object.keys(rules).forEach((rule) => {
+  extend(rule, {
+    ...rules[rule], // copies rule configuration
+    message: messages[rule], // assign message
+  })
+})
+
 global.localVue.use(ElementUI)
 global.localVue.use(BootstrapVue)
+global.localVue.use(Vuex)
+global.localVue.use(IconsPlugin)
+global.localVue.use(RegeneratorRuntime)
+global.localVue.component(BaseInput.name, BaseInput)
+global.localVue.component('validation-provider', ValidationProvider)
+global.localVue.component('validation-observer', ValidationObserver)
+global.localVue.component(BaseButton.name, BaseButton)

frontend/yarn.lock

@@ -6404,6 +6404,11 @@ flatted@^2.0.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
   integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
 
+flush-promises@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/flush-promises/-/flush-promises-1.0.2.tgz#4948fd58f15281fed79cbafc86293d5bb09b2ced"
+  integrity sha512-G0sYfLQERwKz4+4iOZYQEZVpOt9zQrlItIxQAAYAWpfby3gbHrx0osCHz5RLl/XoXevXk0xoN4hDFky/VV9TrA==
+
 flush-write-stream@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
@@ -11206,7 +11211,7 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
-regenerator-runtime@^0.13.4:
+regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7:
   version "0.13.7"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
   integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==