Pages Register.vue Tests

Increase coverage requirement to 11%

.github/workflows/test.yml

@@ -159,7 +159,7 @@ jobs:
         with:
           type: lcov
           result_path: ./coverage/lcov.info
-          min_coverage: 10
+          min_coverage: 11
           token: ${{ github.token }}
   
   #test:

frontend/src/views/Pages/Register.spec.js

@@ -0,0 +1,107 @@
+import { mount, RouterLinkStub } from '@vue/test-utils'
+import Vuex from 'vuex'
+import flushPromises from 'flush-promises'
+
+import Register from './Register'
+
+const localVue = global.localVue
+
+describe('Register', () => {
+  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(Register, { localVue, mocks, store, stubs })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the Register form', () => {
+      expect(wrapper.find('div.register-form').exists()).toBeTruthy()
+    })
+
+    describe('Register header', () => {
+      it('has a welcome message', () => {
+        expect(wrapper.find('div.header').text()).toBe('site.signup.title site.signup.subtitle')
+      })
+    })
+
+    describe('links', () => {
+      it('has a link "Back"', () => {
+        expect(wrapper.findAllComponents(RouterLinkStub).at(0).text()).toEqual('back')
+      })
+
+      it('links to /login when clicking "Back"', () => {
+        expect(wrapper.findAllComponents(RouterLinkStub).at(0).props().to).toBe('/login')
+      })
+    })
+
+    describe('Register form', () => {
+      it('has a register form', () => {
+        expect(wrapper.find('form').exists()).toBeTruthy()
+      })
+
+      it('has 3 text input fields', () => {
+        expect(wrapper.findAll('input[type="text"]').length).toBe(3)
+      })
+
+      it('has 2 password input fields', () => {
+        expect(wrapper.findAll('input[type="password"]').length).toBe(2)
+      })
+
+      it('has 1 checkbox input fields', () => {
+        expect(wrapper.findAll('input[type="checkbox"]').length).toBe(1)
+      })
+
+      it('has no submit button when not completely filled', () => {
+        expect(wrapper.find('button[type="submit"]').exists()).toBe(false)
+      })
+
+      it('shows a warning when no valid Email is entered', async () => {
+        wrapper.findAll('input[type="text"]').at(2).setValue('no_valid@Email')
+        await flushPromises()
+        await expect(wrapper.find('.invalid-feedback').text()).toEqual(
+          'The Email field must be a valid email',
+        )
+      })
+
+      it('shows 4 warnings when no password is set', async () => {
+        const passwords = wrapper.findAll('input[type="password"]')
+        passwords.at(0).setValue('')
+        passwords.at(1).setValue('')
+        await flushPromises()
+        await expect(wrapper.find('div.hints').text()).toContain(
+          'site.signup.lowercase',
+          'site.signup.uppercase',
+          'site.signup.minimum',
+          'site.signup.one_number',
+        )
+      })
+
+      // TODO test different invalid password combinations
+    })
+
+    // TODO test submit button
+  })
+})

frontend/src/views/Pages/Register.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="register-form">
     <!-- Header -->
     <div class="header p-4">
       <b-container class="container">
@@ -46,7 +46,7 @@
                     :label="$t('form.email')"
                     alternative
                     class="mb-3"
-                    name="email"
+                    name="Email"
                     :rules="{ required: true, email: true }"
                     v-model="model.email"
                   ></base-input>
@@ -57,6 +57,7 @@
                       <b-form-input
                         class="mb-0"
                         v-model="password"
+                        name="password"
                         :class="{ valid: passwordValidation.valid }"
                         :type="passwordVisible ? 'text' : 'password'"
                         prepend-icon="ni ni-lock-circle-open"
@@ -77,6 +78,7 @@
                   <base-input
                     :label="$t('form.password_repeat')"
                     type="password"
+                    name="password-repeat"
                     :placeholder="$t('form.password_repeat')"
                     prepend-icon="ni ni-lock-circle-open"
                     v-model.lazy="checkPassword"
@@ -91,7 +93,7 @@
                         </li>
                       </ul>
                     </div>
-                    <div class="matches" v-else-if="notSamePasswords">
+                    <div class="matches" v-else-if="!samePasswords">
                       <p>
                         {{ $t('site.signup.dont_match') }}
                         <i class="ni ni-active-40" color="danger"></i>
@@ -115,7 +117,7 @@
                     class="text-center"
                     v-if="
                       passwordsFilled &&
-                      !notSamePasswords &&
+                      samePasswords &&
                       passwordValidation.valid &&
                       namesFilled &&
                       emailFilled &&
@@ -133,7 +135,7 @@
         </b-col>
       </b-row>
       <div class="text-center py-lg-4">
-        <router-link to="/Login" class="mt-3">{{ $t('back') }}</router-link>
+        <router-link to="/login" class="mt-3">{{ $t('back') }}</router-link>
       </div>
     </b-container>
   </div>
@@ -162,19 +164,10 @@ export default {
     }
   },
   methods: {
-    resetPasswords() {
-      this.password = ''
-      this.checkPassword = ''
-      this.submitted = true
-      setTimeout(() => {
-        this.submitted = false
-      }, 2000)
-    },
     togglePasswordVisibility() {
       this.passwordVisible = !this.passwordVisible
     },
     onSubmit() {
-      // console.log("this.modals =>", this.modals)
       this.$store.dispatch('createUser', {
         email: this.model.email,
         first_name: this.model.firstname,
@@ -190,12 +183,8 @@ export default {
     },
   },
   computed: {
-    notSamePasswords() {
-      if (this.passwordsFilled) {
-        return this.password !== this.checkPassword
-      } else {
-        return false
-      }
+    samePasswords() {
+      return this.password === this.checkPassword
     },
     passwordsFilled() {
       return this.password !== '' && this.checkPassword !== ''